Table with Context Binding - sapui5

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 });