SuiteScript New NetSuite UI InlineHTML elements not available in Javascript

Question

On the new NetSuite UI, when creating a Project Task from the Project Subtab, the script does not seem to load as expected.

On before load of my script I add an inlineHTML field to the form and insert them html.

for(var key in fieldIds) {
    var html = "<span class='smallgraytextnolink uir-label'>"+
            "<span class='smallgraytextnolink labelSpanEdit'>"+
                "<a class='smallgraytextnolink'>"+originalField.label + "</a>"+
        "</span>"+
        "</span>"+
        "<div id='" + fieldIds[key] + "_div'></div>";

    var theField = form.addField("custpage_"+fieldIds[key]+"_canvasfield", "inlinehtml", "Redacted");
    nlapiSetFieldValue("custpage_"+fieldIds[key]+"_canvasfield", html);
}

On client side, PageInit I use

var field = document.querySelector("#" + id + "_div");

to try and select the div element added into the inlineHTML, but unfortunately this returns null.

This all works in the old NetSuite UI.

Answer 1

If that worked in the past then it was a bug. The way to set the value of an added field in the beforeLoad user event in which it is created is via its defaultvalue:

form.addField({
    id:'custpage_lint_results',
    type:ui.FieldType.INLINEHTML,
    label:'Lint Results',
    container:'custgrp_lint'
}).defaultValue = '<div id="lint_results"></div>';

or in SS1:

var msg = form.addField('custpage_ra_reject', 'inlinehtml');
msg.setLayoutType('outsideabove', 'startrow');
msg.setDefaultValue('<div id="lint_results"></div>');

In the pageInit you may have to fully qualify the document element. I've had some friction with this in the past though not recently:

var field = window.document.querySelector("#" + id + "_div");

Finally you may need to wait. I haven't had any issues with querying an id set in an Inline Html field in the then() of a promise that is called from a pageInit but I have sometimes done the following in a pageInit because of what you are seeing:

function pageInit(){
    var elem = null;
   function doStart(){
      elem = document.querySelector('#elemFromUE');
      if(!elem) setTimeout(doStart, 200);
   }
   doStart();
...
}