Creating custom tile in sapui5 using sap.m.CustomTile .

Normally we can use Standarad Tile if our requirement is satisfied using StandaradTile but in some situation we would need to use customTile control to satisfy our requirements.

Custom Tile control is basically used to display the application specific data in the Tile control with customized look and feel.

The tile width would be 8.5em and height would be 10em.

Let us see how to create the custom Tile step by step :-

Step 1:- Now we will create a customTile to display Student's ScoreCard . We would display the percentage obtained in 2 semesters and in the middle of the Tile we would display the average of both the semesters.

Now for that firstly we need to write the following code in our view file (xml format) :-

<CustomTile borderVisible="true" class="sapUiSmallMargin">

  <content>

  <VBox>

  <l:VerticalLayout>

      <l:HorizontalLayout>

  <Text text="Student's Performance" class="sapUiTinyMargin sapUiMediumMarginBottom"></Text>

      </l:HorizontalLayout>

     <l:HorizontalLayout class="sapUiTinyMargin">

  <Text text="95%" class="sapUiTinyMargin sapUiLargeMarginBegin sapUiMediumMarginBottom"></Text>

     </l:HorizontalLayout>

    <l:HorizontalLayout class="sapUiTinyMargin lay">

  <Text text="96%" class="sapUiLargeMarginBegin"></Text>

    </l:HorizontalLayout>

   <l:HorizontalLayout class="sapUiTinyMargin">

   <Text text="93%" class="sapUiLargeMarginBegin laybnch"></Text>

  </l:HorizontalLayout>

  <l:HorizontalLayout>

  </l:HorizontalLayout>

  </l:VerticalLayout>

  </VBox>

  </content>

</CustomTile>

Remember that to display content inside the customTile we will have to wrap all the controls in a layout. For example here we are using VBox.

To arrange the content properly inside the custom Tile I have also used predefined css margin classes.

When we run the above code the output would be as shown below:-

Step 2:- Now our tile is created we need to work on its look and feel. Now to change the tile's border to rounded corners we need to apply css .

For that I made a class and applied that class to customTile control

The code for it is as follows:-

.tileborder{

  border-radius: 10px 10px 10px 10px!important;

  -moz-border-radius: 10px 10px 10px 10px!important;

  -webkit-border-radius: 10px 10px 10px 10px!important;

  border: 2px solid #b8b6b8!important;

    }

After applying this the output would look like as shown below:-

Step 3:- Now if we want to change the background of the customTile that also we can do that applying css .

To change the background of Tile I have applied the background-color property to the customTile . and After that the output appears as shown below:-

This is how we can create custom Tile and change the look and feel according to our need.