Controls

• Esc (zoom way out)
• Alt + click (zoom in)
• Spacebar (progress)
• Arrows (jump around)

Servicenow

Meetup

Welcome to the Developer Meetup!

Three rules

1. No "religious" wars
2. No recruiting
3. No sales pitches

Agenda

• Welcome
• Intros
• How to build a killer UX with a Service Portal Lab
• Networking
• Happy Hour at Green Mill

Welcome

Intros

Turn on your PDI

https://developer.servicenow.com

Download XML

CreateNotes.xml

Set Default Value on user field

1. Navigate to dictionary
2. x_snc_createnotes_note.user
3. default value: javascript:gs.getUserID();

Lab 0

Take a look at the custom Notes application that comes with your instance and create some demo data.

Ensure Notes have all fields set

Lab 1

Create a custom widget that displays the list of notes you created in Lab 0. You will also broadcast the sys_id of the selected note when clicked.

Open the Note List Widget

1. Launch the CreateNotes portal by go to CreateNotes > Portal.
2. In the portal, CTRL+Right Click somewhere in the Notes list widget box and choose Widget in Editor > This should launch the Service Portal widget editor in a new tab.

Update note list widget server script

1. Use the checkboxes at the top of the widget editor to enable the HTML Template, Client Script, and Server Script sections.
2. Add the following code to the Server Script field to allow us to populate the list of notes.

Server Script

View $scope.data

1. Reload the notes portal.
2. Hold CTRL+Right click on the widget.
3. Console.log $scope.data.

Populate the Notes in the Widget

1. Now that you are pulling the notes from the notes table, you’ll need to populate them on the page. Flip back over to your widget editor tab.
2. In the HTML Template section add the following.

HTML Template

Save the widget with this code, check the page /notes

Add ng-click to A tag

This allows your html to call the function in the client script.

Broadcast Selected Note

Edit List widget (client)

Lab Success Verification

click on the notes a few times

note the "Note ID: SYS_ID"

Lab 2.1

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

Open the Widget

1. Using the widget editor you already have open from the last tab, change the current widget to the Note body widget.
   
2. Like the notes list widget, this widget has already been added to the page, so you don’t need to do that

Add Event Listener

Save the widget. On your portal view the console as you click. You should see "Listener caught NoteID: .."

Get Content from server

Change the function in the client script to match the below. This will use c.server.get() to send an object containing our action and noteID to the server where we’ll use it to grab the note fields using GlideRecord.

Server Script

Now we’ll use the data passed to us in the form of the input object to get the GlideRecord data from the server by using the following Server Script code.

HTML Template

And lastly, we need somewhere to show that data in the widget, so we’ll populate a panel through adding the following to the HTML Template.

Lets make this pretty

Save the Widget

Lab Success Verification

When you click a note, it loads on the right.

Lab 2.2

Configure the widget that shows the content of the selected note to allow you to update the note. For this application the note will automatically update as you type

Update the Note from Widget

The first thing we need to do is trigger an update from the input and textarea fields by adding the highlighted attributes to those elements.

Client Script

Now that the input and textarea elements will trigger something when they change, we need to add a client side function that will run when triggered by the field changes. Add the following function to the Client Script field after line 13.

Server Script

Now we need to update the Server Script so notes changes get written to the server. Add the highlighted section to the Server Script.

Save the widget

Lab Success Verification

Test by going back to your portal tab and refreshing the page. Click on a note, change the title, wait a couple of seconds, and then refresh the page and see if the title in the list has changed.

Lab 3.1

Edit both widgets so that when you change the title in the note body widget, the new title gets pushed into the note list widget without a refresh.

Edit Body widget (server)

After the note is updated, we’ll want to return the title back from the server to the client, so add the highlighted portion of the following script to the Server Script field.

Edit Body widget (client)

Now we need to take that value and broadcast it to the other widget. Add the highlighted portion to the c.updateNote() function in the Client Script field.

Edit List widget (client)

Now we need to listen for the broadcasted updateTitle event and update the title on the page by adding the following.

Edit List widget (client)

You’ll notice that our event listener isn’t actually doing anything here. Our problem is that we don’t have anything that tells us which note to update. In order to fix that, we’re going to populate a variable with the position in the notes array of the note that was clicked. Add the highlighted portions to the Client Script field.

Lab Success Verification

Test by going back to your portal tab and refreshing the page. Click on a note, change the title, wait a couple of seconds, and then refresh the page and see if the title in the list has changed.

Lab 3.2

Edit both widgets so that when you change the title in the note body widget, the new title gets pushed into the note list widget without a refresh.

Edit List widget (HTML)

All we need to do to add a filter is add an input box and reference it in the ngRepeat. Add the highlighted portions to the HTML Template field.

Save the widget

Lab Success Verification

You should be able to filter the notes by typing in the Filter field.

Lab 4.1

So far we’ve added the ability to load your list of notes from the database and edit those notes, but what if you want to add a new note. Add a button that allows you to create a new note from our app.

Edit List widget (HTML)

We need to add a button to the UI to trigger the new note creation. We’ll add a button with a glyphicon to the HTML. Add the highlighted text to the panel-header part of the HTML Template

Edit List widget (CSS)

Now we want to add a bit of styling to the title to make everything look a little better. Check the checkbox next to the CSS – SCSS option to add a fourth column to the widget editor.

Edit List widget (Client)

In the Client Script portion of the widget editor add the following function, but before the closing curly brace. This is going to call the server side code, tell it we’re creating a new note and then get back information about the new note

Edit List widget (Server)

Now we need to add some code to the server side script to create a new note. Add the following code before the closing curly brace in the Server Script field. This will create the new note and return the title, note, and sys_id to the client.

Lab Success Verification

Go back to the CreateNotes portal, refresh the page, and click the New button. You should see a new note show up in the list and be available to edit on the right.

Lab 4.2

Add a button to the note editor that triggers a delete of the note record.

Edit Body widget (HTML)

First we need to add a delete button. Add the highlighted lines to the HTML Template field.

Edit Body widget (Client)

Now we need to create the client side function that gets triggered by the new button added in the last step. Paste the following before the c.autoExpand function.

Edit Body widget (Server)

Now we need to add a few lines to the Server Script field that will delete the record on the server side. We already have the GlideRecord call setup, so we just need to add the highlighted text.

Edit List widget (Client)

The note is already being removed from the DB, but now we need to remove it from the Note list widget. Add the following code before the last curly brace.

Lab Success Verification

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