how to load a new tile view where the source is an

问题:

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

回答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"
      }]
    }]
  }]
}

In your Initial View:

<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>

In its Controller, when a tile is clicked in the initial view, it should bind the data contents:

onSelectionChange: function(oEvent) {
  this.getOwnerComponent().getRouter().navTo("levelOne", {
    levelOneID: oEvent.getSource().getBindingContext().getProperty("homeId")
  });
}

For the second set of tiles in its View:

<TileContainer id="container1" tiles="{home0Data}">
  <StandardTile icon="{home0Icon}" type="{home0Type}" number="{home0Id}" numberUnit="{home0NumberUnit}" title="{home0Title}" info="{home0Info}" infoState="{home0InfoState}" press="onSelectionChange" />
</TileContainer>

Second Controller:

_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
    });
  }

And most importantly, your manifest should contain the pattern of the routing, this will update the url so that the contents in the right hierarchy are displayed in View:

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