Introduction

To display related lists with cutting-edge features and get around Salesforce standard UI restrictions like the number of columns and rows, HyperGrid offers the lightning grid component, HyperGrid- Extended Related List. The Extended Related List component or XRL displaces the Salesforce Related Lists to provide Salesforce Users with enhanced Related List capabilities. 
 

After installing XRL in Salesforce org, the next step will be the configuration of Extended Related Lists on lightning pages.

 XRL configuration is a 2-step process involving-

• Basic Configuration: Basic configuration involves adding the XRL to a lightning page through App Builder and adding fields to create a default Related List view available across the org.
• Advanced Configuration: In the advanced configuration, a user can manipulate the default configuration by adding or removing fields, changing the order, and applying server-side filters.

This tutorial will demonstrate the basic configuration of HyperGrid- Extended Related Lists on a lightning page.  After an admin has done the basic configuration of XRL, the Salesforce users in the org will be able to access the XRL and change the layout. As an example, you will understand how to set up Cases Related Lists using HyperGrid on a "Test Account" record page.

Procedure
 

By going through the following steps, you would learn the basic configuration of a related list on a parent record page. For instance, in the Account record- Test Account, we will learn to configure Cases Related List. 

Step 1: To get started with HyperGrid, the first step is to log in to your Salesforce account. At the top of the page, you will find the search box and links to get to the required record detail page. 

Step 2: On the homepage, you can search for the required account name in the global search box on top. Alternatively, you can open an object list and select the appropriate record from the records table. 

Step 3: On the top right-hand side menu bar of the Test_Account page, click on the gear icon, and select Edit Page to edit the page in the Lightning App Builder.

Step 4: In the App builder, you will see the Account Record page layout. On the left-hand sidebar, under the Custom Managed tab, you will find the HG- Extended Related list component. Alternatively, you can also search for the same component using the Search box.

Step 5: Drag and drop the HG-Extended Related List component to the Related tab in the Account Record page layout.

Step 6: In the property editor, enter the Related List name you want to configure.  Select the appropriate option from the drop down such as Cases.  Click Save. The configuration settings are saved. 

Note: Sometimes the XRL component might be empty, i.e without any records. For instance, if the current record was just created and there is no Case related to it, no item will appear in the Cases XRL component.

Step 7: Click on the back button to go back to the Test_Account page. On the Test_Account page, you would be able to see a Cases Related List with a single column Case Id.

Step 8: After this process, you need to add fields to the Related List view in Cases XRL to get a default configuration available to all users in the organization. To do that, click on the settings dropdown on right and click on Configure option.

Step 9: The configuration wizard is displayed. On the left sidebar, you will see a list of all the configurable fields for the Cases Related List. Select any field you want to see in the Related List view by clicking on it and it will be visible under the Selected Fields section.

Step 10: You can select fields from the Selected Fields section which will appear in  Configure tab of Field Selection. Fields with a ’>’ sign indicate a reference field. Click on the reference fields to open the objects field list. You can add up to 20 fields in a Related List view by clicking on them as needed.

Tip:  To know more about lookup fields in XRL, check out the article: " How to add and filter data through Lookup fields in XRL".

Step 11: To change the order of the fields, simply drag and drop the field at the correct place. If you selected the wrong field in the view, click on the Delete icon next to the field name to remove it. Click Save or Save As to save the configuration.

Step 12: Enter the label name of the view you are creating in the List View Label field as shown below. Click Save.

Note: Whenever the first or basic configuration is done, the admin should save that as the _default or _admin view. This view can be edited by other users and saved as a different view per the use case.

When any user modifies the default or _admin view and saves it as the _default view itself, the view will get overridden and be available for other users in the grid. It's advisable for users to save modified views (as explained in the advanced configuration article) under a different name.

Results

Once you're finished, you'll be able to see a Cases Extended Related List on the Test_Account page with the fields you've chosen to display in the Related List view. You'll also see the Related List view name on the top of the Grid.

Now that you know how to do the basic configuration of HyperGrid -Extended Related List, take the next step to see how a user can define a personalized Related List view in the next article: “Advanced Configuration of HyperGrid- Extended Related Lists”.