Search code examples
sapui5

how to add data to table row from the dropdown selected in a dialog box

I have the dropdown in dialog as:

    if (!this.pressDialog) {
        this.pressDialog = new Dialog({
  title: "Wafer",
  contentWidth: "40px",
            contentHeight: "300px",
            content: [
    new sap.m.Text({width:'100%', text: 'Component Name' }),

    new sap.m.Select({
    width: '60%', 
    items: [

    new sap.ui.core.Item("item11", {text: "Disregarded"}),

    new sap.ui.core.Item("item12", {text: "Corporation"}),

    new sap.ui.core.Item("item13", {text: "Partnership"})

    ]

    }),

    new sap.m.Text({ width:'100%',text: 'Category' }),
    new sap.m.Select({
      width: '60%',
      items: [

      new sap.ui.core.Item("item1111", {text: "Disregarded"}),

      new sap.ui.core.Item("item1234", {text: "Corporation"}),

      new sap.ui.core.Item("item1314", {text: "Partnership"})

      ]

      }),


          new sap.m.Text({width:'100%', text: 'Quantity' }),
          new sap.m.Select({
            width: '60%',
            items: [

            new sap.ui.core.Item("item15211", {text: "Disregarded"}),

            new sap.ui.core.Item("item136454", {text: "Corporation"}),

            new sap.ui.core.Item("item213754", {text: "Partnership"})

            ]

            }),

        new sap.m.Text({width:'100%', text: 'MainCategory' }),
        new sap.m.Select({
          width: '60%',
          items: [

          new sap.ui.core.Item("item11411", {text: "Disregarded"}),

          new sap.ui.core.Item("item34", {text: "Corporation"}),

          new sap.ui.core.Item("item314", {text: "Partnership"})

          ]

          })],




            beginButton: new Button({
                type: ButtonType.Emphasized,
                text: "OK",
                press: function () {
                    this.pressDialog.close();
                }.bind(this)
            }),
            endButton: new Button({
                text: "Close",
                press: function () {
                    this.pressDialog.close();
                }.bind(this)
            })
        });

        //to get access to the global model
        this.getView().addDependent(this.pressDialog);
    }

It looks as:

enter image description here

How can I capture the data here from the dialog box and add to the table having the columns as same as each item,

  • Component Name,
  • Category,
  • Quantity,
  • main category

I am trying how can I make a JSON from the values of selected dropdown so that can bind to the table

Sorry for one more Q: how can I center the select boxes in a dialog

Any help or guiding links are appreciated TIA!

table is as

Solution

  • So, what I understand is that you want to make a Json model from the selected dropdown (sap.m.Select). We first create the model :

    let model= {
            "componentName": "Disregarded",
            "category": "Disregarded",
            "quantity": "Disregarded",
            "mainCategory": "Disregarded",
        };
let jsonModel = new JSONModel(model);
this.getView().setModel(jsonSetting, "tableModel");

    Than for each sap.m.Select we have something like this (example for category):

    new sap.m.Select({
                        width: '60%',
                        textAlign: "Center",
                        selectedKey: "{tableModel>/category}",
                        items: [
                 new sap.ui.core.Item("item1111", {text: "Disregarded",key:"Disregarded"}),

                 new sap.ui.core.Item("item1234", {text: "Corporation",key:"Corporation"}),

                 new sap.ui.core.Item("item1314", {text: "Partnership",key:"Partnership"})
                        ]
                    }),

    You have to add key for each sap.ui.core.Item like the desirable text and than to specify dynamic binding between the model and selected item selectedKey: "{tableModel>/category}". When another item is selected the change will be visible in the model.

    To center the text in the select boxes use textAlign: "Center" and if you want to center against the dialog use sap.m.FlexBox:

    new sap.m.FlexBox({
         justifyContent: "Center",
         items:[
              new sap.m.Select({
                    ...
              }),
         ]
}
),

    If the select boxes appear wrapped delete property width:60%

    Now you have the model ready and you can bind it with the table (I think you want this in the function of OK button ).

    Note that the variable model will specify the initial selected keys for each sap.m.Select (everyone set to Disregarded).