How to add Clear icon/link to Link type field?

ERPNext Customize ERPNext
,
1

We are observing that most of the users using ERPNext on handheld devices are facing problems when working with field that are of type Link.

What is happening is after having selected a value from list in a field of type Link if they want to remove that value and select another value they have to delete the text and this is taking quite a lot of their time esp. when the text is long.

Currently after an item is selected in a field of type Link we can see a right arrow on the far right side of the control.
image
Which we can click to go to master entry.

A user suggested me to provide a Clear Icon so a user can click on it to clear the text in it.

I want to add a Clear icon
image

is there any way by which we can add this icon to every field of type Link?

2

Hi @yogeshvachhani,

Please apply and check it.

frappe.ui.form.on('Your DocType', {
    refresh: function(frm) {
        $.each(frm.fields_dict, function(fieldname, field) {
            if (field.df.fieldtype === 'Link') {
                if (!field.$clear_icon_appended) {
                    field.$clear_icon_appended = true;
                    field.set_label(field.df.label + ' - <i class="fa fa-remove"></i>');
                    $(field.label_area).on('click', '.fa-remove', function() {
                        frm.set_value(fieldname, '');
                        return false;
                    });
                }
            }
        });
    }
});

Output:

Set your doctype name in the script.

I hope this helps.

Thank You!

3 Likes
3

You can also try

frappe.ui.form.on('DoctypeName', {
    refresh: function(frm) {

        function addClearIconToField(field) {
            if (!field.$clear_icon_appended) {
                field.$clear_icon_appended = true;


                var $clearIcon = $('<span class="clear-icon" style="cursor: pointer; position: absolute; right: 35px; top: 50%; transform: translateY(-50%); font-size: 15px; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background-color: #8e9093; color: #1C2126;">&#x2716;</span>');
                field.$input.parent().css('position', 'relative'); 
                field.$input.css('position', 'relative'); 
                field.$input.after($clearIcon);


                $clearIcon.on('click', function() {
                    frm.set_value(field.df.fieldname, '');
                });
            }
        }


        $.each(frm.fields_dict, function(fieldname, field) {
            if (field.df.fieldtype === 'Link') {
                addClearIconToField(field);
            }
        });
    }
});

SS

image

2 Likes
4

I have around 78 docTypes and it seems that I need to add suggested code in all.

Instead is there any way to make it global across all DocTypes?

I mean it should be added as a default feature.

1 Like