Sign Up

Widget Development

Use sn-scriptsync for Service Portal widget development with live CSS preview and instant updates.

sn-scriptsync has special features for Service Portal widget development.

Opening a Widget

Open a widget in the widget editor (try /spw creator):

Widget search

Click the save button to sync to VS Code:

sn-scriptsync button in widget editor

Widget File Structure

In VS Code, widgets are organized differently:

Widget files in VS Code

  1. Folder - Created with the widget name inside sp_widget folder
  2. Multiple files - Each field becomes a file (e.g., template.html, client_script.js, server_script.js, css.scss)
  3. _test_urls.txt - Sample URLs where the widget is rendered (you can add your own)

Live Development

CTRL-Click (CMD-Click on Mac) a URL in _test_urls.txt to open the widget in a browser:

Widget development

Script Changes

Edit client_script.js and save. For example, change:

this.showFilter = true;

The page refreshes automatically and shows your changes.

Live CSS Updates

Open css.scss with both VS Code and browser visible. As you type CSS changes, they apply instantly without saving:

Instant updated CSS

This makes CSS development much faster - see changes in real-time as you type!

Summary

sn-scriptsync transforms widget development:

  • Edit in VS Code with full IDE features
  • Automatic sync on save for scripts
  • Real-time CSS preview without saving
  • Test URLs for quick access to rendered widgets