Skip to Content
Author's profile photo Aakash Neelaperumal

Adding background images to Fiori tiles

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

Assigned tags

      24 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Appleby
      Michael Appleby

      Great document and well explained.

      Cheers, Mike

      SAP P&I Technology RIG

      Author's profile photo Tejas Chouhan
      Tejas Chouhan

      Great Akash. I was looking for stuff like this 🙂

      -Tejas

      Author's profile photo Arun Santhanam
      Arun Santhanam

      Good one.

      Thanks

      -Arun

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Nicely blogged, thanks for sharing Akash.

      Warm Regards

      Hemendra

      Author's profile photo Former Member
      Former Member

      Hi Aakash, Really Happy to read your blog.. hope you write more on this subject.

      Raghavendra Prabhu

      Author's profile photo Former Member
      Former Member

      Nice one. Thanks Aakash Neelaperumal for sharing. 🙂

      Author's profile photo BHARANIDHARAN S P M
      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

      Author's profile photo Michael Appleby
      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

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Tejas Chouhan
      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

      Author's profile photo Former Member
      Former Member

      Hi Aakash,

      Is there any way to load the image from the own system instead from the internet?

      Thanks.

      Regards,

      Kuan

      Author's profile photo Gopinath Jayaprakash
      Gopinath Jayaprakash

      Is there a way to show dynamic image ? example: logged in user picture

      Author's profile photo Johannes Goerlich
      Johannes Goerlich

      Since update to SAP_UI 750 SP3 this stopped working for us because the attribute "data-targeturl=" cannot be found any longer. Any recommendations?

      Author's profile photo Johannes Goerlich
      Johannes Goerlich

      i used another attribute to bind the image. But this also stops working if the user has added the tile to an own group.

      Author's profile photo sam jon
      sam jon

      Hi

      Aakash/all.

      Kindly tell me path where have to store image in gateway data base.

      Regards,

      SAM

      Author's profile photo James Warren
      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.

      Author's profile photo Nitin Gupta
      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

      Author's profile photo Suman Biswas
      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.

      Author's profile photo Rajesh Bhanushali
      Rajesh Bhanushali

      Hi Suman,

       

      I am looking for smae. How can I add the background image for a tile without using CSS in Fiori 2.0

      mahaboob.ep@gmail.com

      Author's profile photo Former Member
      Former Member

      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").

      Author's profile photo Zoltán Mészáros
      Zoltán Mészáros

      Hi,

      The only problem is with [aria-label] solution that it does not work when user change the language on Launchpad.

      I can't believe that there is no way to add a unique ID to tile!!!

      Author's profile photo Mauricio Pinheiro Predolim
      Mauricio Pinheiro Predolim

      Hi Zoltán.

       

      Have you solved this issue?

      I'm having the same problem...

      BR.

      Author's profile photo Zoltán Mészáros
      Zoltán Mészáros

      Hi,

      For each language you want to use, you have to create the entries [aria-label] in CSS.

      I abandoned it. It's too complicated, it's not worth it. 🙁

      Author's profile photo euHReka Alco NgA euHReka
      euHReka Alco NgA euHReka

      Is there a standard repository for the images that are going to be used as a background tile or should these always be stored on an external web server?