Search code examples
data-bindingsyntaxnavigationsapui5sap-fiori

SAPUI5 binding syntax for navigation to list element


I'm new to SAPUI5 so I may understand things the wrong way, but i'm currently following the tutorial under the following section :

Get Started : Setup, Tutorials, and Demo App

Navigation and Routing

Step 7: Navigate to Routes with Mandatory Parameter

In this step, I encountered the following syntax in the list controller :

oView.bindElement({
  path : "/Employees(" + oArgs.employeeId + ")",
  events : {
    change: this._onBindingChange.bind(this),
    dataRequested: function (oEvent) {
      oView.setBusy(true);
    },
    dataReceived: function (oEvent) {
      oView.setBusy(false);
    }
  }
});

I am struggling with the "path" part with the parenthesis syntax.

When I pass the id of my object inside the parenthesis, I'm not getting any object back. I then searched a bit online and found that the syntax could be detailed like this : path: "/Employees(employeeId='" + oArgs.employeeId + "')"

But this does not work either...

My goal is to find a way to set a specific binding context to my view from my controller using an id from an element rather than the index of the element inside the list (using the /Employees/{index} syntax)

Maybe there's a way to access a specific object inside my model with a path that would look like this : /Employees/SomeKey=SomeValue ?

It may help mentionning that my model is currently hardcoded as a JSONModel object in the Components.js file.


Solution

  • It may help mentionning that my model is currently hardcoded as a JSONModel object in the Components.js file.

    This is why it's not working. In this example, when you call bindElement, you are binding the view to the default model of the app. In this case it's an OData v2 model, configured in the manifest.json file, under the "sap.ui5"/models part. The syntax in the path property "/Employees(someId)" is specific to the OData model, and OData protocol in general.

    I would suggest to get to know your data service first, in order to know how to access its data. Here you can read more about the OData V2 Model.

    Of course, if you are not familiar with OData, and do not plan to use it, using a JSON model will be much simpler. In this case ensure you set your default model to JSON one. In this case I'd recommend to go through the Walkthrough tutorial first.