OData Tree binding with filters in a fragment

Question

I read the data from an OData V2 service at the startup of my SAPUI5 application with oModel.read(). The data are correctly loaded from the backend into the ODataModel. Later I would like to use one of my entities in a fragment (value help).

As the control to display the data in the fragment is a sap.m.Tree control. I can not use a local JSONModel to bind the data to the fragment but have to stick to the ODataModel.

How has the binding to be done to get data displayed in my fragment?

Here is the oModel.read:

oModel.read("/CategoriesSet", {
  filters: aFilters,
  success: function(oResult) {
    // ...
  },
});

In the Value Help, the fragment is called:

onCatValueHelp: function(oEvent){
  if (!this._oDialog) {
    this._oDialog = sap.ui.xmlfragment("<XXXXX>.view.Categories", this);
    this.getView().addDependent(this._oDialog);
  }
  this._oDialog.open();
},

And this is the Fragment:

<Tree id="CatTree" mode="MultiSelect"
  items="{
    path: '?????',
    parameters: {
      countMode: 'Inline',
      operationMode: 'Client',
      numberOfExpandedLevels: 0
    }
  }">
  <StandardTreeItem title="{CatName}" tooltip="{CatID}" />
</Tree>

If I use '/CategoriesSet' for the path, then I get the data loaded into the fragment, but the data is then fetched from the backend again, but without the filter. And as the backend call is not very performant, I would rather use the data that is already existing in the model from the previous oModel.read().

Answer 1

As shown in this answer, you can preliminarily define static filters in XML.

If the filter values, however, need to be dynamically determined, you'll have to create the filter instances in JS and pass them to the tree binding. You can keep the binding definition in XML but the aggregation binding should be suspended: true first (in order to avoid sending multiple requests unnecessarily).

<Tree id="CatTree" items="{
  path: '/CategoriesSet',
  ...,
  suspended: true
}">
  <StandardTreeItem title="{CatName}" tooltip="{CatID}" />
</Tree>

// As soon as the Tree is accessible from JS:
const suspendedTreeBinding = myTree.getBinding("items");
suspendedTreeBinding.filter(aFilters, "Application");
suspendedTreeBinding.resume(); // starts sending a single data request but with the filter

There is no need to call oModel.read() beforehand.

---

Off-topic but try to avoid using the old factory function sap.ui.xmlfragment if possible as it's deprecated since UI5 v1.58! Use sap/ui/core/Fragment.load instead. E.g. like this.

Answer 2

If you want to perform the read at the beginning, you can store the result of the success callback in a JSONModel and then bind this model to the Fragment.

Alternatively, you can skip the first call and configure carefully the call in the Fragment to match your needs.

Actually this is exactly how odata models work.

Personally, I prefer the first option because filtering is easier in javascript than in a declarative approach.