Field structure modification issue on UI rendering

ERPNext Customize ERPNext
,
1

HI,

I am trying to modify UI designes of fields. While working on it, I facing one issue related to rendering,

Below is how I am changing my template, create a new div element added the field in to it.

On first refreshing the document I receive in same structure, but when I navigate to another document. It copying the same structure on previous form and again adding this div element again, why?

Basically I am saying it following the same structure on the previous form.

onload_post_render: function(frm) {
        debugger
        frm.$wrapper.find('.custom-row').remove();
       
            for (const [field, checkField] of Object.entries(customized_fields)) {
                if (!cur_frm.fields_dict[field].df.hidden)
                    setupCustomRow(frm, checkField, field);
            }
        
        frm.refresh()
    },


function setupCustomRow(frm, checkField, mainField) {
    if (!frm.fields_dict[checkField].$wrapper.parent().hasClass('custom-row')) {
        let row = $('<div class="row custom-row"></div>').appendTo(frm.fields_dict[checkField].$wrapper.parent().parent());
        let checkCol = $('<div class="custom-field" style="display: flex; align-items: center; margin-top: 10px; padding:23px;"></div>').appendTo(row);
        let mainCol = $('<div class="custom-field" style="width: 84%;"></div>').appendTo(row);
    
        frm.fields_dict[checkField].$wrapper.appendTo(checkCol);
        frm.fields_dict[mainField].$wrapper.appendTo(mainCol);
        frm.refresh_field(checkField);
        frm.refresh_field(mainField);
    }
}
2

Code adds a custom layout for fields when the form loads. The issue you faced was because the layout was added multiple times when switching between documents. To fix this, we added a flag (frm.custom_row_initialized) that helps us check if the layout has already been added. This flag prevents the layout from being added again.

please check it.

onload_post_render: function(frm) {
    debugger;
    
    if (!frm.custom_row_initialized) {
        frm.$wrapper.find('.custom-row').remove();

        for (const [field, checkField] of Object.entries(customized_fields)) {
            if (!cur_frm.fields_dict[field].df.hidden) {
                setupCustomRow(frm, checkField, field);
            }
        }
        
        frm.custom_row_initialized = true;
    }
    
    frm.refresh();
},

function setupCustomRow(frm, checkField, mainField) {
    if (!frm.fields_dict[checkField].$wrapper.parent().hasClass('custom-row')) {
        let row = $('<div class="row custom-row"></div>').appendTo(frm.fields_dict[checkField].$wrapper.parent().parent());
        let checkCol = $('<div class="custom-field" style="display: flex; align-items: center; margin-top: 10px; padding:23px;"></div>').appendTo(row);
        let mainCol = $('<div class="custom-field" style="width: 84%;"></div>').appendTo(row);
    
        frm.fields_dict[checkField].$wrapper.appendTo(checkCol);
        frm.fields_dict[mainField].$wrapper.appendTo(mainCol);
        
        frm.refresh_field(checkField);
        frm.refresh_field(mainField);
    }
}
3

Thank you @NCP ,

Because of it following the same structure of previous form. I am having two problems.

  1. first is resolved.

I can solve this problem by simply adding a flag var. Thanks to you.

  1. For some form I want to show the default structure of ERPNext, But it show in the same structure. Like below,

Here the added div element is present in it, so the styles also applied, When I refresh it give the correct UI, But when navigate form to form. My override structure applied.

image