Intro
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.
AngularJS is also a Model View Controller based framework.
A Model View Controller pattern is made up of the following three parts:
-
Model − It is the lowest level of the pattern responsible for maintaining data. It responds to the request from view and to the instructions from the controller to update itself.
-
View − It is responsible for displaying all or a portion of the data to the user.
-
Controller − It is a software Code that controls the interactions between the Model and View. It responds to user input and performs interactions on the data model objects.
ServiceNow baseline leverages AngularJS in Service Portal and the Service Portal widgets have been designed to map the three components introduced above.
- $scope or c (in case the 'controller as' notation is used) represents the model.
- Client Controller section receives input, validates it, and then performs business operations that modify the state of the data model.
- HTML section is the presentation of data in a particular format, triggered by the controller's decision to present the data.
Portal widgets also simplify the link between client and server-side and support CRUD operations through the use of the 'Server Script' section.
The logic is simple.
Usually the exchange of data between client and server described in phase 2 is executed using the following methods
c.server.get([Object]) - Calls the server and sends custom input. Returns Promise.
c.server.refresh([Object]) OR spUtil.refresh() - Calls the server and this.data is automatically send to server side. Returns Promise.
c.server.update([Object]) OR spUtil.update() - Calls the server and automatically replaces the current options and data from the server response. Returns Promise.
Note. More info about Promises here
$http - A different approach using AngularJS Services.
In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.
AngularJS has about 30 built-in services and the ServiceNow Platform allows you to use them when creating portal widgets. One of them is the $http service.
The $http service is a core AngularJS service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSON.
The $http service is a function that takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise that is resolved (request success) or rejected (request failure) with a response object.
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});This approach is used to create aintegration with systems exposing web-services, consume them and get back data into ServiceNow instance.
Instead of reaching an external system, we can hit ServiceNow with the same method. Easy!
ServiceNow as a Web Service Provider
Web services make it possible for applications to connect to other software applications over a network allowing an exchange of information between the provider (server) and consumer (client).
A web service consumer (client) requests information from a web service provider (server).
In an inbound request, a third-party application requests an action through a ServiceNow API.
Example ServiceNow APIs include:
ServiceNow's REST API Explorer is an application to construct and test API requests to a ServiceNow instance.
The REST API Explorer is available to users with the rest_api_explorer role or the admin role.
To open the REST API Explorer, use the Application Navigator to navigate under System Web Service > REST > REST API Explorer.
Provide a Namespace, API Name, API Version, and select a method.
Review the URL in the Retrieve a record section.
Copy the portion of the URL after .com (/api/now/table/{tableName}/{sys_id}) then write the $http request in your Widget’s Client Script.
api.controller = function($http) {
/* widget controller */
var c = this;
c.exmplFnctn = function(id) {
// Simple GET request example:
$http({
method: 'GET',
url: 'api/now/table/incident?sysparm_query=sys_id=' + id
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
};
CAB Workbench. A real-life example.
The Change Advisory Board (CAB) workbench enables a CAB manager to schedule, plan, and manage CAB meetings.
CAB meetings are typically intended to review and authorize change requests and review recently implemented changes. A standard agenda with the relevant change request details enables the CAB members to conduct risk and impact analysis prior to the CAB meeting.
The CAB workbench assists you in managing CAB meetings in the following ways:
- Schedule a recurring series of CAB meetings for CAB members to assess the impact and risk of change requests prior to the meetings.
- Define members who attend this CAB meeting series for each occurrence.
- Define CAB meeting agenda
It also provides a graphical interface used to
- run the meeting and discuss the changes
- take decisions (approve/reject changes)
- Record meeting notes from a specific CAB meeting
- share these notes with other meeting attendees.
Taking a peek behind the scene
Several widgets are used to get the page and the structure visible in the previous image. The architecture is quite complex and leverages the full potential of Service Portal and AngularJS.
For instance
- A few widgets are embedded in others
- Some widgets broadcast events and communicate with others on the same page
- All of the widgets rely on dependencies.
If we start checking the dependencies used by the page, it's clear that the widgets are using an intricate system of JS includes in order to handle the operations executed on the database.
26 UI scripts are dedicated to CAB workbench operations!
There is one, in particular, that is quite interesting named 'rt.runtimeState'
As with all the other UI scripts included in the widget dependency, this one is used to store AngularJS code and as the other, this is a module.
In Angular, a module is a mechanism to group components, directives, pipes, and services that are related, in such a way that can be combined with other modules to create an application. An Angular application can be thought of as a puzzle where each piece (or each module) is needed to be able to see the full picture.
The module here is used to create a service dedicated to providing functions that will manipulate the records evaluated during the cab workbench.
As a normal practice, the service created can use other existing services for instance $http.
The code shows several functions created to call a CAB related web service API
For instance the actions highlighted in the following cab workbench page section
They are managed not using a server-side script in the widget but in the client script.
The service 'runtimeState' is included and the following functions visible in the UI Script are used.
Here's a section from the UI Script 'rt.runtimeState'
The start, end of the meeting are handled in the exact same way.
Clearly, there is more but this should give you a starting point to evaluate the solution and for possible use on your scoped applications.
Cheers
R0b0
