cancel
Showing results for 
Search instead for 
Did you mean: 

Dynamic Tiles using Odata

former_member200967
Active Participant
0 Kudos

Hi All,

I have a requirement in which I need to create dynamic tiles based on Odata. I have acheived the same.

Now I have another requirement where in I need change the background color of the tiles based on content in the tile. I am trying to access the content of the tilecontainer and trying to add the style class for each tile, however my Tilecontainer is shown as empty although I can see the tiles on my page.

Below is the code


var tileContainer = new sap.m.TileContainer("tileContainer",{

      height:"40%",

   allowAdd : true,

   editable : false

      });

      var templateTile = new sap.m.StandardTile({

       title : '{COUNT}',

       number:'{STATUS}',

          info:'{STRTDATE}',

       icon:"sap-icon://bar-chart",

       }).addStyleClass("test");

      oModel = sap.ui.getCore().getModel();

      tileContainer.setModel(oModel);

  tileContainer.bindAggregation("tiles",{path : "/Orders", filters: [f1, f2], template: templateTile});

  new sap.m.App({

           pages : new sap.m.Page({

             enableScrolling : false,

             content : [tileContainer]

           })

         }).placeAt("content");

// Below code is for accessing the tiles in the TileContainer and adding style class to them

  var tiles = tileContainer.getTiles();

  if (tiles != null){

  for ( i = 0; i < tiles.length; i++){

  if(tiles[i].getTitle = "CANCELLED"){

  tiles[i].addStyleClass("test");

  }

  }

  }

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

hi manpreet,

You can use custom formatter function to achieve this like below

JS Bin - Collaborative JavaScript Debugging

Regards

former_member200967
Active Participant
0 Kudos

Thanks Rajeesh,

it worked like a charm.

Answers (1)

Answers (1)

SergioG_TX
Active Contributor
0 Kudos

Manpreet,

yes you can update the tiles dunamically based on content.. it looks like you are on the right path.. you just need to play w the css -- and overwrite the default css class..

former_member200967
Active Participant
0 Kudos

Yes i think that this code will work but the problem is that even after execution of the binding for the Tilecontainer , I am not able to get any tiles in the tile container (in code) they do get displayed on screen though.