sapui5 - how to load a new tile view where the source is an array of objects from the json file

Question

I have StandrdTiles with JSON (example below). My problem is connected with JSON file structure and path to tile collection (is defined in XML view). I'm try to have functionality like: If you click on tile, new view will be load with another group of tiles where model will be selected array (based on some parameter) from JSON file. So, I want to load new view clicking on tile where model is selected by array name with objects (tile0 --> view + data0 collection; tile1 --> view + data1 collection).

It's possible to dynamically change tiles value in XML view from controller?

<TileContainer
    id="container"
    tiles="{}" <-- how to change value from controller before loading data?
...

data.json

{
  "TileCollection": [{
    "data0": [{
      "icon": "sap-icon://inbox",
      "number": "1",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum",
      "infoState": "Error"
    }, {
      "icon": "sap-icon://technical-object",
      "number": "2",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum",
      "infoState": "Success"
    }, {
      "icon": "sap-icon://inbox",
      "number": "3",
      "numberUnit": "",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum"
    }]
  }, {
    "data1": [{
      "icon": "sap-icon://inbox",
      "number": "4",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum",
      "infoState": "Error"
    }, {
      "icon": "sap-icon://technical-object",
      "number": "5",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum",
      "infoState": "Success"
    }, {
      "icon": "sap-icon://inbox",
      "number": "6",
      "numberUnit": "",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum"
    }]
  }]
}

Answer 1

This sounds like a master-detail type scenario, where you can make use of routings. Here is a Detailed example using SAPUI5 routings in a Full-Screen Application. I will try and summarize as much as possible...

In your JSON, assign an ID to each Tile and assuming "data..." are the contents of each tiles view, if you need to add content to the tile they can go in the same level as its ID, the IDs will be used as patterns for the routings:

{
  "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"
      }]
    }]
  }]
}