Lightning Layout Tricks: Live Demo Controller

Over the last year I’ve been toying with Lightning Page designer & components to identify ways to deliver some creative end user experiences.   I previously shared how to use Conditional Record Detail Components, create Record Detail Tabs, Use Page Layouts for Mobile/Classic/Create only, and this latest post is a continuation of the series. 

---

Demo Controller

Use Case:

As I was building my presentation for Northeast Dreamin’, I was struggling with how to display all my ‘Layout Tricks’ without having to constantly change users, records, record types, etc.  Knowing I had limited time and a lot to demo for the audience, I needed a method to show various builds that was simple and fast.

After a few false starts and various iterations, I landed on creating a Demo Controller quick action paired with a  related record component to switch between page builds on the fly.

This post also  includes a few new ideas like Audience specific Related Lists & Rich Text Components for guiding user behavior.

Build Requirements: Checkbox fields, Create ‘Update Records’ Quick Action, and Related Record component

---

Example: Universal Containers is considering migrating to Lightning Experience.  Their admin has been asked to deliver a demonstration to show the features and benefits of Lightning.

The admin wants to show some of the capabilities of Lightning Experience to deliver better user experiences that are tailored to select audiences and record attributes.

Typically, the only method available is to switch between records, change record types, and/or switch users to demonstrate all the functionality available, but by building a Demo Controller, these features can be shown quickly and easily, all while further showing the power of Lightning Experience.

 

---

The Build:

Identify your use cases first, for this example our admin wants to demonstrate 4 functions:

• Audience Specific Related Lists w a single page layout
• Guided Rich Text based on the current record
• Accordion vs Tab Layouts
• A Related Record Detail Component

Create one checkbox field to control each of the above scenarios, giving each an easy to use label.

Add each component to your Lightning Page for the above use cases, assigning a filter for the checkbox field you want to control that component.

Create a quick action with your checkbox control fields and assign to the a Related Record component and place it on the top of the page.

When you mark each checkbox as true, the desired component or functionality will appear on the page.

Specific instructions are below for each build of my example builds – but your demo controller can really be used for anything. You can have a process builder in the background that executes various updates, creates records, changes record types, sends notices, etc.  Rather than having to edit the record to trigger those changes, for your demo, let your Live Demo Controller & checkbox fields be the entry criteria to provide a better live demo experience.  

---

Ex: Audience Specific Related Lists

One group of users only needs to see an Account’s Opportunities & Cases, while others will need to see all related records.  Using the user attributes in your filter, you can make specific Related List -Single components display when appropriate, while showing the full Related Lists component to other users.

Add your Related Lists component to your Lightning Page and set a filter so it only appears when your related checkbox field is false.  Add Related List – Single components in another, identical Tab component where your full Related Lists appear, set these to only appear when your checkbox is true.

When building this for implementation, you could use a formula checkbox that references the current logged in User (Ex: $User.Department = ‘Finance’) OR utilize the User menu on the Lightning Component filter screen.

In the example below, one set of tabs displays only two single related lists while the other displays the full stack.

---

Ex: Rich Text Guides

Path is a great tool to provided guided, in-line information to end users when viewing records.  The same can be done with conditional Rich Text components as they allow you to show helpful text & links to end users based on a record’s values.

Create your Rich Text component, add your desired message, then set your component to be true when your demo controller checkbox = True OR when a record meets specific conditions.

In this example, we are showing users a helpful link to Baseball Reference when a Contact’s Title (in this case, position) is blank.

---

Ex: According vs Tab Layout

Add an accordion to your Lightning Page, add a filter so its only visible when “Accordion View” equals True.  Set your standard component (the tabs in the below screenshot) to only be visible when ‘Accordion View’ equals False.

When you check the box in your demo controller, the tabs disappear and your accordion is on the screen.

---

Ex:Related Record Detail Component

Create a quick action of the type ‘Update Records’ on a related object.  Add a related record component to your Lightning Page, set the options to use your related record, then select the correct quick action.

Add a filter for your checkbox field so that your component is only visible when ‘Related Record Detail’ equals True.  When you check the box, your related record component will appear on the screen.