How to add a little 'copy to clipboard' button to the right of a form field label

1

I have the following Custom DocType form, with 6 Read Only type FormFields.
Each contains a list of <br> separated values.

Screenshot from 2024-02-10 11-47-47
Screenshot from 2024-02-10 11-47-471192×437 32.4 KB

How can I add a little icon to the right of the FormField’s label to copy the value into the clipboard?

2

Hi,

Please try the following client script

frappe.ui.form.on('YourDocType', {
    refresh: function(frm) {
        // Add a custom button next to the FormField's label
        frm.fields_dict['your_fieldname'].$wrapper
            .append('<span class="fa fa-clipboard" title="Copy to Clipboard"></span>')
            .on('click', function() {
                // Get the field value
                var fieldValue = frm.doc.your_fieldname;

                // Copy the value to the clipboard
                navigator.clipboard.writeText(fieldValue)
                    .then(function() {
                        frappe.msgprint('Value copied to clipboard!');
                    })
                    .catch(function(error) {
                        frappe.msgprint('Error copying value: ' + error);
                    });
            });
    }
});

Replace 'YourDocType' with the actual doctype name and 'your_fieldname' with the field name where you want to add the icon. You can also customize the icon class (e.g., use a different FontAwesome icon) and the tooltip text.

Remember to adjust the script according to your specific use case and field names. Once you save the custom script, the icon will appear next to the field label, and clicking it will copy the field value to the clipboard. :clipboard::sparkles:

Thanks,

Divyesh Mangroliya

2 Likes
3

Hi @EugeneP:

Fantastic one! @mangroliya
Just a little improvement!

frappe.ui.form.on('Your  Doctype', {
    refresh: function(frm) {
        // Add a custom button next to the FormField's label
        frm.fields_dict["your_field"].set_label('Your label - <span class="fa fa-clipboard" title="Copy to Clipboard"></span>');
        
        $(cur_frm.fields_dict["your_field"].label_area).on('click', function() {
            // Get the field value
            var fieldValue = frm.doc.your_field;

            // Copy the value to the clipboard
            navigator.clipboard.writeText(fieldValue)
                .then(function() {
                    frappe.msgprint('Value copied to clipboard!');
                })
                .catch(function(error) {
                    frappe.msgprint('Error copying value: ' + error);
                });
        });
    }
});
2 Likes
4

Hi @EugeneP,

If you want to apply for all field then check it.

frappe.ui.form.on('Lead', {
    refresh: function(frm) {
        $.each(frm.fields_dict, function(fieldname, field) {
            var $label = $(field.label_area);
            var currentLabel = $label.html();
            var clipboardIcon = '<span class="fa fa-clipboard" title="Copy to Clipboard"></span>';
            $label.html(currentLabel + ' - ' + clipboardIcon);

            $label.on('click', function() {
                var fieldValue = frm.doc[fieldname];

                navigator.clipboard.writeText(fieldValue)
                    .then(function() {
                        frappe.show_alert({
                            message:__('Copied to clipboard.'),
                            indicator:'green'
                        }, 5);
                    })
                    .catch(function(error) {
                        frappe.show_alert({
                            message:__('Copied to clipboard Failed.'),
                            indicator:'red'
                        }, 5);
                    });
            });
        });
    }
});

But if you want to apply only for the Data field type and read-only field then apply it.

frappe.ui.form.on('Lead', {
    refresh: function(frm) {
        $.each(frm.fields_dict, function(fieldname, field) {
            if (field.df.fieldtype === 'Data' || field.df.read_only === 1) {
                field.set_label(field.df.label + ' - <span class="fa fa-clipboard" title="Copy to Clipboard"></span>');
                
                $(field.label_area).on('click', function() {
                    var fieldValue = frm.doc[fieldname];

                    navigator.clipboard.writeText(fieldValue)
                        .then(function() {
                            frappe.show_alert({
                                message:__('Copied to clipboard.'),
                                indicator:'green'
                            }, 5);
                        })
                        .catch(function(error) {
                            frappe.show_alert({
                                message:__('Copied to clipboard Failed.'),
                                indicator:'red'
                            }, 5);
                        });
                });
            }
        });
    }
});

Thanks for sharing @mangroliya and @avc :smiley: :+1:

1 Like
5

Thanks so much guys !!! You’re all stars :star: :star: :star:

I use aspects of each of the solutions to come up with what works for my given use case.

If you get an error : Uncaught TypeError: Cannot read properties of undefined (reading ‘writeText’)

then that indicates that you are running locally and navigator.clipboard.writeText() only works on a secure site, ie https

1 Like