Introduction


It is always very difficult to follow only the standard controls given by SAP when we are developing a UI5 page. Sometimes we may need to have our own controls which are not available in UI5 library . One of such controls is a tile container which looks like a KPI tile. Here, in this blog, i am trying to explain how we can create a custom tile container which can be used in desktop UI5 dashboards as well as custom FIORI applications .


What we are trying to achieve ?


Nothing to speak about what we are going to create . sometimes, screenshots speak more than words 🙂

TileOverview.png

Just a box with little shadow in its borders, a title bar and a content pane where we can place our tile content.

What are required for the control

     To create such a control all we need is some HTML coding and CSS entries . Below is the CSS code which I used to create this box


.box {
      text-align: left;
background: white;
width: 97%;
border: 1px solid #D4D4D4;
-moz-box-shadow: rgba(0,0,0,0.55) 0px 0px 10px;
-webkit-box-shadow: rgba(0,0,0,0.55) 0px 0px 10px;
box-shadow: rgba(0,0,0,0.55) 0px 0px 10px;
border-radius: 20px;
margin-top : 8px;
margin-left : 5px;
    }

(thanks to w3schools for the css)

How to create the control on the fly

     SAPUI5 provides us the provision to extend any of the existing controls or create one your own. All the controls which we are seeing in the UI are extended(or inherited) from the base component called Control (sap.ui.core.Control) . So , when we are creating a control , we are supposed to extend the Control base component.

 

     Next step is to understand what are the properties and aggregations (and events also, if any) of the control. Here in our case, it is having one property, which is the title text(id property will be inherited from Control by default, no worries).Here , in our case, I am making the tile background colour dynamic.


sap.ui.core.Control.extend("CustomBox",{
  metadata : {
  properties : {
  title : {type : "string"},
  backgroundColor : {type : "string"}
  },
  aggregations: {
             content: {singularName: "content"}
          },

     The third and very important part is the renderer . A renderer function is supposed to render the UI5 metadata we define in our control to generate corresponding HTML tags in the run time . Keeping the fact in mind that neither JavaScript nor XML can visualize control in your screen, but just HTML can.

     No more stories, we will directly go to the coding part


renderer : {
            render : function(oRm, oControl) {
                oRm.write('<div');
                oRm.writeControlData(oControl);
              
              oRm.addClass("box");
                oRm.writeClasses();
                oRm.addStyle("background", oControl.getBackgroundColor()+'")');
                oRm.writeStyles();
                oRm.write('>');
             
                if(oControl.getTitle() != null)
                {
                    oRm.write('<div class="title">');
                    oRm.write(oControl.getTitle());
                    oRm.write('</div>');
                }
             
                var aChildren = oControl.getContent();
                for (var i = 0; i < aChildren.length; i++) { // loop over all child Controls,
                                                             // render the colored box around them
                    oRm.write("<div>");
                    oRm.renderControl(aChildren[i]);   // render the child Control
                    oRm.write("</div>"); // end of the box around the respective child
                }
             
             
                oRm.write("</div>");
            }

     It is mandatory to writeControlData method as it provides the id information to the div. This id caneither be passed manually or it will automatically be generated by the renderer itself. With out this statement, you can not dynamically update the tile content or title bar once it is set .

WriteClasses method would write the css class information if any into the associated div content.

WriteStyles method is capable of assigning or chainging css properties of the associated css class. In our case, box is the class which is having the property background . On the fly , we can change the background by assigning the background propery.

What you will get after the rendering

     Once the rendering is completed when we pass the control title and content , it will create the corresponding DOM objects in the HTML DOM tree.

Using the control in the view  :


var box = new CustomBox({
  id : "osimple",
  title : "On the fly Control"
  });
box.addContent(chart());
return box;
}

where chart() function returns a bar chart with some data in it. You can implement the width property and additional css attributes as required .

Now , our UI5 tile would look like ,

usage.JPG

You can get more effects for the tile from : How to make a SAPUI5 Panel looks like a tile

Regards

Sreehari

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply