Angular Dart application in ServiceNow

Vineetha Rohra1 · ‎06-04-2020

This article explains how to 1) create, 2) build and 3) deploy an AngularDart application to ServiceNow.

Dart is a programming language developed by Google to build mobile, desktop, server, and web applications.

There are many Dart, Angular Dart tutorials and courses all over the internet, you can start learning from Dart and Angular Dart.

Create:

You will need to follow these steps to set up the environment on your local machine to be able to create Angular Dart projects.

Setup is pretty straight forward:

Install the Dart SDK which can be downloaded from here.
Install the Dart Code extension into VS Code - You can find it from the extensions list in VSCode or find it on the extensions marketplace.
Create and run your first app - There are various tutorials available online which you can refer and start building your application.

Build the application:

We will be using the dart2js and webdev tool to build the app. The webdev build command creates a deployable version of the angular dart application.

Here’s what happens when you use webdev with dart2js and the --output build option:

Deployable files appear under your app’s build/web directory.
dart2js compiles your app to JavaScript, saving the result in the file build/web/main.dart.js.

For more information, see the documentation for webdev.

Deploy the application to ServiceNow:

There are three basic steps need to be performed when deploying an Angular Dart application to ServiceNow:

Import .js and .css assets
Upload static images
Deploy the core HTML file

Import .js and .css assets

This is the key part of the deployment procedure since js bundle contains the entire logic of your application. Sometimes you may not have a .css file at all, you can package css into a js bundle.

Import your .js and .css assets into ServiceNow is to store them as Content Management Style Sheets:

Navigate to Content Management/Style Sheets
Create a new Stylesheet for each asset
Copy js/css code from your package files, save the Style Sheet

As a result, you should have two Style Sheets — one for js code and another one for css. Why Style Sheets? Because you can access the content (code) just by navigating to the following URL:

https://<instance-name>/<style-sheet-sys_id>.cssdbx

You can also serve .js code as a ServiceNow UI script (System UI -> UI Scripts), it works absolutely the same way like style sheets, just reference it as <UI_script_API_name>.jsdbx

Upload static images

Navigate to System UI/Images
Create a new record, upload the image
Provide the appropriate name for your image.

( This is very important: the image name should be the entire path to your image in a build folder).

Deploy the core HTML file

One of the options on how to deploy Index.html to ServiceNow is a UI page:

Create a UI page, set Direct to true
Copy content of Index.html
Remove <!doctype html> (UI page does not support it)
Add closing / to <link> tag
Update references to .css and .js files with the corresponding .cssdbx links
Save UI page

That’s it. Click the endpoint link to open the application.