SAPUI5 binding JSON model to control

Question

I am an ABAPer and learning SAPUI5. I am practising master-detail application through splitApp control. I have been searching for this kind of example but did not find any. so, i am writing here. Please guide me if possible.

I am using local JSON model(entries in a file named as Products.json). I have two views first.xml and seconds.xml which are master and detail respectively.

In first view I have a list and below is the code written in onItemSelect event of this list

var oSelectedItem = oEvent.getSource();
var oContext = oSelectedItem.getBindingContext("products");
var sPath = oContext.getPath();
var oPrdDetails = sap.ui.xmlview("view.second").byId("prdDetails");
oPrdDetails.bindElement({ path: sPath, model: "products" });

var oListDetails = sap.ui.xmlview("view.second").byId("listDetails");
oListDetails.bindElement({ path: sPath, model: "product2" });

Id="prdDetails" is panel in second view and Id="listDetails" is a list in second view. My problem is these controls doesn't get updated using the above code.

nistv4n nistv4n · Accepted Answer · 2016-05-24T11:30:47

SAPUI5 Developer Guide contains the necessary steps in the Walkthrough tutorial. It's recommended to do this by navigation in case of Master-Detail.

In your onItemSelect(), you can navigate to a route using this snippet:

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("detail", {
    invoicePath:     oItem.getBindingContext("invoice").getPath().substr(1)
});

In your detail view, you have to subscribe to pattern matched event like this:

oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);

The framework will call the specified this._onObjectMatched when the proper URL hash is requested:

_onObjectMatched: function (oEvent) {
    this.getView().bindElement({
        path: "/" + oEvent.getParameter("arguments").invoicePath,
        model: "invoice"
    });
}

If you bind the element to the UI, you can assign properties to controls in your view relatively ({propName}).

Of course, you have to set up the routing and component.js for your application, but this is also described in the walkthrough.

The example application can be downloaded from here (top right corner, Download button)

SAPUI5 binding JSON model to control

1 Answers