 | ||||
| Part 1 | Part 2 |
Part 3
| ||
Better presentation of Requested Items
Most approval requests are generated by checkout processes in the service catalog, and yet displaying the contents of the associated Requested Item is about the most user-unfriendly experience that I know of from ServiceNow.
Users who have little experience with ServiceNow and already have problems with Approval Requests being separate records are completely irritated by presentations like the following one:
The corresponding form looks like the following, and the representation in the Approval Request has not the slightest similarity to it:
For Requests with more than one Requested Item or Requested Items with individual prices this may be ok.
However, the Service Catalog is mainly used in companies to offer highly sophisticated services without prices which results in very complex forms, where several dozens of form fields are not unusual. Here, only the presentation of the original form can help to put the many data into the right context.
I was therefore wondering if it is not possible to use the Variable Editor to display the catalog variables in the Approval Request and yes it is!
First thing to know is that rendering the contents of the record to be approved is done via the so-called Approval Formatter:
Depending on the class of the record to be approved, ServiceNow loads a corresponding UI Macro with the name schema "approval_summarizer_[TABLE NAME]".
If no UI Macro for the Approval Summarizer is defined for a table, the macro "approval_summarizer_default" is rendered instead. I will not go into further detail here, as there is a great video by
After rewriting the UI Macro "approval_summarizer_sc_req_item" looks something like this:
The content section after "Summary of Item being approved" consists of the following parts:
- name of the Catalog Item
- short description
- form fields with values rendered by the UI Macro "com.glideapp.servicecatalog.variables.VEditor"
A few additional CSS specifications ensure that unnecessary borders and background colors are removed, making the whole thing more eye-friendly.
And finally the complete source code of the improved UI Macro "approval_summarizer_sc_req_item"
<?xml version="1.0" encoding="utf-8"?>
<j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate var="jvar_ni" expression="var refRITM = ${ref}.sysapproval;" />
<g:evaluate>
var grRITM = new GlideRecord('sc_req_item');
grRITM.get(refRITM);
var strCatItemName = grRITM.cat_item.getDisplayValue();
var strShortDescription = grRITM.cat_item.short_description;
</g:evaluate>
<tbody data-sn-macro-sys-id="${jvar_macro_sys_id}">
<tr>
<td class="label_left" width="100%" style="border-bottom:1px solid black">
${gs.getMessage('Summary of Item being approved:')}
<g:label_spacing />
</td>
</tr>
<tr>
<td width="100%">
<g:requires name="scripts/js_includes_catalog.js" includes="true"/>
<style>
.veditor_header {
display:none !important;
}
.veditor_body {
border: 0 !important;
margin-bottom: 50px;
}
.sc_editor, .veditor_body, .container_table {
background-color: transparent !important;
}
.cat_item_headline {
font-size: 18px;
margin: 15px 0;
padding-left: 40px;
}
.cat_item_description {
margin-bottom: 20px;
padding-left: 40px;
}
</style>
<div class="cat_item_headline">${strCatItemName}</div>
<div class="cat_item_description">${strShortDescription}</div>
<j:set var="jvar_old_ref" value="${ref}" />
<j:set var="ref" value="grRITM" />
<j:set var="jvar_questionset_read_only" value="true" />
<g:render_component componentName="com.glideapp.servicecatalog.variables.VEditor" />
<j:set var="ref" value="${jvar_old_ref}" />
</td>
</tr>
</tbody>
</j:jelly>
Feel free to customize the code according to your needs - for example, to display the quantity, unit price and total price again. And please let me know in the comments if you have any suggestions for improvement.
