How can I bind not just selectable dropdown-menu items, but also the actually selected one?

[Former Member]

Hi!

I have a dropdown menu, where you can select the unit of the mass of a freight unit:

var oMassUnitInput = new sap.m.Select('massunit', {
     id : "massunit",
          items : {
          path : '/massunits',
          template : new sap.ui.core.Item({
               text : '{Text}',
               key : '{IdUnit}'
          })
     },
     change : [ function(oEvent) {
          var control = oEvent.getSource();
          }, this ]
});

It takes the items from the model. In the Gateway Service I created an entity /massunits for that.

On the page I have also many other dropdown-menus and textfields. They should be filled with data from the freight unit too.

Every dropdown-menu has his own path with selectable fields.

The problem is now:

How can I initialize the selected items with the correct data of my freight unit?

I already created another entity in the Gateway Service, which gives me the data, for example:

{ mass: 5, massunit : kg, volume : 3, volumeunit: cm3, ...}

Should I read them now from the Gateway Service with oModel.read and set the selected Items of the dropdown-menus manually, or is there a way to not just bind the selectable items, but also the actually selected items?

Greetings,

Martin

[Former Member]

Hi,

I'm not entirely sure what you are asking, but what I got was that you want the dropdowns to have the correct items selected based on the model data.

If this is indeed what you are looking for, then I would suggest binding each sap.m.Select item's selectedKey proeprty. So instead of sending in { mass: 5, massunit : kg, volume : 3, volumeunit: cm3, ...}, rather send the keys for those values.

For example:

{mass: 0, massunit: 1...}

where the 0 for mass represents the {IdUnit} that corresponds to the value 5 in that dropdown, and the 1 from massunit represents the {IdUnit} for the value of kg.

I hope this is helpful.

Edit:

This might be a possible way of binding it, you would just need to add the currentlySelected value in the model (in the oData service):

1. var oMassUnitInput = new sap.m.Select('massunit', { 
2.      id : "massunit", 
3.           items : { 
4.           path : '/massunits', 
5.           template : new sap.ui.core.Item({ 
6.                text : '{Text}', 
7.                key : '{IdUnit}' 
8.           }) 
9.      }, 
10.     selectedKey: "{currentlySelected}"
11. });

Edit 2:

    If there are no duplicates in the dropdowns (which there shouldn't be?) then you can bind both text and key to {Text}, then when sending in which option is selected, for example "kg", the selectedKey property will be able to know which item is selected, since key and text are the same

Regards

Albert Volschenk

[Former Member]

Does the model then look like this?

{
     "currentlySelected": "0",
     "massunits": [
          {  
               "Text": "kg",  
               "IdUnit: "0",  
          },  
          {  
               "Text": "g",  
               "IdUnit: "1",  
          },  
          {  
               "Text": "mg",  
               "IdUnit: "2",  
          }
     ]
}

If yes, how can I create such a model with the Gateway Service Builder? There I have to define an entity and an entityset. The entityset is just a collection of many of the same entities. So I would create an entity "massunit" which has an item "Text" and "IdUnit". An entityset would then be many of these entities. But I cannot send additional data like the "currentlySelected"-item. I can just add it to the entity, so that with every entity, I would send the currentlySelected-Item again, or is there another way to do this?

At the moment I have the following model:

{
     "massunits": [
          {  
               "Text": "kg",  
               "IdUnit: "0",  
          },  
          {  
               "Text": "g",  
               "IdUnit: "1",  
          },  
          {  
               "Text": "mg",  
               "IdUnit: "2",  
          }
     ]
}

and I have an entity "FUHead" with all the ids of the currently selected items of all dropdown boxes:

{
     "FUHead": [
          {  
               "mass": "0",  
                    "volume": "1",  
                    "material": "12345",  
               }
     ]
}

But is there a way to define these values in the dropdown-boxes as selected items?

Greetings, Martin

[Former Member]

Hi,

Would it be possible to access "FUHead" as an entity instead of a set?

Take a look at the jsbin JS Bin - Collaborative JavaScript Debugging, I created a local JSON model of a possible working solution. It would be a bit more difficult to bind to the FUHead data if it is a set, because it won't know which element in the array to bind to.

Edit:

IF you cannot change "FUHead" to a single entity, then you might try something like this:

selectedKey: {path: "/FUHead",
               formatter: function(input){
                 return input[0].mass;
               }}

But do take note that this will only work if you will ALWAYS have a FUHead entity set where the first entry contains the data that you want to bind to.

Regards

Albert Volschenk

[Former Member]

Thank you for your example 🙂

This works for a local model, but how would I do that if the model is on the server and I have to request the FUHead data for a special freight unit?

Can I put into the selectedKey: {} a filter like:

...

path : '/FUHead',

filters : [ new sap.ui.model.Filter("ID_FU", sap.ui.model.FilterOperator.EQ, fu) ],

...

And is there a way to load the data for the model just once with a filter and then bind all the selectedKeys of all dropdown-menus to the correct values? And how can I make my sapui5 app download the head-data only once for multiple dropdown-menus?

Greetings,

Martin