Enjoyed this article? See more similar articles in Constellation 101 series. 

Why

List View is a modern, efficient UI component in Pega Constellation designed for displaying and interacting with data collections. It represents a shift from traditional server-side rendering to a more dynamic and responsive user interface approach.

A List View that relies on a data source. Depending on the configuration, the system can display lists as tables, timelines, or tile-based galleries. By default, every Case includes a list that contains open Cases and a list that contains Primary Fields (in a read-only view).

Data objects do not support the timeline View.

Figure 1: A sample List view configured as table View at run time

Key List View features

1. Flexible formatting (table, gallery, or timeline views)
2. Advanced filtering and sorting capabilities
3. Bulk action functionality
4. Customizable data presentation

Purpose and Functionality

List View addresses several key needs in modern application development:

1. Provides efficient data display and interaction
2. Offers responsive and dynamic user interfaces
3. Reduces server load through client-side rendering
4. Supports modern web application requirements

When to Use Insights vs. List Views

Insights and List Views can be configured when creating a Landing Page, Case Views or Data Object Views.

Insights are beneficial when you need to:

1. Retrieve specific application data and display it in comprehensive table-based or visually appealing chart-based formats.
2. Present information requiring user interaction, including
   1. Drill down on a chart E.g. Click on a global chart showing 100 overdue cases in Asia, to see the cases by individual country in that Region.
   2. Ability to drill down to an underlying list in a chart E.g. See a list of the 15 individual cases overdue and further open each case.
3. Streamline decision-making processes and improve work processing efficiency by presenting actionable data items.
4. Share insights between users.

List Views are beneficial when you need to:

1. Format List Views as tables, galleries, or timelines, creating a clear interface in information-heavy contexts.
2. Save customized views of table data for future use, which enhances usability by providing quick access to frequently needed information without the need to re-sort or re-filter each time.

List View can address customer needs using Landing Pages:

1. Customer service portals displaying case lists in a Landing Page
2. Administrative dashboards showing work items
3. Task management systems requiring interactive lists
4. Product catalogs needing filtered views

Business Use Cases

1. Customer Service Queue Management
   • Use Case: Managing high volumes of customer inquiries or support tickets
   • Business Value: Enables service representatives to efficiently sort, filter, and prioritize customer cases
   • Example: A customer service team handling support tickets can use List Views to quickly identify urgent cases, group similar issues, and track resolution progress
2. Sales Pipeline Management
   • Use Case: Tracking and managing sales opportunities throughout their lifecycle
   • Business Value: Provides a clear overview of all opportunities with the ability to perform bulk actions
   • Example: Sales teams can view all active opportunities, sort them by value or closing date, and update multiple opportunities simultaneously
3. Resource Allocation and Project Management
   • Use Case: Managing and assigning resources across multiple projects or tasks
   • Business Value: Enables efficient resource allocation with clear visibility into workload distribution
   • Example: Project managers can view all active tasks, filter by department or skill requirements, and quickly reassign work items as needed

Prerequisites

Prepare the configurable components:

• Create a View that uses the list template. For more information, see Creating Views.
• Identify a Data Page from which you want to source the list content. For more information, see Creating a Data Page and Specifying a data page as queryable.

Key Benefits

1. Enhanced Performance
   • Client-side rendering for faster response times
   • Reduced server load compared to traditional UI components
   • Dynamic updates without full page refreshes
   • Efficient handling of large data sets
2. Modern User Experience
   • Responsive design adapting to different screen sizes
   • Smooth scrolling and interaction capabilities
   • Real-time data updates
3. Developer Productivity
   • Out-of-the-box components with minimal configuration
   • Consistency with Constellation's modern architecture
   • Reduced maintenance overhead

Configuring List Views

Help users access and compare data with lists. Use tables, timelines, and tile galleries in your applications as a flexible basis for users to process large amounts of information. For example, tables in a price comparison application can help users efficiently identify the best offer.

Figure 2: List Views on the User Interface Tab

See more on configuration here: https://docs.pega.com/bundle/platform/page/platform/user-experience/con…

Configuration

1. Open the View that you want to configure.
2. For more information, see Accessing Views in your application.
3. In the Name field, enter the name under which the View appears on the View list.
4. In the Heading field, enter the text of the label that appears at the top of the View at run time.

5. In the Data Page field, select the page from which you want to source the contents of your View.

6. Optional: To add every field in the Data Page Class to the run-time Show/Hide menu, select the Include all Class fields in the Show/Hide menu checkbox.

7. Select which View you want to work on:
   • To edit any of the existing Views, click on a tab representing that View.
   • To create a new View, click Add, and then complete the New View dialog box.
8. In the Display name field, enter the name of your configuration set.
9. In the Display as field, define how you want to present the data to the user:

10. To display data in a table, select Table, and then configure the template. For more information, see Configuring tables.

11. To display data by using automatically generated tiles, select Gallery, and then configure the template. For more information, see Configuring galleries.
12. To display data in chronological order, select Timeline, and then configure the template. For more information, see Configuring a timeline.

Best Practices

1. Reusable list views in Constellation

• It really simplifies a parameterized datapage in a list view down to something that is easy to understand and reuse in App Studio for our Citizen Developers. The bonus, as we have a modular approach to reuse, is a consistent UI for every case type / app leveraging it.

2. User Experience

• Enabling personalization adds flexibility for future requirements (see more here)
• Add multiple views to allow unique and common ways of digesting information
• Use Promoted filters to help users find data, based on commons searched fields (see more here).
• Include clear sorting and filtering options
• Provide meaningful column headers
• Implement responsive design patterns
• Ensure accessibility compliance
   

3. Performance Optimization

• Optimize data queries
• Cache frequently accessed data
• Minimize unnecessary refreshes

Summary

List View in Pega Constellation represents a modern approach to data visualization and interaction. It combines efficient performance with an enhanced user experience, making it an essential component for building modern applications. The component aligns with Constellation's goal of reducing time to value while eliminating the need for deep platform knowledge or front-end expertise.
 

References

1. Working with Views
2. Major changes when introducing Constellation UI components
3. Constellation UI Architecture
4. Adding Constellation tables to Views