Custom approval UI macro

This section describes how to create a custom approval UI macro.

Caution: The customization described here was developed for use in specific instances, and is not supported by ServiceNow. This method is provided as-is and should be tested thoroughly before implementation. Post all questions and comments regarding this customization to our community forum.

Script Name: Custom Approval UI Macro

Type: UI Macro

Description: Here is an option to get more detail out of the My Approvals view of an Execution Plan. This can be done by creating a new UI macro. Navigate to System UI and click UI Macros. First, you will need to rename the existing approval_summarizer_sc_task to something like approval_summarizer_sc_task_old and deactivate it. Then you will need to create a new one using the same name (approval_summarizer_sc_task). The name should basically tell you what the macro does and what it applies to. In this case, we're replacing an existing one so we decided to re-use the existing name.

Figure 1. Approval macros

Then you should copy the xml script at the bottom of this article into the xml code window in the new UI macro. This is great way to give some detail to an approver when you are doing line item approvals via approval tasks within the Service Catalog Execution Plans.

The old way

This is the view you see in My Approvals when using an approval task via the old method.

Figure 2. My Approvals (old way)

Notice there is not much detail telling the approver what they are actually approving. You can see the short description of the task but not much around what the item is.

The new way

This is the view you will see if you use the xml script below in place of the OOB (out-of-box) UI macro.

Figure 3. My Approvals

Using this method you can see details much like the request approval. You have a link into the item ordered, a short description (which contains the ability to expand the variables from the item), price, quantity and the total price. This helps the approver in that it shows more detail. They can now see what they are actually approving.

Script:

<?xml version="1.0" encoding="utf-8" ?>
    <j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <tr>
        <td class="label_left" width="100%">
            <label style="margin-left: 10px">
                ${gs.getMessage('Summary of Item being approved')}:
                <input style="visibility: hidden" NAME="make_spacing_ok"></input>
            </label>
        </td>
    </tr>
    <g:evaluate var="jvar_ni" expression="
        var sc_task = ${ref}.sysapproval;
        var sc_req_labels = new GlideRecord('sc_req_item');
        sc_req_labels.initialize();
        var sc_req_item = new GlideRecord('sc_req_item');
        sc_req_item.addQuery('request_item', sc_task.request_item.sys_id);
        sc_req_item.query();
    " />
    <tr>
        <td width="100%">
            <table width="100%">
                <tr>
                    <td class="label_left" width="150px">
                        <label style="margin-left: 10px">
                            ${sc_task.request_item.request.opened_by.sys_meta.label}:
                        </label>
                    </td>
                    <td>
                        ${sc_task.request_item.request.opened_by.getDisplayValue()}
                    </td>
                </tr>
                <tr> 
                    <td class="label_left" width="150px">
                        <label style="margin-left: 10px">
                            ${sc_task.request_item.request.requested_for.sys_meta.label}:
                        </label>
                    </td>
                    <td>
                        ${sc_task.request_item.request.requested_for.getDisplayValue()}
                    </td>
                </tr>
                <tr>
                    <td class="label_left" width="150px">
                        <label style="margin-left: 10px">${gs.getMessage('Total')}:</label>
                    </td>
                    <td>
                        <g:currency_format value="${sc_task.request_item.request.price}" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <j:set var="jvar_line_num" value="0" />
    <tr>
        <td width="100%">
            <table width="100%">
                <tr class="header">
                    <td colspan="2">
                        ${sc_req_labels.number.sys_meta.label}
                    </td>
                    <td>
                        ${sc_req_labels.description.sys_meta.label}
                    </td>
                    <td>
                        ${sc_req_labels.price.sys_meta.label}
                    </td>
                    <td>
                        ${sc_req_labels.quantity.sys_meta.label}
                    </td>
                    <td>
                        ${gs.getMessage('Total')}
                    </td>
                </tr>
                <j:set var="jvar_item_price" value="${sc_task.request_item.price * sc_task.request_item.quantity}"/>
                <j:set var="jvar_overall_total" value="${jvar_overall_total + jvar_item_price}"/>
                <j:set var="jvar_line_color" value="odd"/>
                <j:set var="jvar_line_num" value="${jvar_line_num + 1}"/>
                <j:if test="${jvar_line_num % 2 == 0}">
                    <j:set var="jvar_line_color" value="even"/>
                </j:if>
                <g:evaluate var="ni" expression="
                    var smart_description = sc_task.request_item.cat_item.short_description;
                    if (smart_description == null || smart_description == '' || smart_description == 'undefined')
                        smart_description = sc_task.request_item.cat_item.name;
                "/>
                <tr class="${jvar_line_color}">
                    <td valign="top">
                        <g2:evaluate var="jvar_pop_target" expression="$[ref].getRecordClassName()" />
                        <a class="linked" target="gsft_main"
                            href="sc_req_item.do?sys_id=${sc_task.request_item.sys_id}"
                            onmousemove="popListDiv(event, 'sc_req_item', '${sc_task.request_item.sys_id}','${sysparm_view}')"
                            onmouseout="lockPopup(event)">
                            <img src="images/icons/hover_icon.gifx" class="clsshort"/>
                        </a>
                    </td>
                    <td valign="top">
                        <a class="linked" target="gsft_main"
                            href="sc_req_item.do?sys_id=${sc_task.request_item.sys_id}">
                            ${sc_task.request_item.number}
                        </a>
                    </td>
                    <td valign="top" width="50%">
                        <g:call function="variable_summary_approval.xml" 
                            question_name="${sc_task.request_item.sys_id}"
                            question_help_tag="${smart_description}" 
                            sc_req_item="${sc_task.request_item.sys_id}"
                            help_class="${jvar_line_color}"/>
                    </td>
                    <td valign="top"> <g:currency_format value="${sc_task.request_item.price}"/> </td>
                    <td valign="top"> ${sc_task.request_item.quantity}</td>
                    <td valign="top"> <g:currency_format value="${jvar_item_price}"/></td>
                </tr>
            </table>
        </td>
    </tr>
</j:jelly>