...
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 any 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: 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
Here are the details around different attributes, and which valid information can be input for the same.
Attributes:
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 auto-populated here as you select the object at the time of config creationautomatically selected based on the object you chose when creating the configuration.
Record To Preview: This feature helps you preview and evaluate the related list’s appearance according to the selected 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.
| Info |
|---|
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: Display Fields allow you to choose the fields from the display fields that you want to display Use this option to add fields that will be displayed in the related list. The fields that you selected here are displayed in the selected fields
| Info |
|---|
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: ”Search Fields” allows you to customize the search experience by choosing which fields you want to be included in the search results for this related list Add the fields that can be used to search within the related list.
| Info |
|---|
Note: Fields from the object selected in the Object Name option will be visible here. |
...
Filter Criteria: The ”Filter Criteria” section allows you to customize the display of Specify the filter to display specific records in the related list based on specific criteria.
...
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: ”Order By” allows the user to specify the way they want the related list items to be displayed; ”Order ” allows the user to organize the items in this related list Specify the order in which to display the records by record field, either in ascending or descending , by default ascending is selectedorder.
...
Table Action: The user User can create multiple table actions on the related list. By default, only new actions are displayed, which are visible in the top right corner.
...
Label: The Label provides a name or description for a specific table action
Name: The API name of the label is shown here.
Left Icon: This feature enables you to display an icon on the left side of an action, adding visual context and clarity to the action it represents.
Right Icon: This feature enables you to display an icon on the right side of an action, adding visual context and clarity to the action it represents.
Variant: Allows to show Buttons in different color formats.
Neutral: Neutral is the default variant of the Button which is displayed in white color
Brand: Brand is a blue Button, used to draw attention to the primary action on a page
Outline-brand: Outline-brand is similar to the brand variant, but the color is used for the label and border only, not the Button color
Destructive: Destructive is a red Button used to warn that the action has a negative effect
Success: Success is a green Button used to indicate a successful action
Text Destructive: This button is used to indicate a destructive action to the user
Min Selected Count: The ”Min Selected Count” option allows the user to specify the minimum number of items that must be selected in the related list.
Hide Action: The Hide Action feature allows the user to control the visibility of specific items within a related list.
Action: The user can create the actions here. For example, creating new records, navigating to any URL, editing any record, etc.
Type: Here user can select any specific type for that particular action
Custom Component
Edit
Global Action
List View
New
Object Page
Quick Action
Redirect
Tab
View
Delete
Row Actions: The user can create the row actions here, Actions are to be performed at the record level for the respective record by default three actions are created view, edit, delete.
...
Label: The Label provides a name or description for a specific table action.
...
Name: The API name of the label is shown here.
...
Hide Action: The Hide Action feature allows you to control the visibility of specific items within a related list.
Action: You can create the actions here. For example, creating new records, navigating to any URL, editing any record, etc.
...
| Info |
|---|
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
| Info |
|---|
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.
...
Around: Creates padding around the component
...
Top: Creates padding at the top of the component
...
Left: Creates padding at the left side of the component
...
Bottom: Creates padding at the bottom of the component
...
Right: Creates padding at the right side of the component
...
...
Vertical: Creates padding vertically
Padding Size: The padding size of the component can be set to:
...
None
...
xxx-small
...
...
x-small
...
Small
...
Medium
...
Large
...
x-large
Margin Location: Defines the position of the margin for a component. margin creates extra space around a component.
...
Around: Margin gets added around the component
...
Top: Margin gets added at the top of the component
...
Left: Margin gets added at the left side of the component
...
Bottom: Margin gets added at the bottom of the component
...
...
Margin
...
Vertical: Margin gets added vertically
Margin Size: The margin size of the view can be set to:
...
...
None
...
xxx-small
...
xx-small
...
x-small
...
Small
...
Medium
...
Large
...
x-large
After clicking on the Save button, the config configuration will get saved on the component config object and the user can view this button on the Record page, App page, Home Page, Flows, and Communitybe saved.
Preview Section: After the user has selected and filled the fields according to their requirements, they Once everything is saved, you can preview the components component in the Preview section before saving them on the Record Page, App Page, Flows, and Community Page.
...
PWR Rating Related List screenshots:
PWR Related List on Record Page:
PWR Related List on Home Page:
