SAPUI5 : How to update display on SelectedKey change?

[Former Member]

I have problem with display information. I need to set the values from the Drop box.

Code from clothing.json

{
  "catalog": {
    "clothing": {
      "categories": [
        {"name": "Women", "categories": [
          {"name":"Clothing", "categories": [
            {"name": "Dresses", "categories": [
              {"name": "Casual Red Dress", "amount": 16.99, "currency": "EUR", "size": "S"},
              {"name": "Short Black Dress", "amount": 47.99, "currency": "EUR", "size": "M"},
              {"name": "Long Blue Dinner Dress", "amount": 103.99, "currency": "USD", "size": "L"}
            ]},

Code from View.xml

<Column id="colSize" width="11rem">
  <m:Label text="Size"/>
  <template>
     <m:Select
        id = "selSize"
        selectedKey="{size}"
        items="{path: '/sizes', templateShareable: true}"
        visible="{= !!${size}}"
        forceSelection="false">
        <core:Item key="{key}" text="{value}"/>
      </m:Select>
   </template>
 </Column>

and part the code from Controller.js

 onPressBtnSetSize: function() {
        var oComboBox = this.byId("cbxSelectSize"),
            sKey = oComboBox.getSelectedItem().getKey(),
            oSelect = this.byId("selSize");
            oSelect.setSelectedKey(sKey);       
    }

Now, when I call the method getSelectedKey(). I get the meaning of my sKey. But the display in the table does not change.

I think need to refresh the table. But all my attempts failed. Kindly help!

[Ivan-Mirisola · Accepted solution]

Hi Roman,

Your table will display the data in your model (JSON Model). So if you need it to display changes based on the selected key from the combo box element, your code needs to loop through the elements on the JSON model and change the corresponding values. Since your code is incomplete, there is no way we can understand how the JSON model is being created. But I assume you set the view's model on component initialization or controller's init method. Either way, the event handler for the Combo box element would need to change the corresponding JSON string and set it again so the view receives the notification to repaint.

Also, please check that the model is being set as two-way-data-binding. Usually if you are not using method setDefaultBindingMode on your JSON Model than the default would be two-way.

Regards,
Ivan

[Former Member · Accepted solution]

Thanks for the answer.

Could you, tell me. How can I quickly access fields "size"?
since, I only know the long way:
this.getView().getModel().getProperty("/catalog/clothing/categories");

....

and as I understand, it will take a lot of code

.....

[Ivan-Mirisola · Accepted solution]

Hi Roman,

Not sure what you mean by getting the field size. Are you referring to a JSON attribute value? Or are you referring to performing a loop on the categories and you want to know how many are there in your json string? If it is the latter, please check this site for JQuery examples. Otherwise, please be more specific.

Regards,
Ivan

[Former Member · Accepted solution]

Yes

I referring to a JSON attribute value ("size").

Regards,
Roman

[Ivan-Mirisola · Accepted solution]

in that case you could loop thru the values on your json model and replace the values from "size" attribute using the example mentioned (jquery.each).