How to add a drop down in a UI page, and based on choice selected fields should be changed on UI page.

Singareddy Anil · ‎03-11-2018

How to add a drop down in UI page with the following choices 1. comments 2. work notes

In UI page if comments is selected only comments should be printed and when work notes is selected work notes should be printed.

Code for UI page:

<?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 var = "jvar_id" expression="RP.getWindowProperties().get('id')"/>
<j:set var="jvar_change_id" value="${sysparm_change}" />
<h1>Support Ticket Summary</h1>
<div style="height: 40px;" class="print_hide" align="right">
<button type="submit" onclick="javascript: window.top.print();">
<img src="images/printer.gifx"></img>
<span>Click to Print</span>
</button>
</div>

<g2:evaluate var="jvar_inc" object="true">
var sup = new GlideRecord('u_support_management');
sup.get('${jvar_change_id}');
sup;
</g2:evaluate>

<table border="1" width="100%">

<style>
td{
font-size:16px;
padding-bottom:10px;
padding-top:10px;
}
.td1{
text-align: left;
padding-left:5px;
}
.td2{
width:150px;
font-weight:bold;
}
.td3{
width:600px;
}
tr{
margin-top:10px !important;
}
.td4{
color:blue;
}
</style>

<tr><td class="td1 td2 td4" >Number:</td></tr>
<tr><td class="td1 td3" >$[sup.number]</td></tr>

<tr><td class="td1 td2 td4">Title:</td></tr>
<tr><td class="td1 td3" > $[sup.short_description]</td></tr>

<tr><td class="td1 td2 td4" >State:</td></tr>
<tr><td class="td1 td3">$[sup.state.getDisplayValue()]</td></tr>

<tr><td class="td1 td2 td4" style="text-align:top;">Comments:</td></tr>
<tr><td class="td1 td3" style="white-space:pre-line">$[sup.u_comments.getDisplayValue()] </td></tr>

<tr><td class="td1 td2 td4" style="text-align:top;">Work Notes:</td></tr>
<tr><td class="td1 td3" style="white-space:pre-line">$[sup.work_notes.getDisplayValue()] </td></tr>

</table>
</j:jelly>

Nikhil Dixit · ‎03-11-2018

Hi Anil,

There are many ways to handle this, however here it snapshot of what we do in one of ours.

The summary is:

- We have a dropdown box (line 19) that contains a bunch of values we extract out of ServiceNow. When the user selects a value, the onchange for that select box is called, in this case it calls the function Edit_QM. Edit_QM takes in the value from the select box and does a lookup in ServiceNow based on it, putting the text into a field on the form.

Note: You should know enough about Jelly Scripting to be dangerous.

Regards,

Nikhil Dixit

Nikhil Dixit · ‎03-11-2018

Hi Anil,

I believe the discussion as mention on following link would be helpful for you.

https://share.servicenow.com/app.do#/detailV2/1ff1394b2b34b100bddaff70f8da1563/comments

Thanks,

Nikhil Dixit

Singareddy Anil · ‎03-11-2018

Based on the choice selected on drop down, fields are showing but the problem i found is when i select a choice1, fields related to that choice are displaying. After that if select choice2 then it is fine. But if i choose choice1 again, fields related to that choice are not displaying..

Script for drop-down:

<select onchange="yesnoCheck(this);">
<option value="vartburg">Short Description</option>
<option value="other">Number</option>
<option value="none" selected="selected">None</option>
</select>

Client script :