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

[AlwinJebakY]

I tried this way, But still now time_worked filed is showing null or empty, It should not giving any values

[Vikram Reddy]

If the DOM lookup is finding the field but the value is still empty, then the time_worked field is likely not behaving like a normal text/select input in the UI Page. The time_worked field is a duration-style field, and the visible control may not be the actual value submitted to the server.

For this requirement, I would stop using g:ui_element for time_worked and use a normal HTML input instead. I have had better results with this approach in custom UI Pages because you control the exact id/name/value being submitted.

Example:

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

<label for="u_time_worked">Time worked</label>
<input type="text"
id="u_time_worked"
name="u_time_worked"
class="form-control"
placeholder="00:30:00" />

<label for="u_comments">Comments</label>
<textarea id="u_comments"
name="u_comments"
class="form-control"></textarea>

<button type="submit" class="btn btn-primary">Save</button>

</g:ui_form>

<script>
function validateTimeWorked() {
var timeWorked = document.getElementById('u_time_worked').value;

if (!timeWorked) {
alert('Please enter Time worked.');
return false;
}

return true;
}
</script>

Then in the UI Page Processing Script:

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

var gr = new GlideRecord('task_time_worked');
gr.initialize();

// Set the task reference also, otherwise the time worked entry is not linked to any task.
// Replace taskSysId with your actual task sys_id parameter.
gr.task = request.getParameter('sysparm_task_id');

gr.time_worked = timeWorked;
gr.comments = comments;
gr.insert();

The user can enter the value in a format like:

00:30:00
01:15:00
02:00:00

If you want a better user experience, use separate inputs for hours/minutes and build the value before submit:

<input type="number" id="u_hours" name="u_hours" min="0" value="0" />
<input type="number" id="u_minutes" name="u_minutes" min="0" max="59" value="0" />
<input type="hidden" id="u_time_worked" name="u_time_worked" />

<script>
function validateTimeWorked() {
var hours = parseInt(document.getElementById('u_hours').value || '0', 10);
var minutes = parseInt(document.getElementById('u_minutes').value || '0', 10);

if (hours === 0 && minutes === 0) {
alert('Please enter Time worked.');
return false;
}

var hh = ('0' + hours).slice(-2);
var mm = ('0' + minutes).slice(-2);

document.getElementById('u_time_worked').value = hh + ':' + mm + ':00';

return true;
}
</script>

- g:ui_element is okay for displaying platform fields, but it is not always reliable for reading duration/time fields from a custom UI Page.
- For task_time_worked.time_worked, use your own input field and submit it through g:ui_form.
- Read it in the Processing Script using request.getParameter().
- Insert into task_time_worked from the server side.

That is the safer pattern for a custom UI Page.

Attach your XMLs for UI page and script include, I will take a look

Thank you,

Vikram Karety,

ServiceNow Architect,

Octigo Solutions INC