“You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose.”
— Theodor Geisel
We still need to test the My Webhooks portal page that we built last time, but before we do that, I wanted to first build out the page referenced in a couple of links on that page so that we could test everything together. My initial thought for that page was to build out a brand new portal widget for that purpose using our old friends SNH Panel and SNH Form Fields. Before I did that, though, it occurred to me that it might be faster to just use the stock form portal page, passing in the name of the table, and potentially a sys_id for existing records. There were a number of things that I did not like about that idea, but I thought that I could overcome those with some UI Policies and some default values for a couple of table fields. I played around with that a bit and found another thing that I didn’t really like, which was that saving a record left you still on the form page and did not bring you back to the My Webhooks page, which I thought was rather annoying. It seemed as though I might be able to mitigate that by adding my Dynamic Service Portal Breadcrumbs to the top of each page, but then I ran into another problem that I could not work around related to the Document ID field. At that point, I gave up and went back to my original plan, which is where I should have started in the first place.
So, here is the HTML for my new Webhook Registry portal widget:
<snh-panel class="panel panel-primary" title="'${Webhook Registry}'">
<form id="form1" name="form1" novalidate>
<div class="row">
<div class="col-xs-12 col-sm-6">
<snh-form-field
snh-model="c.data.number"
snh-name="number"
snh-label="Number"
snh-type="text"
readonly="readonly"/>
<snh-form-field
snh-model="c.data.type"
snh-name="type"
snh-label="Type"
snh-type="select"
snh-required="true"
snh-choices='[{"label":"Single Item","value":"single"},{"label":"Caller / Requester","value":"requester"},{"label":"Assignment Group","value":"group"},{"label":"Assignee","value":"assignee"}]'/>
</div>
<div class="col-xs-12 col-sm-6">
<snh-form-field
snh-model="c.data.owner"
snh-name="owner"
snh-label="Owner"
snh-type="text"
readonly="readonly"/>
<snh-form-field
snh-model="c.data.active"
snh-name="active"
snh-label="Active"
snh-type="checkbox"/>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<snh-form-field
snh-model="c.data.url"
snh-name="url"
snh-label="URL"
snh-type="url"
snh-required="true"/>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<snh-form-field
snh-model="c.data.document_id"
snh-name="document_id"
snh-label="Item"
snh-type="reference"
snh-required="c.data.type=='single'"
table="'incident'"
display-field="'number'"
search-fields="'number'"
value-field="'sys_id'"
ng-show="c.data.type=='single'"/>
<snh-form-field
snh-model="c.data.person"
snh-name="person"
snh-label="Person"
snh-type="reference"
snh-required="c.data.type=='assignee' || c.data.type=='requester'"
table="'sys_user'"
default-query="'active=true'"
display-field="'name'"
search-fields="'name'"
value-field="'sys_id'"
ng-show="c.data.type=='assignee' || c.data.type=='requester'"/>
<snh-form-field
snh-model="c.data.group"
snh-name="group"
snh-label="Group"
snh-type="reference"
snh-required="c.data.type=='group'"
table="'sys_user_group'"
default-query="'active=true'"
display-field="'name'"
search-fields="'name'"
value-field="'sys_id'"
ng-show="c.data.type=='group'"/>
</div>
<div class="col-xs-12 col-sm-6">
<snh-form-field
snh-model="c.data.authentication"
snh-name="authentication"
snh-label="Authentication"
snh-type="select"
snh-required="true"
snh-choices='[{"label":"None","value":"none"},{"label":"Basic","value":"basic"}]'/>
<snh-form-field
snh-model="c.data.username"
snh-name="username"
snh-label="Username"
snh-type="text"
snh-required="c.data.authentication=='basic'"
ng-show="c.data.authentication=='basic'"/>
<snh-form-field
snh-model="c.data.password"
snh-name="password"
snh-label="Password"
snh-type="password"
snh-required="c.data.authentication=='basic'"
ng-show="c.data.authentication=='basic'"/>
</div>
</div>
</form>
<div style="width: 100%; padding: 5px 50px; text-align: center;">
<button ng-click="cancel()" class="btn btn-default ng-binding ng-scope" role="button" title="Click here to abandon this update and return to your webhooks">Cancel</button>
<button ng-click="save()" class="btn btn-primary ng-binding ng-scope" role="button" title="Click here to save your input">Save</button>
</div>
</snh-panel>
There’s nothing too magical there; just a bunch of SNH Form Fields wrapped inside of an SNH Panel. To mirror the UI Policies on the ServiceNow side of things, I used ng-show attributes to hide unneeded fields, and when those fields where required, I used the exact same criteria for the snh-required attribute, which kept it from telling me to complete fields that I couldn’t even see. With just that alone, I could throw the widget onto a page and bring it up, just to see what it looked like.
Not too bad, all things considered. Of course, this is just the layout. We still have to put the code underneath this presentation layer. We will definitely need some server side code to read and update the database, but I like to do the easy things first, so let’s start on the client side and throw in the code for the Cancel button. That just takes you right back the My Webhooks page, so that should be pretty simple, although we should bake in a little confirmation pop-up, just to be sure that the operator really does want to abandon their work. We can do that with a plain Javascript confirm, but I like the spModal version much better.
$scope.cancel = function() {
spModal.confirm('Abandond your changes and return to your Webhooks?').then(function(confirmed) {
if (confirmed) {
$location.search('id=my_webhooks');
}
});
};
Technically, I should have checked to make sure that something was at least altered before I popped up that confirmation, and if not, just whisked you straight away to the My Webhooks page without asking. I may actually do that at some point, but this works for now. Unlike the Cancel button, the Save button will require some server side code, but we can still code out the client side while we are here and then tackle that next. Here is the code for the Save button.
$scope.save = function() {
if ($scope.form1.$valid) {
c.server.update().then(function(response) {
$location.search('id=my_webhooks');
});
} else {
$scope.form1.$setSubmitted(true);
}
};
Here we check to make sure that there are no validation errors on the form before invoking the server side code, and then we return to the My Webhooks page once the server process has completed. If there are validation errors, then we set the form status to submitted to reveal all of the field errors to the user. SNH Form Fields hide validation errors until you touch the field or the form has been submitted, so setting the form to submitted here reveals any validation errors present for fields that have not yet been touched.
On the server side, we essentially have two events to handle: 1) widget initialization and 2) handling a Save action. The Save action involves input from the client side, so we know that if there is input present, we are doing a Save; otherwise, we are initializing the widget. At initialization, we need to look for a sys_id parameter in the URL, which tells us that we are updating an existing record. If there isn’t one, then we are adding a new record. For existing records, we need to go get the data and for new records, we need to initialize certain fields. Here is all that code:
data.sysId = $sp.getParameter("sys_id");
if (data.sysId) {
whrGR.get(data.sysId);
data.number = whrGR.getDisplayValue('number');
data.type = whrGR.getValue('type');
data.url = whrGR.getValue('url');
data.document_id = {value: whrGR.getValue('document_id'), displayValue: whrGR.getDisplayValue('document_id')};
data.group = {value: whrGR.getValue('group'), displayValue: whrGR.getDisplayValue('group')};
data.person = {value: whrGR.getValue('person'), displayValue: whrGR.getDisplayValue('person')};
data.owner = whrGR.getDisplayValue('owner');
data.active = whrGR.getValue('active')=='1'?true:false;
data.authentication = whrGR.getValue('authentication');
data.username = whrGR.getValue('username');
data.password = whrGR.getValue('password');
} else {
data.owner = gs.getUserDisplayName();
data.active = true;
data.document_id = {};
data.group = {};
data.person = {};
}
Similarly, when we do a Save, we need to know whether we are doing an update or an insert, which we can again tell by the presence of a sys_id. If we are updating, we need to go out and get the current record, and then in all cases, we need to move the data from the screen to the record and then save it. Here is all of that code:
if (input.sysId) {
whrGR.get(input.sysId);
}
whrGR.type = input.type;
whrGR.url = input.url;
whrGR.document_id = input.document_id.value;
whrGR.group = input.group.value;
whrGR.person = input.person.value;
whrGR.setValue('active', input.active?'1':'0');
whrGR.authentication = input.authentication;
whrGR.username = input.username;
whrGR.password = input.password;
if (input.sysId) {
whrGR.update();
} else {
whrGR.insert();
}
That’s pretty much it for the widget. Just to make sure that it works, we can pull up an existing record and see what shows up on the screen.
Once I pulled the record up, I switched the Authentication to Basic and then hit the Save button, just to see if the form validation was working. So far, so good, but there is obviously a lot more testing to do, including the integration with the My Webhooks page. Still, things are looking pretty good at this point.
I’m not quite ready to put out an Update Set at the moment, as there is still quite a bit of testing that I would like to do first. Hopefully, though, I won’t find anything too major and I can drop the whole package next time out.
