Это звучит как сценарий типа мастер-деталь, где вы можете использовать маршруты.Вот Подробный пример с использованием SAPUI5 маршрутизации в приложении Full-Screen.Я постараюсь обобщить как можно больше ...
В вашем JSON назначьте ID для каждой плитки, и предполагая, что "данные ..." являютсясодержимое каждого вида плиток; если вам нужно добавить содержимое в плитку, они могут идти на том же уровне, что и его идентификатор, идентификаторы будут использоваться в качестве шаблонов для маршрутизации:
{
"TileCollection": [{
"homeId": 0,
"homeIcon": "sap-icon://waiver",
"homeType": "Create",
"homeNumber": 160,
"homeNumberUnit": "£",
"homeTitle": "Home-Waiver",
"homeInfo": "Lorem ipsum",
"homeInfoState": "Success",
"home0Data": [{
"home0Id": 0,
"home0Icon": "sap-icon://loan",
"home0Type": "Create",
"home0Number": "0-1",
"home0NumberUnit": "T",
"home0Title": "Home-LevelOne-Loan",
"home0Info": "Lorem ipsum",
"home0InfoState": "Success",
"home0Properties": [{
"propId": 0,
"text0": "Home-LevelTwo-Visit SAP Homepage 01",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}, {
"propId": 1,
"text0": "Home-LevelTwo-Visit SAP Homepage 02",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}, {
"propId": 2,
"text0": "Home-LevelTwo-Visit SAP Homepage 03",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}]
}, {
"home0Id": 1,
"home0Icon": "sap-icon://money-bills",
"home0Type": "Create",
"home0Number": "1-1",
"home0NumberUnit": "T",
"home0Title": "Home-LevelOne-Money",
"home0Info": "Lorem ipsum",
"home0InfoState": "Success",
"home0Properties": [{
"propId": 0,
"text0": "Home-LevelTwo-Visit SAP Homepage 11",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}, {
"propId": 1,
"text0": "Home-LevelTwo-Visit SAP Homepage 12",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}, {
"propId": 2,
"text0": "Home-LevelTwo-Visit SAP Homepage 13",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}]
}]
}, {
"homeId": 1,
"homeIcon": "sap-icon://wallet",
"homeType": "Create",
"homeNumber": 200,
"homeNumberUnit": "£",
"homeTitle": "Home-Wallet",
"homeInfo": "Lorem ipsum",
"homeInfoState": "Warning",
"home0Data": [{
"home0Id": 0,
"home0Icon": "sap-icon://receipt",
"home0Type": "Create",
"home0Number": "0-1",
"home0NumberUnit": "T",
"home0Title": "Home-LevelOne-Receipt",
"home0Info": "Lorem ipsum",
"home0InfoState": "Warning",
"home0Properties": [{
"propId": 0,
"text0": "Home-LevelTwo-Visit SAP Homepage 11",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}, {
"propId": 1,
"text0": "Home-LevelTwo-Visit SAP Homepage 12",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}, {
"propId": 2,
"text0": "Home-LevelTwo-Visit SAP Homepage 13",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}]
}]
}, {
"homeId": 2,
"homeIcon": "sap-icon://credit-card",
"homeType": "Create",
"homeNumber": 350,
"homeNumberUnit": "£",
"homeTitle": "Home-Credit-Card",
"homeInfo": "Lorem ipsum",
"homeInfoState": "Error",
"home0Data": [{
"home0Id": 0,
"home0Icon": "sap-icon://account",
"home0Type": "Create",
"home0Number": "3-1",
"home0NumberUnit": "£",
"home0Title": "Home-LevelOne-Account",
"home0Info": "Lorem ipsum",
"home0InfoState": "Error",
"home0Properties": [{
"propId": 0,
"text0": "Home-LevelTwo Visit SAP Homepage 31",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}, {
"propId": 1,
"text0": "Home-LevelTwo Visit SAP Homepage 32",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}, {
"propId": 2,
"text0": "Home-LevelTwo Visit SAP Homepage 33",
"url": "http://www.sap.com",
"icon": "sap-icon://menu"
}]
}]
}]
}
В вашем Первоначальном представлении :
<TileContainer id="container" tileDelete="handleTileDelete" tiles="{/TileCollection}">
<StandardTile icon="{homeIcon}" type="{homeType}" number="{homeNumber}" numberUnit="{homeNumberUnit}" title="{homeTitle}" info="{homeInfo}" infoState="{homeInfoState}" press="onSelectionChange" />
</TileContainer>
В своем контроллере при нажатии на плитку в начальном виде он должен связывать содержимое данных:
onSelectionChange: function(oEvent) {
this.getOwnerComponent().getRouter().navTo("levelOne", {
levelOneID: oEvent.getSource().getBindingContext().getProperty("homeId")
});
}
Для второго набора плиток в его Вид :
<TileContainer id="container1" tiles="{home0Data}">
<StandardTile icon="{home0Icon}" type="{home0Type}" number="{home0Id}" numberUnit="{home0NumberUnit}" title="{home0Title}" info="{home0Info}" infoState="{home0InfoState}" press="onSelectionChange" />
</TileContainer>
Второй Контроллер :
_onRouteMatched: function(oEvent) {
this._levelOneID = oEvent.getParameter("arguments").levelOneID;
this.getView().bindElement("/TileCollection/" + this._levelOneID);
},
onSelectionChange: function(oEvent) {
var sLevelTwoID = oEvent.getSource().getBindingContext().getProperty("home0Id");
this.getOwnerComponent().getRouter().navTo("levelTwo", {
levelOneID: this._levelOneID,
levelTwoID: sLevelTwoID
});
}
И самое главное, ваш манифест должен содержать шаблон маршрутизации, это обновит URL, чтобы отображалось содержимое в правой иерархиив представлении:
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.otuniyi.sample",
"controlId": "rootControl",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": ["home", "notFound"]
},
"async": true
},
"routes": [{
"pattern": "",
"name": "apphome",
"target": "home"
}, {
"name": "levelOne",
"pattern": "TileCollection/:levelOneID:",<-- this changes the value in the controller before loading the data
"target": ["home", "levelOne"]
}, {
"name": "levelTwo",
"pattern": "TileCollection/:levelOneID:/home0Properties/:levelTwoID:", <-- and this
"target": ["levelOne", "levelTwo"]
}],
"targets": {
"home": {
"viewId": "home",
"viewName": "Homepage",
"viewLevel": 0
},
"notFound": {
"viewId": "notFound",
"viewName": "NotFound",
"transition": "show"
},
"levelOne": {
"viewName": "LevelOne",
"viewLevel": "1"
},
"levelTwo": {
"viewName": "LevelTwo",
"viewLevel": "2"
}
}
}