Personal Developer Instances and Components

#Orlando Release , #Now Experience , #User Experience , #Framework

Andrew Barnes

2 minute read

If you are trying to build your first component on a personal developer instance(PDI), you will run into some issues. ServiceNow is aware of the problems, and we will have them fixed up for you. In the meantime, here are the workarounds.

Component Building for PDIs

The company code for PDIs are numbered, and web components can’t start with numbers. The now-cli automatically inserts your scope name into the component name, thus causing the issue. We will make edits to two files in your component project and then one inside ServiceNow directly.

Given Scope: 8321 and component: hello-world

In the 8321-hello-world\index.js file edit: createCustomElement('8321-hello-world', { to be createCustomElement('x-8321-hello-world', {

In the example\element.js file edit: el.innerHTML =<8321-hello-world>;

to be el.innerHTML =;

After you now-cli develop and then now-cli deploy navigate to the sys_ux_lib_component table and edit the tag filed from: 8321-hello-world to x-8321-hello-world.

Adding Component to UI Builder

The docs currently are leaving out part of the instructions you need to leverage your component via UI Builder. Below you will find the missing line, which adds the associateType.

{
  "components": {
    "card": {
      "uiBuilder": {
        "associatedTypes": ["global.core"],
        "label" : "Card",
        "icon" : "chat-fill", 
        "description" : "A visual card format for a record."
      },

These steps should allow for the local build and testing, and deployment of your new component to your personal developer instance. You do not need to perform these steps for your companies instances. Happy Component building!

Comments