Add a custom layout bundle to a UI Builder standard record page
- UpdatedAug 1, 2024
- 3 minutes to read
- Xanadu
- Create Workflows
Add playbook custom layout bundles to a new or an existing UI Builder standard record page.
Before you begin
Role required: admin, ui_builder_admin
Procedure
- Navigate to All > Now Experience Framework > UI Builder.
- In the upper right, select +Create to create a new experience.
-
Fill in the fields for your experience.
Option Description Name The name is used for tracking the experience internally. The experience name is also visible to users from the browser tab. URL path The URL path is the prefix that people will use to reach your experience. It matches your experience name by default. You can edit this path now or later in UI Builder.
Supported characters include digits (0-9), letters (A-Z, a-z), and the following symbols: $-_!*(),The path can't end with a forward slash (/).
App shell UI Choose the UXR Base Experience Shell.
The app shell is the wrapper of the page contents, which is similar to the functionality of a web page. The app shell can show things like the logo of your company, user preferences, and the search icon. To learn more about the app shell options, see Define UI experiences using app shells.
Landing path The landing path is the prefix that people will use to reach your experience homepage. It matches your experience name by default. To designate a page as the homepage, you will need to create a page that has a matching path. Roles Only users with these assigned roles can access the experience. If you leave this field empty, the experience is open to all logged-in users by default. - Select Create.
-
In your new UI Builder experience, select Create new page.
The Select a template screen displays.
- Choose the Standard record template and select Use template.
-
Set up the page details.
Name The name of your page. URL Path The URL path that users navigate to, to access the page. - Select Continue.
-
Add the test URL parameters for your page.
Note: All playbooks require at least a table and sysId to be hardcoded on the controller or provided through a URL.
Table 1. Required parameters table Name of the parent table for the playbook. sysID Sys_id of the record. For a record that doesn't exist, the value is -1. Table 2. Optional parameters query Encoded Query string to optionally override the query provided for a record generator. extraParams Pass additional parameters to a page. views View mode used to render Playbook activities in stacked or focused mode. selectedTabIndex The tab that your page opens to by default. -
Setup your default page variant.
Name The name of your page variant. Audiences The users that can see your page variant. They can be defined by: - Role
- Group
- User
- Company
- Department
- Location
- Script
Conditions Conditions that determine when the page variant is shown. The page and default variant are created. - In the success message, select Open in editor to open your new page in the UIB editor.
-
In the component tree, select the Main Tab.
The Main Tab panel opens on the right.
-
Under the Tabs section in the Config tab, select + Add.
A modal asking "How do you want to build this tab?" displays.
-
Select Start from an empty container and click Next.
A Tab Settings modal displays.
-
Give your tab a name and an icon, and click Create.
The tab is added to the component tree and a blank canvas displays.
-
In the component tree, under your new tab, select + Add component.
The toolbox opens.
-
Enter "bundle" in the search bar of the toolbox.
Available bundles are displayed.
- Select the bundle you want to add to your page.
Result
You've added a bundle and all its components, presets, and controller to your new UI Builder standard record page.
If the width of the bundle container is set to the min-width of the component, set the min-width of the container to 100%.
Alternatively, you can set the flex-direction of your new bundle tab to column.
What to do next
Edit test values and controller inputs.