List View: Search and Select UX Pattern
Video:
Why:
Overview of Search and Select.
List views are essential in UI design, presenting data in formats like tables, grids, or simple lists, each catering to different presentation needs and user interactions. They can display information ranging from simple text to complex data structures, making them a crucial component for efficient data management. List views help users efficiently organize, search, filter, and select data. In Pega's "Search and Select" UX pattern, they are vital for managing complex searches effectively, enhancing the overall user experience.
Search and Select is a powerful out-of-the-box (OOTB) pattern in the Pega Platform, crucial to the new Constellation version of Pega Customer Service and client applications. This advanced functionality offers users a convenient interface for conducting complex search operations on large data sets, enhancing both the Pega Government Platform (PGP) and Pega apps.
In typical business applications, agents or case workers often need to quickly locate a single customer from potentially millions and relate that information to the current case.
The Constellation "Search & Select" template is designed to help agents perform this task efficiently. It not only significantly improves workflow efficiency but also streamlines the configuration process, allowing it to be developed in minutes. This makes it an essential tool for enhancing search and selection capabilities, ensuring that users can manage data with ease and effectiveness.
The functionality addresses several key needs:
- Enables complex search operations on large datasets
- Allows filtering and narrowing down search results efficiently
- Provides a user-friendly interface for both end-users and developers
- Improves the search experience within assignments
- Supports both case types and entities in PGP and ICM Constellation apps
- In traditional application (e.g. UI Kit), creating such a pattern required an advanced configuration of data, Data Pages, sections and action sets. This resulted in numerous variations of searching and selecting and introduced risk of both bugs and UX inconsistencies.
- Search and Select configuration in Constellation provides a consistent configuration and end user experience in a fraction of the time compared to traditional development.
Business Use Cases:
Search and select is applicable to various scenarios, including:
- Subject Case Management:
- Associate subjects to existing persons
- Associate subjects to existing businesses
- Associate subjects to assets
- Investigation Management:
- Add external organizations
- Associate investigations to subjects
- Business Case Processing:
- Contact person selection
- Business association management
- Account list advanced search
- Household Management:
- Adding members to households
Benefits:
- Enhanced Workflow Efficiency: Streamlines the process of searching and selecting entities
- Improved User Experience: Provides intuitive filtering and search capabilities
- Flexible Configuration: Supports custom fields and search criteria
- Reduced Search Time: Enables focused searches with filtered results
- Better Data Organization: Allows grouping of search criteria into logical categories
Prerequisites:
Before implementing search and select, ensure you have:
- Created Data Reference or Case Reference field (list of records) in your data model.
- Relevant data pages setup for the case/data.
- App Studio would create the quarriable list data page required.
- App Studio created cases/data will automatically create the Single Page and List Page. datapages required to support Search and Select pattern.
- Added the field to a View
Configure Search and Select:
Configuration involves several key steps:
- Basic Configuration:
- Open the View with the field to configure
- Configure the reference field settings
- Select "Advanced search" in the Display as list
- Define the display field for read-only mode
- Search Categories:
- Define top-level search categories
- Configure search groups within categories
- Add search criteria to groups
- Results Display:
- Configure columns for search results
- Set column properties and sorting
- Define row density and layout
Best Practices:
- Search Organization:
- Group related search criteria together
- Use meaningful category and group names
- Limit the number of search fields to prevent overwhelming users
- Performance Considerations:
- Use quarriable Data Pages for efficient searching
- Configure appropriate operators for different field types
- Optimize search result displays
- User Experience:
- Provide clear labels for search categories and groups
- Ensure logical organization of search criteria
- Configure meaningful default values where appropriate
Points to Consider:
- Technical Considerations:
- For text fields, the CONTAINS operator is used
- For other fields, the EQ operator is used in filter expressions
- Only datapages with the setting “Allow querying any column (Pega connection only) “ are shown in this list (see Specifying a data page as queryable)
- Configuration Limitations:
- Maximum number of search categories should be considered
- Search field dependencies must be properly managed
- Performance impact of complex search configurations
- Implementation Specifics:
- Different configuration requirements for entities vs. case types
- Need for proper data transform configuration in entity searches
- Consideration of layer-specific configurations
- Is Search and Select Required? :
- The “table” and “combo-box” configuration options natively provide a search icon, allowing users to search a list and select what is required.
- This is a simpler configuration that may provide the required business outcome.
References:
Pega Government Platform '24.2 Documentation
- General Documentation Hub:
- Common Data Model Integration:
Pega Platform '24.2 Documentation
- Search and Select Configuration:
- Configuring Search
- Configuring search and select
- Using advanced search with report definitions
- Search and select from an external data source
- View Configuration:
- Data Page Implementation: