Passing value from List to detail in UI5 mobile apps

[Former Member]

Hi All,

I have created a mobile app using WebIDE which shows list and details. I am able to store the data in offline store and load it in a list. I am also able to move from list to detail view. But I am stuck at binding the data in detail view.

I have a list of Customers. When I move to detail view, I want to show the customer details(like address, phone, email, etc). I have created labels for showing these details.

My code is as follows:

In List view press event:

press:function(oEvent) {
                        var app = sap.ui.getCore().byId("idApp");
                        var context = oEvent.oSource.getBindingContext();
                        var screen  = app.getPage("idCustomerDetail");
                        screen.setBindingContext(context);
                        app.to(screen);
                    },

In DetailView.js

onInit: function() {
    this.getView().addDelegate({
            onBeforeShow: function(evt) {
                evt.to.setBindingContext(evt.data);
            }
        });
  },

In DetailView.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" controllerName="com.arteria.view.CustomerDetail">
  <Page title="Customer Details" showNavButton="true" navButtonPress="handleNavButtonPress">
  <content>

  <Image src="img/Distributor.png" class = "customerImage" width="48px" height="56px"/>

  <Label text="" class = "customerNameLbl" value="{CustomerName}"/>

  <Label text="" class = "customerNumberLbl" value="{CustomerNumber}"/>

  <Label text="Address" class = "addressTitleLbl" width="100%"/>

  <Image src="img/Address.png" class = "addressImage"/>

  <Label text="" class = "addressLbl" value="{Street}"/>

  <Label text="" class = "cityLbl" value="{District}"/>

  <Label text="" class = "townLbl" value="{RegionName}"/>

  <Label text="" class = "stateLbl" value="{CountryName}"/>

  <Image src="img/phone_detil.png" class = "phoneImage" />

  <Label text="" class = "phoneLbl" value="{Telephone1}"/>

  <Image src="img/Email_detil.png" class = "emailImage" />

  <Label text="" class = "emailLbl" value="{Email}"/>

  <Label text="Actions" class = "actionsTitleLbl" width="100%"/>

  <Button class="callBtn" press= "callCustomer"/>

  <Button class="smsBtn" press= "messageCustomer"/>

  <Button class="emailBtn" press= "mailCustomer"/>

  <Label text="Related Links" class="linkTitleLabel" width="100%"/>

  <Button class="soStatusBtn" press= "moveToSoStatus"/>

  <Label text="SO Status" class = "soOrderLbl"/>

  </content>
  <customData><core:CustomData key="sapDtResourcePath" value="UNBINDKEY"/></customData></Page>
</core:View>

Kindly help me to find out where I am doing wrong.

[former_member182372 · Accepted solution]

var context = oEvent.getParameter("listItem").getBindingContext(); 

[Former Member · Accepted solution]

Hi Maksim,

Thanks for your response. I tried as per your comment. But I got the following error.

TypeError: undefined is not an object (evaluating 'oEvent.getParameter("listItem").getBindingContext()'

Actually I am using javascript to create the StandardListItem. I am reading data from offlineStore and binding it to the listItem. Following is my code used for that.

   oList = this.byId("CustomerList");
                oList.removeAllItems();
                var uri = window.localStorage.getItem("ApplicationEndpointURL");
                var user = window.localStorage.getItem("User");
                var password = window.localStorage.getItem("Password");
                var headers = { "X-SMP-APPCID" : window.localStorage.getItem("ApplicationConnectionId") };
                // Create OData model from URL
                var oModel = new sap.ui.model.odata.ODataModel(uri, true, user, password, headers);
                var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
                if (iOS) {
                    oModel = new sap.ui.model.odata.ODataModel(uri, true, user, password, headers);
                }
                var oTemplate = new sap.m.StandardListItem({
                    title: "{CustomerNumber}",
                    description: "{CustomerName}",
                    press:function(oEvent) {
                        var app = sap.ui.getCore().byId("idApp");
                        var context = oEvent.oSource.getBindingContext();
                        var screen  = app.getPage("idCustomerDetail");
                        screen.setBindingContext(context);
                        app.to(screen);
                    },
                    type:"Navigation"
                });
                oList.setModel(oModel);
                oList.bindItems("/Customers", oTemplate, null, null);
            },

