
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
7 | |
7 | |
6 | |
4 | |
4 | |
4 | |
4 | |
4 | |
3 | |
3 |