SAPUI5: How to realize a Menu with the help of MultiComboBox

Question

I muss realize the following Menu: Menu

I decide for this Menu to use: MultiComboBox:

<MultiComboBox items="{modelExample>/}" >  //Model with a Title and Options
    <core:Item text="{modelExample>option}"/>
</MultiComboBox>

Issues

1. The Code does showcase all the Options, don't know yet how to place the Title above the Options to achieve this display. What i tried: Link- doesn't really work

2. How to add a new Column for the MultiComboBox.

3. If i want to add a new ListItem with the help of controller, it looks as this :

   var l = new sap.ui.core.ListItem("ID"); var label = new sap.m.Label(); label.setText("Hallo Welt"); l.addCell(label); //Cell isn't supported -> those Error MultiComboBox.addItem(l);

4. Cell isn't supported by MultiComboBox unlike Table. -> How can i add a cell/w/e with a title and all the other Options to the ListItem -> than MultiComboBox.addItem(l) ?

EDIT: Model

Answer 1

The "Tile" is the sorter or better the "group"

<MultiComboBox
    selectionChange="handleSelectionChange"
    selectionFinish="handleSelectionFinish"
    width="500px"
    items="{
        path: '/ProductCollection',
        sorter: {
            path: 'SupplierName',
            descending: false,
            group: true
        },
        groupHeaderFactory: '.getGroupHeader'
    }">
    <core:Item key="{ProductId}" text="{Name}" />
</MultiComboBox>

For example.. it group ALL Products with the same SupplierName in the combobox. I dont know how your model looks but extend it with a group and use it on the sorter

and in your controller you need also to mention the function

getGroupHeader: function (oGroup) {
        return new SeparatorItem( {
            text: oGroup.key
        });
    }

for example your model:

{
    "ProductCollection": [
        {
            "ProductId": "HT-1000",
            "Category": "Laptops",
            "MainCategory": "Computer Systems",
            "TaxTarifCode": "1",
            "SupplierName": "Very Best Screens",
            "WeightMeasure": 4.2,
            "WeightUnit": "KG",
            "Description": "Notebook Basic 15 with 2,80 GHz quad core, 15\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
            "Name": "Notebook Basic 15",
            "DateOfSale": "2017-03-26",
            "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/documentation/sdk/images/HT-1000.jpg",
            "Status": "Available",
            "Quantity": 10,
            "UoM": "PC",
            "CurrencyCode": "EUR",
            "Price": 956,
            "Width": 30,
            "Depth": 18,
            "Height": 3,
            "DimUnit": "cm"
        },
        {
            "ProductId": "HT-1001",
            "Category": "Laptops",
            "MainCategory": "Computer Systems",
            "TaxTarifCode": "1",
            "SupplierName": "Very Best Screens",
            "WeightMeasure": 4.5,
            "WeightUnit": "KG",
            "Description": "Notebook Basic 17 with 2,80 GHz quad core, 17\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
            "Name": "Notebook Basic 17",
            "DateOfSale": "2017-04-17",
            "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/documentation/sdk/images/HT-1001.jpg",
            "Status": "Available",
            "Quantity": 20,
            "UoM": "PC",
            "CurrencyCode": "EUR",
            "Price": 1249,
            "Width": 29,
            "Depth": 17,
            "Height": 3.1,
            "DimUnit": "cm"
        },

you see "SupplierName": "Very Best Screens"

so if you got 10 items with "SupplierName": "Very Best Screens" it will group under Very Best Screens. If you got 1000 items under "tile1" you have Tile 1