Visual Studio (VS) Code Integration in ServiceNow
With Elijah Aromola
In this article, we will be installing the ServiceNow extension for Visual Studio (VS) Code. The ServiceNow Extensions for the VS Code editor enables you to edit applications within your ServiceNow instance. To keep pace with the rapid speed of innovation, developers must be armed with the right tools that provide frictionless experiences and make work easier. The extension for Visual Studio Code allows developers to innovate on the Now Platform in the lightweight, extensible Visual Studio Code editor.
Installing Visual Studio Code Integration
First, we are going to navigate to Visual Studio and open up the extensions menu. We can search for ServiceNow, and we should see the ServiceNow Extension for VS Code a few items down in the search menu. We'll go ahead and click install. Once it finishes installing, you'll want to open up the palette menu. For Mac users, select command + shift + p. For Windows users, select ctrl + shift + p. We'll select the Now: Activate Now Extension and it should activate pretty quickly.
Setting Up your WorkSpace
Once activated, you'll go down to the bottom left-hand corner and click Setup Workspace. We already have a folder on the desktop for this, so we'll go ahead and click it and select Project Folder. Once that finishes, you should also see create project in the bottom left-hand corner. It's going to need a few pieces of information from you. First is your environment URL, then a username, and a password to authenticate if you're going to use basic authentication. We are going to navigate to our Personal Developer Instance (PDI), copy the URL, go back into VS Code, and paste it in. There are three different types of authentication, and we are going to be using basic for this example. We will then enter our username.
Once we're authenticated, we have to go ahead and select a project type so we can use store applications or custom applications. For this example, we already have a custom app that was created in the PDI. We will go ahead and click custom apps and select import existing. This is an employee request custom application that has been already configured on the PDI. After selecting this, we can view the different types of file types that we want to pull into our workspace. We will click OK, and the files will be downloaded in your workspace. You can see underneath our project folder, we have Employee Request and then we have a few different folders that get created, such as background script, scratch and source, and additional folders deep down in this hierarchy (reference video at 2:10).
Edit Code and Sync with your Environment
Now that the workspace is set up, one of the cool features that you can use this for is to edit code directly from your instance and then sync it back with your environment. We can open up our command palette (command + shift + p on a Mac or ctrl + shift + p on Windows) and type Now: where we will also see all the different types of things that we can do from our command palette. In this case, we're going to go ahead and create a new file. We're going to create a script include, and for this one, we'll just create a MyRequestUtils file.
Once we click OK we get our boilerplate script include code. From here we'll create a dummy function for the test (reference video at 3:05). We will save this file. Now we have this saved locally, but it hasn't synced with our environment.
We have two options at this point. In the bottom left-hand corner, you'll see Sync File and Sync Project. If we want to sync our entire project in custom map, we can do that, or we can just sync the single file. Going back to the command palette, we can also do it from here. We can search Now: Sync Current File or Current Project. For our example, we’ll click Sync Current File. In the lower right-hand corner, it lets us know the sync is complete We're now going to going to go ahead and navigate to our script includes module within our instance. We can see MyRequestUtils and it was created just now.
Creating a Change in Environment and Syncing it Back Locally
Another cool thing you can do is create changes in our environment and then sync them back locally. For this we will create another function (reference video at 4:08). Now let’s navigate back over to our Visual Studio Code, and we can see that we don't have our second function; we just have our initial test log function that was created. We will now go ahead and click sync file one more time, and it actually pulls in those changes that we created inside of our ServiceNow environment.
Another thing we can do is look up files. Let's say you don't want to create a script include or a client script directly from Visual Studio, but you already have a file in your custom app that you want to edit. We'll open up our command palette again and we'll search Now: Global File Search. From here, we can search for different files and pull them up, so we'll go back into our script includes, and this will pull back a list of all the scripting fluids that are inside of our environment. From here, we can pull any one of these script includes directly into our instance here, and we could edit them directly if we wanted to. For this example, we'll go ahead and click on call rotation > OK, and it pulls our code directly into our environment.
Selecting the Update Set You Want to Work Out
Another thing that you can do directly from Visual Studio Code is select the update set that you want to work out of. We will go ahead and open up our command palette again, and we can look for Now: Select Application Update Set. In this case, we only have our default one, but if you had more than one here, you can specify directly where you want to make the changes from in VS Code. For us, our change update is set to default.
Managing Conflict
Another cool feature of VS Code is how it manages conflicts with the same file, so we have the most updated version of our MyRequestUtilScript in VS Code. Let's say that we go to our environment and delete these two test logs (reference video at 6:30), and let's go ahead and save it. We have our empty script include and let's navigate back to VS Code. Now let's just try to sync the file one more time. Since we didn't have the most recent version when we attempted to sync this time, there's a conflict. What we can do is we can open the conflict in the bottom right pop up and it'll give us a breakdown of what the problem is. In this example, the local file in our environment doesn't have any of the code, but on the local version, we have our two log statements.
From here, we can go back up to the top and click sync current file again, and it'll give us an option — we can overwrite the server, or we can overwrite the local file. In this case, we'll go ahead and overwrite the server file so that we still have all that code. We see a notification pop up in the bottom right that reads, “Overwriting MyRequestUtils in the Server.” If we go back to our server file, we can see that it was updated and it has the most recent local version.
Running Background Scripts Directly from your Code Editor
One other really cool feature of this extension is the ability to run background scripts directly from your code editor. In our file hierarchy, we see background scripts and script.js — we'll go ahead and click on that. From here, we can directly write code and then test it in our environment without ever having to navigate back.
We'll just do a quick log statement here, click the run button up in the top right, and we get our print statement here. Note that this is not just limited to log statements. Anything you would normally run in a background script, including queries and checking data, you can do directly from VS Code. If you want to learn more about VS Code, you can navigate to the ServiceNow Documentation and it'll provide all the features and functions of this extension.
Did you find this Visual Studio (VS) Code Integration in ServiceNow article helpful? Are you ready to start your journey with ServiceNow? If you want to find out more information about GlideFast Consulting and our ServiceNow implementation services, you can reach out to us here.
About GlideFast Consulting
GlideFast is a ServiceNow Elite Partner and professional services firm that provides tailored solutions and professional services for ServiceNow implementations, integrations, managed support services, application development, and training. Reach out to our team here.