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.
How to add a background image for the tile?
Hi,
Instead of background-color property apply background-image property as shown below :-
.tilebackground
{
background-image: url(" src of image");
}
And apply this class to custom tile . it would work .
How I can add multiple tiles / list of tiles ?
Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question. The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable. Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem. If a blog or document is related, put in a link. Read the Getting Started documents (link at the top right) including the Rules of Engagement.
NOTE: Getting the link is easy enough for both the author and Blog. Simply MouseOver the item, Right Click, and select Copy Shortcut. Paste it into your Discussion. You can also click on the url after pasting. Click on the A to expand the options and select T (on the right) to Auto-Title the url.
Thanks, Mike (Moderator)
SAP Technology RIG
How to make the Custom tile responsive