Question Re: UI5 data binding question in Technology Q&A

UI5 data binding question

trmt — Wed, 14 Sep 2022 10:31:22 GMT

Hello ��

I started learning UI5 and I'm having a bit of trouble with data binding.

Let's say I have a list of directors:

directors.json
[
   {
      "directorID":1,
      "name":"Christopher Nolan",
      "age":52,
      "location":"London",
      "oscars":5
   },
   {
      "directorID":2,
      "name":"Quentin Tarantino",
      "age":59,
      "location":"United States",
      "oscars":8
   }
]

That I will display in a list.

On clicking a certain director I would like to take the user to another page, basically another list that will show the movies of this director. These movies will be taken from another .json file that has a few entries with the directorID as the common key between the two:

<strong>movies.json</strong>

<strong>[
   {
      "directorID":1,
      "movieID":1,
      "name":"Inception",
      "year":2010,
      "mainCharacter":"Leonardo Di Caprio"
   },
   {
      "directorID":1,
      "movieID":2,
      "name":"Interstellar",
      "year":2014,
      "mainCharacter":"Matthew McConaughey"
   },
   {
      "directorID":1,
      "movieID":3,
      "name":"Tenet",
      "year":2020,
      "mainCharacter":"John David Washington"
   },
   {
      "directorID":2,
      "movieID":4,
      "name":"Pulp Fiction",
      "year":1994,
      "mainCharacter":"John Travolta"
   },
   {
      "directorID":2,
      "movieID":5,
      "name":"Inglourious Basterds",
      "year":2009,
      "mainCharacter":"Brad Pitt"
   },
   {
      "directorID":2,
      "movieID":6,
      "name":"Django",
      "year":2012,
      "mainCharacter":"Jamie Foxx"
   }
]</strong><br>

What would be the best to way to filter the results on the second list based on the argument passed in the route: .../directors/{directorID}?

As of now, I could send from navTo and capture the directorID in _onRouteMatched via the getParameter method, but after this I'm a bit stuck.

I also searched for a sample to see this technique in action but I couldn't find any, some recommendation on this would also be appreciated.

Thanks

edit: The code that I'm asking about is found here: https://plnkr.co/edit/0WI2yiG56Nzspk0l

Re: UI5 data binding question

Tukutupap — Wed, 14 Sep 2022 12:43:11 GMT

I think you got it, it just would be /movies/{directorID} since you want to display the movies for a particular director.

Re: UI5 data binding question

trmt — Wed, 14 Sep 2022 14:35:22 GMT

That is not the problem I have.

The thing is I don't know how to query the right data to show in the Movies view once the director was pressed in the list.

This is the code: https://plnkr.co/edit/0WI2yiG56Nzspk0l

Can you please give me a hint where in the Movies.controller.js & how this filtering of movies based on director's id should be done?

Thanks

Re: UI5 data binding question

Tukutupap — Thu, 15 Sep 2022 13:48:31 GMT

I'm sorry, but for some reason I cant reach that page. Must have something to do with my company's policy maybe. I tried to take a peak on my phone but it was pretty bad.

Anyways, I don't think you need to do anything in your controller, your OData model takes care. You just need to build the corresponding association/navigation between your movies and your directors. You do that in your OData service in your backend, the rest happens automagically.

So again, no code. Just make sure your next panel has the right binding according to the navigation you have built. So an example would be "/directors/{directorId}/movies".

Check this out.

Kr,

Re: UI5 data binding question

xucong_zhan — Thu, 15 Sep 2022 15:22:35 GMT

I guess one thing you need to be aware of is that the "default" model of the app is of type ODataModel (v2), so you either filter directly against this mock OData service (using OData methods) or convert your ODataModel to a local JSONModel. You can find a demo solution based on your code here on my Github, but essentially you can do the following in your Movies.controller.js:

sap.ui.define(
  ["directors/movies/controller/BaseController", "sap/ui/model/json/JSONModel"],
  function (BaseController, JSONModel) {
    "use strict";

    return BaseController.extend("directors.movies.controller.Movies", {
      onInit: function () {
        const oRouter = this.getRouter();
        oRouter
          .getRoute("moviesList")
          .attachMatched(this._onRouteMatched, this);
      },

      _onRouteMatched: function (oEvent) {
        // save the current query state
        let oArgs, oView;
        oArgs = oEvent.getParameter("arguments");
        oView = this.getView();

        oView.getModel().read("/Movies", {
          method: "GET",
          success: function (oData) {
            console.log("Read success!");
            console.log("oData.results:", oData.results);
            const oJsonModel = new JSONModel();
            const movies = oData.results.filter(
              (m) => m.DirectorID == oArgs.DirectorID
            );
            console.log("movies: ", movies);
            oJsonModel.setData({ movies });
            oView.setModel(oJsonModel, "viewModel");
          },
        });
      },
    });
  }
);

Re: UI5 data binding question

trmt — Thu, 22 Sep 2022 10:05:33 GMT

Thank you for your reply and the github demo solution. I will try it out and come back with an answer.