Widget Development

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

Opening a Widget

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

Click the save button to sync to VS Code:

Widget File Structure

In VS Code, widgets are organized differently:

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:

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:

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