Salesforce Optimization Guide: Dynamic/Filtered Lightning Components

As you may have read in our recent blog post on Lightning Components, Salesforce Lightning page layouts have the amazing ability to support a variety of standard and custom components that can enhance the functionality of your pages and provide Users with useful capabilities.

However, at times you may want to permit only a subset of Users from being able to view and access Lightning Page Components rather than have them visible to all Users at all times. This is where utilizing Lightning Component filters can be quite useful.

Challenge: For the sake of example let’s leverage the Related Record component we built in our previous blog post.

If you did not read the previous blog, we created a Lightning Related Record component on the Contact Lightning page layout that displayed a variety of key fields from that Contact’s Account, without having to navigate to the Account directly (see screenshot).

In our scenario, we are going to assume that System Administrators should be the only Users who are able to view and access the Lightning component. To clarify, we need to make the Related Record Component dynamically visible only for Users who have a Profile of “System Administrator” assigned to them. For all other Users, the component is to remain hidden and not populate on the page layout.

Solution: Lightning Component visibility filters!

Objective: Toggle our Related Record Lightning component to display for Users who are assigned a System Administrator Profile. Hide the component for all other Users.

Step 1: Edit the Page to Access the Component
To access the Lightning page builder, navigate to the Setup cog icon in the upper right-hand corner of Salesforce, click it, and select the “Edit Page” option (see screenshot).

Step 2: Select the Component to View Visibility Settings
Once in the Salesforce Lightning page builder layout, click on the component you want to make dynamic to bring up its configuration options on the right-hand side of the screen. This is where you will find the “Set Component Visibility” settings for your component (see screenshot).

Step 3: Add Filter(s) to the Lightning Component
Under the “Set Component Visibility” section of the Lightning component click the “Add Filter” button to begin filtering the visibility based on your needs.

You have three options in the “Add Filter” menu: Record Field, Device, and Advanced

Record Field – Selecting this button will allow you to filter your record based on fields on the Record that the component is located on. Since we built this component on the Contact Lightning page layout, that means we can use any fields on the Contact record as filters if we desire. For example, if you wanted to view a component based on if the Birthdate field had a value in it, you would set that here.

Device – This is to allow you to filter visibility based on the device that the User is viewing this Lightning record page with. This option is great if you want to toggle component visibility for Users who are accessing Salesforce on a desktop computer versus a tablet or a mobile phone.

Advanced – This option allows you to manually search and select any fields in Salesforce that you wish to filter on, which include the device, the record fields, and other custom options like Permissions and User settings. Since we want to filter our component by Profile, we will leverage this option.

Whichever option you choose you then must select a Field, an Operator, which is how your value is evaluated (i.e., equals, does not equal, contains, etc.), and a Value, which determines what value in the Field you selected should trigger it to display (or not) (see screenshot).

Step 4: Set Your Filter(s)
For our example, we will be adding an “Advanced” filter, so we can select to filter our component on the User’s Profile Name equaling “System Administrator”. See screenshots below to view the steps.

Step 5: Test Your Filter(s)
When you add filters to a Lightning component, you can see that it is filtered by an orange eye icon that appears on the component in the Lightning page builder (see screenshot).

Now we can test our filter by logging in as a User with the “Standard User” Profile to see if they can view the component.

To that end, when I login as “Peter Griffin – TEST” and view the Contact page layout of a given Contact record, I note that I cannot see the Related Record Component on the page layout, as intended (see screenshot).

When I view the exact same Contact record page as my System Administrator User, I view the component without difficulty, as intended (see screenshot).

Conclusion: Using the aforementioned technique, you can customize your Lightning page layouts in Salesforce to be incredibly dynamic and responsive to whichever User is viewing them or based on attributes of the record. You can even add more filters and customize the logic if needed to fit more complex requirements. For example, you can use both attributes from a record and the current viewing User to filter a component, or customize the filter logic to be more flexible (i.e. display if Profile = System Administrator AND Birthdate is not equal to blank/null OR Phone is not equal to blank/null).

There are countless way one can configure the visibility of Salesforce Lightning components, but these tips should be more than enough to get you started towards more dynamic and responsive page layouts in Lightning. Thank you for the read and good luck!