Create custom components using ServiceNow CLI

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Create custom components using ServiceNow CLI

    This guide explains how ServiceNow customers can develop custom UI components using the Next Experience UI Framework and theui-componentextension for the ServiceNow CLI. These custom components serve as reusable building blocks to create tailored user interfaces when the existing Next Experience Design System components do not meet specific business needs.

    Show full answer Show less

    Key Features

    • Custom Component Development: Build personalized components that align with your agents’, customers’, and company’s unique requirements.
    • Next Experience UI Framework: A JavaScript framework enabling the creation of reusable web components that encapsulate scope and support properties, slots, and actions for flexibility across Workspaces.
    • ServiceNow CLI with ui-component Extension: Provides scaffolding for component projects, local development server for testing, and commands to build and deploy components directly to your ServiceNow instance.
    • Data Integration: Access platform data via the HTTP Effect API or use GraphQL by creating custom schemas to integrate dynamic data into components.
    • Application Scope Management: Components deploy within a scoped application namespace. You can specify an application scope following ServiceNow’s naming conventions or let the CLI generate one automatically.

    Prerequisites

    • Familiarity with web component development concepts and JavaScript.
    • Node.js and Node Package Manager (npm) installed on your local machine.
    • ServiceNow CLI installed to use the ui-component extension and manage component lifecycle.

    Practical Use Cases

    • Create components that display specialized data such as SLA-related cases or active chat queues to improve agent efficiency and reduce context switching.
    • Develop custom components for Virtual Agent interfaces to gather user input or display information within chat interactions.
    • Enhance Agent Workspace with tailored components that address your company’s specific operational needs.

    Expected Outcomes

    By following this approach, ServiceNow customers can deliver highly customized user experiences that increase productivity, streamline workflows, and consolidate data across channels. Components built with the Next Experience UI Framework can be reused across applications, ensuring consistency and reducing development effort.

    Develop custom components using the Next Experience UI Framework and the ui-component extension.

    Components are reusable building blocks that you use to create a custom user interface. The Next Experience Design System comes with a set of customizable components that you can drag into your custom UI. Develop your own components if you can't find what you need in the Next Experience Design System library.

    To see the Next Experience Design System library, visit the ServiceNow® Developer Site.

    Benefits of creating custom components

    Developing custom components lets you:

    • Personalize a UI according to your agent, customer, and company needs.
    • Make your employees more effective and reduce context switching with quick access to important data and information.
    • Accommodate your company's unique omni-channel environment using APIs to consolidate your data.

    For example, you might want to create a component that displays the cases associated with an SLA, or that tracks the active chats in a particular queue. You can use the Next Experience UI Framework and the ui-component extension to develop the component you need, and access data from your platform using the Http Effect API. You can also query platform data using GraphQL by creating a custom schema. For more information, see Scripted GraphQL.

    What to know before you begin

    Before you start designing and building your component, make sure you have:

    • Some general knowledge of web component concepts, development, and design.
    • JavaScript knowledge to define the component behavior.
    • Knowledge of Node Package Manager (npm).
    • The most recent version of Node.js installed on your local machine. For more information, see, Node.js.
    • The ServiceNow CLI installed on your machine.

    Next Experience UI Framework

    The Next Experience UI Framework is a JavaScript framework that lets you extend your apps and build web components that are reusable throughout your applications. Using the Next Experience UI Framework lets you:

    • Create a single component to use in multiple places across your applications.
    • Encapsulate the component's scope to prevent conflicts with other code.
    • Add properties, slots, and actions to your component, allowing users to customize the component every time they use it in a Workspace.

    For more information, see the ServiceNow® Developer Site.

    ui-component extension and development flow

    The ui-component extension is an extension to the ServiceNow CLI that lets you develop custom components using the Next Experience UI Framework. With the ui-component extension, you can:

    • Create the set of files required to develop a component, or project scaffolding.
    • Start a local development server to test your component.
    • Build a component project and deploy it to a ServiceNow instance.

    For more information, see the ServiceNow® Developer Site.

    Application scope

    When you deploy a Next Experience UI Framework component, it deploys into a scoped application on the instance. You can provide an application scope for the component to use as a namespace identifier. Use the namespace identifier guidelines for application development on the instance. For more information, see Application scope.

    When reserving an application scope, follow these requirements:

    • Maximum: 18 characters.

    • Case: snake case.

    • Format: x_customerprefix_componentname, where:
      • customerprefix is the value in the glide.appcreator.company.code system property on your instance.
      • componentname is the value provided in the component's name parameter when you created the project.

    If you do not provide an application scope when creating your component project, the Now CLI creates one for you.

    Alternatively, you can add a value to the scopeName parameter in the now-ui.json file.

    Reference guide

    To see the Now CLI reference guide, visit the Developer Site.