g:ui_reference and g:ui_element on UI Page

Daniel Baeta · ‎06-16-2020

Hello! 🙂

I'm working on an assignment to build an UI Page where the user has a condition builder to filter records and some fields to fill that will be set on the records returning from the condition set.

One of the fields that needs to be present on the UI Page is a reference field.
Here's an example:

To achieve this, on the HTML, I added the following code:

<g:ui_form>

<g:ui_element table="my_table" field="table_name_field" id="-1"></g:ui_element>
<g:ui_element table="my_table" field="condition_builder_field" id="-1"></g:ui_element>

<g:ui_reference name="my_reference_element" id="my_reference_element" table="my_reference_table" query="active=true"/>
</g:ui_form>

Selecting a table (on the g:ui_element for table_name_field, the fields on the condition builder were not loaded and there was the following error on the console:

Uncaught ReferenceError: g_form is not defined
at handleAriaInvalidState (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:14786)
at onChangeLabelProcessByEl (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:12845)
at onChangeLabelProcess (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:12778)
at onChange (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:12744)
at HTMLSelectElement.onchange (ui_page.do?sys_id=21f14a21db9158909610ccd813961951:281)
at Object.trigger (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:1498)
at HTMLSelectElement.<anonymous> (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:1498)
at Function.each (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:1496)
at n.fn.init.each (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:1496)
at n.fn.init.trigger (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:1498)

After some digging, I found the solution for this problem by instantiating a g_form variable on the Client script like:

var g_form = new GlideForm('table', true, true, true, true);

This approach solved the issue with the Condition builder, but it's causing an error on the g:ui_reference when the Lookup icon is pressed, showing on the console:

Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
at Object.getElements (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:14)
at Object.serialize (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:14)
at e.serialize (js_includes_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:9750)
at getRefQualURI (js_includes_last_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:1964)
at reflistOpenUrl (js_includes_last_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:1815)
at reflistOpen (js_includes_last_doctype.jsx?v=06-01-2020_0932&lp=Mon_Apr_06_15_52_00_PDT_2020&c=6_87:1786)
at HTMLAnchorElement.onclick (ui_page.do?sys_id=21f14a21db9158909610ccd813961951:291)

If I remove/comment the line on the Client Script that instantiates the GlideForm, the g:ui_reference works, but the Condition Builder does not.

If I leave the g_form variable, the g:ui_reference does not work.

Any idea on how to solve this? A workaround?

Thanks in advance! 😉

Daniel Baeta · ‎06-16-2020

This was actually only happening the first time the table is selected, so I just forced the selection of a table like this:

$j(function() {
	var tableSelectElem = document.getElementById("my_table.table_name_field");
	tableSelectElem.value = "floor";
	var index = tableSelectElem.options.selectedIndex;
	var tableValue = tableSelectElem.options[index].value;
	document.getElementById("select2-chosen-1").innerHTML = tableName;
	
	loadFilterColumns('my_table.condition_builder_field', 'table_name_field');
});

Solution suggested here: How to add condition builder on UI Page?

View solution in original post

Daniel Baeta · ‎06-16-2020

This was actually only happening the first time the table is selected, so I just forced the selection of a table like this:

$j(function() {
	var tableSelectElem = document.getElementById("my_table.table_name_field");
	tableSelectElem.value = "floor";
	var index = tableSelectElem.options.selectedIndex;
	var tableValue = tableSelectElem.options[index].value;
	document.getElementById("select2-chosen-1").innerHTML = tableName;
	
	loadFilterColumns('my_table.condition_builder_field', 'table_name_field');
});

Solution suggested here: How to add condition builder on UI Page?