Product documentation Docs
    • English
    • Deutsch
    • 日本語
    • 한국어
    • Français
  • More Sites
    • Now Community
    • Developer Site
    • Knowledge Base
    • Product Information
    • ServiceNow.com
    • Training
    • Customer Success Center
    • ServiceNow Support Videos
  • Log in

Product documentation

  • Home
How search works:
  • Punctuation and capital letters are ignored
  • Special characters like underscores (_) are removed
  • Known synonyms are applied
  • The most relevant topics (based on weighting and matching to search terms) are listed first in search results
Topics are ranked in search results by how closely they match your search terms
  • A match on the entire phrase you typed
  • A match on part of the phrase you typed
  • A match on ALL of the terms in the phrase you typed
  • A match on ANY of the terms in the phrase you typed

Note: Matches in titles are always highly ranked.

  • Release version
    Table of Contents
    • Now Platform capabilities
Table of Contents
Choose your release version
    Home Orlando Now Platform Capabilities Now Platform capabilities Agent Workspace Developing components for Workspace Add a component to UI Builder

    Add a component to UI Builder

    • Save as PDF Selected topic Topic & subtopics All topics in contents
    • Unsubscribe Log in to subscribe to topics and get notified when content changes.
    • Share this page

    Add a component to UI Builder

    Set properties in a configuration file to add your component to the UI Builder in your instance.

    Before you begin

    • Set up your environment
    • Set up your project
    • Develop a component

    Procedure

    1. In your project directory, open now-ui.json.
    2. Add the components.[component-name].uiBuilder object to the file. This object adds the component to the UI Builder.
      This object includes these key-value pairs:
      Key Data type Description
      components.[component-name].uiBuilder Object Object that adds the component to UI Builder.
      components.[component-name].uiBuilder.label String Required. The display name of the component in UI Builder.
      components.[component-name].uiBuilder.icon String Required. The name of the icon that appears in UI Builder. View the list of available icons on the Developer Portal.
      components.[component-name].uiBuilder.description String Required. A short description of the functionality of the component.
      {
        "components": {
          "card": {
            "uiBuilder": {
              "label" : "Card",
              "icon" : "chat-fill", 
              "description" : "A visual card format for a record.",
              "associatedTypes": ["global.core"]
            },
    3. If your component includes properties, add the components.[component-name].properties aray to the file. This adds the properties as configuration options for the component in UI Builder.
      This object includes these key-value pairs:
      Key Data type Description
      components.[component-name].properties Array <Object> An array of objects that includes all the properties of the component and all relevant information about those properties.
      components.[component-name].properties[].name String Name of the property in your component's code.
      components.[component-name].properties[].label String Display name of the property to display in UI Builder, if applicable.
      components.[component-name].properties[].description String A short description of what the property does or how to use it.
      components.[component-name].properties[].readOnly Boolean When true, prevents a user from configuring the property in UI Builder.

      Default: false.

      components.[component-name].properties[].required Boolean When true, the user must configure the property.

      Default: false.

      components.[component-name].properties[].defaultValue String The default value when the user does not provide one.
      components.[component-name].properties[].associatedTypes Array Describes where in the UI Builder toolbox the component appears. Value must be "global.core".
      components.[component-name].properties[].typeMetadata Object Extra configuration data that some data types require, such as reference properties and choice lists.
      {
        "components": {
          "properties": [
      		    {
      			"name": "backgroundColor",
      			"label": "Background Color",
      			"description": "Background Color",
      			"readOnly": false,
      			"required": false,
      			"defaultValue": "lightgray"
      		    },
      		    {
      		       "name": "cardType",
      			"label": "Type of card",
      			"description": "Type of card",
      			"readOnly": false,
      			"required": false,
      			"defaultValue": ""
      		    }
      			]
    4. Save the file.

    What to do next

    Deploy a component to an instance.
    Related concepts
    • Developing components for Workspace

    Tags:

    Feedback
    On this page

    Previous topic

    Next topic

    • Contact Us
    • Careers
    • Terms of Use
    • Privacy Statement
    • Sitemap
    • © ServiceNow. All rights reserved.

    Release version
    Choose your release version

      Add a component to UI Builder

      • Save as PDF Selected topic Topic & subtopics All topics in contents
      • Unsubscribe Log in to subscribe to topics and get notified when content changes.
      • Share this page

      Add a component to UI Builder

      Set properties in a configuration file to add your component to the UI Builder in your instance.

      Before you begin

      • Set up your environment
      • Set up your project
      • Develop a component

      Procedure

      1. In your project directory, open now-ui.json.
      2. Add the components.[component-name].uiBuilder object to the file. This object adds the component to the UI Builder.
        This object includes these key-value pairs:
        Key Data type Description
        components.[component-name].uiBuilder Object Object that adds the component to UI Builder.
        components.[component-name].uiBuilder.label String Required. The display name of the component in UI Builder.
        components.[component-name].uiBuilder.icon String Required. The name of the icon that appears in UI Builder. View the list of available icons on the Developer Portal.
        components.[component-name].uiBuilder.description String Required. A short description of the functionality of the component.
        {
          "components": {
            "card": {
              "uiBuilder": {
                "label" : "Card",
                "icon" : "chat-fill", 
                "description" : "A visual card format for a record.",
                "associatedTypes": ["global.core"]
              },
      3. If your component includes properties, add the components.[component-name].properties aray to the file. This adds the properties as configuration options for the component in UI Builder.
        This object includes these key-value pairs:
        Key Data type Description
        components.[component-name].properties Array <Object> An array of objects that includes all the properties of the component and all relevant information about those properties.
        components.[component-name].properties[].name String Name of the property in your component's code.
        components.[component-name].properties[].label String Display name of the property to display in UI Builder, if applicable.
        components.[component-name].properties[].description String A short description of what the property does or how to use it.
        components.[component-name].properties[].readOnly Boolean When true, prevents a user from configuring the property in UI Builder.

        Default: false.

        components.[component-name].properties[].required Boolean When true, the user must configure the property.

        Default: false.

        components.[component-name].properties[].defaultValue String The default value when the user does not provide one.
        components.[component-name].properties[].associatedTypes Array Describes where in the UI Builder toolbox the component appears. Value must be "global.core".
        components.[component-name].properties[].typeMetadata Object Extra configuration data that some data types require, such as reference properties and choice lists.
        {
          "components": {
            "properties": [
        		    {
        			"name": "backgroundColor",
        			"label": "Background Color",
        			"description": "Background Color",
        			"readOnly": false,
        			"required": false,
        			"defaultValue": "lightgray"
        		    },
        		    {
        		       "name": "cardType",
        			"label": "Type of card",
        			"description": "Type of card",
        			"readOnly": false,
        			"required": false,
        			"defaultValue": ""
        		    }
        			]
      4. Save the file.

      What to do next

      Deploy a component to an instance.
      Related concepts
      • Developing components for Workspace

      Tags:

      Feedback

          Share this page

          Got it! Feel free to add a comment
          To share your product suggestions, visit the Idea Portal.
          Please let us know how to improve this content

          Check any that apply

          To share your product suggestions, visit the Idea Portal.
          Confirm

          We were unable to find "Coaching" in Jakarta. Would you like to search instead?

          No Yes
          • Contact Us
          • Careers
          • Terms of Use
          • Privacy Statement
          • Sitemap
          • © ServiceNow. All rights reserved.

          Subscribe Subscribed Unsubscribe Last updated: Tags: January February March April May June July August September October November December No Results Found Versions Search preferences successfully updated My release version successfully updated My release version successfully deleted An error has occurred. Please try again later. You have been unsubscribed from all topics. You are now subscribed to and will receive notifications if any changes are made to this page. You have been unsubscribed from this content Thank you for your feedback. Form temporarily unavailable. Please try again or contact  docfeedback@servicenow.com  to submit your comments. The topic you requested does not exist in the release. You were redirected to a related topic instead. The available release versions for this topic are listed There is no specific version for this documentation. Explore products Click to go to the page. Release notes and upgrades Click to open the dropdown menu. Delete Remove No selected version Reset This field is required You are already subscribed to this topic Attach screenshot The file you uploaded exceeds the allowed file size of 20MB. Please try again with a smaller file. Please complete the reCAPTCHA step to attach a screenshot
          Log in to personalize your search results and subscribe to topics
          No, thanks Login