Create a UI Macro button on incident form

Joshuu
Kilo Sage

Hi All,

 

I have a below requirement.

 

We need to add a button beside caller and configuration item fields on incident form.

And when we click on this button it should display the location table information for caller and CI.

 

For example, for caller field it should display the user's location name, country, city and other details from location table.

 

Similarly, for the configuration field it should display the CI's location name, country, city and etc.,

 

How can I configure this ?

Could you please help me on this.

 

Thanks & Regards,

Priyanka.

1 ACCEPTED SOLUTION

@Joshuu Yea we can add it to the popup.

 

Please follow below steps

1. Delete "location_info" ui macro

2. Delete ui formatter

3. Create a new UI page

Name: location_info_ui_page

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:evaluate var="jvar_loc_info_present" jelly="true">
var loc_info_present = RP.getParameterValue('sysparm_loc_info_present');
loc_info_present;
</g:evaluate>
<g:evaluate var="jvar_loc_name" jelly="true">
var loc_name = RP.getParameterValue('sysparm_loc_name');
loc_name;
</g:evaluate>
<g:evaluate var="jvar_country" jelly="true">
var country = RP.getParameterValue('sysparm_country');
country;
</g:evaluate>
<g:evaluate var="jvar_city" jelly="true">
var city = RP.getParameterValue('sysparm_city');
city;
</g:evaluate>

<j:if test="${jvar_loc_info_present == 'true'}">
<div>
<b>Location name:</b> <p id="loc_name">${jvar_loc_name}</p>
<b>Country:</b> <p id="country">${jvar_country}</p>
<b>City:</b> <p id="city">${jvar_city}</p>
</div>
</j:if>

<j:if test="${jvar_loc_info_present == 'false'}">
<div>
Location information for the caller selected in not found.
</div>
</j:if>
</j:jelly>

 

4. Update the script of "location_button" ui macro as below

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<button type="button" onclick="showLocInfo()">Show location info</button>

<script type="text/javascript">
function showLocInfo(){
var ga = new GlideAjax('LocationUtil');
ga.addParam('sysparm_name', 'getLocationInfo');
ga.addParam('sysparm_caller_id', g_form.getValue("caller_id"));
ga.getXML(showResponse);
}

function showResponse(resp){
var answer = resp.responseXML.documentElement.getAttribute("answer");

var gm = new GlideModal("location_info_ui_page");
gm.setTitle("Caller's location information");
gm.setWidth(400);
if(answer){
answer = JSON.parse(answer);

gm.setPreference('sysparm_loc_name', answer.loc_name);
gm.setPreference('sysparm_country', answer.country);
gm.setPreference('sysparm_city', answer.city);
gm.setPreference('sysparm_loc_info_present', 'true');
}else{
gm.setPreference('sysparm_loc_info_present', 'false');
}

gm.render();
}

</script>
</j:jelly>

 

Result:

When location info present:

jaheerhattiwale_0-1671764153160.png

 

When location info not present

jaheerhattiwale_1-1671764213247.png

 

 

Please mark all the answers on this questions as correct answers

 

 

Please mark the answer as correct or helpful based on impact
ServiceNow Community Rising Star, Class of 2023

View solution in original post

21 REPLIES 21

jaheerhattiwale
Mega Sage
Mega Sage

@Joshuu You can try below code in ui macro

 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<button onclick="getLocation()">Show location details</button>
<p id="loc_name" style="display:none"></p>
<p id="country" style="display:none"></p>
<p id="city" style="display:none"></p>

<script>
function getLocation(){
var ga = new GlideAjax('HelloWorld');
ga.addParam('sysparm_name', 'helloWorld');
ga.addParam('sysparm_caller_id', g_form.getValue("caller_id"));
ga.getXML(HelloWorldParse);

function HelloWorldParse(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
if(answer){
document.getElementById("loc_name").innerText = answer.loc_name;
document.getElementById("loc_name").style.display = "block";

document.getElementById("country").innerText = answer.country;
document.getElementById("country").style.display = "block";

document.getElementById("city").innerText = answer.city;
document.getElementById("city").style.display = "block";
}
}
</script>
</j:jelly>

 

Note: create a script include and if info present then return object from there else return null

 

Please mark as correct answer if this solves your issue.

Please mark the answer as correct or helpful based on impact
ServiceNow Community Rising Star, Class of 2023

Hi @jaheerhattiwale,

 

Could you please help me with script include as well.

@Joshuu Create a client callable script include as below

jaheerhattiwale_0-1671706379618.png

 

Script:

 

var HelloWorld = Class.create();
HelloWorld.prototype = Object.extendsObject(AbstractAjaxProcessor, {

helloWorld: function(){
var caller = this.getParameter("sysparm_caller_id");

var userGr = new GlideRecord("sys_user");
userGr.addQuery("locationISNOTEMPTY");
userGr.addQuery("sys_id="+caller);
userGr.query();

if(userGr.next()){
return JSON.stringify({
"loc_name" : userGr.location.name,
"country" : userGr.location.country,
"city" : userGr.location.city
});
}
return null;
},

type: 'HelloWorld'
});

 

Please mark as correct answer if this solves your issue.

Please mark the answer as correct or helpful based on impact
ServiceNow Community Rising Star, Class of 2023

Joshuu
Kilo Sage

Hi @jaheerhattiwale,

 

I have created UI macro and script include as you suggested. 

 

priyarao_0-1671708938806.png

 

priyarao_1-1671709036452.png

 

And I have added the macro name in the caller's attribute as below.

 

priyarao_4-1671709335854.png

 

And I can see a button like this on incident form.

 

priyarao_2-1671709107398.png

 

When I click on this, a new incident form is getting open as below.

 

priyarao_5-1671709540670.png

 

 

Could you please help.

 

Thanks & Regards,

Priya.

 

 

@Joshuu Add below line after if(answer) in call back function and try

 

answer = JSON.parse(answer);

 

Please mark as correct answer if this solves your issue.

Please mark the answer as correct or helpful based on impact
ServiceNow Community Rising Star, Class of 2023