sap.m.Select: start with a blank selection input element

问题

When using a data aggregation on sap.m.Select, the first entry is always selected. Here's a link to the SDK's preview.

Example code from my app

new sap.m.Select("id-names", {
    width: '100%',
}).bindAggregation("items", "data>/trip/names", new sap.ui.core.Item({
    text: "{data>Name}"
}));

There is a parameter called selectedKey on the constructor to change this to another index. What I want is the select to be blank, because I want to force my users to make a choice, not blandly accept the first entry in the list.

I could force an blank entry in my aggregation data>/trip/names but that would pollute my list.

Is there a better way to achieve this?

回答1:

Currently, no. There seems to be no better way. There is a ticket for that on GitHub.

回答2:

Since the OpenUI5 version 1.34, you can set the forceSelection property to false.

The forceSelection property indicates whether the selection is restricted to one of the items in the list. The default value is true (which means, if the selection is not set, the first item in the dropdown list is selected).

When to set it to false?

If you do not want a default item to be pre selected.

Additional information https://github.com/SAP/openui5/commit/b2191fd50e2115f8f9d2db7604a75fb50c57591f

回答3:

It's also my opinion to avoid messing with the dataset and much liked the idea of adding an additional item aggregate. However my improvement on this is to use a formatter on the control itself so it is clearly visible and executed at the right time. I make use of a formatter with fully qualified controller to get the control as 'this' parameter. In the formatter function I add a ListItem, as proposed by @Victor S

In XML view

<Select forceSelection="false" selectedKey="{model>/key}" items="{path: 'model>/Items'}" icon="{path: '', formatter: 'mynamespace.Utils.addDeselectOption'}">

In the Utils controller:

addDeselectOption: function() {
    var that = this;
    this.getBinding("items").attachDataReceived(function(){
        that.insertItem(new sap.ui.core.ListItem({text: '', key: undefined}), 0);
    });
}

Works form me in UI5 1.52

回答4:

Even though this solution is not great, I managed to get the empty field stick by adding both, the forceSelection=false property, and also in the controller's onInit function (I used the Select element):

    var codeField = this.getView().byId("codeField");
    setTimeout(function() {
        codeField.insertItem(new sap.ui.core.ListItem({text: '', key: undefined}), 0);
    }, 1000);

If the forceSelection=false is left out, the field will load either too early or too late to the drop down, which will cause the wrong selection to be visible. Hope it helps someone.

回答5:

You can also extend the control and build you own select with e.g. an additional parameter add empty choice...I am actually also thinking about that...

来源：https://stackoverflow.com/questions/31261372/sap-m-select-start-with-a-blank-selection-input-element

标签

sapui5