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

Question

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?

Arley · Answer 1 · 2017-05-06T23:12:54.743

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

score 3 · Accepted Answer · answered Jul 08 '15 at 13:19

3

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

answered Jul 08 '15 at 13:19

masch

594
4
10

6

Now it is possible https://github.com/SAP/openui5/commit/b2191fd50e2115f8f9d2db7604a75fb50c57591f, just set forceSelection property to false. – Arley Sep 22 '15 at 20:01
4

It's sort of possible, although they're missing half the functionality. Once an item is selected there is no ability to unselect an item. – Eric Brandel Nov 27 '16 at 18:10

score 2 · Answer 3 · edited Mar 22 '19 at 09:43

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.

score 2 · Answer 4 · answered Mar 22 '19 at 09:10

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

score 0 · Answer 5 · answered Jul 23 '15 at 22:22

0

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...

answered Jul 23 '15 at 22:22

hackToxa

47
4

How does that bypass the issue of polluting the dataset? I agree it might be cleaner though from a code perspective... Keeps all the logic in one spot – Jorg Jul 23 '15 at 23:03
Adding an empty choice to the control does not pollute the data in the model. – hackToxa Apr 19 '16 at 12:59

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

5 Answers5

Linked