How to read data from one view in SAPUI5 and display it on the next view

[Former Member]

Hi Everyone,

I am trying to create a simple application with two views. my Details.view.js contains a table with multiple rows. When i click on a row, I wish to open the data from the selected row, in a different view- Contact.view.js.

I can navigate to the other view on clicking on a row, but i have no idea how to read and display data from that row in the second view.

This is my code-

var oLayout = new sap.ui.commons.layout.MatrixLayout('oLayout');

  oLayout.setWidth('100%');

  var oTable = new sap.ui.table.DataTable('oTable');

  oTable.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Employee ID"}),

     template : new sap.ui.commons.TextField({value : "{EmpId}"})

  }));

  oTable.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Name"}),

     template : new sap.ui.commons.TextField({value : "{Name}"})

  }));

  oTable.attachRowSelect(function(oEvent){

     sap.ui.getCore().byId("oShell").removeAllContent();

     sap.ui.getCore().byId("oShell").addContent(sap.ui.getCore().byId("<id of the view contact>"));

  });

     var sUrl = "/sap/opu/odata/sap/ZEIS_SRV/";

     var oModel = new sap.ui.model.odata.ODataModel(sUrl, true);

     sap.ui.getCore().setModel(oModel);

     oTable.setModel(oModel);

     oTable.bindRows("/EmpDetailsSet");

     oLayout.createRow(oTable);

     return oLayout;

My Contact.view.js has a similar table defined.

How do I display the selected row in the second view?

Thank You in advance.

[antonette_oberholster]

Hi Nimish

Have you tried declaring/creating your models and variables in the Index file? To make them global?

Regards

Antonette

[antonette_oberholster]

And try something like this in an event:

var oCore = sap.ui.getCore();

var oEmpID = oCore.byId(idCrtlEmpId);

var oEmpTel = oCore.byId(idCtrlEmpTel);

var oContext = oTable.getContextByIndex(oTable.getSelectedIndex());

