How do I do this in UI Builder? What are the best components?

[Jacob Saaby Nie]

Hi everyone 🙂

So - new to UI Builder. Doing an asset management experience for our asset team (Yes, I know of the existing workspace).

One of the things I find confusing as a UIB beginner, is the amount of components and what they do. So I need a little help with that.

So referring to the screenshot:

1. I want to be able to enter a string, and then find the corresponding asset
   1. Which input field is most suited for this?
2. When the asset is found, I'd like for that asset to be added to a list
   1. This list will preferably be empty to begin with, and will only have the assets added that I find
   2. Must be able to show a couple of custom columns
   3. Which component type is best suited for this?
3. I would like for some kind of data window to show up, showing data from the asset I'm either clicking on or hovering over
   1. Which component type is best suited for this?
4. I would like buttons to show up per record and per audience
   1. E.g. if our IT shops are in there, they get one set of buttons
   2. If our warehouse guys are in there, they get another set of buttons
   3. If our asset manager is in there, she gets another set of buttons
   4. Preferably the buttons can be conditional, so if the asset is in a certain state, there's no need to present a button for that state

Can you help me out by pointing me in the right directiion?

[danmjunqueira]

Absolutely — UI Builder can be a lot at first, but you’re asking all the right questions. Below is a step-by-step breakdown tailored to your asset management experience, using the most appropriate components and logic for each part of your use case.

1. Enter a string to find the corresponding asset
Component: Input

Use a standard Input component to capture the search string. You can bind it to a state variable or data resource input.

How it works:

User enters text

On value change or button click, trigger a Data Resource (like a GlideRecord query) with a filter based on the input value

Retrieve the asset record

If you want immediate response as the user types, you can use an input event like "on change" or debounce the request using scripting.

2. Add the found asset to a list (initially empty)
Component: Data Table or Repeater (with client state)

Use a state variable (array) to store the list of found assets. When an asset is found, add it to the array and bind the table or repeater to that array.

How it works:

Initialize the state as an empty array

On search, push the found record to the state array

Bind the component to that state

Best component: Data Table (for structure and pagination)

3. Show custom columns
Component: Data Table

In the Data Table configuration, define which fields you want to display. You can include fields like Asset Tag, Model, Assigned To, Location, and any custom field.

4. Show data from the asset when clicking or hovering
Component: Record View or Panel

For click: Use a Record View component that displays record data based on the selected row in the table.

For hover: UI Builder doesn't natively support hover logic, so use click as a trigger unless you write a custom component.

How it works:

Use row click event to set a selected record

Bind the Record View component to the selected record

5. Show conditional buttons per record and per audience
Component: Button inside a Repeater or Data Table row actions

You can use role-based conditions and field-based conditions to show or hide buttons.

How it works:

Add buttons inside each row

Use expressions to check user roles (e.g., $user.hasRole("it_shop")) and asset state

Only render buttons if conditions are met

Best practice: Use client state or scripting to control visibility rather than trying to bind too many conditional checks directly in the component layout.

Summary of Recommended Components
Input → for search

Button (optional) → to trigger the search

State Variable → to hold the found assets list

Data Table → to show custom columns and dynamic list

Record View → to show details on click

Conditional Buttons → using expressions inside each row

[Jacob Saaby Nie]

Thank you, truly awesome answer 🙂 

---

@danmjunqueira wrote:

Best practice: Use client state or scripting to control visibility rather than trying to bind too many conditional checks directly in the component layout.

---

What does "use client state" mean in this instance? What's the approach?

[danmjunqueira]

In this context, "use client state" refers to managing component visibility (or behavior) in UI Builder using a client state parameter — instead of embedding complex conditional logic directly into the component's layout or visibility settings.

What is Client State in UI Builder?
Client state is a local data object (like a variable) that holds temporary values for the user interface during a session. It is not saved to the database but can be used to control UI logic.

Why you need to use it?
If you embed too many conditions directly into component bindings (e.g., {{$data.x == true && $data.y == 'something'}}), the layout becomes cluttered, harder to debug, and harder to scale.

Using client state keeps the layout clean and separates data logic from presentation logic.

Example Approach
Use Case:
You want to show a “Submit” button only if:

A checkbox is selected

A reference field is filled

The user role is "asset_admin"

1. Create a client state parameter
In UI Builder:

Go to Client State Parameters

Create showSubmitButton with default value false

2. Add a client script
Under Events → Page Scripts, add a client script like:

export default function onInputChange(inputs, state, data) {
const isChecked = data.checkbox === true;
const hasReference = !!data.asset_id;
const isAdmin = data.user_roles.includes("asset_admin");

state.showSubmitButton = isChecked && hasReference && isAdmin;
}

This script evaluates your condition and updates the client state.

3. Bind the visibility
On the “Submit” button component:

{{$client.showSubmitButton}}

Benefits
Improved performance: Fewer real-time bindings on the layout

Better debugging: You can console.log or trace logic easily

Separation of concerns: Layout only handles display; logic stays in script

So In resume...
"Use client state" means define UI-driven logic outside the layout using a reusable state variable. Control it via script logic, then bind your component visibility to that variable instead of writing complex expressions inline. This is a best practice for scalable and maintainable UI Builder apps.