Content Comparison

Introduction :

PWR Related List component can show the data directly derived from the related object like the standard related list provided by Salesforce and is also capable of showing customized data derived from classes on the Lightning UI. This component is Lightning and Mobile Compatible. PWR Related List has two views

1. Table View

2. Card View

PWR Related List component allows the users to show fields from the parent object. PWR Related List can show data that is present in filtered format and is defined in Apex business logic.

Example: If two objects’ data are combined and need to be shown in a single line which is defined in Apex class can be easily configured and shown through the Related List. In order to configure PWR Related List, there are three objects named Field Set, Field, and Actions provided with the package. The user can create custom actions other than Edit, Delete and View under the object Actions.

Prerequisite Configuration:

If the data coming from a custom class needs to be displayed on the Related List, then create Field set Record and then create the Record on the Fields object which will represent the column of the Related List. Even if the data is not coming from a custom class, the user can still use the Field set object for displaying the data coming from a related object. For displaying actions on Related List create actions like View, Edit, Delete, etc. on the Actions object.

Steps to Creating Related List setting:

...

Go to the Designer tab

...

...

PWR Components offers a variety of highly configurable LWC components.

How to Configure and Add Components

In this section, you will learn how to configure one of the components, such as the Related List. You can follow the same steps for other components, with slight variations, and add them to your desired location within a Lightning page, Community page, or Screen Flow.

Related List

With the help of a related list, the user can show the related data of objects and the user can show the data up to 3 the level hierarchy.

...

Steps to create related list config:

1. Open PWR Components application from App Manager

2. Go to the Designer tab

   Image Added

3. Select the Related List component from the list of components

   Image RemovedImage Added

4. You Users can use existing settings Config, or you users can create a new settingsConfig

   Image Removed

   Create new setting

   Image Removed

   Image Removed

Steps to create Field Set:

The Fields and Field Set have a master-detail relationship.

1. Go to the Related List Field Sets tab

2. Click on the new button

   Image Removed

3. For configuring the Field Set, the properties below need to be set properly

   1. Name: Enter the Field Set Name

   2. Object: Enter the API name of the object for which the Field Set is being created

      Image Removed

** If the Field Set is being created for displaying the data fetched using Apex Class, then the API name of the object is not required.

Steps to create Field:

The Fields need to be created under the Field Set object.

1. Go to the Related List Fields tab

2. Click on the New button

   Image Removed

3. For configuring the Field, the properties below need to be set properly

   1. Label: The Label of the field can be changed for displaying on the Related List UI

   2. Column Sequence: Sequence of Field can be set and controlled

   3. Is Card Field: Which field among the Fields in the Field Set needs to be shown in the card view

      Image Removed

   4. Highlighter: In the case of Custom Class, the Highlight functionality can be used. If in a single related list there is data from two different objects and the first row represents data of object1 and the row below it shows the data from object2 you can Highlight any of the rows depending on the value present on the Fields record

   5. Link URL & Link Field: In the case of Custom Class, the Link URL functionality can be used. If in a single row of a related list there is data from two different objects and the second column represents the field of Object2 and User wants the link to that object, then the User needs to set it in the Link Field URL and Link Field Id

   6. The Date and Date/time fields can be shown in many custom formats using the Custom Date Format field. For example, the Date (1/1/2019) can be shown as 31-Aug-2020

Here are the details around different properties, and what valid information can be input for the same.

1. Configuration Section:

   1. Data Source: Selected data source is reflected in this field

   2. Object: If the data source is an Object, then the selected object name is reflected here

   3. Class Name: If the Data Source is Chosen as a Custom Class, then the Class Name of the Class needs to be entered. When the Data Source is chosen as Custom Class the Field Source should be Field set only

   4. Record to Preview: Select the record for preview

      Image Removed

   5. Related Object: Select the object whose records you want to show

   6. Label: Shows the label for the PWR List View on the UI (By default setting name is displayed as Label, you can change the label as per your requirement)

   7. Icon: This property is used to set an icon for the PWR List View. For example, standard: account. For more details about the icons, please refer to the link here

   8. Hide Row Number: Users can hide the serial number column but check this checkbox

   9. Hide New Button: This property enables users to either show or Hide the New button so users can create a new record

      Image Removed

2. Information Source:

   1. Field Source: The User needs to select the field source as either of the values given below. By Default, Fields are selected as Field Sources

      Image Removed

      1. Field: The user needs to select the fields which the user wants to see in the Related list

      2. Field Set: When the ’Field Source’ is chosen as ’Field set’ it will show the order of the fields as mentioned in the Field Set

      3. Fields & Field Set: When the ’Field Source’ is chosen as ’Fields and Field set’ it will take the fields from the ’Field set’ and then the User needs to select the fields in the ’ Fields’. While displaying it will display the fields which are selected first and then the Fields of the Field set

      4. Field Set & Field: When the ’Field Source’ is chosen as ’Field set and Fields’ it will take the fields from the ’Field set’ and then the User needs to select the fields in the ’Fields’. While displaying it will display the fields of the Field set first and then the Fields

   2. Field Set Name: The name of the Field set defined on the object Field set needs to be selected this property

   3. Fields: The user needs to select the Fields to be displayed and also User needs to select the card fields or else in the mobile view it will only show the name

      Image Removed

      Note: If the Field Source is chosen as Fields, then the user needs to enter the API names of the field in the Fields property, and also the User needs to select the card fields, or else in the mobile view it will only show the name.

