Table with Context Binding

Question

I am an intern at SAP, and I am having some problem with Context binding in SAPUI5 for a table in an XML view.

So I am trying to create a dialog panel in SAPUI5 in an XML view so that if I click on a row in a table, then a separate popup/panel should come up above it and display more information about the product I clicked on

I have it working with javascript with:

            var details = new sap.m.Panel("details",{
            headerText: "This is the {name}",
            visible: false,
            content: [
                new sap.m.Table({
                alternateRowColors: true,
                fixedLayout: false,
                sticky: sap.m.Sticky.ColumnHeaders,
                columns:[
                    new sap.m.Column({
                        header : new sap.m.Label({
                            text : "This is the Number of failed Tests: {coverage}"
                        })
                    }),
                    new sap.m.Column({
                        header : new sap.m.Label({
                            text : "This is the Number of Bugs: {unitTestCoverage}"
                        })
                    }),
                    new sap.m.Column({
                        header : new sap.m.Label({
                            text : "This is the P/F ratio: {unitFirstCoverage}"
                        })
                    })
                    ]})
//                  dataTable
            ]
        });

with in XML I have my details panel as:

            <!--Details Panel!-->
            <Panel id= "details" 
            headerText= "This is the {data>name}" 
            visible= "false">
                <content>
                    <Table>
                        <columns>
                            <Column>
                                <header>
                                <Label text="This is the Number of failed Tests: {data>coverage}" />
                                </header>
                            </Column>
                            <Column>
                                <Label text="This is the Number of Bugs: {data>unitTestCoverage}" />
                            </Column>
                            <Column>
                                <Label text="This is the P/F ratio: {data>unitFirstCoverage}" />
                            </Column>
                        </columns>
                        <items>

                        </items>
                    </Table>
                </content>
            </Panel>

I am calling the row within the XML with this snippet:

            ............
            <items>
                <ColumnListItem
                press= "onItemSelected"
                type= "Active">
                    <cells>
             .........

With the controller context binding it with:

onItemSelected: function(oEvent) {
    var oSelectedItem = oEvent.getSource();
    var sPath = oSelectedItem.getBindingContextPath();
    var oProductDetailPanel = this.byId("details");

    oProductDetailPanel.bindElement({ path: sPath });
    this.byId("details").setVisible(true); 
},

I suspect that i am going wrong with how I am trying to call the data in my details panel in XML, and how the data gets binded at the end

Answer 1

try this.

var sPath = oSelectedItem.getBindingContextPath()

with

var sPath = oSelectedItem.getBindingContext('data').getPath()

Alongside:

oProductDetailPanel.bindElement({ path: 'data>' + sPath });