LOUISVILLE, KENTUCKY
DENVER, COLORADO
CHICAGO, ILLINOIS
MADISON, WISCONSIN
HARRISBURG, PENNSYLVANIA
ATLANTA, GEORGIA
CINCINNATI, OHIO
TORONTO, ONTARIO
HYDERABAD, INDIA
BANGALORE, INDIA

V-Soft's Corporate Headquarters

101 Bullitt Lane, Suite #205
Louisville, KY 40222

502.425.8425
TOLL FREE: 844.425.8425
FAX: 502.412.5869

Denver, Colorado

6400 South Fiddlers Green Circle Suite #1150
Greenwood Village, CO 80111

TOLL FREE: 844.425.8425

Chicago, Illinois

5215 Old Orchard Road Suite #950
Skokie, IL 60077

TOLL FREE: 844.425.8425

Madison, Wisconsin

8401 Greenway Boulevard Suite #100
Middleton, WI 53562

TOLL FREE: 844.425.8425

Harrisburg, Pennsylvania

4813 Jonestown Road Suite #103
Harrisburg, PA 17109

TOLL FREE: 844.425.8425

Atlanta, Georgia

1255 Peachtree Parkway Suite #4201
Cumming, GA 30041

TOLL FREE: 844.425.8425

Cincinnati, Ohio

Spectrum Office Tower 11260
Chester Road Suite 350
Cincinnati, OH 45246

Email: sales@vsoftinfrastructure.com
Phone: 513.771.0050

Toronto, Canada

1280 Finch ave w suite 312 toronto, Ontario M3J3K6

TOLL FREE: 844.425.8425

Hyderabad, India

Incor 9, 3rd Floor, Kavuri Hills
Madhapur, Hyderabad – 500033 India

PHONE: 040-48482789

Bangalore, India

GINSERV, CA Site No 1, HAL
3rd Stage Behind Hotel Leela Palace
Kodihalli, Bangalore - 560008 India

Why AngularJS Integration was a Game Changer for ServiceNow

ServiceNow Professionals working on AngularJS integration

ServiceNow with its innovative service delivery solutions brings major breakthroughs to some of the biggest challenges of the service industry. In this successful journey of ServiceNow, AngularJS has been highlighted as one of the key forces in enabling ServiceNow to deliver a one-stop solution to all the service industry problems. In this post, let’s examine in how AngularJS contributed to the successful journey of ServiceNow.

What Issues Prompted ServiceNow to Lookout for AngularJS?

Earlier to the AngularJS integration, there was a bit of confusion and difficulty in the implementation of ServiceNow Portal. As the demand was heavy coding and everything developed is to be integrated manually.

Till the Geneva version of ServiceNow, everything was implemented in Jelly script which was created by ServiceNow to render a user interface and a CMS system was used in the implementation of the service portal.

In Jelly Script, the code is to be written in XML format. The application was a multi-page application that needs to load the whole HTML code every time when the need to change view or to load other pages raises. As every time reloading of HTTPS calls was done frequently, which in turn increases the development time. This process also brings the overhead of the writing code for implementation of every widget.

AngularJS Solved ServiceNow Challenges

To overcome all the above issues ServiceNow implemented AngularJS. ServiceNow implemented AngularJS in the Geneva version but had some issues. From the Helsinki release, ServiceNow totally shifted to AngularJS framework and avoiding the need of Jelly Script.

AngularJS is a JavaScript framework follows the MVC architecture. AngularJS with its ease in development and built-in features made ServiceNow implementation easy and flexible. Integration of AngularJS helped in the development of single-page applications, and MVC architecture made user interface made easy in ServiceNow. The MVC architecture is a vital thing for implementing single page application in ServiceNow. Below is the MVC architecture:AngularJS ServiceNow Model View Controller architecture exampleThe MVC architecture improvises the ServiceNow process in the following process:

  • With the help of AngularJS, ServiceNow became a lightweight process by usage of reusable codes.
  • Single Page application in ServiceNow can be achieved by using angular router plugin and location service, which can be injected into the module. Because of this server load can be reduced, and in turn, load time will be decreased. This way we can avoid the HTTP calls.
  • AngularJS controllers hold the control logic and act as an interface between Model and View. This way, it avoids the refreshing of the page to update the view by using data binding.
  • HTTP services once declared can be used in any of the controllers as a reusable service by injecting the services into the controllers. This avoids the code redundancy, decreases the development time and improves the overall performance.
  • AngularJS Directives are similar to HTML tags, which are helpful in designing and implementing the data received from the services. This enables easy updating of View.
  • With the help of predefined directives, AngularJS makes ServiceNow’s form validations easy that too in a less time.

The Process of Integration of AngularJS with ServiceNow

For a successful integration of AngularJS with ServiceNow follow the steps mentioned below:

Step1: Download AngularJS plugin

Download the AngularJS plugin from the official website https://angularjs.org/ to storage.

Step2: Create UI Script

Go to ServiceNow portal, then create a new blank UI Script. UI scripts are client-side JavaScript library files which are stored in the database to easily customize.

Create UI Script in ServiceNow

You can add a description if you like, but keep the script field blank and click Submit.

Step 3: Add the Script to the UI Script

  • Now you would be redirected to dashboard where you can see all UI Scripts.
  • Open the AngularJS file that you have downloaded from the AngularjS.org and copy the contents of that file to your clipboard.
  • Now filter the UI Scripts list to see your new library records.
  • Double click on the “Script” column to get an edit box, paste the angular code into that script field and submit to save the record.
Process of adding AngularJS script

Step 4: Call the Plugin

By using <g:require> tag include UI Script.

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:requires name="angularjs.min.1.3.2.jsdbx" />

</j:jelly>

Note: Prior to ServiceNow Helsinki release AngularJS was imported manually in to the ServiceNow portal, whereas now it is inbuilt.

 

Free ServiceNow Consultation


About The Author

Vikash Agrawal is the Practice Head for the Enterprise Application DevelopmentVikashKalyan Manthena, Web Developer at V-soft ConsultingKalyan Manthena is the Web Developer at V-Soft Consulting. He holds 5+ years of experience in web Application Development, web programming, Server technologies, Database Design, and Plug-in development. Apart from these, he also possesses great amount of skills in online tools like WordPress and frameworks like Bootstrap and Angular Materialize. Apart from these, he also holds good knowledge in MySQL, Manual Testing and ServiceNow.

 

Topics: Technology, ServiceNow, AngularJS

Get Weekly Updates

ServiceNow Implementation Guide