UI Macro in ServiceNow
ServiceNow is well known for the rich user/developer friendly experience it provides to the customers. It associates its complex process and functional execution with the rich reusable library of objects it offers with even its venial version. With the simple drag and drop, ServiceNow enables developer to avail complex configurations with spot on performances. It also enables developers to develop required customizations with ease by incorporating intelligent scripting. It is often required by the customers to have a customized look feel and process orientation in ServiceNow development. UI Macro is a go to object for the cases as such.
Purpose of UI Macro
- UI macros are basically used to create one’s own custom controls and interfaces. Administrator can create UI Macros.
- For creating UI Macros, knowledge of jelly scripting is required.
- By default, ServiceNow provides UI Macros for various user interfaces like:
- All formatters
- Service catalog cart
- Action icon next to field
- Action icons on form and lists.
How to create UI Macros
For creating UI Macros, one requires the knowledge of jelly scripting. In order to create the UI Macros in ServiceNow navigate through System UI >> UI Macros >>New.
During creation of UI Macro, one has to provide unique name, description as why this UI Macro has been created and XML section where in one can write the script based on requirement.
Calling UI Macros
In ServiceNow, UI Macros in different record type and UI Macro in different modules can be used.
– One can use UI Macro to display icon for the reference field:-
After creating UI Macro, to invoke it one needs to add the same in the attribute field of field dictionary.
- Right click on the caller field and click on the Dictionary.
- In the attribute field call the UI Macro.
To call UI Macro:-ref_contributions = UI Macro_name
– Using UI Macro in UI pages:- To add icons, separators (line), images etc. in UI page one can use UI Macro.Following is the example that depicts the use of UI Macro in UI Page.The yellow line shown in below screenshot is UI Macro
Steps to follow
In the UI Page, one can invoke the UI Macro by using the following highlighted code in the HTML script.
To call UI Macro:–
– One can call UI Macro from the server side scripts like business rule, script include.The green line in the following figure appears by means of the UI macro that has been invoked from the business rule on the incident table using addInfoMessage() method of the glide system API.
- One can call UI Macro from the business rule and script include using following code.
Using UI Macro in service catalog variables.One can use the UI Macro in the service catalog variables to create different UI. One can create his own interface and according to requirement use the UI Macro.
Following example shows how to use UI Macro in catalog variable and how it looks.
- Create the variable in catalog item and select type of variable as macro or macro with label.
- Select the macro in macro reference field.
Add an add/edit user UI Macro to a form
this adds a little + icon next to the caller field:
notes:
Show add/edit user macro icon on a reference field
Activate by:
– Setting the active field in this macro to true
– Adding the attribute to a dictionary field: ref_contributions=_add_edit_user_modified
sys property:
the UI Macro:
Full XML - view to set highlighted in green (view can be specified under system UI> views):
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:if test="${(gs.getUser().getDepartmentID() == (gs.getProperty('xxx.department')))&& gs.hasRole('itil_edit')}">
<g:evaluate var="jvar_guid" expression="gs.generateGUID(this);" />
<j:set var="jvar_n" value="add_edit_user_${jvar_guid}:${ref}"/>
<a>
<span id="${jvar_n}" onclick="addEditUserPop('${ref}')"
class="btn btn-default icon-add-circle"
title="${gs.getMessage('Add/Edit User')}"
alt="${gs.getMessage('Add/Edit User')}">
</span>
</a>
<script>
//OnClick function for UI macro
function addEditUserPop(reference){
var s = reference.split('.');
var referenceField = s[1];
var v = g_form.getValue(referenceField);
//If user field is empty then pop open an 'Add User' dialog
if(v == ''){
var dialog = new GlideDialogForm('Add User', 'sys_user', setUserField);
dialog.setSysID('-1'); //Pass in -1 to create a new record
}
//Else pop open an 'Edit User' dialog for the populated user record
else{
var dialog = new GlideDialogForm('Edit User', 'sys_user', setUserField);
dialog.setSysID(v); //Pass in reference sys_id to edit record
}
// dialog.addParm('sysparm_view', 'default'); //Specify a form view
dialog.addParm('sysparm_view', 'user_add_edit'); //Specify a form view
dialog.addParm('sysparm_form_only', 'true'); //Remove related lists
dialog.render(); //Open the dialog
//Callback function executed from dialog submit
function setUserField(action, sys_id, table, displayValue){
//Set the user field with the popup user
g_form.setValue(referenceField, sys_id);
}
}
</script>
</j:if>
</j:jelly>ServiceNow UI Macro to Agent Workspace
First create lets create the UI macro. Under System UI -> UI Macros, create a new record. Use the code snippet 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">
<j:set var="jvar_n" value="open_agent_workspace"/>
<g:reference_decoration id="${jvar_n}"
onclick="openRecordInAgentWorkspace(); "
title="${gs.getMessage('Open Record In Agent Workspace')}" image="images/icons/tasks.gifx" icon="icon-open-document-new-tab"/>
<script>
// show record in the agent workspace
function openRecordInAgentWorkspace() {
try {
var table = g_form.getTableName();
var url = 'now/workspace/agent/record/' + table + '/' + g_form.getUniqueValue();
g_navigation.openPopup(url);
} catch (e) {
jslog('error showing workspace list');
jslog(e);
}
}
</script>
</j:jelly> Save as “open_in_agent_workspace”
Dictionary attribute
Next we need to add a ref_contribution to the dictionary attribute for the Incident table.
- Open the Incident Table
- Right click number and choose configure dictionary
- Copy the contents of the attributes field to you clipboard, we’ll need this later
- Scroll down to Dictionary Overrides and click New
- Set the Table to Incident, check of “Override attributes” and paste in the value you copied in step #3.
- Append a comma and add <ref_contributions=open_in_agent_workspace>
- Save
Result
You should now have a button next to the Number field that will open the related Incident in a new Agent Workspace tab.
You may choose to repeat this for other task tables like catalog task, requested item, problem, etc
Regards,
Vaishnavi
