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

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
Labels in this area