if (oContext) {

   var oSellection = oContext.getModel().getProperty(oContext.getPath());

   oEmpID.setValue(oSellection["ID"]);

   oEmpTel.setText(oSellection["Tel"]);

} else{

   oEmpID.setValue("");

   oEmpTel.setText("");

[Former Member]

Hi Antonette,

1. I want to utilize the cleanest MVC architecture we can, which means keeping the index.html file free of unnecessary declarations.

2. From what I understand, if I implement this code which you gave me, in my attachRowSelect event, it will pull out the data from the selected row. Am I right? Also, what exactly is idCtrlEmpId and idCtrlEmpTel over here?

Thanks,

-NK

[antonette_oberholster]

Hallo Nimish

Index files do tend to get messy , that's just how we create our global variables and models.

They are the id's of the controls in the second view that you want to assign the values to. Oops, I see now I've included Tel which is in a different model. In that case you'll just pass the selected employee id to get the tel in in the other model.

And yes it will point to that specific record in you model.

Antonette

[Former Member]

Hello Antonette,

Haha I know the index files do get messy .

The code that you gave me, in which event am I supposed to use it? the attachRowSelect event of the first view? or an event in the second view? Can you please elaborate? I am stuck at codes from both the views

Thanks,

-NK

[antonette_oberholster]

Hey Nimish

Here are a few guidelines :

Tip for creating the table, add this property to be able to select anywhere in the row :
"selectionBehavior: sap.ui.table.SelectionBehavior.Row,"

Everything happens in the first view.

In Index you create an App:
eg:
<!-- Define all the pages linked to different views -->
var page1 = sap.ui.view({
   id:"view1",
   viewName:"myproject.view1",
   type:sap.ui.core.mvc.ViewType.JS});   
var page2 = sap.ui.view({
   id:"view2",
   viewName:"myproject.view2",
   type:sap.ui.core.mvc.ViewType.JS});                               
<!-- Attach pages to the application -->
   app.addPage(page1);
   app.addPage(page2);               
<!-- Link the application to the content id -->                               
   app.placeAt("content");

In the Views you return the content of the page:
eg:
var page1 = new sap.m.Page("page1",{ 
     content: myLayout1});
return page1;

To navigate between views (pages):
eg:
app.to("view2","show");  //in an event

To find the selection in the table:
eg:
var oCore = sap.ui.getCore();
var oContext = oTable.getContextByIndex(oTable.getSelectedIndex());
var oSellection = oContext.getModel().getProperty(oContext.getPath());
var oEmployee = oSellection["ID"];

To find the Tel in the second set:
eg:
getEmpTelUrl = "..../TelSet/?$filter=(EmpNo eq '" + oEmployee + "')";
var oModel = new sap.ui.model.odata.ODataModel(getEmpTelUrl, false);
oModel.read("TelSet('')",
     null,
     [],
     true,
     function(oData, oResponse) {
          var oTel = oData.empTel;
          var userData = {
               user : oEmployee ,
               tel: oTel
           };

          var userDataModel = new sap.ui.model.json.JSONModel();
          userDataModel.setData(userData);
          sap.ui.getCore().setModel(userDataModel, "userDataModel"); //use this model!
     },
     function(oEvent) {          
});

Hope this helps

Antonette

[santhu_gowdaz]

passing values from 1 view to another view,

https://scn.sap.com/thread/3309881

https://scn.sap.com/thread/3736543

Refer the examples given in these thread, if you still have issue let me know.

[Former Member]

Hi Santhosh,

I had already read those threads, one of them refers to xml views while I'm using js view. The other thread was a good read but they use sap.app and its events and methods from the sap.m library, which utilizes the concept of pages. I dont know how to bypass that since I am creating a desktop application.

Can you tell me something specific for my example?

Thanks,

-NK

[Former Member]

Will this help.? please see the console for the selected Object.

[Former Member]

Hi Indrajith,

Your link helped me understand how to pull the selected row from the table. Now that I have the data from my selected row, can you tell me how do I display it in a different view?

Thanks,

-NK

[santhu_gowdaz]

navigateSecond: function(oEvent)

    {

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

        var  secondview= sap.ui.getCore().byId("secondviewId");

        var oObject = Store all your data;

        oApp.to(secondview, {oObject:oObject});

    },

    In second view init method,

onInit: function()

    {

var view = this.getView();

        view.addEventDelegate({

            onBeforeShow: function(evt) {

                var oObjectVal = evt.data.oObject;

                //oObjectVal is haveing your all values

        }

        });

    },

[Former Member]

create a JSONModel say oModel1 and then set the selected data to the Model and set it to core. This model will be accessible in anyother view.

obj : selected json data

var oModel1 = new sap.ui.model.json.JSONModel();

  oModel1.setData(obj);

    sap.ui.getCore().setModel(oModel1,"selected");

In other View

  console.log(sap.ui.getCore().getModel("selected"))

[Former Member]

I am not using the json model, i am using an odata service instead which has all my data. Can your code work the same for an odata service?

can I use this-

obj : selected data

var oModel1 = new sap.ui.model.odata.ODataModel();

  oModel1.setData(obj);

    sap.ui.getCore().setModel(oModel1,"selected");

Second thing, This is supposed to be done in the firstview.js right?

Thanks,

-NK

[Former Member]

Using oData, doesn mean you should not use JSON. For passing an object there are many methods.

One such method is using global JSON

1. No you can't do that.

2. All the business logic should be written in controller. So you have to write this logic in firstController.js

[Former Member]

Yeah obviously in the controller, my point was in the file of the first view or not.

Your solution seems flawless, but its not working out for me.

If you dont mind me starting back at square one, My oData service has two entity sets EmpDetailsSet and EmpContactDetailsSet, both of which have EmpId as the key field.

I have created two views which have two tables, which consume the respective entity sets. I do not have Component.js or any kind of JSON file in my application (which is the most basic one SAP WebIDE can provide). I am not using any kind of jQuery code, and both of my views are .js.

Now, when I click on one row, the next view should show me contact details of the selected row, based on the key field EmpId of the selected row.

As a complete amateur to SAPUI5, my problem is- How do I achieve this^?

It would be great if you could shed light on that.

Thanks,

-NK

[Former Member]

Hi Santhosh,

Like I said, I am not using the sap.m.app and the sap.m library. I cannot have appId if i dont define an app. I want to create a simple desktop application.

If you dont mind me starting back at square one, My oData service has two entity sets EmpDetailsSet and EmpContactDetailsSet, both of which have EmpId as the key field.

I have created two views which have two tables, which consume the respective entity sets. I do not have Component.js or any kind of JSON file in my application (which is the most basic one SAP WebIDE can provide). I am not using any kind of jQuery code, and both of my views are .js.

Now, when I click on one row, the next view should show me contact details of the selected row, based on the key field EmpId of the selected row.

As a complete amateur to SAPUI5, my problem is- How do I achieve this^?

It would be great if you could shed light on that.

Thanks,

-NK

[Former Member]

Post what you have tried

[Former Member]

This is my Details.view.js (the first view)-

var oLayout = new sap.ui.commons.layout.MatrixLayout('oLayout');

  oLayout.setWidth('100%');

  var oTable = new sap.ui.table.DataTable('oTable',{

            selectionMode: sap.ui.table.SelectionMode.Single

  });

  oTable.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Employee ID"}),

     template : new sap.ui.commons.TextField({value : "{EmpId}"})

  }));

  oTable.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Name"}),

     template : new sap.ui.commons.TextField({value : "{Name}"})

  }));

  oTable.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Street1"}),

     template : new sap.ui.commons.TextField({value : "{Details/Street1}"})

  }));

  oTable.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Street2"}),

     template : new sap.ui.commons.TextField({value : "{Details/Street2}"})

  }));

  oTable.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "City"}),

     template : new sap.ui.commons.TextField({value : "{Details/City}"})

  }));

  oTable.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Country"}),

     template : new sap.ui.commons.TextField({value : "{Details/Country}"})

  }));

  oTable.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Salary"}),

     template : new sap.ui.commons.TextField({value : "{Salary}"})

  }));

  oTable.attachRowSelect(function(oEvent){

            sap.ui.getCore().byId("oShell").removeAllContent();

     sap.ui.getCore().byId("oShell").addContent(sap.ui.getCore().byId("idContact"));

  });

  var sUrl = "/sap/opu/odata/sap/ZEIS_SRV/";

     var oModel = new sap.ui.model.odata.ODataModel(sUrl, true);

     sap.ui.getCore().setModel(oModel);

     oTable.setModel(oModel);

     oTable.bindRows("/EmpDetailsSet");

     oLayout.createRow(oTable);

     return oLayout;

