Meetup Lab: Service Portal Killer UX — Build a Notes App

Build a full CRUD notes application in Service Portal. This lab covers list widgets, body widgets, event broadcasting, inline editing, filters, create, and delete.
This lab originally from the sndevs meetups repo and hosted on GitHub Pages.

Prep: Install the Update Set

1. Get your PDI at developer.servicenow.com
2. Download and install the CreateNotes XML update set
3. Set default value on x_snc_createnotes_note.user: javascript:gs.getUserID();

Lab 0: Explore the Notes App

Take a look at the custom Notes application and create some demo data. Make sure notes have all fields set.

Lab 1: Create Notes List Widget

Create a custom widget that displays the list of notes. Broadcast the sys_id of the selected note when clicked.

1. Launch the CreateNotes portal
2. CTRL+Right Click on the Notes List widget box → Widget in Editor
3. Enable HTML Template, Client Script, and Server Script sections

Server Script

Add code to query the notes table and return data to the client.

View $scope.data

Reload the portal. CTRL+Right click on the widget and inspect $scope.data to verify the server data is reaching the client.

HTML Template

Populate the notes onto the page:

Add ng-click

Broadcast Selected Note

Add the client script to broadcast the selected note’s ID:

Verify

Click on notes. You should see “Note ID: SYS_ID” in the console.

Lab 2.1: Configure Note Body Widget

Configure the widget that shows the content of the selected note.

1. Change the current widget to the Note Body widget
2. Add event listener for the broadcast:

Get Content from Server

Add client script to call c.server.get():

Server Script

Use the input object to get GlideRecord data:

HTML Template

Show the data in a panel:

Make it Pretty

Verify

Click a note — it should load on the right:

Lab 2.2: Auto-Save on Typing

Configure the body widget to auto-update notes as you type.

HTML Attributes

Add trigger attributes to input and textarea fields:

Client Script

Add function to run when fields change:

Server Script

Write changes back to the server:

Verify

Change a title, wait a few seconds, refresh. The title should persist.

Lab 3.1: Real-Time Title Updates

Edit both widgets so changing the title in the body updates the list widget without a refresh.

Body Widget Server Script

Return the updated title back to the client:

Body Widget Client Script

Broadcast the updated title:

List Widget Client Script

Listen for the broadcast and update the title:

Fix the note ID reference:

Lab 3.2: Add Filter

Add an input box to filter the notes list.

List Widget HTML Template

Verify

Typing in the filter field should filter the notes list.

Lab 4.1: Add New Note Button

Add a button that creates a new note.

List Widget HTML

CSS

Client Script

Call server side to create:

Server Script

Create the new note record:

Verify

Click the New button. A new note should appear in the list and be available for editing.

Lab 4.2: Delete Note

Add a delete button to the note editor.

Body Widget HTML

Body Widget Client Script

Body Widget Server Script

List Widget Client Script

Remove the note from the list:

Verify

Click a note, click delete. It should disappear from the screen and the list.