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.
TileContainer is now deprecated. Would be nice if you can post an update to this.