Hands‑On with ServiceNow CLI: Building a Custom UI Component

[Swapna Abburi]

Recently, I attended a Montreal ServiceNow Community Meetup, where one of the sessions focused on building custom components using the ServiceNow CLI. The presentation immediately caught my attention and motivated me to explore this capability further to design and implement different solutions.

The ServiceNow CLI, when combined with the UI Component CLI Extension, is the primary tool for pro‑code development of Next Experience web components. It empowers developers to build, test, and deploy custom building blocks that extend the functionality of ServiceNow UI Builder, all from a local development environment.

As a first step in my exploration, I experimented with creating a custom UI Component using the ServiceNow CLI. In this article, I’m sharing the step‑by‑step setup and implementation details, along with a demo video, to help fellow community members get started and experience this powerful approach to UI development in ServiceNow.

---

Prerequisites

Before building custom UI components, ensure the following prerequisites are in place:

1. Node.js

   • As of today, Node.js v22 is supported by ServiceNow.
   • Be sure to downgrade the NPM version to 8.5.5, as specified on the ServiceNow Developer site.

2. ServiceNow CLI Application

   • Install the ServiceNow CLI application from the ServiceNow Store on your instance.

3. UI Component CLI Extension

   • This extension enables the creation and management of custom UI components using the CLI.

---

Building the Custom UI Component

Once all prerequisites are installed and configured, we are ready to start building the custom UI component.

For this exercise, I created a simple seasonal image component. Based on the current season, the page dynamically displays:

• A relevant seasonal image
• Corresponding text content

This example demonstrates how UI components can dynamically adapt their content and behavior while remaining lightweight and reusable.

I’ve covered the full implementation process in detail in the demo video linked below.

ServiceNow CLI Custom Component

---

High‑Level Steps

Below is an overview of the major steps involved:

1. Profile Configuration
   Configure a profile to enable a secure connection between the ServiceNow CLI and your instance.

2. Project Creation
   Generate the UI component project structure using the CLI.

3. Local Development
   Develop and test the UI component locally.

4. Deployment
   Deploy the component to the ServiceNow instance and add it to any experience using UI Builder.