UI Designer

Overview

UI Designer is a new drag−and−drop editor that provides administrators with a simple and intuitive way to edit pages within CPQ. The layouts for Customer Assets, Performance Logs, and the Eligibility Rules pages are managed through the UI Designer. These pages provide the following usability features:

Column headers that remain visible at the top of the window when scrolling the page up and down.
User preferences to View or Hide columns in the page table.
End-user resizing of table columns.

In Release 18D, UI Designer layout pages were converted to JET UI. The JET UI provides a modernized and fully responsive user experience for viewing UI pages on any device and in any language. The JET UI supports virtually all of the most commonly used legacy UI features while enhancing usability and standardization of the UX across CPQ. Upon upgrade to Release 18D these pages are converted to the JET UI framework. The layouts for these pages continue to be managed through UI Designer. Release 18D introduces the following usability features:

Automatic Pagination to reduce page loading performance issues.
User-Customized Table Settings for the Customer Assets, Performance Logs, and Eligibility Rules List pages are stored in the user's browser cache. These user-customized settings are retained across logins on the same browser. If users change their table to view only specified columns or re-sizes columns, their custom settings are saved when they log out and log back in using the same browser.
Notes
- User customizations are reset when users clears their browser data.
- For users of multiple browsers, the customizations must be specified on each browser.
- Filters and Advanced Filters are not stored in the user's browser cache and retained across logins.
Filtering of rows using Simple and Advanced Filters, which provide greater flexibility than the functionality previously available from the Query by Example feature. View Simple and Advanced Filters information.

The Simple and Advanced Filters provide the functionality previously available from the Query By Example (QBE) filter. Just as with the QBE filter, users can define filter criteria for multiple column items using the Advanced Filter. In addition to defining a multiple column filter, the Advanced Filter allows users to specify if the results match any or match all filter criteria. The Simple Filter searches all columns and then filters results based on a user-defined keyword or phrase.

Simple Filter

The Simple Filter supports quick text or numeric searches, such as Part Number searches. The Simple Filter Icon is located in the toolbar above the associated table for JET UI pages.

Simple filter icon

Use the JET UI Simple Filter

Advanced Filter

The Advanced Filters supports use cases where multiple criteria are required to focus on a subset of lines. A wide range of operators and the Match all or Match any option expand the user's ability to fine tune their filtering. The Advanced Filter icon is located in the toolbar above the associated table for JET UI pages.

Advanced filter icon

Use the JET UI Advanced Filter

Layouts List Page

The Layouts List page contains the three pre−generated user interface layouts (Customer Assets List, Performance Logs List, and Eligibility Rules List). Administrators can customize these layouts to meet the needs of their organization. In future releases, administrators will have the ability to use templates as the starting point for creating new layouts.

ayouts List Page

To get started with UI Designer, use the Layouts List page to click the name of the pre−generated layout you want to customize. This opens the layout in UI Designer.

UI Designer Screen Layout

UI Designer contains a drag−and−drop interface that allows administrators to easily customize the pre−generated layouts. Layouts are shown below for the Customer Assets List, Performance Logs List, and Eligibility Rules List.

Customer Assets List

Performance Logs List

Rules Eligibility List

Refer to UI Designer Administration for instructions to customize layouts.