Table layout in Pega

A table layout in Pega can be utilized to comprehensively accept or meticulously display a variety of details in a structured table format, ensuring that information is organized in a clear, systematic, and easily understandable manner, thereby facilitating efficient data entry, presentation, and analysis for users.

 

This layout accepts different sources.

1. Property (List or Group)
2. Report Defination
3. Data Page of List Type.
4. When we click on Add item in Table Layout,.

It’s going to add one more row, replicating the previous record controls.

Expanding rows in a table layout in Pega typically involves using sections and dynamic layouts to create an expandable or collapsible row effect. Here’s a step-by-step guide to achieve this.

1.Create a table layout:

• Navigate to the App Explorer and create a new section or open an existing one where you want to add the table layout.
• Then, drag and drop the Table Layout component from the Layouts panel onto the section.
• Additionally, configure the table layout by adding the columns and rows with the necessary properties.

2.Add a row to the table:

• Add a row to the table layout.
• Inside this row, you can define the columns and add properties that you want to display.

3.Create an expandable section:

• Create a new section that will be used as the expandable content.
• Design this section with the fields  however, information that you want to display when the row is expanded.

4.Embed the expandable section in the table:

• Go back to your main section, where the table is located.
• In the table row, add an embedded section.
• Reference the section created in step 3.

5.Use dynamic layouts:

• In the row of the table, use a dynamic layout to wrap the properties however, the expandable section.
• Configure the dynamic layout to include a layout group with a collapsible format.
• Set up the dynamic layout group to initially display in a collapsed state.

6.Add a control to toggle expansion:

• Add a button or link (e.g., a down arrow icon) to the table row to act as a toggle control.
• Configure the action set for this button or link to expand or collapse the dynamic layout when clicked.

7.Configure visibility conditions:

• Set visibility conditions for the expandable section so that it only appears when the row is expanded.
• You can use a property or a flag that toggles between true and false to manage the visibility.

8.Test the functionality:

• Save and run your section to test the expand/collapse functionality.
• Ensure that clicking the toggle control expands the row to show the additional content  however, collapses it when clicked again.

Detailed Steps Table layout in Pega:

1.Create the main section with a table layout:

• Additionally, Navigate to the App Explorer and create a new section or open an existing one where you want to add the table layout.
• Drag and drop the Table Layout component from the Layouts panel onto the section.
• Configure the table layout by adding the columns and rows with the necessary properties.

2.Define the structure of the table row:

• In the table row, define the properties you want to display initially. For instance, if you are displaying a list of orders, you might have columns for Order ID, Customer Name, and Order Date.
• Moreover, add a column with an icon or link that will act as the toggle for expanding and collapsing the row.

3.Create an expandable section:

• Navigate to the App Explorer and create a new section that will contain the detailed information to be displayed when the row is expanded.
• Design this section with the fields and data you want to display. For example, if you are expanding an order row, this section might contain order details like an item list, prices, and shipping information.

4.Embed the Expandable Section in the Table Row:

• Go back to the main section, where the table layout is defined.
• Inside the row configuration, add a new dynamic layout below the initial properties.
• Inside this dynamic layout, include an embedded section  however, reference the expandable section created in step 3.
• Configure the dynamic layout to be initially collapsed.

5.Add Toggle Control:

• Add a button, link, or icon (e.g., a down arrow or plus sign) in the row to serve as the toggle control.

Set an action set on this control:

• Add an on-click event.
• Configure an Expand/Collapse action to toggle the dynamic layout containing the expandable section.

6.Set Visibility Conditions:

• Optionally, you can use a property to manage the visibility state of the expandable section.
• For example, create a boolean property called Expanded  however, use it to control whether the expandable section is shown or hidden.
• Update the Expanded property in the action set of the toggle control to true or false based on the current state.

7.Styling and Usability Enhancements:

• Apply appropriate CSS classes to style the expandable section for a smooth user experience.
• Ensure the icons change accordingly to indicate whether the row is expanded or collapsed (e.g., change from a plus sign to a minus sign).

8.Testing and validation:

• Save and preview the section to ensure the expandable/collapsible functionality works as expected.
• Test different scenarios to make sure the data displays correctly  however, the layout behaves as intended across various browsers and devices.

Conclusion

By following these detailed steps, you can enhance the table layout in Pega to support expandable rows, making it easier to manage  however, display additional information dynamically. This approach provides a clean and interactive user interface, improving the overall user experience.

For more topics on Pega click here