Create custom components using ServiceNow CLI

  • Release version: Xanadu
  • Updated August 1, 2024
  • 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 reusable UI components using the Next Experience UI Framework and theui-componentextension in the ServiceNow CLI. Custom components allow you to tailor user interfaces to better meet the needs of agents, customers, and your company by providing quick access to important data and consolidating information from multiple channels.

    Show full answer Show less

    The Next Experience Design System provides a library of customizable components, but when those do not fit your requirements, you can build your own. These components integrate with platform data using APIs such as the Http Effect API and can leverage custom GraphQL schemas for advanced data queries.

    Key Features

    • Next Experience UI Framework: A JavaScript framework to create encapsulated, reusable web components with customizable properties, slots, and actions for use across multiple applications and Workspaces.
    • ui-component extension: An extension to the ServiceNow CLI that scaffolds component projects, runs local development servers for testing, builds component projects, and deploys them to ServiceNow instances.
    • Application scope management: Components deploy into scoped applications to avoid naming conflicts. Scopes follow specific naming conventions (snake case, max 18 characters, prefix based on company code).
    • Local development environment setup: Requires Node.js, npm, and the ui-component extension installed locally to enable code development, testing, and deployment.
    • Proxy server support: Allows routing CLI requests through a proxy server to define separate data sources for your component development.
    • Virtual Agent and Agent Workspace integration: Custom components can be created specifically for Virtual Agent interfaces or to tailor Agent Workspace experiences to company needs.

    What You Can Expect

    • Personalized and reusable UI components that improve agent and customer interactions by providing tailored data views and functionality.
    • Reduced context switching and enhanced productivity through quick access to relevant information consolidated from omni-channel data sources.
    • Streamlined development process with CLI tools that generate project scaffolding, enable local testing, and facilitate deployment to your instance.
    • Scoped deployment ensuring that your custom components coexist safely with other applications and components in your ServiceNow environment.
    • Flexibility to extend standard UI with components that specifically meet your unique business requirements, including integration with Virtual Agent and Agent Workspace.

    Getting Started

    Before building components, ensure you have foundational knowledge of web components, JavaScript, and npm. Install the latest Node.js and the ServiceNow CLI with the ui-component extension. Set up your project by creating the component scaffold and defining your application scope. Use the local development server to test your components before deploying them to your ServiceNow instance.

    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.

    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. For more information, see Change a component's application scope.

    Reference guide

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