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:
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.
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.
Thanks for the detailed explanation Vladimir. In the second screenshot, I do see two headers "Define Conditions: Product". Suggestion: Can we differentiate this with different header names?
This looks like duplicate headers.
Thanks for the question. We can't have different headers. Actually this is a small 'leftover' that is due to be fixed in near future, so we remove the 'Define conditions' in the panel.
Hi Vladimir Velinov,
Thanks for the blog. In the second screenshot, there is a filter bar with a basic search how do we filter the value by pressing enter key?
Actually, it is filtering when we click on the go button right side.
Hi Revanth Venkategowda Chandrashekar
I guess you mean the 3rd screenshot? When you're in search field, means search field is focused and typing and press Enter this has the same effect as if you press Go button. So search term along with any filters' values are send to the backend as part of the OData query options $search and $filters.
Hi Vladimir Velinov ,
My SAP system is on 1.71.40 version and the filter field on my Fiori app comes with Select from List instead of Search and Select. As a result I have to press the Go button, after pressing F4, to show the available values. Could you please advise how can I set this property (isRunningInValueHelpDialog) true in my oData MPC class? I am looking for ABAP based annotation to do this. A code would be really helpful.
Also can I do this locally in the Fiori project?
One of the improvements is small changes in titles like "Search and Select", that previously was "Select from list". Both are the same thing. There was a change in the default behaviour in 1.78, so in newer versions we fill the table with results. See what's new
SmartFilterBaris open, the table is now populated with results on initial loading without having to click the Go button. To prevent this behavior, you can set
trueor use the
FetchValuesproperty of the
For versions prior 1.78 you need to apply ControlConfiguration to and change the default of the
As for your question about oData MPC I'm not sure what you mean. I'm also no expert in ABAP.