UI5 Tiles: Model, Data Binding, & Live Change Search

As hinted by the post title, I created a simple UI5 sample in which tiles are created from a model and filtered using a live change search.

Out of habit, the sample was created using a UI5 Shell, Component, and XML view. Such characteristics do not automatically certify an app as ‘Fiori-like’ 🙂

Keeping things simple, I used a JSON data and model.

{
  "TileSet" : [ { "Title" : "Apple" }, { "Title" : "Blackberry" }, { "Title" : "Blueberry" }, ...

The model is created and the data is loaded in the Component’s init method.

jQuery.sap.declare("srs.Component");
sap.ui.core.UIComponent.extend("srs.Component", {
  metadata : {
    rootView : "srs.view.App"
  },
  init : function() {
    sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
    // Model: JSON
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.loadData('model/data.json');
    this.setodel(oModel);
  }
});

The XML View has a Page with TileContainer and SearchField controls.

<Page
  title="Tiles: Data Binding and Filter"
  enableScrolling="false" >
  <subHeader>
    <Bar>
      <contentMiddle>
        <SearchField
          id="idSearchField"
          liveChange="onSearch"
          placeholder="Filter by title..." >
        </SearchField>
      </contentMiddle>
    </Bar>
    </subHeader>
    <content>
      <TileContainer
        id="idTileContainer"
        tiles="{/TileSet}" >
        <tiles>
          <StandardTile title="{Title}" />
        </tiles>
    </TileContainer>
  </content>
</Page>

When the SearchField’s liveChange event is fired (when the search value changes, e.g. user input), the Controller onSearch function handles the filter.

sap.ui.core.mvc.Controller.extend("srs.view.App", {
  onSearch : function(oEvent) {
    var view = this.getView();
    var tileContainer = view.byId("idTileContainer");
    var searchString = view.byId("idSearchField").getValue();
    var filter = new sap.ui.model.Filter("Title", sap.ui.model.FilterOperator.Contains, searchString);
    tileContainer.getBinding("tiles").filter([filter], sap.ui.model.FilterType.Application);
  }
});

The source code is available on GitHub.