“If you are working on something that you really care about, you don’t have to be pushed. The vision pulls you.”
— Steve Jobs
When we last parted, there was an open question on the table regarding the focus of this next installment. Implementing Basic Authentication and moving on to the My Webhooks Service Portal widget were two of the options, but no decision was made at the time as to which way we wanted to turn next. Now that we have finally made it here, the good news is that we don’t have to choose. Adding support for Basic Authentication turned out to be so simple that it looks like we are going to have time for both. Check it out:
if (whrGR.getValue('authentication') == 'basic') {
request.setBasicAuth(whrGR.getValue('user_name'), whrGR.getValue('password'));
}
That’s it. I just added those few lines of code to the postWebhook function of our Script Include and BAM! — now we support Basic Authentication. Pretty sweet!
So now we can devote the remainder of the post to our new My Webhooks widget. As I think I mentioned earlier, this should be a fairly easy clone of the existing My Delegates widget, so the first thing that I did was to make a copy of that guy to have something with which to start. Then I hacked up the HTML to adapt it to our current application.
<table class="table table-hover table-condensed">
<thead>
<tr>
<th style="text-align: center;">ID</th>
<th style="text-align: center;">Table</th>
<th style="text-align: center;">Type</th>
<th style="text-align: center;">Reference</th>
<th style="text-align: center;">Active</th>
<th style="text-align: center;">Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.listItems track by item.id | orderBy: 'id'" ng-hide="item.removed">
<td data-th="ID"><a href="?id=webhook_registry&sys_id={{item.sys_id}}">{{item.id}}</a></td>
<td data-th="Table">{{item.table}}</td>
<td data-th="Type">{{item.type}}</td>
<td data-th="Reference">{{item.reference}}</td>
<td data-th="Active" style="text-align: center;"><img src="/images/check32.gif" style="width: 16px; height: 16px;" ng-show="item.active"/></td>
<td data-th="Remove" style="text-align: center;"><img src="/images/delete_row.gif" ng-click="deleteWebhook($index)" alt="Click here to permanently delete this Webhook" title="Click here to permanently delete this Webhook" style="cursor: pointer;"/></td>
</tr>
</tbody>
</table>
With that out of the way, we now need to replace the code that gathers up the Delegates with code that will gather up the Webhooks. Seems simple enough …
function fetchList() {
var list = [];
var whrGR = new GlideRecord('x_11556_simple_web_webhook_registry');
whrGR.addQuery('owner', data.userID);
whrGR.orderBy('number');
whrGR.query();
while (whrGR.next()) {
var thisWebhook = {};
thisWebhook.sys_id = whrGR.getValue('sys_id');
thisWebhook.id = whrGR.getDisplayValue('number');
thisWebhook.table = whrGR.getDisplayValue('table');
thisWebhook.type = whrGR.getDisplayValue('type');
thisWebhook.active = whrGR.getValue('active');
if (thisWebhook.type == 'Single Item') {
thisWebhook.reference = whrGR.getDisplayValue('document_id');
} else if (thisWebhook.type == 'Assignment Group') {
thisWebhook.reference = whrGR.getDisplayValue('group');
} else {
thisWebhook.reference = whrGR.getDisplayValue('person');
}
list.push(thisWebhook);
}
return list;
}
There is still a lot of work to do, but I like to try things every so often before I get too far along, just to make sure that things are going OK, so let’s do that now. This widget could easily go on the existing User Profile page just like the My Delegates widget, but it could also go on a page of its own. Since we are just trying things on for size right now, let’s just create a simple Portal Page and put nothing on it but our new widget. Let’s call it my_webhooks, drop our widget right in the middle of it, and go check it out on the Service Portal.
Well, that’s not too bad. We don’t really need the Save and Cancel buttons in this instance, but we do need a way to create a new Webhook, so maybe we can replace those with a single Add Webhook button. The links don’t go anywhere just yet and the delete icons don’t do anything, but as far as the layout goes, it looks pretty good. I think it’s a good start so far. Let’s swap out the buttons and then we can wrap things up with the client-side code.
The left-over code in the button area from the My Delegates widget looks like this:
<div style="width: 100%; padding: 5px 50px; text-align: center;">
<button ng-click="saveDelegates()" class="btn btn-primary ng-binding ng-scope" role="button" title="Click here to save your changes">Save</button>
<button ng-click="returnToProfile()" class="btn ng-binding ng-scope" role="button" title="Click here to cancel your changes">Cancel</button>
</div>
Let’s replace it with this:
<div style="width: 100%; padding: 5px 50px; text-align: center;">
<button ng-click="newWebhook()" class="btn btn-primary ng-binding ng-scope" role="button" title="Click here to create a new Webhook">Add New</button>
</div>
Now we just need to overhaul the code on the client side to handle both the adding and deleting of our webhooks. The code to support the Add New button should be pretty straightforward; we just need to link to the same (currently nonexistent!) page that we link to from the main table, just without any sys_id to indicate that this is a new record request. This should handle that nicely:
$scope.newWebhook = function() {
$location.search('id=webhook_registry');
};
As for the delete operation, we will have to bounce over to the server side to handle that one, but first we should confirm that was really the intent of the operator with a little confirmation pop-up. We could use the stock Javascript confirm feature here, but I like the look of the spModal version better, so let’s go with that.
$scope.deleteWebhook = function(i) {
spModal.confirm('Delete Webhook ' + c.data.listItems[i].id + '?').then(function(confirmed) {
if (confirmed) {
c.data.toBeRemoved = i;
$scope.server.update().then(function(response) {
reloadPage();
});
}
});
};
We’ll need some server side code to handle the actual deletion of the record, but that should be simple enough.
if (input) {
data.listItems = input.listItems;
if (input.toBeRemoved) {
deleteWebhook(input.toBeRemoved);
}
}
function deleteWebhook(i) {
var whrGR = new GlideRecord('x_11556_simple_web_webhook_registry');
if (whrGR.get(data.listItems[i].sys_id)) {
whrGR.deleteRecord();
}
}
We still need to test everything, but before we do that, we should go ahead and build the webhook_registry page that we have been pointing at so that we can fully test those links as well. That sounds like a good project for our next installment, so I think we will wrap things up right here for now and then start off next time with our new page followed by some end to end testing.
