Improved UX Design of the Value Help Dialog

The value help dialog is a complex control that helps users find and select single or multiple values within a dataset containing large number of items. Its design has undergone several changes throughout the years. In response to user needs and comments, after performing various usability tests, a number of improvements have been introduced. The main goal has always been to make the value help dialog more intuitive and functional. In this blogpost, I will tell you a bit more about the latest changes that were done in SAPUI5 1.84

Visual and Functional Changes in the Value Help Dialog

Changes in the Define Conditions tab

Until now, in the Define Conditions tab there were two separate operation dropdowns and two corresponding item rows for the include and exclude operations, as you can see in the screenshot.

Screenshot from UI5 Demokit: Define Condition tab in Value Help Dialog (up to SAPUI5 1.82)

To improve the user experience and optimize screen real estate in the new look, there is only one operation dropdown containing both include and exclude operations as well as one corresponding tokenizer for the include/exclude operations:

Screenshot from UI5 Demokit: Define Condition tab in Value Help Dialog (as of SAPUI5 1.84)

Here it’s important to highlight that if you have tests that depend on specific component structure in the Value Help Dialog, you might need to adapt them. The structure was changed to reflect the new layout of the items row and operations dropdown.

Other Visual and Functional Changes

• The title of the value help dialog is now left-aligned. For RTL applications it is right-aligned. This change was made to align the value help dialog with the latest SAP Fiori guidelines for dialogs.
• For clarity the button ‘Show Advanced Search’/‘Hide Advanced Search’ is renamed to ‘Show Filters’/‘Hide Filters’ as this button actually controls filter field visibility and not really the one of the search field. The filters are aligned in a grid with labels above each one. The number of items per row depends on the width of the value help dialog to dynamically make use of the dialog width.
• We have placed counters in the value help dialog tabs, next to the tab titles, to show how many items or conditions have been selected in each tab. This way the user gets quick orientation if there are selected items in both tabs. If there are no selected items in any of the tabs, the titles don’t show any number.
• For clarity, the tab ‘SELECT FROM LIST’ is changed to ‘Search and Select’. Also, the name of the items row was changed from ‘Selected items’ and ‘Excluded items’ to ‘Selected items and Conditions’
• There is a new property in the filter bar control that allows you to choose whether to use the new filter layout or not. The property is called isRunningInValueHelpDialog. If you set it to true, the items in the filter bar will use the new layout of the filters designed for the value help dialog. By default, it’s set to false.

Screenshot from UI5 Demokit: SELECT FROM LIST tab in Value Help Dialog (up to SAPUI5 1.82)

Screenshot from UI5 Demokit: Search and Select tab in Value Help Dialog (as of SAPUI5 1.84)

Conclusion

Have in mind that these changes are only a part of the overall improvements that we have planned for the value help dialog. Some of the future work is related to scenarios where you have many filters, so we’ll have progressive disclosure possibility of the filters, overall theming improvements, better visual separation between include and exclude operators in the dropdown and others. The work is still ongoing, so stay tuned for more updates. Changes are compatible, but you might need to adapt your tests.