{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":2077,"path":"application-development/custom-components.md","title":"Create custom components using ServiceNow CLI","bundle":null,"doc_type":null,"release":"australia","body":"\n# Create custom components using ServiceNow CLI\n\nDevelop custom components using the Next Experience UI Framework and the ui-component extension.\n\nComponents 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.\n\nTo see the Next Experience Design System library, visit the [ServiceNow® Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/components%3F%26query=%26order_by=nameAsc%26limit=120%26offset=0%26categories%5B%5D=uib_component%26categories%5B%5D=uib_macroponent-component%26categories%5B%5D=uib_facades).\n\n## Benefits of creating custom components\n\nDeveloping custom components lets you:\n\n-   Personalize a UI according to your agent, customer, and company needs.\n-   Make your employees more effective and reduce context switching with quick access to important data and information.\n-   Accommodate your company's unique omni-channel environment using APIs to consolidate your data.\n\nFor 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](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/ui-framework/api-reference/effect-http). You can also query platform data using GraphQL by creating a custom schema. For more information, see [Scripted GraphQL](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/api-reference/web-services/scripted-graph-ql.md).\n\n## What to know before you begin\n\nBefore you start designing and building your component, make sure you have:\n\n-   Some general knowledge of web component concepts, development, and design.\n-   JavaScript knowledge to define the component behavior.\n-   Knowledge of Node Package Manager \\(npm\\).\n-   The most recent version of Node.js installed on your local machine. For more information, see, [Node.js](https://nodejs.org).\n-   The ServiceNow CLI installed on your machine.\n\n## Next Experience UI Framework\n\nThe 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:\n\n-   Create a single component to use in multiple places across your applications.\n-   Encapsulate the component's scope to prevent conflicts with other code.\n-   Add properties, slots, and actions to your component, allowing users to customize the component every time they use it in a Workspace.\n\nFor more information, see the [ServiceNow® Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/ui-framework/getting-started/introduction).\n\n## ui-component extension and development flow\n\nThe 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:\n\n-   Create the set of files required to develop a component, or project scaffolding.\n-   Start a local development server to test your component.\n-   Build a component project and deploy it to a ServiceNow instance.\n\nFor more information, see the [ServiceNow® Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/getting-started).\n\n## Application scope\n\nWhen 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](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/c_ApplicationScope.md).\n\nWhen reserving an application scope, follow these requirements:\n\n-   Maximum: 18 characters.\n\n-   Case: snake case.\n\n-   Format: `x_customerprefix_componentname`, where:\n    -   `customerprefix` is the value in the **glide.appcreator.company.code** system property on your instance.\n    -   `componentname` is the value provided in the component's `name` parameter when you created the project.\n\nIf you do not provide an application scope when creating your component project, the Now CLI creates one for you.\n\nAlternatively, you can add a value to the `scopeName` parameter in the `now-ui.json` file.\n\n## Reference guide\n\nTo see the Now CLI reference guide, visit the [Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/getting-started).\n\n-   **[Develop a component for Virtual Agent](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/va-components.md)**  \nCreate a custom Virtual Agent component to gather input or display information in the Virtual Agent client interface.\n-   **[Add a component to Agent Workspace](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/workspace-component.md)**  \nUse custom components to create a custom Workspace interface to fulfill the specific need of your company's agents.\n\n**Parent Topic:**[Builder library](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/builder-library-table.md)\n\n"}}