CODEWITHSUNDEEP
sapui5jsonmodel
Lokireddy
Lokireddy

Reputation: 11

SAPUI5 binding JSON model to control

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.

Upvotes: 0

Views: 1952

Answers (2)

Carsten Schlegel
Carsten Schlegel

Reputation: 1

If you want to bind a Textbox (<Text text="..." id="sample"/>) you must use bindProperty()

var path = oEvent.oSource.oBindingContexts.modelName.sPath;
var item = this.byId("sample");
item.bindProperty("text", `modelName>${path}/Name` );

Alternate for oBindingContext was: oEvent.oSource.getBindingContext("modelName").sPath

In bindProperty you must add the name of the Property (/Name, /Size, /Price). In this sample I use a template-string with backticks. Another way:

var bindingPath = "modelName>" + path + "/Name"
item.bindProperty("text", bindingPath);

Upvotes: 0

nistv4n
nistv4n

Reputation: 2535

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)

Upvotes: 0

Related Questions