This is my Contact.view.js (the Second view)-

var oLayout2 = new sap.ui.commons.layout.MatrixLayout('oLayout2');

  oLayout2.setWidth('100%');

  var oTable2 = new sap.ui.table.DataTable();

  oTable2.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Employee ID"}),

     template : new sap.ui.commons.TextField({value : "{EmpId}"})

  }));

  oTable2.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Mobile Number1"}),

     template : new sap.ui.commons.TextField({value : "{MobOnWd}"})

  }));

  oTable2.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Landline Number1"}),

     template : new sap.ui.commons.TextField({value : "{LndlnOnWd}"})

  }));

  oTable2.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Mobile Number2"}),

     template : new sap.ui.commons.TextField({value : "{MobOnLv}"})

  }));

  oTable2.addColumn(new sap.ui.table.Column({

     label : new sap.ui.commons.Label({text : "Landline Number2"}),

     template : new sap.ui.commons.TextField({value : "{LndlnOnLv}"})

  }));

  var oButton = new sap.ui.commons.Button({

     text : "Back",

     press : function(oEvent){

         sap.ui.getCore().byId("oShell").removeAllContent();

         sap.ui.getCore().byId("oShell").addContent(sap.ui.getCore().byId("idDetails"));

     }

  });

     sap.ui.getCore().setModel(oModel);

     oTable2.getModel("oModel");

     oTable2.bindRows("/EmpContactDetailsSet");

     oLayout2.createRow(oTable2);

     oLayout2.createRow(oButton);

     return oLayout2;

My index.html contains a shell element oShell which holds the two views.

[Former Member]

Your odata service for Contact.view.js should be something like this.

https://****/sap/**\/EmpContactDetailsSet?$filter=EmpId eq '"+passedempid"'

Here passedempid is nothing but the selected Row empid. You can retrieve that as i had mentioned