ServiceNow Components not only can be used for your workspace development, but you can use existing component source code to change or extend functionality beyond provided component parameters, even for some undocumented components.

Click here to learn how to modify customer hidden classic ServiceNow application files.

Similar to Service Portal widgets, SN Components are read only and cannot be customized. You need to make a copy first. However, you will not find human readable source code anywhere in ServiceNow and you cannot just press ‘Copy’ button to make it work.

Note: not all components can be modified at this time because not all dependencies are available yet, however it is a good tool to browse and learn how Seismic is implemented.

If the component is documented, source code can be installed via NPM install, if not, you will need to utilize Chrome developer tools by having ‘Enable JavaScript source maps’ enabled via settings and by opening any workspace where component source code is executed.

If you open the source code for chrome.jsdbx, you see that source map was detected:

Doing CTRL+F search for ‘sourceMappingURL’ you will find the name and the link for the source map file:

For example: /scripts/@servicenow/now-button/now-button.min.js.map or /scripts/@servicenow/now-record-common/now-record-common.min.js.map

Download it and use any source map browser (like this) to find the src folder and copy required source code for the component. Usually source files with a component code has @seismicElement declaration.

Going forward you need to set up your development environment. More info on SN Docs here.

1. Download VS Code, git Bash, Node.js
2. Create new project folder – right click to open with VS Code
3. Set up VS Code terminal to utilize bash
4. Run following commands:

npm install --global @servicenow/cli@orlando

now-cli login --host https://myinstance.service-now.com --method basic --username username --password password

now-cli project --name @servicenow_think/customize-components

npm install

now-cli develop --open

You should have your component running live by now.

Copy the source code from the map file and required dependencies (this can get tricky). Make sure declarations and names match in your files.

Change element name in the source code as well:

For POC purposes, add console.log statement on click and hardcode the button label in the source code:

Test Component locally:

Now register the component to UI Builder via now-ui.json:

Deploy the component to your instance:

now-cli deploy --open

It should appear in UI builder:

Add the component, save and activate the workspace page.

That’s it, it is possible to customize anything. Don’t forget to follow customization best practices!