Add additional dynamic field to UI Page
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-07-2019 01:16 AM
Hi All,
We have amended out list of resolution codes and added a new code of 'no suitable resolution code'. On selecting this a new string field appears on the form 'Resolution code required' (u_resolution_code_required). I've added these on the form under our resolution tab and I have a UI policy to only make the new field appear when that resolution code is selected.
On out incident form, to resolve an incident the users select the 'resolve' UI action. This then opens a UI Page as a pop up window. I need to add this new field to the UI page an only make it appear and be mandatory if the resolution code 'no suitable resolution code' is selected. I have not done any scripting until I started using ServiceNow and am self taught, but I don't know how to implement this as the UI Page is in the Jelly format rather than javascript any help is greatly appreciated. Below is the XML and Client script currently being used:
XML:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate jelly = 'true'>
var code = new GlideRecord('u_resolution_codes_lookup');
code.addQuery('active','true');
code.orderBy('u_value');
code.query();
code;
</g:evaluate>
<g:evaluate var="jvar_priority"
expression="RP.getWindowProperties().get('inc_priority')" />
<g:ui_form>
<input type="hidden" id="inc_priority" name="quantity_received" value="${jvar_priority}"/>
</g:ui_form>
<div style="padding-bottom: 10px;">
<span style="float: left;padding-left: 10px;">Resolution codes : </span>
<select id ='resolution_codes'>
<j:while test="${code.next()}">
<option value="${code.getValue('sys_id')}">${code.getValue('u_value')}</option>
</j:while>
</select>
<g:evaluate jelly = 'true'>
</g:evaluate>
</div>
<div style="padding-left: 10px;">
<span>What was the cause of the issue?</span>
<div>
<textarea rows="4" cols="50" id="cause" style="margin-top: 5px;">
</textarea>
</div>
</div>
<div style="padding-left: 10px;">
<span>What action was taken to resolve the issue?</span>
<div>
<textarea rows="4" cols="50" id="resolution_notes" style="margin-top: 5px;">
</textarea>
</div>
</div>
<br> </br>
<j:if test="${jvar_priority != 1}">
<div style="padding-left: 10px;">
<span>Knowledge to be Created</span>
<td style="padding: 21px;"><input id="createknowledge" type="checkbox" style="margin: 4px;" /></td>
</div></j:if>
<br></br>
<div style="padding-left: 10px;">
<input type="button" value="Submit" onClick="return submit()" style="float:left;margin-right: 15px;"/>
<input type="button" value="Cancel" onClick="return cancel()"/>
</div>
</j:jelly>
Client Script:
function submit()
{
var resolutionCodes = gel('resolution_codes').value;
var resolutionNotes = gel('resolution_notes').value;
var causeOfIssue = gel('cause').value;
if( gel('inc_priority').value != 1 ) {
if($j('#createknowledge').is(':checked'))
{
g_form.setValue('incident.knowledge',true);
}
else
g_form.setValue('incident.knowledge',false);
}
if(resolutionCodes != '' && resolutionNotes.trim() != '' && causeOfIssue.trim() != '')
{
g_form.setValue('incident.close_code',resolutionCodes);
g_form.setValue('close_notes',resolutionNotes);
g_form.setValue('u_what_was_the_cause_of_the_issue',causeOfIssue);
gsftSubmit(gel('resolve_incident'));
}
else
{
alert('Please fill the details');
}
}
function cancel()
{
//g_form.setValue('state','6');
g_form.setValue('close_code','');
g_form.setValue('close_notes','');
g_form.setValue('knowledge',false);
GlideDialogWindow.get().destroy();
}
Current UI Page view:
Thanks
Sam
- Labels:
-
Scripting and Coding
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-07-2019 04:19 AM
I've manage to get the new field to display on the UI page, and get it to write back to the field on the form. However I only want the new field to display depending on a value (No suitable resolution code) in the field above it (resolution code), I'm struggling on this part. Updated code and form below:
HTML:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate jelly = 'true'>
var code = new GlideRecord('u_resolution_codes_lookup');
code.addQuery('u_active','true');
code.orderBy('u_value');
code.query();
code;
</g:evaluate>
<g:evaluate var="jvar_priority"
expression="RP.getWindowProperties().get('inc_priority')" />
<g:ui_form>
<input type="hidden" id="inc_priority" name="quantity_received" value="${jvar_priority}"/>
</g:ui_form>
<div style="padding-bottom: 10px;">
<span style="float: left;padding-left: 10px;">Resolution codes : </span>
<select id ='resolution_codes'>
<j:while test="${code.next()}">
<option value="${code.getValue('sys_id')}">${code.getValue('u_value')}</option>
</j:while>
</select>
<g:evaluate jelly = 'true'>
</g:evaluate>
</div>
<div style="padding-left: 10px;">
<span>Resolution code required</span>
<div>
<input size="48" id="resolution_code_required" style="margin-top: 5px;">
</input>
</div>
</div>
<div style="padding-left: 10px;">
<span>What was the cause of the issue?</span>
<div>
<textarea rows="4" cols="50" id="cause" style="margin-top: 5px;">
</textarea>
</div>
</div>
<div style="padding-left: 10px;">
<span>What action was taken to resolve the issue?</span>
<div>
<textarea rows="4" cols="50" id="resolution_notes" style="margin-top: 5px;">
</textarea>
</div>
</div>
<div style="padding-left: 10px;">
<span>Did monitoring identify this issue</span>
<td style="padding: 21px;"><input id="monitoring_identify" type="checkbox" style="margin: 4px;" /></td>
</div>
<br> </br>
<j:if test="${jvar_priority != 1}">
<div style="padding-left: 10px;">
<span>Knowledge to be Created</span>
<td style="padding: 21px;"><input id="createknowledge" type="checkbox" style="margin: 4px;" /></td>
</div></j:if>
<br></br>
<div style="padding-left: 10px;">
<input type="button" value="Submit" onClick="return submit()" style="float:left;margin-right: 15px;"/>
<input type="button" value="Cancel" onClick="return cancel()"/>
</div>
</j:jelly>
Client script:
function submit()
{
var resolutionCodes = gel('resolution_codes').value;
var resolutionNotes = gel('resolution_notes').value;
var codeRequired = gel('resolution_code_required').value;
var causeOfIssue = gel('cause').value;
if( gel('inc_priority').value != 1 ) {
if($j('#createknowledge').is(':checked'))
{
g_form.setValue('incident.knowledge',true);
}
else
g_form.setValue('incident.knowledge',false);
}
if($j('#monitoring_identify').is(':checked')){
g_form.setValue('u_did_monitoring_identify_this_issue',true);
}
else{
g_form.setValue('u_did_monitoring_identify_this_issue',false);
}
if(resolutionCodes != '' && resolutionNotes.trim() != '' && causeOfIssue.trim() != '')
{
g_form.setValue('incident.close_code',resolutionCodes);
g_form.setValue('close_notes',resolutionNotes);
g_form.setValue('u_what_was_the_cause_of_the_issue',causeOfIssue);
g_form.setValue('u_resolution_code_required', codeRequired);
gsftSubmit(gel('resolve_incident'));
}
else
{
alert('Please fill the details');
}
}
function cancel()
{
//g_form.setValue('state','6');
g_form.setValue('close_code','');
g_form.setValue('close_notes','');
g_form.setValue('knowledge',false);
GlideDialogWindow.get().destroy();
}
UI Page:
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-07-2019 06:45 AM
Managed to get this working by adding a function in the client script to amend the display style. I understand this is DOM manipulation and is generally not advised, is there any other way to achieve this within UI Pages?
Thanks
Sam