g:ui_element issue on UI Page

[AlwinJebakY]

Hi, 

I am working on a UI Page in ServiceNow, and using g:ui_element to render fields from task_time_worked table. 

<g:ui_element name="time_worked_field" id="time_worked_field" table="task_time_worked" field="time_worked" />

Similarly I'm rendering 
Category 
Time Worked 
Comments 

the fields are display correctly in the UI Page, and users are able to select the values. 
How ever when clicking the Save button trying to fetch values using Javascript the values are coming as null.

I also tried 
gel().value
document.querySelector()


Any OOB is there to get the value on Client Side ? 

#uipage #clientscripts #workspace #jellyscripts #html

[Ankur Bawiskar]

@AlwinJebakY 

what's the business requirement?

share complete UI page code and screenshots

[Vikram Reddy]

Hi @AlwinJebakY ,

I have seen this in a couple of custom UI Page implementations. The issue is usually not with the value itself. It is because g:ui_element does not always render the final HTML element with the custom id/name you pass in.

For g:ui_element, the actual generated control id is commonly in this format:

table_name.field_name

So for your field, try reading:

task_time_worked.time_worked

Example:

var timeWorked = gel('task_time_worked.time_worked').value;

or:

var timeWorked = document.getElementById('task_time_worked.time_worked').value;

Do not use querySelector like this:

document.querySelector('#task_time_worked.time_worked')

That will not work correctly because the dot in the id is treated as a CSS class separator. If you want to use querySelector, use this format:

var timeWorked = document.querySelector('[id="task_time_worked.time_worked"]').value;

Also make sure the field is inside a g:ui_form if you are submitting the UI Page:

<g:ui_form onsubmit="return setValuesBeforeSubmit();">

<g:ui_element table="task_time_worked" field="time_worked" id="time_worked_field" />

<input type="hidden" id="u_time_worked" name="u_time_worked" />

<button type="submit">Save</button>

</g:ui_form>

<script>
function setValuesBeforeSubmit() {

var timeWorkedElement = gel('task_time_worked.time_worked');

if (timeWorkedElement) {
gel('u_time_worked').value = timeWorkedElement.value;
}

return true;
}
</script>

Then in the Processing Script you can read the hidden field:

var timeWorked = request.getParameter('u_time_worked');

var gr = new GlideRecord('task_time_worked');
gr.initialize();
gr.time_worked = timeWorked;
// set task, category, comments, etc.
gr.insert();

One more point: g_form is not normally available on a standalone UI Page, so do not use g_form.getValue() here unless you have explicitly built a GlideForm context. For UI Pages, the usual pattern is:

- Render the field using g:ui_element or normal HTML.
- Inspect the generated element id in the browser.
- Read the value using gel() or document.getElementById().
- If submitting to the Processing Script, copy the value into a hidden input before submit.

For reference fields or fields that render both display value and sys_id, make sure you read the hidden value field, not the display text field.

So in your case, first test this in the browser console:

gel('task_time_worked.time_worked')

If that returns the element, then use:

gel('task_time_worked.time_worked').value

That should give you the selected value on the client side.

Thank you,

Vikram Karety,

ServiceNow Architect,

Octigo Solutions INC

[AlwinJebakY]

Thanks for reply @Vikram Reddy 

I'm tried this also (gel('task_time_worked.time_worked').value) it will be shows error cannot read properties of null, But User is already select the value on that field. 

Any other possible way is there ?

[Vikram Reddy]

If gel('task_time_worked.time_worked') is returning null, then the field is being rendered with a different generated id/name. That can happen with g:ui_element, especially for fields like duration/reference/choice fields because the platform renders additional internal controls.

In this case I would not depend on the guessed id. Use one of these approaches.

First, confirm the actual generated element name/id from the page:

var fields = document.querySelectorAll('input, select, textarea');

for (var i = 0; i < fields.length; i++) {
console.log(
'tag=' + fields[i].tagName,
'id=' + fields[i].id,
'name=' + fields[i].name,
'value=' + fields[i].value
);
}

Run this from the UI Page browser console after selecting the value. Then search the console output for time_worked. Use the actual id/name that ServiceNow generated.

You can also use a safer lookup like this:

function getUIPageFieldValue(fieldName) {
var fields = document.querySelectorAll('input, select, textarea');

for (var i = 0; i < fields.length; i++) {
var id = fields[i].id || '';
var name = fields[i].name || '';

if (id.indexOf(fieldName) > -1 || name.indexOf(fieldName) > -1) {
return fields[i].value;
}
}

return '';
}

var timeWorked = getUIPageFieldValue('time_worked');
alert(timeWorked);

This avoids hardcoding task_time_worked.time_worked when the actual rendered control has a different id.

Another cleaner option is to avoid reading g:ui_element directly and copy the value into a hidden input before submit.

Example:

<g:ui_form onsubmit="return beforeSubmit();">

<g:ui_element name="time_worked_field"
id="time_worked_field"
table="task_time_worked"
field="time_worked" />

<input type="hidden" id="u_time_worked" name="u_time_worked" />

<button type="submit">Save</button>

</g:ui_form>

<script>
function beforeSubmit() {

var timeWorked = getUIPageFieldValue('time_worked');

document.getElementById('u_time_worked').value = timeWorked;

return true;
}

function getUIPageFieldValue(fieldName) {
var fields = document.querySelectorAll('input, select, textarea');

for (var i = 0; i < fields.length; i++) {
var id = fields[i].id || '';
var name = fields[i].name || '';

if (id.indexOf(fieldName) > -1 || name.indexOf(fieldName) > -1) {
return fields[i].value;
}
}

return '';
}
</script>

Then in the Processing Script:

var timeWorked = request.getParameter('u_time_worked');

One more thing to check: if this UI Page is opened from Workspace/modal, make sure the JavaScript that reads the field is running inside the UI Page itself. If the script is running from the parent Workspace page or parent UI Action, document.getElementById() will search the parent page, not the UI Page iframe, and it will return null even though the field is visible to the user.

So my recommendation would be:

1. Put the Save button and JavaScript inside the UI Page.
2. Use g:ui_form.
3. Inspect the generated id/name once.
4. Copy the selected value into a hidden input before submit.
5. Read the hidden input in the Processing Script using request.getParameter().

For simple fields like Category, Comments, and Time Worked, I would also consider using normal HTML/select/textarea controls instead of g:ui_element if you do not specifically need the platform-rendered field. It is much easier to read and submit values reliably from a custom UI Page.

Please try this and let me know

Thank you,

Vikram Karety,

ServiceNow Architect,

Octigo Solutions INC