Components and their properties in UI Builder

What a component really is

You have already placed a Heading and a Record List on a page. It felt like drawing them, but something else was going on. Nobody at ServiceNow drew your heading. Someone built the Heading component once, tested it, and packaged it. When you dragged it onto the stage, you placed a copy of that finished piece and filled in its settings.

This is the most useful idea in this whole module. A component has two sides:

• The component itself, built once by ServiceNow or by a developer. It decides what the piece can do and which settings it offers.
• Each copy you place on a page, called an instance. Every instance has its own values for those settings, and changing one never affects another.

That is why UI Builder is fast. You are not writing HTML and CSS for a button every time you need one. You pick a button that already works, looks right in both light and dark themes, and is accessible to screen readers, and you only decide what it says and how it should behave.

Where components come from

UI Builder comes with a large library of components made by ServiceNow, and the same ones are used across ServiceNow’s own workspaces. You add them from the Content panel on the left of the editor, where you can browse or search the list and drop a component onto the page.

These are the ones you will use most often while you learn:

Component	What it is for	Properties you will change most
Heading	A title for a page or a section	The text, and its level (main title or a smaller section heading)
Stylized text	A line or paragraph of text	The text itself
Button	An action the user can click	Label, variant, icon, disabled
Image	A picture, such as a logo	The image source and its alternative text
Record List	A list of records, as you built in the last module	Through its List Controller: the table and the fixed filter

Under the hood, every one of these is a web component following ServiceNow’s design system, called HorizonHorizon Design SystemServiceNow's design system for Next Experience: the shared look, rules and ready-made components that UI Builder pages are built from.Learn more →. You do not need to know how they are built to use them. That only matters when you build your own in the Advanced module.

Properties come in different shapes

Every property changes one thing about one instance, but the control you use to change it depends on the kind of value it needs. Once you recognise the shapes, a component you have never seen before stops being scary.

Kind of property	What you see on the Configure tab	Example
Text	A text box	A button’s label, a heading’s text
True or false	A toggle switch	Whether a button is disabled
Choice	A dropdown with fixed options	A button’s variant: Primary, Secondary and so on
Number	A box that only takes numbers	How many records a list shows per page
Picker	A button that opens a chooser	An icon, an image or a colour
Data or object	A larger editor, often JSON	A list of options for a dropdown, or chart data

The first four are where you will spend most of your time. The last kind looks intimidating, but it is just a structured value, and you will usually fill it from data rather than typing it.

Press Play to watch a single Button go from its defaults to a finished action, and then see what happens when you add a second one.

1. Add
2. Label
3. Variant
4. Icon
5. Disabled
6. Second copy

Button

1. Step 1 of 7 · Add

   Drop a Button onto the page

   You add a Button from the component list. It arrives with default values for every property, so it already works, it just says something generic like "Button". UI Builder names this copy Button 1, with the ID button_1.

   Component

   Button 1 (button_1)

   Label

   Button

   Variant

   Primary

   Icon

   (none)

   Disabled

   false

2. Step 2 of 7 · Label

   Change the Label

   The Label is a text property. You type "Create incident" into it, and the button on the stage updates as you type. This is a static value: it says exactly what you typed, for every user, every time.

   Component

   Button 1 (button_1)

   Label

   Create incident

   Variant

   Primary

   Icon

   (none)

   Disabled

   false

3. Step 3 of 7 · Variant

   Pick a Variant

   The Variant is a choice property. You can only pick from the options the component offers, such as Primary, Secondary or Tertiary. Primary is the strong, filled button for the main action on a screen, so you keep it for this one.

   Component

   Button 1 (button_1)

   Label

   Create incident

   Variant

   Primary (kept)

   Icon

   (none)

   Disabled

   false

4. Step 4 of 7 · Icon

   Add an Icon

   The Icon property opens a picker instead of a text box. You choose a plus icon, and it appears next to the label. Different kinds of properties get different controls, but they all do the same job: change one thing about this one button.

   Component

   Button 1 (button_1)

   Label

   Create incident

   Variant

   Primary

   Icon

   plus

   Disabled

   false

5. Step 5 of 7 · Disabled

   Try the Disabled toggle

   Disabled is a true/false property, shown as a toggle. Switch it on and the button greys out and stops responding to clicks. You switch it back off. Later, you will learn to bind a property like this to data, so the button disables itself only when it should.

   Component

   Button 1 (button_1)

   Label

   Create incident

   Variant

   Primary

   Icon

   plus

   Disabled

   false (tried true, then back)

6. Step 6 of 7 · Second copy

   Add a second Button

   You drop another Button onto the page. It is a brand new copy, Button 2, with its own default values. Changing Button 2 never touches Button 1. Same component, two separate instances, each with its own properties.

   Component

   Button 2 (button_2)

   Label

   Button

   Variant

   Primary

   Icon

   (none)

   Disabled

   false

7. Step 7 of 7 · Second copy

   Make it a quieter, secondary action

   You set Button 2's Label to "Export" and its Variant to Secondary, so it looks less important than Create incident. Button 1 still has exactly the settings you gave it.

   Component

   Button 2 (button_2)

   Label

   Export

   Variant

   Secondary

   Icon

   (none)

   Disabled

   false

← Back▶ PlayNext →

