CODEWITHSUNDEEP
data-bindingtextfieldsapui5
user3189516
user3189516

Reputation: 73

Data binding from table to dialog + update data from dialog to table SAPUI5

I have the following function, which is a part of dialog (where data supposed to be bind with data table): 

handleChangeRow : function() {

        var oTable = sap.ui.getCore().getElementById('WorkOrder');

        var oModel2 = oTable.getModel("test");

        //var oModel2 = oTable.getModel();

        console.log("oModel2 : " + oModel2);

        var odata = oModel2.getProperty("/workorderdata");

        console.log("odata : " + odata);
        var selIndex = oTable.getSelectedIndex();
        var selectedDataObject = odata[selIndex];

        var oDialog = new sap.ui.commons.Dialog("Dialog", {
            modal : true,
            closed : function(oControlEvent) {
                sap.ui.getCore().getElementById('Dialog').destroy();
            }
        });

        oDialog.setTitle("Change Work Order");
        var oLayout = new sap.ui.commons.layout.MatrixLayout( {
            columns : 3,
            width : "100%"
        });

        var oTF = new sap.ui.commons.TextField("scopeITRequestCode", {
            tooltip : 'ScopeIT Request Code',
            editable : true,
            width : '200px',
            value: "{test>/workorderdata/0/scopeITRequestCode}"
        });

        var oLabel = new sap.ui.commons.Label("lbscopeITRequestCode", {
            text : 'ScopeIT Request Code',
            labelFor : oTF
        });

        oLayout.createRow(oLabel, oTF);
}

with value: "{test>/workorderdata/0/scopeITRequestCode}" using "test" id of the model I am trying to get into model data: 

success : function(data) {          
                this.model = new sap.ui.model.json.JSONModel();

                this.model.setData({

                    workorderdata: data

                });
                sap.ui.getCore().setModel(this.model, "test");
}

which works fine, but only for single textfield. how can I change reference "test>/workorderdata/0/scopeITRequestCode" so changes will be dynamical, and user can change all text fields? with other words, how to bind value of selected cell of the row in table with the value of text field in dialog?

Upvotes: 2

Views: 16876

Answers (1)

cschuff
cschuff

Reputation: 5532

You can find the parameters passed to the rowSelectionChange event here: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.table.Table.html#event:rowSelectionChange

Having said that and assuming that dialog binds to the same model than your table does your code would probably look like this:

handleChangeRow : function(oEv) {
        var oBindingContext = oEv.getParameter("rowContext");
        var oPath = oBindingContext.getPath();

        var oDialog = new sap.ui.commons.Dialog("Dialog", {
            title : "Change Work Order",
            modal : true,
            closed : function(oControlEvent) {
                sap.ui.getCore().getElementById('Dialog').destroy();
            }
        });
        var oLayout = new sap.ui.commons.layout.MatrixLayout( {
            columns : 3,
            width : "100%"
        });

        var oTF = new sap.ui.commons.TextField("scopeITRequestCode", {
            tooltip : 'ScopeIT Request Code',
            editable : true,
            width : '200px',
            value: "{test>"+ oPath +"/scopeITRequestCode}"
        });
        var oLabel = new sap.ui.commons.Label("lbscopeITRequestCode", {
            text : 'ScopeIT Request Code',
            labelFor : oTF
        });
        oLayout.createRow(oLabel, oTF);
}

Unfortunately I'm not to sure on how to get the model name but you'd probably also be fine if you omit the model name in the binding and use setModel instead to be a little more dynamic:

oDialog.setModel(oBindingContext.getModel());

Since the TextField and the Table are bound against the same model an update of the field will update both controls. What you are trying to achieve with the TextField is a so called TwoWayBinding (get a value from the model (OneWay) and write it back when changed (TwoWay)) which e.g. an ODataModel does not support. You can check like this:

myModel.isBindingModeSupported(sap.ui.model.BindingMode.TwoWay);

More details here on Binding and Binding Modes here: https://openui5.hana.ondemand.com/#docs/guide/Introduction.1.html https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.model.BindingMode.html https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.model.Model.html#isBindingModeSupported

GL Chris

Upvotes: 6

Related Questions