“I think it’s very important to have a feedback loop, where you’re constantly thinking about what you’ve done and how you could be doing it better.”
— Elon Musk
So far, I have had relatively good luck playing around with my Simple Webhooks app, and have been able to post content to other systems such as Slack and MS Teams in addition to the test cases that I sent over to webhook.site. One thing that I did notice, though, was that my portal page for editing the details of a Webhook was missing a couple of items found on the corresponding form in the main UI. On the form for a Webhook in the main UI, I built a UI Action that you can use to send a test POST to your URL, and the form also includes a Delete button that you can use to get rid of your Webhook when you no longer need it or want it. The current version of the portal page has neither of those features, so I decided that it was time to add those in.
The first order of business, then, was to add the two buttons to the HTML, right after the existing Save button:
<button ng-show="c.data.sysId" ng-click="testURL()" class="btn btn-default ng-binding ng-scope" role="button" title="Click here to send a test POST to this URL">Test URL</button>
<button ng-show="c.data.sysId" ng-click="deleteThis()" class="btn btn-default ng-binding ng-scope" role="button" title="Click here to permanently delete this webhook">Delete</button>
I didn’t want them showing up on new records, since there is no point in deleting a record that you haven’t created yet, so I added an ng-show attribute based on the presence of an existing sys_id. Other than that, it’s just a basic copy and paste of the other button code with some minor modifications. Here’s how it looks rendered out:
The new buttons reference new client-side functions, so next we will need to add those to the existing client-side script. Here are the two that I came up with:
$scope.testURL = function() {
spModal.confirm('Send a test POST to this URL?').then(function(confirmed) {
if (confirmed) {
c.data.action = 'test';
c.server.update();
}
});
};
$scope.deleteThis = function() {
if (c.data.sysId) {
spModal.confirm('Permanetly delete this Webhook?<br/>(This cannot be undone.)').then(function(confirmed) {
if (confirmed) {
c.data.action = 'delete';
c.server.update().then(function(response) {
goBack();
});
}
});
} else {
goBack();
}
};
I ended up putting a Confirm pop-up on both of them, even though technically the URL test is not destructive. I just thought that it might be nice to confirm that you really want send something over to another system before you actually did it. I also added the c.data.action variable so that once we were over on the server side, that code would know what to do. In our previous version, the only call to the server side was that Save button, so there was no question what needed to be done. But now that we have multiple possible actions, everyone — including Save — will need to register their intentions by setting this variable to some known value (save, test, or delete) before invoking c.server.update(). All of the actual work to perform the save, test, and delete actions is done on the server side, so let’s pop over there next.
To begin, I pulled out all of the existing Save logic and put it into a function of its own. Then I added the following conditional step, assuming that I would have similar functions for the other two actions:
if (input) {
if (input.action == 'save') {
save(input);
} if (input.action == 'test') {
test(input);
} if (input.action == 'delete') {
deleteThis(input);
}
} else {
. . .
The Delete function turned out to be pretty basic stuff:
function deleteThis(input) {
whrGR.get(input.sysId);
whrGR.deleteRecord();
gs.addInfoMessage('Your Webhook data has been deleted.');
}
Most of the code for the Test URL button I just stole from the existing UI Action built for the same purpose. Much of that is buried in the Script Include anyway, so that turned out to be fairly simple as well:
function test(input) {
whrGR.get(input.sysId);
var wru = new WebhookRegistryUtils();
var result = wru.testURL(whrGR);
if (result.status == '200') {
gs.addInfoMessage('URL "' + input.url + '" was tested successfully.');
} else {
gs.addErrorMessage('URL test failed: ' + JSON.stringify(result, null, '<br/> '));
}
}
That’s about all there was to that. Technically, you cannot really call this an enhancement since it is functionality that should have been in there from the start. Let’s just call it a much needed improvement. Here’s the new Update Set.
