Angular web app with ServiceNow backend

Angular 10+ web application developed to replace Service Portal on ServiceNow. It offers several benefits when compared native Service Portal

Angular is a widely used framework and offers responsive single page applications (SPA)
No need to wait for ServiceNow to update their instance to Latest Angular version or Bootstrap version
No need to hack ServicePortal widgets and spend hours on fixing collisions between ServiceNow libraries and your custom CSS and JS libraries.
Use industry standard OAuth2 protocol for securing the web app
Use ServiceNow as a REST API backend

Technologies Used

Angular 10.x
Bootstrap 4.x
ServiceNow Madrid
OAuth2.0
Others

Configure ServiceNow backend

Get ServiceNow developer instance if you do not have one
Follow the instructions from ServiceNow docs to activate the OAuth2.0 plugin
Once activated, search for oauth and select Application Registries to create a new OAuth client
Select Create an OAuth API endpoint for external clients and fill the client details. See ServiceNow docs for more information
Make sure the user has REST API access and assigned snc_platform_rest_api_access role
Test the created OAuth client with Postman or curl.
$ curl -d "grant_type=password&client_id=<Client Id>&client_secret=<Client secret>&username=<UserId>&password=<Password>" -H "Content-Type: application/x-www-form-urlencoded" https://devxxxxx.service-now.com/oauth_token.do
If you are using Postman, select No Auth Authorization and body type as x-www-form-urlencoded. Enter the following key-value pairs in body

 grant_type=password
 client_id=<Client Id>
 client_secret=<Client secret>
 username=<Username>
 password=<Password>

Response from step 6 or 7 should be the following. Use access_token in subsequent steps to access data

{
    "access_token": "z5Ewzj6KRSWXBnljlYRpn-R_5gw3JSQ8y1h71cuCIyVy546I7jwg5k9M2E0ctc2ssJC9S2ER6ZWGXs474Ext4Q",
    "refresh_token": "Hek_vW3Q3jA2qM5nurYFCEruWPI5EX6zriI8a92v4FafFOsD5el17fWkrz48ZLlw3kpjZSRJmiK9uTyjPL6rKg",
    "scope": "useraccount",
    "token_type": "Bearer",
    "expires_in": 1799
}

Go to ServiceNow instance and search for Scripted Rest APIs and select it. Click on New and enter Name and other details then submit it
Select created Scripted Rest API and create new Resource under resources and enter following info HTTP method: GET Name: Script:
(function process(/*RESTAPIRequest*/ request, /*RESTAPIResponse*/ response) { var userSysId=gs.getUserID(); var gr=new GlideRecord('sys_user_has_role'); gr.addQuery('user',userSysId); gr.query(); var roles=[]; while(gr.next()) { roles.push({name:gr.role.name,sysID:gr.role,description:gr.role.description}); } var body=[]; body.push({username:gs.getUserName(),displayName:gs.getUserDisplayName(),sysId:gs.getUserID(),roles:roles}); response.setBody(body); })(request, response);
This scripted API will be used in Angular App to access user information and roles

How to Run the Angular App?

Clone this repository into your local machine and open in WebStorm or VS Code
Open the file src/app/app.constants.ts and change details based on your OAuth client and Scripted REST API detail

export const SERVER_API_URL = 'https://dev81909.service-now.com/';
export const USER_INFO_URL = 'api/x_19668_halo/user_info';

export const OAUTH2_CLIENT_ID= '3c76622bc581b30082098914f97ee08e';
export const OAUTH2_CLIENT_SECRET= 'password12345';
export const OAUTH2_ACCESS_TOKEN_URI = SERVER_API_URL + 'oauth_token.do';

export const INCIDENT_API_URL = 'api/now/table/x_19668_halo_incident';

$ ng serve --watch

Go to http://localhost:4200 and login with your credentials
Click on Incidents menu to see list of options for incidents
Select Incidents list to see list of incidents and click on Edit or View to see incident data
Add new components and modules based on your requirements
By default Angular app runs on HTTP protocol and data is not encrypted. Use Edge Encryption to encrypt data between ServiceNow instance and Angular WebApp

Note: Uploaded Update set and Angular code to this post

Labels: