Display Information on the basis of Selected Row

[Former Member]

Hello All,

I am trying to create one sample application with Element Binding in which when the user selects any row in the table in another view it displays the information on the basis of selected Row. I know on there are many threads and sample code for this, but I am not able to understand, I don't want to copy-paste the code. If someone could explains the steps it would be much appreciable.

Lets assume we have one JSON Model :

var data =                '{  "Leaders": [

                                    {"fName": "Sonia","lName":"Gandhi", "id" : "1"},

                                    {"fName": "Narendra","lName":"Modi","id" : "2"},

                                    {"fName": "Rahul","lName":"Gandhi","id" : "3"},

                                    {"fName": "Sushma","lName":"Swaraj"},"id" : "4" ],

                                    "Party" : [

                                    {"Party_Name": "Congress"},

                                    {"Party_Name": "BJP"},

                                     ]}'

Please someone can explain how can I achieve this when user select any row of first table , it gives the information about the party name.

Regards,

Mayank

[saivellanki · Accepted solution]

Hi Mayank,

Please correct me , if my understanding is correct. On Selection of the one object value, you want to retrieve another object value like for example if I click on 'Narendra Modi' object it should retrieve the party name as 'BJP',

If above understanding is correct, then I guess there should be one more extra key value added to both the arrays that is something like Party ID. Since, most of us know which party these politicians belong to, but the system doesn't know . So it can identify only with common key value between the arrays.

Your model should be something like below and your code will be like this: JS Bin - Collaborative JavaScript Debugging on select of the list item you will get the party name as an alert -

var data = {
      "Leaders": [{
        "fName": "Sonia",
        "lName": "Gandhi",
        "id": "1",
        "partyid": "1"
      }, {
        "fName": "Narendra",
        "lName": "Modi",
        "id": "2",
        "partyid": "2"
      }, {
        "fName": "Rahul",
        "lName": "Gandhi",
        "id": "3",
        "partyid": "1"
      }, {
        "fName": "Sushma",
        "lName": "Swaraj",
        "id": "4",
        "partyid": "2"
      }],
      "Party": [{
        "Party_Name": "Congress",
        "partyid": "1"
      }, {
        "Party_Name": "BJP",
        "partyid": "2"
      }]
    };

Please correct me if this is not your requirement.

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

Hi Sai,

Yes , you are right. It must have a common key ID. And yes that was my requirement. I just created that JSON for my learning . So did not think for common ID because I know which leader belong to which party , Poor system does not. Though still I have this doubt that how can I learn writing this code.

  var oObject = oEvent.getParameter("listItem").getBindingContext().getObject();

        var oPartyID = oObject.partyid;

        var oPartyObject = sap.ui.getCore().getModel().getProperty("/modelData/leadersData/Party");

        $.each(oPartyObject, function(index, value) {

          if (oPartyObject[index].partyid == oPartyID) {

            alert(oPartyObject[index].Party_Name);

          }

        });

Regards,

Mayank

[saivellanki · Accepted solution]

Hi Mayank,

The first and foremost thing is to have the API open. Now for example, we are dealing with sap.m.Table open the table API: JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.Table

If you refer API, you can see properties, aggregations and events that are associated with table. Now your question is with regard to the selectionChange event that I have used. If you navigate to the selectionChange event you can see what methods are available for the event object that has been passed through function. For example I have written code like this -

var oTable = sap.ui.getCore().byId("oTable");          //Your Table
oTable.attachSelectionChange(function(oEvent){        //Events expect function
               var oMode = oEvent;                        
});

Now I will on my debugging mode and have a breakpoint at line var oMode = oEvent; in chrome and check what does my oEvent object contains in the console -

When I select on the list Item, it will hit the break point which is placed at selection event and then from there I check what methods are available like getParameter(), getParameters(), getSource() etc. Since, getParameters() will fetch all the parameters but I just need one parameter so I used getParameter("listItem"); Check the below snip, how I nailed through -

It is just a matter of time, once you understand how to use API , how to debug and having the basics right. Then it will be easy to code. Just keep practising, you will understand the concepts.

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

Hi Sai,

Thank you so much for taking time and explaining the things in so detail. For me still long way to go but you gave a good start.

Regards,

Mayank Saxena

[karthikarjun]

Hi Mayank,

It is pretty much easy to achieve your requirement.

1. Bind your Records to Table by using binding concepts.

2. By Using getSelectionChange event, you can retrivew your selected records from table.

for ex:

JS Bin - Collaborative JavaScript Debugging

Thanks,

Karthik A

[Former Member]

Hi Karthik,

Thank you so much for the detailed code. But I would like to know how the party information could be shown in a different table. And currently when I am selecting radio button it is giving the First Name.

I know it's kind of easy activities, but I am learning and not getting how to play with events. Recently I learned how to bind JSON data with a table but not getting how to proceed with events i.e selecting rows and other stuff. Like in below-mentioned code If I don't know this lines, how I am supposed t o know what I need to write.

Could you please also tell how to learn this?

var ev = oControlEvent.getParameters().listItem;

        var contextPath = ev.oBindingContexts.Contact;

    alert(contextPath.getModel().getProperty(contextPath.sPath + "/fName"));

Regards,

Mayank

[karthikarjun]

Hi Mayank,

Fine,

1. oControlEvent is an object comes from selectionChange event.

It have your model data, SelectedRow information, Property details etc.

2. oControlEvent.getParameters().listItem - under oControlEvent, one of the function called getParameters - It holds your current selection path and its model information

3. var contextPath = ev.oBindingContexts.Contact; - Contact is a pathway to get your selected path

Now I have my selected path, so by using  "contextPath.getModel().getProperty(contextPath.sPath + "/fName")"

this function to get my selected record informations.

Thanks,

Karthik A