Create reusable Custom Tile

[Former Member]

Abstract

SAPUI5 library provides many controls but sometimes we may need to have our own custom controls which can be reusable. Here, I am trying to explain how we can create a custom Tile which can be reused in our application in different pages like standard control.

What we want at the end?

                 I have included table in custom tile. We can put any standard control instead of table like Pie chart, Button etc.

How can we achieve?

create custom tile extending generic tile : TableTile.js

jQuery.sap.declare("sap.ui.test.custTile.control.TableTile");

jQuery.sap.require("sap.suite.ui.commons.GenericTile");

sap.suite.ui.commons.GenericTile.extend("sap.ui.test.custTile.control.TableTile", {

metadata :{},

init : function() {

  sap.suite.ui.commons.GenericTile.prototype.init.apply(this);

this.isCreate = false;

  },

create : function() {this.oTileContent = new sap.suite.ui.commons.TileContent({size : "L"});

  this.otxt = new sap.m.Text({text : "Business SLA"}).addStyleClass("tileTitle");

  this.oTable = new sap.m.Table("tab",{

  visibleRowCount: 5,

  firstVisibleRow: 5,

  }).addStyleClass("tbcell");

  var oColumn1 = new sap.m.Column({

  width: "70%",

  textAlign: "Center",

  header : new sap.m.Text({text:"KPI"}).addStyleClass("tbcell")

  }).setStyleClass("tbcell");

  var oColumn2 = new sap.m.Column({

  width: "30%",

  header : new sap.m.Text({text:"Value"}).addStyleClass("tbcell")

  }).setStyleClass("tbcell");

  this.oTable.addColumn(oColumn1);

  this.oTable.addColumn(oColumn2);

  this.oTable.addStyleClass("tbTile2");

  var oTableItemTemp = new sap.m.ColumnListItem({cells:[new sap.m.Label({text: "{KPI}"}) ,

                                                       new sap.m.Label({text: "{Value}"})

                                  ]}).addStyleClass("tbcell");

  this.oTable.bindItems("/OV",oTableItemTemp);

  this.oTable.setModel(new sap.ui.model.json.JSONModel());

this.oTileContent.setContent(this.oTable);

     this.addTileContent(this.oTileContent);

   

  this.isCreate = true;

  }

  },

  onAfterRendering : function() {

  this.isCreate = true;

}

  }

Here,I have not created property for custom tile but we can add properties to custom control in metadata section.I have created Table in custom Tile instead of that we can add any control like chart,button etc. to Create method.

style.css

.tileTitle{

  font-size : large!important;

}

.tbcell>.sapMListTblCell{

       padding : 0rem !important;

       padding-left:15px!important;

    

}

.tbTile2{

    margin-top: 20px!important;

        border-style: ridge;

        background-color: rgb(220, 235, 239);

}

How you consume in XML view?

custTile.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:tiles="sap.ui.test.custTile.control"

  controllerName="custTile.view.ctile" xmlns:suite="sap.suite.ui.commons" xmlns:html="http://www.w3.org/1999/xhtml">

  <Page title="Title">

  <content>

     <Panel>

  <tiles:TableTile id="TBTile2"

  size="L" class="SPPanel">

  </tiles:TableTile>

  </Panel>

  </content>

  </Page>

</core:View>

so like above we can use <tiles:TableTile> by including own namespace sap.ui.test.custTile.control in any other page of our application.

Regards,

Zalak

l