CODEWITHSUNDEEP
javascriptjsonsapui5tiles
Marvin Rügheimer
Marvin Rügheimer

Reputation: 59

Add Tiles to TileContainer dynamically

I want to add Tiles to a TileContainer dynamically.

I got a JSONObject (jsonResponse) which looks like that:

enter image description here

Now I want to add Tiles to a TileContainer. Here the function:

var tc = this.getView().byId("container"); //TileContainer
for (var i = 0; i < jsonResponse.length; i++) {
                    alert(jsonResponse[i].Title);
                    tc.addTile(new sap.m.StandardTile( jsonResponse[i].id, {
                        icon: "sap-icon://" + jsonResponse[i].Icon,
                        number: jsonResponse[i].Number,
                        numberUnit: jsonResponse[i].NumberUnit,
                        title: jsonResponse[i].Title,
                        info: jsonResponse[i].Info,
                        press: that.onTilePress
                    }));
}

The tiles were added, but without any content. It's just white. When I log jsonResponse[i].Title I get the value of the jsonObject.

Upvotes: 0

Views: 2155

Answers (3)

techippo.com
techippo.com

Reputation: 255

Here is a sample with javascript .Hope this helps.

sap.ui.controller("com.App.Home", {  
  onInit : function() {
    var oModel = new sap.ui.model.json.JSONModel({
      TileSet : [
        { "Title" : "Apple" },
        { "Title" : "Blackberry" },
	    { "Title" : "Blueberry" }
      ]
    });    
    sap.ui.getCore().setModel(oModel);    
  }  
});

sap.ui.jsview("com.App.Home",{
  getControllerName: function(){
    return "com.App.Home";
  },
  createContent: function(){
    var oTileTemplate = new sap.m.StandardTile({
      icon:"sap-icon://save",
      title:"{Title}"
    });
    
    var oTileContainer = new sap.m.TileContainer().bindAggregation("tiles", "/TileSet", oTileTemplate);
    
    var oPage = new sap.m.Page({
      title: "Tile Container Dynamic Custom Tiles",
      enableScrolling: false
    }).addContent(oTileContainer);
    var app = new sap.m.App();
    app.addPage(oPage);
    return app;
  }
});

var oView = sap.ui.view({
  id: "jsview1",
  viewName: "com.App.Home",
  type: sap.ui.core.mvc.ViewType.JS
}).placeAt("content");
<html>
  <head>
    <meta name="description" content="Tile Container Dynamic Custom Tiles - JS View" />
    <title>Tile Container Dynamic Custom Tiles - JS View</title>
    <script
      src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"        
      id="sap-ui-bootstrap"
      data-sap-ui-theme="sap_bluecrystal"        
      data-sap-ui-libs="sap.m"
      data-sap-ui-xx-bindingSyntax="complex"
      data-sap-ui-resourceroots='{"com.App": "./"}'>
    </script>    

  </head>
  <body class='sapUiBody' id="content"></body>
</html>

Upvotes: 0

Ji aSH
Ji aSH

Reputation: 3457

You dont use data binding, which is a mistake since this is central in sapui5 :)

First load your json data into a JSONModel object

var model = new sap.ui.model.json.JSONModel({ data: jsonResponse });
this.getView().setModel(model);

Then bind your tile container and tiles to the model you just created

<TileContainer tiles={/data}>
    <StandardTile
        icon="{= 'sap-icon://' + ${Icon} }"
        number="{Number}"
        numberUnit="{NumberUnit}"
        title="{Title}"
        info="{Info}"
        press="onTilePress" />
</TileContainer>

Rearding the problem you have with title, are you sure the the 'jsonResponse' is loaded into a JS object or is it just a string ?

Upvotes: 2

Rafael
Rafael

Reputation: 1223

I think your iteration is not correct to start with: for (var i = 0; i < jsonResponse.length; i++)

You should iterate through the responses, at the moment you're iterating through the fields of a single response jsonResponse The maximum value of i is equals to the number of fields in jsonResponse

Upvotes: 0

Related Questions