PWR Components offers a variety of highly configurable LWC components.
PWR Components List | ||
|---|---|---|
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:
Open PWR Components application from App Manager
Go to the Designer tab
Select the Related List component from the list of components
Users can use existing Config, or users can create a new Config
If the user creates a new config
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: Select page type such Record Page, Non-Record Page
Reference: What is Page Type?
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.
Note: You can navigate and select up to 3 levels down to child objects and three levels up to parent objects.
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.
Note: Fields from the object selected in the Object Name option will be visible here.
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.
Note: Fields from the object selected in the Object Name option will be visible here.
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
Note: By default, a New Action is provided. You can also add other actions to perform additional tasks. Please refer to the Table Actions section for more information.
Row Actions: You can multiple row actions here
Note: By default, a View, Edit & Delete Actions is provided. You can also add other actions to perform additional tasks. Please refer to the Row Actions section for more information.
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:
PWR Related List on Home Page:
Note: By following the same steps, you can configure other components as well. There is slight differences in attributes; refer to the product documentation for detailed information.