UI Builder - Variant conditions

shun6
Giga Sage

Hi all,

 

Do anyone know about the functionality about "Variant conditions" on UI Builder setting.

I read the docs but I can't understand how this parameters works.

 

Thanks.

shun6_0-1732761675175.png

 

1 ACCEPTED SOLUTION

Kevin83
ServiceNow Employee
ServiceNow Employee

Variant conditions are one of the means by which you can control when a screen variant is shown.

In UIB a Page is roughly equivalent of a route like /record or /list or /foo, and each route can have multiple variants.

 

The variants are ordered by an order number, and the variant with the lowest order is evaluated first and we cycle through all variants until we find one whose criteria say it should be shown.

For top level Pages, there are two man ways you can control whether the variant is shown, 1. screen conditions, 2. audiences. 

Screen conditions allow you to set a condition on any required parameter of the Page. So for record pages you often have a table and sys_id as required params, so you can say when the table=incident or when sys_id=-1 etc.

In your case you have are checking if the table param is one of several tables. The ^OR is a delimiter that is OR several conditions together. 

There a few comparators you can use =, != and STARTSWITH, and you can also AND with the delimiter ^.

* For other Viewport pages there are some other things you can do with screen conditions, but I think this question is about top level pages so I'll stop here.

 

View solution in original post

3 REPLIES 3

Kevin83
ServiceNow Employee
ServiceNow Employee

Variant conditions are one of the means by which you can control when a screen variant is shown.

In UIB a Page is roughly equivalent of a route like /record or /list or /foo, and each route can have multiple variants.

 

The variants are ordered by an order number, and the variant with the lowest order is evaluated first and we cycle through all variants until we find one whose criteria say it should be shown.

For top level Pages, there are two man ways you can control whether the variant is shown, 1. screen conditions, 2. audiences. 

Screen conditions allow you to set a condition on any required parameter of the Page. So for record pages you often have a table and sys_id as required params, so you can say when the table=incident or when sys_id=-1 etc.

In your case you have are checking if the table param is one of several tables. The ^OR is a delimiter that is OR several conditions together. 

There a few comparators you can use =, != and STARTSWITH, and you can also AND with the delimiter ^.

* For other Viewport pages there are some other things you can do with screen conditions, but I think this question is about top level pages so I'll stop here.

 

shun6
Giga Sage

@Kevin83 

Tnanks for your reply, I clearly undarstand how Variant condition works.

If it's possible, clould you please tell me about the other thigs I can do with condition for other Viewport pages for my future reference?

I'm studying abouut UI Builder so that I can create a custom workspaces from scratch.

 

Kevin83
ServiceNow Employee
ServiceNow Employee

There are two types of viewports, 1. page collection (extension point) and 2. regular.

Page collection viewports can be use across many pages, and regular viewports are tightly coupled with a single page.

 

Both types of viewports can have scripted screen conditions (in sys_ux_screen_condition) table, that top level pages don't have access too.

Page collections defined "controllers" that the parent page must have instantiated. (Controllers are used to fetch/write data to the server/manage state on the client). For example a page collection might define that it requires the "Form controller", and the viewport subpage can then interact with it. As for variant conditions in this case you can access the controllers data to make decisions about whether you variant should be shown. e.g. controller.table=incident, only show this variant if the table output prop of the controller is table.

Regular viewports can access their parents required params using a condition like: parent.table=incident

Both types of sub pages can access their own required params.