Getting accesss to the HTML Div element of Doctype to customize the UI of the Doctype

[Mangesh_Bhuskute]

Hello Team,

Need Guidance :

We want to make an UI(user interface) customization for a doctype.
We would like to have a below mentioned UI for a doctype.

We had created a HTML field in the doctype with below mentioned html in it.

<div id="myGridBusinessmodel" style="width: 100%; height:500px;" ></div>

To achieve above UI we are using third party js library as mentioned below.

1. Handsontable

Below is the implementation we did.

frappe.ui.form.on("ExcelLook", "onload", function (frm) {
    console.log("ExcelLook On Load Called")
    var container = $('#myGridBusinessModel');
    console.log("container is "+JSON.stringify(container))
})

Console Output
{"length":0,"prevObject":{"0":{},"selector":"","length":1},"selector":"#myGridBusinessModel"}

As we can see in above console output we are not getting the HTML Div Element object. Instead we are getting some other JS Object.

We need to access the HTML Element object in blue as seen in below Image.

Once we get access to the HTML Element then it’s very easy to create a UI.

Can you guys please guide us how we can get access to HTML element?

[Santosh_Korrapati]

hi - i have a similar requirement. Have you been able to address this.

[Mangesh_Bhuskute]

Note: ERPNext official will not recommended this kind of UI changes.

To create custom UI we have written code in JS file.

$("div[data-fieldname='mygridBusinessModel']")[0];
and follow Handsontable lib instructions.

So instead of Id we take a reference of “data-fieldname” which provided by ERPNext