Hi Folks,

These days we have seen many applications built on SAPUI5 with tile based design.

Tile.JPG

To create such controls, we can either extend the existing controls or play with CSS theming.  So, we will see how we can make a SAPUI5 Panel control looks like a standard tile in 6 simple steps by changing the CSS theme attributes.

Solution:

Step 1: Create the UI5 project and initial view (Project Name: Tile, View: Main.JS)

PRCR1.png

PRCR2.png

PRHR.png

Step 2:  Populate the createContent function in Main.view.JS as follows, which will create a standard panel and place the same in your screen.

Code.png

Now your screen will look like the below.

/wp-content/uploads/2014/03/out1_421238.png

Step 3: Go to the index.html page where we need to do some CSS coding to adjust the theme for the panel (you can keep a separate style file to write the styles).

CSS1.png

Writing this CSS will make the header part of the panel with white background and remove the bottom header line.

CSSout1.png

Step 4: Now, give the tile a nice border with suitable colour and shadow property

CSS2.png

CSSout2.png

Step 5: Register “CSS hover” property to give some sort of animation while hovering the tile.

/wp-content/uploads/2014/03/hover_421246.png

Step 6: Register a click event for the tile and enjoy

  • oPanel.attachBrowserEvent(“click”,function(){

       alert(“Tile pressed”);

       });

/wp-content/uploads/2014/03/final_421247.png

Regards

Sreehari

To report this post you need to login first.

30 Comments

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

  1. Jan Penninkhof

    Nice job Sreehari! Amazing what you can do with just a few lines of CSS.
    It may also be a nice idea to turn your tile into a custom control. Perhaps when you need a new challenge?

    Cheers, Jan

    (0) 
      1. Vishnupriya Varadharajan

        Excellent blog! Thanks. Can you please suggest as what control(something similar to tile) can be used to place 2 graphs in a sap ui5 page(in other terms I am looking ofr a dashboard screen where in we’ll have few text and 2-3 grpahs).

        (0) 
        1. Sreehari V Pillai Post author

          Hi Vishnupriya,

          Thanks a lot .

          You can have multiple controls ( Graphs, texts , or anything ) in a page by using layouts. For example, you can use a matrix layout to arrange your controls in it ad plce it in your screen. Check the below URL.

          SAPUI5 SDK – Demo Kit

          Sreehari V Pillai

          (0) 
          1. Vishnupriya Varadharajan

            Hey Thanks a lot for the quick reply!

            I am looking for a mobile dashboard and not a desktop app and hence I will not be able to use the layouts here.. That’s the issue. I am able to draw graphs in a separate screen.. just want to bundle it in a single page.

            (0) 
  2. Haribabu Chunchu

    Hi Sreehari,

    Thanks for detailed explanation. I have one doubt, you have provided css attributes for ’tile-hdr’ in the index.html file, but you have not mentioned id ’tile-hdr’ to any control in the view.js file. like id ’tile’ is given to Panel in the view.js.

    Hari

    (0) 
    1. Sreehari V Pillai Post author

      Hi Hari,

      If you have noticed the id of the panel which I created is “tile”. Basically panel is a container type control,which has two areas in it. One header part and one body part.While rendering the panel, it will create a header tag with id “tile-hdr”. Check the screenshot below. You will get a clear idea.

      reply.JPG Sreehari

      (0) 
  3. Florence Okoye

    Thank you so much for this! Been having some difficulty formatting tiles (and making the custom styling stick), but this is a much easier alternative. Nice and simple 🙂

    (0) 
        1. Michael Appleby

          Navdeep,

          If you wish to ask a question, please create a Discussion marked as a Question.  Include a shortcut to Sreehari, if you want that member to view it.  More information is available in the Getting Started link at the top right of each SCN page.

          Regards, Mike (Moderator)

          SAP Technology RIG

          (0) 
    1. Sreehari V Pillai Post author

      New question new thread 🙂 By the way , check your console in debugger and see if you are missing any libraries or some other reason behind it.

      Sree

      (0) 
    1. Sreehari V Pillai Post author

      thanks mate. yes you should be able to. As the panel has method “setExpanded()” , you can use the same on mouse hover . ( Yes you will need to register mouse hover event )
      SH

      (1) 
        1. Sreehari V Pillai Post author

          1 – you can use jQuery fadeout methods to control the animated collapse and expand.
          2 – that I need to check- height of the panel is auto adjustable based on its content – please have a research there.
          SH 🙂

          (0) 

Leave a Reply