Configurable LWC Components-archieved

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.

Open

Figure 1: PWR Related List

Steps to create related list config:

1. Open PWR Components application from App Manager

2. Go to the Designer tab

   Open

   

   Figure 2: Designer

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

4. Users can use existing Config, or users can create a new Config

5. 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

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:

  • PWR Related List on Home Page:

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