In this chapter, we have seen how to script in Jelly and how to create a UI page ourselves. Let's bring these two abilities together to make a working UI macro.
This is an example of a request I have been asked for before – an approval summary on the group approval record. Here, we need to create a UI macro and a formatter to add to the group approval form.
Let's start with our group approval summarizer code, creating a brief summary of the task record we will be approving with our group approval:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<tr>
<td class="label_left" width="100%">
<label style="margin-left: 12px"> Summary of Record being requested for approval:
<g:label_spacing/>
</label>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td class="label_left" width="150px">
<label style="margin-left: 10px">Short Description:
</label>
</td>
<td> $[current.parent.short_description]
<g:label_spacing/>
</td>
</tr>
<tr>
<td class="label_left" width="150px">
<label style="margin-left: 10px">Priority:
</label>
</td>
<td> $[current.parent.priority]
<g:label_spacing/>
</td>
</tr>
<tr>
<td class="label_left" width="150px">
<label style="margin-left: 10px">Opened by:
</label>
</td>
<td> $[current.parent.opened_by.getDisplayValue()]
<g:label_spacing/>
</td>
</tr>
<tr>
<td class="label_left" width="150px">
<label style="margin-left: 10px">Description:
</label>
</td>
<td> $[current.parent.description]
<g:label_spacing/>
</td>
</tr>
</table>
</td>
</tr>
</j:jelly>
As you can see, in this example, there is a fair amount of code, but a lot of this is HTML tags, so there is not much real content. In the example, we are creating a table containing some of the details of the record being approved so that the current group approver can see what they are approving.
The labels and spacing are HTML, and you can find this type of script in the UI macros ServiceNow provides for you. The interesting aspect of the code is in setting the task values. We use the dollar sign to declare the start of the variable, then curly or square brackets for phase one or phase two variables, respectively. Here, we are using square brackets to use the second phase, as our data will change and we do not want it to be cached.
We have named this UI macro group_approval_summarizer; let's take a look at what it looks like in ServiceNow in Figure 8.1:
Now that we have our UI macro, we need to build a formatter to link to the UI macro that we can place on the group approval form. The Formatter needs a Name, a link to the UI macro, and to be on the group approval table. We can see an example of the formatter in Figure 8.2:
Now that we have the formatter, we can add the formatter to the group approval form layout to see our UI macro appear. The results of our UI macro on a group approval form can be seen in Figure 8.3:
In the preceding figure, we can see the output from our UI macro. This example shows how you can make a UI macro add value to forms in ServiceNow, adding extra data you cannot add with the form layout or designer.