VS Code ScriptSync for ServiceNow
Easy Integration from ServiceNow to VS Code to be able to script in a full fledged editor, without any configuration.
Important 3.0 update
In August 2023 the 3.0 update is released. This update requieres a resync of your file. It is recommended to delete all artefacts save via the 2.x version
Reason is that this vesion changes the way the files are stored. Files are now stored in the stucture:
instancename\scopename\tablename\recordname.field.extension
Tables like sp_widget are stored as:
instancename\scopename\tablename\recordname\field.extension
In the scriptsync view, available in the left pane you can now pull in all artefacts fron the current scope! This also can show your artefacts in a virtuak way, with "Related List" Please let me know if you exoerience issues, preferable via a GitHub Issue.
YouTube quick 3.0 demo (August 2023)
SN Utils
Requires the latest version of SN Utils, links via: arnoudkooi.com
In case of issues, always check for the latest version of both the browser and VS Code extension, and update if needed!
Setup
After installing both this extension and the browser extension, open a folder in VS Code and enable scriptsync in VS Code.
Setting folder
In the settings page you can enter a default file path. When this folder is opened as workspace, the service is automatically started. Default value for path: ~/Documents/sn-scriptsync
Manual start/stop
The ScriptSync service can be manually started or stopped by clicking the Statusbar text in the bottom of the window.
Enable in SN Utils
From the browser ScriptSync must be enabled once, by opening the popup and in the settings tab enable the checkbox
Usage
While using, be sure to keep the helper tab open. This will show logging and acts as a communication channel between ServiceNow and VS Code. This will be automaticly opened when clicking a scriptsync button in your instance.
Forms
After activating, in forms for appropriate fields, such as script, css and html a small save button will display.
Clicking it will save the current field value direct to the filesystem and open it in VS Code.
In VS Code the structure for the file will be: instance/table/fieldname^scriptname^sys_id.extension
Saving it in VS Code, will save it back to the instance.
Widgets
The workflow for ServicePortal widgets is shown in the animated gif above. From the widget editor click on the save button. This will create all the relevant fields as files on the filesystem, in a folder with the name of the widget. In a subfolder the angular ng-templates will be placed.
Besides that a file test_urls.txt is created. In this page you can add your own urls. When saving a file, ScriptSync will refresh the browser pages that match that URL, enabling live preview.
Widget SCSS can be live edited, each change can immediate be previewed in the browser. See animation below.
Studio integration
In studio you can click Link VS Code via sn-scriptsync.
It will show you the tree of artefacts in your app and all the scriptable fields.
When clicking an field, it will be pulled from the server. If the file is already open, it will switch to that window.
This is an alterbative to clicking each individual button in the platform. SP widgets are not jet supported at this point.
Note this feature is in beta.
Intellisense
Basic inteliisense is added to autocomplete the ServiceNow API's and functions.
ESLint
I recommend installing ESLint and the ESLint ServiceNow plugin. This will do some basic code checks.
FAQs
I'm using <script> tags in a widget HTML template, and they do not sync to my instance properly. How can I resolve this?
Solution (See #24): In your ServiceNow instance, set the following system property:
glide.rest.sanitize_request_input=false(This may also apply to UI Macro's and other places where tags get escaped)
I get an error when using in Safari: "User Not Authenticated"
Solution Disable "User Not Authenticated" in Safari Privacy settings
sn-scriptsync does not work in Brave browser
Solution Shield down your instance in Brave browser
Issues
Please report an issue on GitHub if you experience problems, or have a feature request.
Warranty
This tool comes as is with no warranty. Not allowed to copy or republish this extension or it's code.