- last edited on by
ServiceNow
ServiceNow offers a library of prebuilt components that can be used both as a base in UI builder, and some can even be used in a custom component like any other component. In this post, I'll do a step by step guide on adding a component to an existing custom component, as well as pushing it to our PDI. In this guide, I'm going to assume that you've already got the CLI set up and created a component using the project command. If you haven't gotten that setup, feel free to check out my guide on that here.
Starting off, lets find a component in the component library that we would like to add to our project. You can find a list of the NPM compatible components here. For this example I am going to use the select component. Under the component page we will see various documentation pieces associated with this component like it's properties. For our uses we will want to find the box that says "Available in NPM" in the upper right hand side of the screen. Inside this box there should be an NPM command that will install the package. See the image below.
We want to go back to our terminal with our component open, and run the command inside of the box. This command will install all the code needed for this component as a NPM package. When running it, you will likely see some warnings notifying you that various dependencies for this package are out of date, this is due to ServiceNow not being on the release version of Node and as such we get warnings about newer versions being available. Once the command has finished and says it has been installed properly, we will need to run npm install to update our dependencies again. Once we've updated our dependencies we can check our package.json file and look for the dependencies section and validate that '@servicenow/now-select' is present as seen in the image below.
Now that we have the component added to our project properly, we just need to import it and we can start using it! To import the component we simply need to add import '@servicenow/now-select'; to the top of our index.js file and hit save. Now we can either configure the code here in our development environment or we can utilize the playground on the component library page to change the code, and see the results in real time. For this I'm just going to grab the default code they give us and use that, but you can customize it as much as you like within the playground. Once the component has been added to your parent element and you deploy the component using snc ui-component develop --open you should see your configured ServiceNow component rendered on the screen!
Now that we have configured our custom component as needed we want to deploy it to our instance so we can use it on the platform. To do this, we will want to run snc ui-component deploy. Once you run that command you should hopefully get a line saying "Deployment to [Instance Name] was successful!" Once you get that output you will want to open Ui Builder on your instance and find your component listed there. See the image below. Once you've found your component from the list you can simply add it to your page and begin using it in Ui Builder!
Hopefully this little walk through helped explain the component library and how to leverage it's contents for your solutions! If you experienced any issues along this walkthrough feel free to checkout my post on the ServiceNow Command Line Interface where I go through the steps of setting up the CLI, creating your profile, creating a project, developing the project, and lastly deploying the project.