3. Display Configuration:

   1. Display Type: Select the display type for the records, currently, it supports two views:

      1. Table View: Records and information are displayed in table format

      2. Card View: Records and information are displayed in card format. The card view supports only 5 fields at maximum

         Image Removed

         1. Card Fields: The user needs to select the Fields to be displayed on the card view Note: The user needs to select the fields in the Fields property and then Card Fields or else it will not show up in the card view

            Image Removed

   2. Records To Display: Stores the number of records needed to be displayed on the first load of the page

4. Action Configuration:

   1. Actions: The user need to select the available actions from the list of actions

      Image Removed

      Steps create Actions: The user need to select the available actions from the list of actions

      1. Go to the Actions object

      2. Click on the new button

         Image Removed

      3. Fill in all the details

         1. Name: The user needs to add the Action Name

         2. Action Sequence: Enter the sequence of action

         3. Parameters: Enter Parameters

            Image Removed

         4. Operation Type: Select a particular operation from the list

         5. Navigation Target: select navigation target same tab or new tab

         6. Component URL: Enter the URL of action

      4. Click on save

5. Filter Criteria : When a user wants to view the Related List in the filtered format then the user can add the filter criteria in this section. By using filter criteria users can view the List View that the user wants.

   1. Click Add Filter and select a Field to Filter from the list

   2. Select an operator for the filter and type the filter value in the next field

   3. Click Apply

   4. After adding a filter to your List View, the filter is numbered. Your first filter becomes Filter 1 and your second filter becomes Filter 2. You apply filter logic based on these numbered filters

      1. For example, you want to show contacts related to accounts which have Lead Source is Web and Email not Null. Your Related List has two filters:

         1. Lead Source is ‘Web’

         2. Email not Null To add filter logic,

   5. From the Filter Criteria, click Filter Criteria section Add Filter Logic

   6. Enter each filter line number, separated by a filter logic operator

      Image Removed

      Image Removed

Configuration Details:

1. From Setup, enter App Builder in the Quick Find box, then select Lightning App Builder

   Image Removed

2. Click New and select any one of the Record Page and enter the Name of the page, select the screen layout, and finish the steps of the wizard

3. In the components panel under the Custom-Managed option PWR Related List is present. Drag and drop it to the Record page

   Image Removed

Preview Section:

...

1. Image Added

2. If the user creates a new config

   Image Added

• Label: Here user can set the title for the config of the component

• Name: The API name of the label is shown here

• Page Type: Here user can select page type as record page or non-record page; depending on which page the user wants to show the component

• Non-Record Page: By choosing the non-record page user can use this config on the home page and app page.

• Record Page: By choosing the record page user can use this config on a related record object

• Object Name: Here user can choose any object on which that created config will be shown

Once the configuration is successfully saved, provide additional details from the Attributes section to build your component according to your specific requirements.

...

Attributes:

• Related List Icon: Select an appropriate icon for your component.

• Record Object: The object name is automatically selected based on the object you chose when creating the configuration.

• Record To Preview: Select the record to preview to check how your component will look based on that record.

...

• Child relationship: The ”Child relationship” field allows you to choose the child object you want to display in the related list.

...

• Object Name: Selected child relationship object name will be auto-populated here in read-only format. If no child relationship object is selected, then by default, the record object is auto-populated in this field, or else here you have to choose an object.

...

• Display Fields: Use this option to add fields that will be displayed in the related list.

...

• Show Search: The ”Show Search” checkbox allows you to enable or disable the search functionality within the related list. Search Bar will be displayed at the top of the related list.

• Search Fields: Add the fields that can be used to search within the related list.

...

• Filter Criteria: Specify the filter to display specific records in the related list.

...

• Show Checkbox: The ”Show Checkbox” option allows you to display or hide check boxes next to each item in the related list.

• Max Selected Record Count: The ”Max Selected Record Count” field allows you to set a maximum limit for the number of records that can be selected in this related list.

• Page Size: The ”Page Size” option allows you to specify the number of records displayed per page in the related list.

...

• Order By: Specify the order in which to display the records by record field, either in ascending or descending order.

...

• Table Action: User can create multiple table actions

...

• Row Actions: You can multiple row actions here

...

• Padding Location: Defines the position of the padding for a component. The padding creates extra space within a component.

...

• Padding Size: The padding size of the component can be set to:

...

• Margin Location: Defines the position of the margin for a component. margin creates extra space around a component.

...

• Margin Size: The margin size of the view can be set to:

...

After clicking the Save button, the configuration will be saved.

• Preview Section: Once everything is saved, you can preview the component in the Preview section.

...

• PWR Related List screenshots:

  • PWR Related List

...

• • on Record Page:

    Image Added

  • PWR Related List

...

• • on Home Page:

    Image Added

How to Add it to the Lightning page, community Page or in the Flow