What's the best way to add add 'All' v

Question

//Update: I use this <select> control in Filter Bar

In control of UI5，if I select one item, I can't go back to non-selected state, so I want to add 'All' value in items:

This works:

<Select>
    <core:Item key="" text="All" />
    <core:Item key="another value" text="another value"/>
</Select>

But "All" disapear in this example:

<Select
    items="{
        path: '/PRODUCTS'
    }">
    <core:Item key="" text="All" />
    <core:Item key="{ID}" text="{Route_Name}" />
</Select>

What should I do?

Answer 1

You must add some key value to the item with text="All". Please have a look in the jsbin working example.

var oModel = new sap.ui.model.json.JSONModel(
  {
    items:
    [
      { KEY: null, LABEL: "-ALL-"},
      { KEY: "A", LABEL: "A"},
      { KEY: "B", LABEL: "B"},
      { KEY: "C", LABEL: "C"},
      { KEY: "D", LABEL: "D"}
    ]
});

var oSelect = new sap.m.Select({
    items: {
      path: "/items",
      template: new sap.ui.core.Item({ key: "{KEY}", text:"{LABEL}" })
    }
})

oSelect.setModel(oModel);

Answer 2

add below where you set Model.

var oView = this.getView();
    fnSuccess(oData,oResponse){
        var value = {
                      ID          : "All",
                      Route_Name  : "All",
            };

        oData.results.splice(0,0,value);              // oData your array of data
        var oSelectData = {
                            PRODUCTS : oData
            };

        var oSelectJSON = new sap.ui.model.json.JSONModel();
        oSelectJSON.setData(oSelectData);
        oView.byId("id_select").setModel(oSelectJSON);
    }

Answer 3

Similar to @vivek' answer, append an All when data loaded:

    onHazardTabBarSelect : function(oEvent) {
        var oTabBar = oEvent.getSource(),
        sSelectedTabId = oTabBar.getSelectedKey(),
        oSelectedTab = sap.ui.getCore().byId(sSelectedTabId),
        sAssignmentPath = oSelectedTab.getBindingContext().getPath();

        this._oModel.read( sAssignmentPath + "/assignedControls", {
            urlParameters: {
                "$expand": "control"
            },
            success: this.addControlSelectData.bind(this), 
            error: this.errorCallback.bind(this)
        });
    },

    addControlSelectData : function(oEvent) {
        var oSelectControl = this.byId("controlSelect"),
        aControlResults = oEvent.results,
        aResult = [{
            "control" : {
                id: "All",
                name: "All"
            }
        }],
        aData = aResult.concat(aControlResults);
        oSelectControl.setModel(new sap.ui.model.json.JSONModel(aData));
    },

Answer 4

If you want to let users to select none item again, I'd recommend to use sap.m.ActionSelect or sap.m.ComboBox over a basic Select control.

In case of ActionSelect: Turn off forcing selection with forceSelection:false and add an action button with a press event handler executing myActionSelect.close().setSelectedKey("");. Here is an example: https://embed.plnkr.co/tk9ulw/

Answer 5

I did this by creating two arrays, one with the 'All' key/value pair, then another with my list of items, then concat() them together. In your JSON view model, declare the array:

selections[];

In the onBeforeRendering() lifecycle method, check if the array is populated (< 0), and if so, read the entity set which contains your list:

    onBeforeRendering: function() {
        // Build the provinces list
        if (this.getModel("view").getProperty("/selections").length === 0) {
            this.getModel().read("/SelectionList", {
                success: this._setSelections.bind(this)
            });
        }

Upon success, build the array and set the property:

    _setSelections: function(oResponse) {
        var aSelections = [{
            key: "",
            text: "(All)"
        }];
        if (typeof oResponse.results !== "undefined") {
            aSelections = aSelections.concat(oResponse.results);
        }
        this.getModel("view").setProperty("/selections", aSelections);
    },

Answer 6

A FacetFilter control would suit your requirement. It has an all selection to select all the values in the List.

<FacetFilter
            id="idFacetFilter"
            type="Simple"
            confirm="handleConfirm">
            <lists>
                <FacetFilterList
                    title="Route"
                    key="route"
                    mode="MultiSelect"
                    items="{
                        path: '/PRODUCTS'
                    }" >
                    <items>
                        <FacetFilterItem
                            text="{Route_Name}"
                            key="{ID}" />
                    </items>
                </FacetFilterList>
            </lists>
        </FacetFilter>