Hi,
In this article, I will show you how you can create a custom UI page in ServiceNow and call that in a popup.
For this, first we need to create a UI Page.
System UI -> UI Pages -> New
UI Page Name: ui_page_demo
HTML Script
<?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:ui_form>
<table>
<tr>
<td style="width:25%">
<g:form_label>
Name:
</g:form_label>
</td>
<td style="width:60%">
<input type="text" aria-label="Print your name" name="my_name" id="my_name" maxlength="25"/>
</td>
</tr>
<tr>
<td style="width:25%">
<g:form_label>
Select User:
</g:form_label>
</td>
<td style="width:60%">
<g:ui_reference name="user_ref" id="user_ref" query="user_nameSTARTSWITHa" table="sys_user" />
</td>
</tr>
<tr>
<td style="width:25%">
<g:form_label>
Select Incident:
</g:form_label>
</td>
<td style="width:60%">
<g:ui_choicelist name="my_category" id="my_category" table="incident" mandatory="true" field="category" query="active=true"/>
</td>
</tr>
<tr>
<td>
<g:dialog_buttons_ok_cancel ok_id="submitData" ok="return continueOK()" ok_type="button" ok_text="${gs.getMessage('Okay')}" ok_style_class="btn btn-primary" cancel_type="button" cancel_id="cancelData" cancel_style_class="btn btn-default" cancel="return continueCancel()"/>
</td>
</tr>
</table>
</g:ui_form>
</j:jelly>Client Script
function continueOK() {
alert("OK clicked");
var gdw = GlideDialogWindow.get();
var name =gel('my_name').value;
var user = gel('user_ref').value;
var cat = gel('my_category').value;
var sys_id = gdw.getPreference('sys_id'); //get the values passed in the client script
var selected_value = gdw.getPreference('value'); //get the values passed in the client script
alert(name+"---"+user+"---"+cat+"---"+sys_id+"---"+selected_value);
GlideDialogWindow.get().destroy();
}
function continueCancel() {
alert("Cancel clicked");
GlideDialogWindow.get().destroy();
}
Processing Script
This will be useful if you are calling a UI page directly (instead of popup) and have a html form. Then all the submitted values of the form can be captured in the processing script like below. Do note that the processing scripts contains server side code and you can store the values in the table or do any other server actions from there.
var user = request.getParameter("user_ref"); //mention the name of the elment here
var my_name = request.getParameter("my_name"); //mention the name of the elment here
var category = request.getParameter("my_category"); //mention the name of the elment here
gs.info("Asif: testing "+user+"---"+my_name+"---"+category);
//you can do gliderecord and store or add any other server side code here
Once this is done, save this.
Now you can call this UI action in a popup from any client script. In our example, i am written this onChange client script of 1 field in incident form.
onChange Client Script
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
return;
}
var dialog = new GlideDialogWindow('ui_page_demo'); //Mention your UI Page name here
dialog.setTitle('UI Page Demo'); //Set the dialog title
dialog.setSize(650, 600); //Set the dialog size
dialog.setPreference('sys_id', g_form.getUniqueValue()); //pass current object id
dialog.setPreference('value',newValue);//pass the selected value on the form
dialog.render(); //Open the dialog
}
Output
Let me know if you have any questions in the comments below.
Mark the article as helpful and bookmark if you found it useful.
Regards,
Asif
2020 ServiceNow Community MVP
Asif,
Your example showed selecting a user from a reference field. I would like to know if the same thing is possible for a field type = Table Name.
E.g., see field "Creates" on this form:
https://devxxxxx.service-now.com/nav_to.do?uri=cmdb_ip_service.do?sys_id=db9840e10ab3015500f5e3fe8f78da42
Hello Asifnoor, I have a question, I created a UI action to create a new task, this UI action is in the RITM form:
the idea is that when the user clicks on the UI action, the pop up window shows up, I made some modifications to the UI page which is this one:
how can I get the information from the pop up window copied to the new task created from the ui action? so when the user clicks on Submit, the new task is created with their information added, and if the user clicks on Cancel, nothing happens, and the user remains in the same page.
Thank you
Hi @asifnoor
This is one such useful article. I just came across your article. Can you please help me with my query which is quite similar to this?
I have a requirement in which I need to see a preview or open the record of the selected roles field by clicking the field value.
This is the requested item form (service catalog). So this selected roles field is a multi line text field. Similar to how we have a preview icon for reference field I need to create one to show the preview of the selected fields. If I click one particular role can I open a UI page as a pop up that shows the preview of the particular field. Is this possible? Please help!!
