Single page app on Service Portal Service Now - UI-Router and Widgets

[GovarthananV]

Create a Hello world project in ESC service portal using Angular UI router and service portal widgets

Step 1

First let's download the library (https://github.com/angular-ui/ui-router) and create a UI Script with its content . The minified( https://unpkg.com/@uirouter/angularjs@1.1.1/release/angular-ui-router.min.js ) version is recommended.

System UI > UI Scripts > New 
UI Router AngularJs

Step 2
Create a widgets 
Service Portal > Widgets > New
SPA Home

SPA Details

Add your HTML, css and scripts in widgets

Step 3
System UI > UI Scripts > New 
SPA UI Script

(function (angular) {
  var app = angular.module("spa_ng_app", ["ui.router"]);
  app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state("spa_home", {
        template: '<sp-widget widget="data.spa_home"></sp-widget>',
      })
      .state("spa_details", {
        template: '<sp-widget widget="data.spa_details"></sp-widget>',
      });
  });
})(angular);

Step 4
Create new widgets 
Service Portal > Widgets > New
SPA UI View

 HTML

<a ui-sref="spa_home" class="btn btn-primary">Home</a>
<a ui-sref="spa_details" class="btn btn-primary">Details</a>
<ui-view></ui-view>

Server script

(function() {
    data.spa_home = $sp.getWidget('spa_home');
    data.spa_details = $sp.getWidget('spa_details');
})();

Client controller

api.controller = function($scope, $state, $location) {
    $state.go('spa_home');
};

Now add new Widget Dependency

SPA UI View > Widget Dependency > New

SPA UI View Dependency

SPA UI View Dependency > JS Include > New
Once has been added the UI router and SPA UI script in the JS Include 

Update the order in SPA UI View Dependency
UI Router to 100
UI Script to 200

Step 5

Create new Page 
Service Portal > Pages > New

Once create a new page and reopen the page add the widget 

Open in Designer add 12 column then add the SPA UI View widget there and close 
 

SPA UI > save or update the page 

Step 6
Open the SPA page in 
https://dev******.service-now.com/esc?id=spa_ui
or
https://dev******.service-now.com/$spd.do#/sp/preview/desktop/spa_ui

Click the button and switch the widgets

I referred to the post below and decided to use widgets instead of a template or page, as those options take longer to load and don't offer the same flexibility. Using widgets allows for quicker performance and more control over customisation.
 https://www.servicenow.com/community/developer-blog/single-page-app-on-service-portal-part-1-ui-rout...

I believed it would contribute to building a more flexible SPA application in ServiceNow.

Thanks 🙂