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

Hi @jaheerhattiwale,

 

Thank you very much for all your help. It is working as expected.

 

Much Appreciated.

 

Thanks,

Priya.

Joshuu
Kilo Sage

Hi @jaheerhattiwale ,

 

I have added one more field tech contact from another table and I have modified the script include as below.

 

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()) {
            var techGr = new GlideRecord("u_tech_contact");
            techGr.addQuery("u_branch_id", userGr.location);
            techGr.addQuery("u_active", true);
            techGr.orderBy('u_sequence');
            techGr.query();
            var tech_contacts = '';
            while (techGr.next()) {
                tech_contacts = tech_contacts + techGr.u_sequence + '. ' + techGr.getDisplayValue('u_tech_contact') + '\n';
            }
            return JSON.stringify({
                //"tech_contact": userGr.getDisplayValue('location.u_tech_contact'),
                "tech_contact": tech_contacts,
                "branch_id": userGr.location.u_branch_id.toString(),
                "loc_name": userGr.location.name.toString(),
                "country": userGr.location.country.toString(),
                "city": userGr.location.city.toString()
            });
        }
        return null;
    },
    type: 'LocationUtil'
});

 

And the output is:

 

priyarao_0-1675360816524.png

 

Everything looks good, but the client wants the tech contact names as shown below. 

 

Tech Contact:

1. Jack Hawksworth

2. Kyle Toon

3. Mario Sever

4. Nikola Pintaric 

 

Could you please help me on this. What changes I need to do here.

 

Appreciate your help.

 

Thanks,

Priya.