Skip to Content

UI5 Twoway binding of JSON model BETWEEN Views.

There seem to multiple ways of allowing a json model to be accessed by multiple controller/views. Some articles say that your model should be defined in the component.js, some say it can (somehow) be defined via routing, and others say that you can define a model in a controller and then set it to be accessible by all other controllers/views.

Ideally I would like to define a model in the controller of our landing view, as defined in the routine manifest.json file. I would then like to access this json model (twoway) from different controller/views. Can anyone provide a fullproof way of doing this?.

So, let's assume I have a model that looks roughly like this. Forgive any format issues, I'm just tying this in, not copying it, just to give an example:

{ "mainentity": {
    "entityset1": [ ....],
    "entityset2": [....],
    "entityset3": [.....]

I have three controller/views, and each one may require to update their respective entityset.

Once complete, the "mainentity" json model will then be used in an Odata gateway service to push up the data.

What method can I use to access and update the model/entitymodel and it's substructures (Entitysets) within the controllers/Views?.

This is what I have tried:

From the controller for my landaing page(first view I have something like

oModel = new sap.ui.model.json.JSONModel(oData); 
sap.ui.getCore().setModel(oModel, "modelname");

And then in the controller for my view I have:

oData = sap.ui.getCore().getModel("modelname").getData();

But, that gets the data. I thought that if I retrieved the model then I have the data already, so that I can then just bind the model to my view like so:

oModel = sap.ui.getCore().getModel("modelname").; 
this.getView().byId("idTblMyTable").setModel(oModel, "EntitySet1");

And in my XML view accessing the data using something like

<Input value={mainentity>entityset1>/field1} />

But alas, that does not seem to work. When I debug at the controller level I don't think oModel is being set correctly.

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

3 Answers

  • Mar 13, 2017 at 02:44 PM

    1.model has nothing to do with routing


    sap.ui.getCore() is quick dirty way to achieve what u want, but it is not the way to go
    the binding should be like this
    <Input value={Entityset1>/entityset1/field1} />

    3.if you want to share the model, just store the model at component level

    Add comment
    10|10000 characters needed characters exceeded

    • Thanks for the reply.

      So, I assume we can set the model within the Component.js code. Do we then access in the same way?. I assume not in the Init function of our controllers, and, I assume we still need to bind it to the view from the controller.

  • Mar 13, 2017 at 04:13 PM

    just store the model in component and do the binding in the view, nothing else

    Add comment
    10|10000 characters needed characters exceeded

    • Jun, bear in mind my views are defined using XML and controlling is via the controllers. Are you saying that I can define the model in the component and then access this model via the table and input labels in XML?. There is no binding required like I would carry out from Controller to XML view?.

      Thought it worth checking, although I will give it try now.

  • Mar 16, 2017 at 09:16 AM

    Tried that Jun, but it did not work for me. I think though it might be because the view I'm using was not displayed using routing, it was called from the view that displays the Icontabbar and each tab just calls the appropriate view, avoiding routing, using the method:

    <mvc:XMLView viewName="tabLayout.view.MyView"/>

    This could be the reason. In regards to the model being defined in the component, I used the same method as displayed in this good example:


    So, at the moment I suspect it's not working for me, maybe, because I'm not arriving at the view via routing. But if you think that should not matter then please let me know.

    Add comment
    10|10000 characters needed characters exceeded