Lightning Pages: Render Components based on Device
Set component visibility based on form factor directly on lightning pages.
Winter 20 is here and this time it has lot to offer from a lightning standpoint. I decided to explore one of the new release features and see what it has to offer. On this post we will be taking a look at a Winter 20 release feature called “Set Record Page Component Visibility Rules Based on Device”
Official Release notes on this feature can be found here
In my opinion this is a very useful feature that has been introduced as I have come across various clients asking for different layouts & views in multiple experiences. Usually we end up either creating a whole new custom page just for the mobile experience or we ask our clients to adjust with the same view for all the devices.
So lets get started!
Let’s take a simple use case where we want to show different reporting experience to the users on phone and desktop. We will be taking a standard case record page and showing different type of report charts for phone and desktop by embedding the report chart component on the record page.
I created two very simple reports on the case object which basically gives me a breakdown of number of cases along with the stage grouping:
Now time to hook them into the lightning record page and see what’s different in Winter 20.
We will take a simple standard case detail page with Header and One region template. This is just for the example but if you want to give it a try, you can choose any template which has BOTH phone and desktop factor enabled on it.
Notice on the screenshot above that template selection page now comes with additional information where it shows the icons besides each template type which depicts its respective supported form factor. This is a feature of winter 20. To use the winter 20 form factor features make sure you have “Upgrade Admin Tools” enabled from New Salesforce Mobile App QuickStart section of your org. You can navigate to this section by going to Setup then navigating again to “New Salesforce Mobile App QuickStart”
Once we have the template type selected we will be adding a report chart components to our record page:
Now going back to our use case: We will be showing the same record page on both phone and desktop but we will be showing the bar chart only on desktop & pie chart only on phone. To do this we will select individual report charts and navigate to “Set Component Visibility Section” and add a filter by clicking on “Add Filter” and then add a filter type of “Device” with Field values as “Form Factor” equals to “Desktop”. We will repeat the same steps for other report but instead we will set the Form Factor to “Phone”
Once the filters & configurations are set lets see how our pages look in different experiences! Notice the outputs below the same lightning record pages dynamically renders the component based on the form factors we provided.
Desktop View:
Phone View:
Pretty decent, Isn’t it?
Important Note: Please make sure you have the “ New Salesforce Mobile App” System Permission enable to Access new navigation and any Lightning apps, pages, and customizations that have been enabled for the new Salesforce mobile app.
That’s it folks, Hope everyone makes the full use of newly introduced Winter 20 features.
References: Some other Winter 20 features related to standard lightning pages not covered in this topic:
https://releasenotes.docs.salesforce.com/en-us/winter20/release-notes/rn_forcecom_lab.htm
