Skip to Content

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.

/wp-content/uploads/2015/01/aa_628582.jpg

Concept

Let see what is the html tag behind the standard tile in Fiori Launchpad.

/wp-content/uploads/2015/01/d_628498.jpg

Below is the result, we will replace the child tags under the class sapUshellTileInner with our HTML tags.

/wp-content/uploads/2015/01/c_628524.jpg

Let’s create a template tpl.html to replace that section.

/wp-content/uploads/2015/01/e_628525.jpg
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

/wp-content/uploads/2015/01/f_628553.jpg

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.

/wp-content/uploads/2015/01/k_628568.jpg

  • 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%;
    }
    
    
    
    
    
    
    
    
    

    /wp-content/uploads/2015/01/i_628555.jpg

  • Upload the 5 flower images. The images will be displayed randomly.

/wp-content/uploads/2015/01/g_628554.jpg

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:

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply