Additional Blogs by Members
Showing results for 
Search instead for 
Did you mean: 
Active Participant

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' :smile:

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."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();

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

  title="Tiles: Data Binding and Filter"
  enableScrolling="false" >
          placeholder="Filter by title..." >
        tiles="{/TileSet}" >
          <StandardTile title="{Title}" />

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.

1 Comment
0 Kudos
TileContainer is now deprecated. Would be nice if you can post an update to this.