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 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:
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.
- Download VS Code, git Bash, Node.js
- Create new project folder – right click to open with VS Code
- Set up VS Code terminal to utilize bash
- 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!