Skip to Content

I recently got a requirement to have an image added to Fiori tiles as background, and below is the way by which I achieved it.

Below would be the final output as per my technique.

/wp-content/uploads/2015/03/10_671882.png

Step 1: Go to transaction /UI5/THEME_DESIGNER in your gateway server. This will open up the UI5 theme designer in your browser.


Step 2: Now select any one standard theme and choose “Open”. This would create a base theme of the chosen std. theme upon which you can make your changes

/wp-content/uploads/2015/03/2_671883.png

Step 3: In the next screen you can give your Launchpad link and a name in this page and click add.

/wp-content/uploads/2015/03/3_671884.png

Step 4: Now you will have different option to customize this theme by choosing different options in the right side panel. For our requirement, we are going to assign different backgrounds to Track Shipment and Track Sales order App.

/wp-content/uploads/2015/03/4_671885.png

Step 5: Now to know the specific internal ID which differentiates each Fiori app, right click on your application and choose inspect element

/wp-content/uploads/2015/03/5_671886.png

Step 6: Here the highlighted CSS attribute <data-targeturl=”#SalesOrder-track”> can be considered as unique per application. Here “data-targeturl” is the parameter and #SalesOrder-track” is its value.

/wp-content/uploads/2015/03/6_671887.png

Step 7: After fetching the unique parameter, use it in your CSS to assign the image for that particular tile using below sample css code

[data-targeturl = “#SalesOrder-track”]{

                background-image: url(“<image page>”);

                background-repeat: no-repeat;

                background-position: center;

                background-size : 200px 200px;

}

Once entered the above CSS, you can see the image got updated.

Note: Added few more CSS commands to make the title little legible.

/wp-content/uploads/2015/03/7_671891.png

Step 8:

Save and Build

/wp-content/uploads/2015/03/8_1_671892.png

/wp-content/uploads/2015/03/8_2_671893.png

Step 9: Adding the theme to Launchpad can be achieved using transaction /n/UI2/NWBC_CFG_CUST.

Here create a enter as below and save.

/wp-content/uploads/2015/03/9_671894.png

Step 10: Now the Launchpad runs on the updated theme.

/wp-content/uploads/2015/03/10_671882.png

To report this post you need to login first.

19 Comments

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

  1. BHARANIDHARAN S P M

    Hi Askash,

    It is really a wonderful blog though it looks simple it is very essential for the look & feel.

    Currently i am facing the below issue. The icons are not aligned properly in launchpad.

    Kindly let me know what could be the problem and moreover is it possible to add pictures from  local system.If yes then please do let me know the procedure.

    Tiles issue.JPG

    Regards,

    Bharani

    (0) 
    1. Michael Appleby

      Hi Bharani,

      Your Comment to a Document will not receive the same scrutiny from knowledgeable experts as a Discussion marked as a Question.  Many of those experts ignore comments on Documents.  See the Getting Started link at the top right to see the differences between Blogs, Discussions, and Documents and when each should be used.  If your question relates to a specific blog or document, put in a link to it.  With the creation of a Discussion, you will also be able to reward the Helpful and Correct Answers with points. You can also turn on notifications so that whenever someone posts to your Discussion, you will get an email of the update and its contents.

      NOTE: Getting the link is easy enough for both the author and document.  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. 

      Cheers, Mike (Moderator)

      SAP P&I Technology RIG

      (0) 
  2. Thomas Bezak

    SAP should have basic functionality like this baked into the core product UI. It’s ridiculous that something like assigning a tile background is a 10 step process messing around with CSS.

    (0) 
    1. Tejas Chouhan

      Hi Thomas,

      Idea is to make the app simple and easy to use, so that it works on any machine landscape, may be a lower version with low RAM/graphics or a higher one with good processor speed.

      With a minimal amount of look and feel, your app will look basic and doesn’t have performance issues.

      Making the UI component heavy will mess the complete design is what i feel.

      These requirements should be on customer’s bucket, rather than SAP.

      So SAP has developed these business apps, as it would consume loads of usage and may face bandwidth issue. if you see Google Search Page, you can easily findout, what is the idea, behind the success of Google. 🙂

      Regards,

      Tejas

      (0) 
  3. James Warren

    if you upgrade the SAP_UI and data-targeturl is no longer available then you can try aria-label

    or if using fiori 2.0 i think you can upload a background image when you create the tile. ( we are not using the latest )

     

     

    //my tile title name is help9

    div[aria-label~=”help9″]  {

    background-image: url(‘    url to image ‘);

    //  hide the title name
    div[aria-label~=”help9″]   span.sapMTextMaxLine {
    visibility:hidden !important;}

     

    seems to work for me.

    (0) 
    1. Nitin Gupta

      Hi James –

      We recently upgraded the SAP_UI component to 7.50 in our test environment and as you mentioned data-targeturl is no more available. We have Tile Background images setup in production through the custom CSS so we will need to update the css. We tried the css you have as an example (below) but it’s not working. Is there something else that needs to be done?

      div[aria-label=”Tile Name”] {

      background-image: url(“urlimage”);

      }

       

      Thanks,

       

      Nitin

      (0) 
  4. Suman Biswas

    Guys, any idea if background image can be added to the Tiles without using CSS in FIORI 2.0?

     

    I am not able to find the data-targeturl when I inspect the page.

    (0) 
  5. Michal Nguyen Anh

    For those of you who faced the problem with missing “data-targeturl” attribute try using this kind of CSS selector:

    [aria-label*=”substring-of-aria-label”] {

    }

    Where “substring-of-aria-label” is the unique part of “aria-label” attribute (eg. “create-leave-request”).

    (1) 

Leave a Reply