---
original_url: "https://jace.pro/blog/meetup-lab-service-portal-killer-ux-—-build-a-notes-app/"
format: markdown
ai_optimized: true
---

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

September 12, 2019 [servicenow ](/tags/servicenow/)[service-portal](/tags/service-portal/)

  Enable AI AnimationBuild 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](https://github.com/sndevs/meetups) and [hosted on GitHub Pages](https://sndevs.github.io/meetups/).*

## [Prep: Install the Update Set](#prep-install-the-update-set)

Get your PDI at [developer.servicenow.com](https://developer.servicenow.com)
- Download and install the CreateNotes XML update set
- Set default value on `x_snc_createnotes_note.user`: `javascript:gs.getUserID();`

## [Lab 0: Explore the Notes App](#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](#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.

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

### [Server Script](#server-script)

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

### [View $scope.data](#view-dollarscopedata)

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

### [HTML Template](#html-template)

Populate the notes onto the page:

### [Add ng-click](#add-ng-click)

### [Broadcast Selected Note](#broadcast-selected-note)

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

### [Verify](#verify)

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

## [Lab 2.1: Configure Note Body Widget](#lab-21-configure-note-body-widget)

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

- Change the current widget to the Note Body widget
- Add event listener for the broadcast:

### [Get Content from Server](#get-content-from-server)

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

### [Server Script](#server-script-1)

Use the input object to get GlideRecord data:

### [HTML Template](#html-template-1)

Show the data in a panel:

### [Make it Pretty](#make-it-pretty)

### [Verify](#verify-1)

Click a note — it should load on the right:

## [Lab 2.2: Auto-Save on Typing](#lab-22-auto-save-on-typing)

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

### [HTML Attributes](#html-attributes)

Add trigger attributes to input and textarea fields:

### [Client Script](#client-script)

Add function to run when fields change:

### [Server Script](#server-script-2)

Write changes back to the server:

### [Verify](#verify-2)

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

## [Lab 3.1: Real-Time Title Updates](#lab-31-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](#body-widget-server-script)

Return the updated title back to the client:

### [Body Widget Client Script](#body-widget-client-script)

Broadcast the updated title:

### [List Widget Client Script](#list-widget-client-script)

Listen for the broadcast and update the title:

Fix the note ID reference:

## [Lab 3.2: Add Filter](#lab-32-add-filter)

Add an input box to filter the notes list.

### [List Widget HTML Template](#list-widget-html-template)

### [Verify](#verify-3)

Typing in the filter field should filter the notes list.

## [Lab 4.1: Add New Note Button](#lab-41-add-new-note-button)

Add a button that creates a new note.

### [List Widget HTML](#list-widget-html)

### [CSS](#css)

### [Client Script](#client-script-1)

Call server side to create:

### [Server Script](#server-script-3)

Create the new note record:

### [Verify](#verify-4)

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

## [Lab 4.2: Delete Note](#lab-42-delete-note)

Add a delete button to the note editor.

### [Body Widget HTML](#body-widget-html)

### [Body Widget Client Script](#body-widget-client-script-1)

### [Body Widget Server Script](#body-widget-server-script-1)

### [List Widget Client Script](#list-widget-client-script-1)

Remove the note from the list:

### [Verify](#verify-5)

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

---
[View this page on GitHub](https://github.com/jacebenson/jace.pro/tree/main/./src/posts/2019/2019-09-12-meetup-sp-killer-ux-lab.md).

[Meetup Lab: Service Portal Killer UX — Build a Notes App](https://jace.pro/blog/meetup-lab-service-portal-killer-ux-%E2%80%94-build-a-notes-app/) [Jace Benson](https://jace.pro) ![Jace Benson](https://jace.pro/icon-512x512.png)

---

*This content is from Jace Benson's ServiceNow and tech blog at jace.pro*
*Original post: https://jace.pro/blog/meetup-lab-service-portal-killer-ux-—-build-a-notes-app/*