[UI5] Things that Demo Kit didn’t tell you. <MultiComboBox>

For UI5 developers maybe Demo Kit is the most useful tool. We could find many documents as well as samples. But sometimes we still have some questions that Demo Kit could not answer. So I would like to write a blog series called “Things that Demo Kit didn’t tell you“. In this series I would like to explore the controls with some other resources, e.g. source code, Fiori Guideline. Hope this series could help you and if you find any mistakes in my blog please also help to point them out. Thank you! Catalog of this series could be found here.

MultiComboBox Is Actually an Input

From the following image we could see MultiComboBox is actually derived from sap.m.InputBase.

Different from ComboBox, MultiComboBox displays all the selected items in tokens. If you have a look at the source code of MultiComboBox you will see it’s really complicated. Because it has to support so many key-press events:

1. Normal keys for searching and filtering in the drop down list.
2. Home/end/left/right keys for selecting different tokens.
3. Up/down keys for moving focus between items in the drop down list.
4. Enter/space key for confirming input

So some times you will find the logic in MultiComboBox a little different from other controls (e.g. typing a charactor in the input will trigger validation immidiately), because it has to deal with so many key-press events and tries to avoid any conflicts.

Guidelines of MultiComboBox

Following guidelines need to be considered.

1. Count of items in MultiComboBox should not be larger than 200. If you have too many items, please use MultiInput with either select dialog or value help dialog.
2. If user need to see more information about the items, we should avoid using MultiComboBox, since it cannot display too much information. In this case use select dialog or value help dialog.
3. Label of the items in the drop down list should be as short as possible.
4. Try to sort the items in the drop down list if possible:
   1. Logically, e.g. Daily, Weekly, Monthly….
   2. Alphabetical
   3. Numeric
   4. Chronological, e.g. Sunday, Monday, Tuesday….