Meetup Lab: Service Portal Advanced Widget Development

This lab covers advanced Service Portal widget development across 5 labs. Originally from CreatorCon (CCW1088).
This lab originally from the sndevs meetups repo and hosted on GitHub Pages.

Scoped app import: https://github.com/sndevs/CCW3956.git

Lab 1: Getting Started

Import the scoped app into Studio, then open the Service Portal designer at /$spd.do.

Lab 2: Using the Option Schema

Create a Card List Widget:

• Name: Card List Simple
• ID: card_list_simple

Open the widget editor, click the hamburger menu, then “Edit option schema”. Add:

Server Script

Type out server.js yourself:

CSS

Add style.css:

Client Script

Add client.js:

HTML Template

Add template.html:

Add to Playground

1. Open /$spd.do and find the Playground page
2. Add a container with a 3,9 split grid
3. Place the Simple List Widget in the left side

Configure Instance Options

Lab 3: Using SP Instance

Create an sp_instance extension table for more configurability.

Create a Table

Add a column (advanced view):

• Type: Reference
• Label: View
• Name: view
• Reference: UI View
• Reference qualifier: javascript:"sys_idIN" + new x_snc_reusable_wid.ListViewHelper().getViewsForList(current.table)

Create Script Include

Type out ListViewHelper.js:

Clone Widget

Clone “Card List Simple” → name it “Card List”, then open in platform view. Set:

• Data Table: Card List Instance
• Fields: Title, Table, View, Filter, Display Field

New Widget Templates

Type out the HTML template, server script, and client script:

Create a Service Portal Page

1. In Studio, create Application File → Service Portal Page
2. Page title: Incident Workspace, Page ID: iw
3. Add a [3 | 9] layout
4. Drag Card List to the left column
5. Configure: Table=Incident, Filter=active=true, Display field=Short Description, Title=Active Incidents, View=Mobile

Lab 4: Handling the Empty State

Widgets should provide an empty state that tips users off about configuration.

Show a Default Title

Add this to the client script:

Then use it to set an example:

Richer UX

Replace your client script with rich.client.js.txt. Then in the designer, delete the Card List widget and drag a fresh instance — you’ll see a much better preview:

Lab 5: Embedded Widgets and Directives

As widgets grow complex, break them into smaller components.

Create an Angular Provider:

1. Open Card List in the platform at /sp_widget_list.do
2. Find Angular Providers related list
3. Click New
4. Type: Directive, Name: workspaceCard, Script: directive.js

Pros: Keeps template close to directive code, reusable, passable scope parameters
Cons: Template isn’t cached, directive can get large