Some thoughts that I would like to share how to enhance the look and feel of the Fiori Launchpad: "Fiori Launchpad with random Flowers". Basically we will cover the original layer with the custom layer that we will build in this blog by modifying the FioriLaunchpad.html. The modification is not perfect, but at least we know the concept and we can enhance further.
Concept
Let see what is the html tag behind the standard tile in Fiori Launchpad.
Below is the result, we will replace the child tags under the class sapUshellTileInner with our HTML tags.
Let's create a template tpl.html to replace that section.
We will replace the following values:
| Value to be replaced | Replace With |
|---|---|
| _link_ | URL to the Fiori app |
| _title1_ | Title of the Fiori app |
| _title2_ | Sub-title of Fiori app |
| _image_ | Fiori Flower random image |
The final output will be like this
We will not replacing a News tile with our custom HTML tag. The News tile will appear as it is. All this logic will be defined in the JavaScript codes.
Let's put all together the concept in the JavaScript codes in FioriLaunchpad.html:
function() { //this setTimeout is MANDATORY to make this call an async one! setTimeout(function() { try { jQuery.sap.require('sap.fiori.core-ext'); //Custom Codes to create a colourful Tiles Starts Here var xhr = new XMLHttpRequest(); var tpl, tplr, href, y, len, img, bodybgarrayno, selectedimg, nt; var arr = new Array(); var fioriimg = ["fiori1", "fiori2", "fiori3", "fiori4", "fiori5"]; xhr.onreadystatechange = function() { if (xhr.readyState === 4) { var els = document.getElementsByClassName('sapUshellTileInner'); for (i = 0; i < els.length; i++) { nt = els[i].innerHTML.search("News Tile"); if (nt == -1) { if (els[i].innerHTML.match(/href="([^"]*)/) != null) href = els[i].innerHTML.match(/href="([^"]*)/)[1]; else href = ""; tpl = xhr.responseText; tplr = tpl.replace("_link_", href) y = 0; bodybgarrayno = Math.floor(Math.random() * fioriimg.length); selectedimg = fioriimg[bodybgarrayno]; tplr = tplr.replace("_image_", "https://sapnetweaverserver/fiori/" + selectedimg + ".png") len = els[i].innerText.trim().split("\n").length; $.each(els[i].innerText.trim().split("\n"), function(index, element) { //console.log(element.trim() + "#" + index + "#" + element.trim().length); if (element.trim().length > 0) { if (element.trim().length > 1) { if (y == 0) { tplr = tplr.replace("_title1_", element); } } if (element.trim().length >= 1 && len < 2) { if (y == 0) { tplr = tplr.replace("_title1_", element); tplr = tplr.replace("_title2_", ""); } } if (element.trim().length >= 1) { if (y == 1) { tplr = tplr.replace("_title2_", element); } } y = y + 1; } }); els[i].innerHTML = tplr; } } } }; xhr.open('GET', 'tpl.html'); xhr.send(); //Custom Codes to create a colourful Tiles Ends Here } catch (error) { jQuery.sap.log.warning("failed to load sap.fiori.core-ext!"); } }, 0); });Also update the html body tag:
<body onload="timeout();" class="sapUiBody sapUShellFullHeight" role="application">
//Custom Codes to create a colourful Tiles Starts Here function timeout() { setTimeout(function() { //Custom Codes to create a colourful Tiles Starts Here var cols = document.getElementsByClassName('sapUshellTileInner'); if (cols != null) { //Custom Codes to create a colourful Tiles Starts Here var xhr = new XMLHttpRequest(); var tpl, tplr, href, y, len, img, bodybgarrayno, selectedimg, nt, iscolor; var arr = new Array(); var fioriimg = ["fiori1", "fiori2", "fiori3", "fiori4", "fiori5"]; for (i = 0; i < cols.length; i++) { iscolor = cols[i].style.backgroundColor; if (iscolor == "") { cols[i].style.backgroundColor = "#FFFFFF"; xhr.onreadystatechange = function() { if (xhr.readyState === 4) { var els = document.getElementsByClassName('sapUshellTileInner'); for (i = 0; i < els.length; i++) { nt = els[i].innerHTML.search("News Tile"); if (nt == -1) { if (els[i].innerHTML.match(/href="([^"]*)/) != null) href = els[i].innerHTML.match(/href="([^"]*)/)[1]; else href = ""; tpl = xhr.responseText; tplr = tpl.replace("_link_", href) y = 0; bodybgarrayno = Math.floor(Math.random() * fioriimg.length); selectedimg = fioriimg[bodybgarrayno]; tplr = tplr.replace("_image_", "https://sapnetweaverserver/fiori/" + selectedimg + ".png") len = els[i].innerText.trim().split("\n").length; $.each(els[i].innerText.trim().split("\n"), function(index, element) { //console.log(element.trim() + "#" + index + "#" + element.trim().length); if (element.trim().length > 0) { if (element.trim().length > 1) { if (y == 0) { tplr = tplr.replace("_title1_", element); } } if (element.trim().length >= 1 && len < 2) { if (y == 0) { tplr = tplr.replace("_title1_", element); tplr = tplr.replace("_title2_", ""); } } if (element.trim().length >= 1) { if (y == 1) { tplr = tplr.replace("_title2_", element); } } y = y + 1; } }); els[i].innerHTML = tplr; } } } }; xhr.open('GET', 'tpl.html'); xhr.send(); } } //Custom Codes to create a colourful Tiles Ends Here } timeout(); }, 1000); } //Custom Codes to create a colourful Tiles Ends Here </script>Upload the Supporting Files to Netweaver Gateway
All supporting documents and modified FioriLaunchpad.html can be found in the attachment.
- Upload the template file tpl.html that we have created earlier.
- Create and upload a custom CSS file: sap.css.
.sapSuiteUiCommonsFeedTileLowerText1 { margin-top: 6px; font-size: .875rem; font-family: 'OpenSans-Regular', sans-serif; text-align: center; color: #cccccc; width: 100%; } .sapSuiteUiCommonsFeedTileAge1 { width: 100%; } .sapSuiteUiCommonsFeedTileTitle1 { font-family: 'OpenSans-Semibold', sans-serif; color: white; font-size: 1.125rem; padding: 8px 15px 0px 15px; word-wrap: break-word; overflow: hidden; height: 53%; }![i.jpg]()
- Upload the 5 flower images. The images will be displayed randomly.
We are done with the modification. You can try run and see it in Chrome or IE.
Here is the final look:
Thanks for reading my blog.
References: