UI Builder - Page Variants

[Chris Pearson]

Disclaimer: The ideas, thoughts, and opinions in this post reflect my own views and do not necessarily represent the views of my employer, Accenture. 

A very cool feature available in UI Builder (Quebec release) are Page Variants.  

Let's say we're building a workspace experience for a custom application. The 'home' or landing page for our workspace is going to be a dashboard with relevant metrics for our app. But the workspace experience of our app is being used by more than one persona. Let's say we have an 'agent' persona who will be the one working tickets and wants to take advantage of a set of metrics tailored to that job role. But we also have a 'supervisor' persona who might act more like a team lead or manager for the agents. That landing page or dashboard should have a different set of metrics which show a higher level view of how our process is functioning. 

What different Variants allows us to do is build tailored experiences for different personas while keeping our URL structure the same. This way we can promote our new workspace experience (or build modules to it in the left hand nav) using the same URL, but when different users navigate to the same URL, they'll see the page variant which applies to them! 

Admin/Team Lead/Supervisor dashboard example: 

Notice our headers are 'All' tasks. 

Here's a similar dashboard, but targeted towards the 'agent' persona. Here we see things like 'My' tasks: 

Once we build our first landing page (doesn't matter which one we build first), we can select the Variant in UI Builder and select 'Duplicate' 

We can then modify our duplicated page to align to the proper persona. When we want to control who sees which persona we go to the same Variant menu and select 'Edit audiences' where we can define and select the Audience which should see this Variant of our page. Audiences can be created to associate one or many roles in the platform which are used to determine whether a user is eligible for this particular variant. 

If role-based Audiences are not enough to determine the proper persona to view your page, you also can add Variant Conditions by navigating to the 'Edit conditions' option in the Variant menu. Here you can drop in an encoded query formatted string which will also be evaluated to determine eligibility. Here you can also set an Order for the page Variant so that if a single user is eligible for more than one variant, they will get the one with the lowest Order. 

Happy building builders!