How to bind sap.m controls with OData Model created from OData Service?

[Former Member]

Hello Experts,

I am new to SAP Mobile Development and stuck with binding the sap.m controls with the OData model, which I have stored using the statement as below.

data = sap.ui.getCore().getModel().getData();

But all I can bind is just sap.m.List.

I want to bind other controls with the model as well.

Following is the code, that I have used, which is fired on the Button Tap event from first page (sap.m.page)

    new sap.m.Button
    ({
        text : "Proceed",
        tap : function(evt)
        {
            OData.read({ requestUri: "https://sapes1.sapdevcenter.com/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT/BookingCollection?$top=1", user: “P-user”, password: “password” },
            function (data)
            {
                var oModel = new sap.ui.model.json.JSONModel();
                var myData = {};
                myData.Products = data.results;
                oModel.setData(myData);
                sap.ui.getCore().setModel(oModel);
                data = sap.ui.getCore().getModel().getData();
                App.to("secondPage");
            },

            function(err)
            {
                window.alert("error: "+ err.message);
            }
            );
          }
    }),
//Some other code goes here
//and then the Code for Page 1 ends here

var productList = new sap.m.List("productList",
    {
        inset : true,
        type : sap.m.ListType.DetailAndActive,
        headerText : "Product List"
    }
);
                                
var itemTemplate = new sap.m.StandardListItem("itemTemplate",
    {
        title : "{CUSTOMID}",
        description : "{bookid}",
        type : sap.m.ListType.Navigation
    }
);
                                                          

var labelTemp =  new sap.m.Label("labelTemp",
    {
        text :  "{PASSNAME}",
    }
);

var labelTemp2 =  new sap.m.Label("labelTemp2",
    {
        text : “Luggage Weight : " + "{LUGGWEIGHT}"
    }
);
                                                            

var inputAgencyNumber = new sap.m.Input(
    {
        type : sap.m.InputType.Text,
        width      : "270px",
        // placeholder: 'Enter Agency Number’
        value : "{AGENCYNUM}"
    }
);

var VBoxy = new sap.m.VBox
    ({
        alignItems : sap.m.FlexAlignItems.Center,
        items:
        [
            labelTemp,
            labelTemp2,
            inputAgencyNumber,
 
            new sap.m.Button
            ({
                text : "Click Me",
                tap : function(evt)
                {
                    data = sap.ui.getCore().getModel().getData();
                    newData = sap.ui.getCore().getModel().getData();
                   
                    //The below statement gives result by displaying relevant data from the OData Service into the List
                    productList.bindItems("/Products", itemTemplate);
 
                     // Following statements do not have any effect and no data is displayed
                    labelTemp,bindItems("/Products");
                       tmp1=dataModel123.Products[0].PASSNAME;
                       alert("tmp1 is : " + tmp1); //Alert displays the data from Service
                    labelTemp = tmp1; //No value is displayed in the label, Trial and Error method

                    // Tried to get the value from service into a variable and assign it to the label, but it was of no use
                    labelTemp2.text = labelTemp2.text + tmp1;
                   
                    //Used bindValue property, but even this could not provide any data into the label
                    labelTemp.bindValue("/Products", null, sap.ui.model.BindingMode.TwoWay);  // Tried both OneWay and TwoWay, no results displayed
                    labelTemp2.bindValue("/Products", null, dataModel123.BindingMode.OneWay); // Tried both OneWay and TwoWay, no results displayed
 
                    //Also tried the following, but no data is being displayed                    
                    inputAgencyNumber.bindValue("/Products",null,sap.ui.model.BindingMode.Default);
                    inputSalesOrganization.bindElement("/Products", null);
                }
               })
 
 
        ],
    });

var secondPage = new sap.m.Page("secondPage",
    {
         title           : "New Page",
         showNavButton   : true,
        enableScrolling : false,
        //The ofllowing “init” function is never executed, what change needs to be done, to make the function execute
        init : function(evt)
         {
             alert("Init func called");
         },

        content :
         [
              VBoxy,
             productList,
        ],

        navButtonTap : function()
         {
            App.back();
        }
    }
);

App.addPage(landingPage).addPage(secondPage);
App.placeAt("content");

As mentioned above in the comments for “”secondPage”, the binding works fine only for List and not for other UI controls. I want to bind the OData service model to the following UI  controls

sap.m.Select
sap.m.Input
sap.m.Label
sap.m.InputSearch

Any help in these regards would be really great.

Thanks and Regards,
Suraj

[Former Member]

Hi suraj,

I guess the way you are binding item to label is incorrect.

First set your model like:

sap.ui.getCore().setModel(oModel,"Products");

Then Try:

labelTemp.bindProperty("text",{path:"Products>/PASSNAME"});

Regards,

Harshal

[Former Member]

Hello Harshal,

Thank you for your prompt reply.

I tried to bind by making the changes in my code, with the statements suggested by you.

But due to some reason, the app is not working.

If I uncomment the statement " sap.ui.getCore().setModel(oModel,"Products"); " that's when the app runs, and I can see the data from the model being displayed in alerts, but cant bind to the controls.

Could you please share a sample code for binding the sap.m control and as well as to set data into the model and get the data from the model.

It would be really helpful and great if I could get some inputs.

Thanks and Regards,

Suraj.

[former_member293602]

Hi Suraj,

just in case, you have not found this. The chapter "Data Binding" in the SAPUI5 SDK - Demo Kit give a very good introduction in this topic.

Regards, Frank