Custom Widget to Display Resolution Information

[Steven McCray1]

I was attempting to find an existing widget to replicate and adjust but can't find any good examples.. Relatively novice at developing custom widgets, but willing to learn and understand the approach.

I'm looking to create and add a custom widget to the Standard Ticket page, the widget will reside below the Standard Ticket Header, and above the Standard Ticket Tab. I know how to manipulate and add widgets to pages, but I need help in creating the widget itself.

Ultimately, for this all I am look for is to have a widget that would display the resolution code (close_code, from the task table) and resolution notes (close_notes, from the task table), on top of each other, so Resolution Code would be the first row of data (ex: Resolution Code: Incident Resolved with Workaround) and then the data right below that in the same widget would display (ex: Resolution Notes: Advised user to use the workaround provided in the problem ticket.)

This widget ideally would only display if the ticket in question is in the resolved/closed state. I don't know how this would affect all of the different tables, but I think if we just go off of task and the 'state' field, that it would work?

I would end up replicating this for HR Cases as well, but I think that should be relatively simple once I have another widget to work off of.

[Tom23 · Accepted solution]

Hi Steven,

It's fairly rough and could be built on, but here's my first pass at this:

HTML:

<div class="panel panel-{{::options.color}} b" ng-if="data.isClosed">
   <div class="panel-heading">
      <h3 class="h4 panel-title">
         <fa ng-if="::options.glyph.length" name="{{::options.glyph}}" class="m-r-sm" ></fa>
         ${Ticket Closure Information}
      </h3>
   </div>
   <div class="panel-body" ng-class="{'padder-b-none': data.approvals.length != 0}">
      <div class="row">
         <div ng-class="contentColClass">
            <div>
               <b>Close Code: </b>{{data.resolution_code}}
               <br> <b>Close Note: </b>{{data.resolution_notes}}
            </div>
         </div>
      </div>
   </div>
</div>

Server Script:

var tableName = $sp.getParameter('table');
var sysId = $sp.getParameter('sys_id');

var incidentGR = new GlideRecord(tableName);
incidentGR.get(sysId);
data.isClosed = false;

if (incidentGR.state == 7 || incidentGR.state == 8) {

    data.resolution_code = incidentGR.getDisplayValue('close_code');
    data.resolution_notes = incidentGR.getDisplayValue('close_notes');
    data.isClosed = true;

}

Out of the box, there is a concept of default close states, so to take this further and make it less incident specific, you could go down the route of retrieving those and building those into the IF statement.

It probably could stand to be prettied up a little bit too but it should function as a starting point?

[Steven McCray1]

Hey Tom, that works great! I had to make just a small adjustment to include the Resolved state (might just be a difference between instances) but once I did that, it shows the details.

I'll tweak the HTML as well to improve the spacing, but overall that's nearly perfect. I appreciate it very much.

So to understand what you're saying on that last bit though.. I would have to put the IF statements in the place of the close_code and close_notes, as those values may be different in other areas of the instance, ex: resolution_notes instead of close_notes, or whatever the variables may be.

[Tom23]

Hey Steven, 

yeah that's right. SN are generally pretty good at keeping the same field names across related tables so you shouldn't run across it too often! 

[nayanmule]

Hey Tom,

I have used the same code in my widget.. but however it didnt work as expected. I am not able to get the close fields and close code related information.

Can you please share the steps here, it would be helpful.

Thanks

Nayan Mule