A while ago I built a minimalist SLA grid formatter for a team that needed to see their SLAs at a glance. They wanted their SLAs at the very top of their task form, so a formatter was about the only way to satisfy their requirement. I think it turned out great so I’d like to share it with you.

SLA Grid Formatter shown in context with other fields

It’s easy to build, so let’s get started. Create a new UI Macro [sys_ui_macro]:

Name: sla_grid_formatter

XML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

    <script type="text/javascript">
        function split_date_time(datetime, sla, sys_id) {
            var datetimearr = datetime.split(' ');
            $j('#' + sla + '_' + sys_id).text(datetimearr[0]);
        }
    
        function calc_days_from_ms(ms, sla, sys_id) {
            if (ms >= 0) {
                var days = Math.floor(ms / 86400000);
                var days_text = days + ' ';
                if (days != 1) {
                    days_text = days_text + 'Days';
                }
                else {
                    days_text = days_text + 'Day';
                }
                $j('#' + sla + '_' + sys_id).text(days_text);
            }
        }
    </script>

    <g2:evaluate>
        var slas = new GlideRecord('task_sla');
        slas.addEncodedQuery('task=' + current.sys_id + '^stage!=cancelled');
        slas.orderBy('planned_end_time');
        slas.orderBy('sla.name');
        slas.query();
    </g2:evaluate>
    
    <j2:if test="$[slas.hasNext()]">
        <tr id="element.u_am_sla_grid.header">
            <td data-type="label" class="label label_spacing">
                <label></label>
            </td>
            <td class="input_controls">
                <table style="width: 100%">
                    <tr>
                        <td style="width: 25%; font-weight: bold;">
                            Actual Date
                        </td>
                        <td style="width: 25%; font-weight: bold;">
                            Actual Days
                        </td>
                        <td style="width: 25%; font-weight: bold;">
                            SLA Date
                        </td>
                        <td style="width: 25%; font-weight: bold;">
                            SLA Days
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <j2:while test="$[slas.next()]">
            <tr id="element.u_am_sla_grid.$[slas.getDisplayValue('sys_id')]">
                <td data-type="label" class="label label_spacing">
                    <label>$[slas.getDisplayValue('sla.name')]</label>
                </td>
                <td class="input_controls">
                    <table style="width: 100%">
                        <tr>
                            <td id="actual_date_$[slas.getDisplayValue('sys_id')]" style="width: 25%;">
                            </td>
                            <td id="actual_days_$[slas.getDisplayValue('sys_id')]" style="width: 25%;">
                            </td>
                            <td id="sla_date_$[slas.getDisplayValue('sys_id')]" style="width: 25%;">
                            </td>
                            <td id="sla_days_$[slas.getDisplayValue('sys_id')]" style="width: 25%;">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <script>
                $j(document).ready(function(e) {
                    split_date_time('$[slas.getDisplayValue('end_time')]', 'actual_date', '$[slas.getDisplayValue('sys_id')]');
                    calc_days_from_ms($[slas.business_duration.getGlideObject().getNumericValue()], 'actual_days', '$[slas.getDisplayValue('sys_id')]');
                    split_date_time('$[slas.getDisplayValue('planned_end_time')]', 'sla_date', '$[slas.getDisplayValue('sys_id')]');
                    calc_days_from_ms($[slas.sla.duration.getGlideObject().getNumericValue()], 'sla_days', '$[slas.getDisplayValue('sys_id')]');
                });
            </script>
        </j2:while>
    
        <tr id="element.u_am_sla_grid.spacer" style="height: 15px">
        </tr>

    </j2:if>    
</j:jelly>

Then create a new Formatter [sys_ui_formatter] that uses the new macro:

Name: SLA Grid
Formatter: sla_grid_formatter.xml
Table: <your table goes here>
Type: Formatter

It really shouldn’t matter what table you choose, this should work with any table extended off Task (only task tables can have SLAs attached). In fact, you could just choose Task to make this formatter available on all task table form layouts.

The last step is to customize the form layout for your table to add the SLA Grid formatter anywhere you like. Easy peasy!

In my use case the SLAs were five-day and thirty-day SLAs. If yours are much shorter and you’d rather display hours instead of days, it shouldn’t be too much work to tweak the script, but I leave that as an exercise for the reader. Enjoy!