Every instance is separate

The simulator ended with two Buttons on the same page. UI Builder gave them different names and IDs, Button 1 (button_1) and Button 2 (button_2), and the Content panel lists them as two separate entries.

This is why the name at the top of the configuration panel matters so much. Most mistakes made by beginners in UI Builder are changes made to the wrong instance: the right property on the wrong button. Before you change anything, glance at the name of the selected component, exactly as you learned in the editor tour.

Static values and bound values

Everything you have set so far was a static value: you typed it in, and it stays exactly that for every user, every record and every visit. “Create incident” will always say “Create incident”. For a lot of properties, that is exactly right.

But many properties need to be different depending on who is looking, which record is open or what just happened on the page. A heading that greets the user by name. A number showing how many incidents are waiting. A Resolve button that should only be clickable while the record is still open. You cannot type any of these in once, because the right answer keeps changing.

For these, you bind the property to data instead. Hover over a property on the Configure tab and you will see an option to bind data. A bound property no longer holds a fixed value. It reads its value from somewhere else, such as a data resourceData resourceSomething you add to a UI Builder page to fetch data, such as a list of records, so components can show it.Learn more → that fetched records, a value the page is remembering, or details about the logged-in user, and it updates on its own when that data changes.

This is called data bindingData bindingConnecting a component property to data, so its value comes from records, page state or the logged-in user instead of being typed in.Learn more →, and it is what turns a page of fixed text into a real application. You will learn it properly, with all its options, in the Data and State module. For now, just get into the habit of asking one question for every property you set: should this ever be different for someone else? If the answer is yes, it needs to be bound.

Components inside components

Some components are made to hold other components. A container groups a few components together, and others split the page into columns or tabs, each holding its own content.

When you put a component inside another, the Content panel shows it indented under its parent, like files inside a folder. The parent decides where its children sit on the page, and if you delete or move the parent, the children go with it. Arranging components like this is called layout, and it is the whole subject of the next lesson.

What you cannot change

A component only lets you change what its builder chose to expose as a property, just like the air conditioner remote. If the Button has no property for an animated border, there is no hidden setting that adds one.

When you hit this wall, you have three honest options, in this order:

1. Check the Styles tab. Many visual changes, such as spacing, size and background, live there rather than in properties.
2. Look for a different component. The library is large, and another component may already do what you want.
3. Build your own. When nothing fits, developers create custom components with Now CLI. That is an advanced skill, covered in the last module of this course.

What you should never do is try to edit the code behind a ServiceNow component. It is protected for a reason: the same component runs in many of ServiceNow’s own workspaces, and upgrades would overwrite your change anyway.

See it in your instance

1. Open UI Builder in your PDIPDI (Personal Developer Instance)A free ServiceNow instance you get from developer.servicenow.com to practise on safely.Learn more → and open the My open incidents page you built in the previous lesson.
2. In the Content panel, add a Button below the Heading.
3. On the Configure tab, change its label, pick a different variant and choose an icon. Watch the stage update as you go.
4. Switch the disabled toggle on and off, and notice the button grey out.
5. Add a second Button. Check that the Content panel shows two separate entries, and that changing one leaves the other untouched.
6. Hover over the label property and find the option to bind data. Do not bind anything yet, just know where it is.
7. Delete both buttons, or close the page without saving, so your challenge page stays as you built it.

Practice: type it in, or bind it to data?

PracticeType it in, or bind it to data?

For each property, decide whether a value you type once is enough (static), or whether it must come from data so it can be different for different users, records or moments (bound).

Static value0

Bound to data0

1. The label on a button that always reads "Create incident".

   Static valueBound to data

   Answer: Static value. The words never change, whoever opens the page. Typing them in once is exactly right.

2. A heading that greets the person viewing the page: "Welcome back, Priya".

   Static valueBound to data

   Answer: Bound to data. Priya should see her name and Rahul should see his. Type "Priya" in and everyone is greeted as Priya. The name must come from the logged-in user.

3. A number showing how many open incidents the agent has right now.

   Static valueBound to data

   Answer: Bound to data. The count changes all day and differs for each agent. It has to come from a data resource that counts the records.

4. The page title at the top of a team dashboard: "Network team overview".

   Static valueBound to data

   Answer: Static value. If the page is only ever for the Network team, the title is fixed text. (If one page served many teams, you would bind it instead.)

5. A "Resolve" button that should only be clickable while the incident is still open.

   Static valueBound to data

   Answer: Bound to data. The Disabled property must follow the record's state. A fixed true or false would be wrong for half the records.

6. The alt text on the company logo image, "Acme Corp logo".

   Static valueBound to data

   Answer: Static value. The logo and its description are the same for everyone, so a typed value is fine.

7. The short description shown at the top of a record page.

   Static valueBound to data

   Answer: Bound to data. Every record has a different short description. The heading has to read it from the record that is open.

8. The variant (Primary or Secondary) of the main "Save" button on a form.

   Static valueBound to data

   Answer: Static value. The main action always looks like the main action. You pick Primary once and leave it.

Try again

What’s next

You now know what a component really is, how properties work, when a value should be bound to data instead of typed in, and what to do when a component cannot do what you need. In the next lesson, Layouts: columns, flex and containers, you will arrange components on the page so it looks good on every screen size.