Regards,

Dhani

[former_member182862 · Accepted solution]

Hi Dhani

will this help?

Sample

-D

[former_member182372 · Accepted solution]

i beleive

var context = oEvent.oSource.getBindingContext(); 

is just dirty version of

var cxt = e.getSource().getBindingContext();

[former_member182862 · Accepted solution]

I believe that it is not a good thing to access the property directly (in this case, oSource) when there is a getter function 🙂

-D

[former_member182372 · Accepted solution]

+1, absolutely agree

[Former Member · Accepted solution]

Hi Dennis,

I have followed that sample. But after moving to the next view, I am stuck at binding data it to the view.

Regards,

Dhani

[former_member182372 · Accepted solution]

do you still have that delegate in onInit of detail view??

1. this.getView().addDelegate({ 
2.             onBeforeShow: function(evt) { 
3.                 evt.to.setBindingContext(evt.data); 
4.             } 
5.         }); 
6. 
   
7. 
   
8. 
   

try to remove it

[Former Member · Accepted solution]

Maksim,

I removed the delegate in onInit. Nothing is there in onInit function now. Still, values are not getting displayed in the ui elements.

Regards,

Dhani

[former_member182372 · Accepted solution]

here is an example of setting binding context on a page befor navigation

JS Bin - Collaborative JavaScript Debugging</title> <link rel="alternate" type=&q...

[Former Member · Accepted solution]

Hi Maksim,

Followed as per that example. But no luck. Data is not getting bind to the ui elements.

Regards,

Dhani

[former_member182372 · Accepted solution]

var app = sap.ui.getCore().byId("idApp"); 

var context = oEvent.oSource.getBindingContext(); 

var screen  = app.getPage("idCustomerDetail"); 

app.to(screen, {ctx : context});

1. onInit: function() { 
2. var view = this.getView();    
3. this.getView().addDelegate({ 
4.             onBeforeShow: function(evt) { 
5.                 view.setBindingContext(evt.data.ctx); 
6.             } 
7.         }); 
8.   }, 

[Former Member · Accepted solution]

Hi Maksim,

Thanks for the help. It worked.

Regards,

Dhani

[former_member189237 · Accepted solution]

Hi Dhani,,

Did your problem resolved. Please help me because i am facing the same problem. I am using eclipse to develop the app

Thanks

Navdeep Kumar

[Former Member · Accepted solution]

Hi Navdeep,

My issue was solved and I have marked the correct and the helpful answers which helped me to sort out my issue. My last reply to the thread may also help you if the others didnt work.

Regrads,

Dhani

[former_member189237 · Accepted solution]

ok let me check...

Thanks

Navdeep

[Former Member · Accepted solution]

This message was moderated.

[Former Member]

Hi Friends,

Thanks for your help. I have tried another way to pass value from list to detail and that worked.

In ListView.js press function

press:function(oEvent) {
            var app = sap.ui.getCore().byId("idApp");
            var context = oEvent.getSource().getBindingContext();
            var screen  = app.getPage("idCustomerDetail");
            app.to(screen, {CustomerName:context.getProperty("CustomerName"), 
                CustomerNumber:context.getProperty("CustomerNumber"), 
                Street:context.getProperty("Street"), 
                District:context.getProperty("District"),
                RegionName:context.getProperty("RegionName"),
                CountryName:context.getProperty("CountryName"),
                Telephone1:context.getProperty("Telephone1"),
                Email:context.getProperty("Email")});
            },
            type:"Navigation"
        });

and in DetailView.js

onInit: function() {
    this.getView().addDelegate({
            onBeforeShow: function(evt) {
                sap.ui.getCore().byId("idCustomerDetail").getController().setValues(evt.data);
            }
        });
  },
  setValues:function(values)
  {
     this.byId("customerName").setText(values.CustomerName);
     this.byId("customerNumber").setText(values.CustomerNumber);
     this.byId("street").setText(values.Street);
     this.byId("district").setText(values.District);
     this.byId("regionName").setText(values.RegionName);
     this.byId("countryName").setText(values.CountryName);
     this.byId("telephone").setText(values.Telephone1);
     this.byId("email").setText(values.Email);
  },

I guess some other easier way will be there. Kindly let me know that too.

Regards,

Dhani