Create a UI Macro button on incident form

[Joshuu]

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.

[jaheerhattiwale]

@Joshuu i am still checking it. I will ping here once done 

[Joshuu]

Thank you very much @jaheerhattiwale 

[jaheerhattiwale]

@Joshuu Tried and tested solution.

1. Create UI Macro

Name: location_button

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">

<button type="button" onclick="showLocInfo()"></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");
if(answer){
answer = JSON.parse(answer);

gel("loc_info").style.display = "block";
gel("loc_name").innerText = answer.loc_name;
gel("country").innerText = answer.country;
gel("city").innerText = answer.city;
}
}
</script>
</j:jelly>

2. Create another UI Macro

Name: location_info

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">
<div id="loc_info" style="display:none; margin-left: 35%;">
<b>Location name:</b> <p id="loc_name"></p>
<b>Country:</b> <p id="country"></p>
<b>City:</b> <p id="city"></p>
</div>
</j:jelly>

3. Create UI Formatter

Go to "System UI > Formatters"

Create new like below, keep everything same

4. Add UI formatter to form layout of incident below caller field

5. Add ui macro to caller field

6. Create script include

Script:

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

getLocationInfo: 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.toString(),
"country": userGr.location.country.toString(),
"city": userGr.location.city.toString()
});
}
return null;
},
type: 'LocationUtil'
});

Result:

Note:

1. Copy code and add it to notepad first and then copy from note pad and add it to servicenow ui macro and script include

2. Do small changes like button size etc

3. Keep the names of UI Macros, Script include and Formatter same as it is

Please mark as correct answer if this solves your issues

[Joshuu]

Hi @jaheerhattiwale ,

I just did everything as you mentioned and I can see the output as well.

Can we add this location fields information in a popup window ?

Could you please assist?

Thank you very much for all your help.

Much Appreciate.

Thanks,

Priya.

[jaheerhattiwale · 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:

When location info not present

Please mark all the answers on this questions as correct answers