Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
aakash_neelaperumal2
Active Participant
22,883

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.

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

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

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.

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

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.

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.

Step 8:

Save and Build

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.

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

24 Comments
agentry_src
Active Contributor
0 Kudos

Great document and well explained.

Cheers, Mike

SAP P&I Technology RIG

tejasChouhan
Active Contributor
0 Kudos

Great Akash. I was looking for stuff like this :smile:

-Tejas

arun_santhanam3
Participant
0 Kudos

Good one.

Thanks

-Arun

HemendraS
Participant
0 Kudos

Nicely blogged, thanks for sharing Akash.

Warm Regards

Hemendra

Former Member
0 Kudos

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

Raghavendra Prabhu

Former Member
0 Kudos

Nice one. Thanks aakash.neelaperumal2 for sharing. :smile:

bharanidharan
Active Participant
0 Kudos

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.

Regards,

Bharani

agentry_src
Active Contributor
0 Kudos

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

Former Member
0 Kudos

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.

tejasChouhan
Active Contributor
0 Kudos

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. :smile:

Regards,

Tejas

Former Member
0 Kudos

Hi Aakash,

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

Thanks.

Regards,

Kuan

0 Kudos

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

JoeGoerlich
Active Contributor
0 Kudos

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

JoeGoerlich
Active Contributor
0 Kudos

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

former_member185507
Active Participant
0 Kudos

Hi

Aakash/all.

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

Regards,

SAM

0 Kudos
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.
former_member185489
Participant
0 Kudos
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.
nitin_gupta81
Explorer
0 Kudos
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
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").
0 Kudos

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

former_member342154
Discoverer
0 Kudos
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!!!
former_member273190
Participant
0 Kudos
Hi Zoltán.

 

Have you solved this issue?

I'm having the same problem...

BR.
former_member342154
Discoverer
0 Kudos
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. 😞
S0008278813
Discoverer
0 Kudos
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?
Labels in this area