How to develop Fiori-like tiles containing texts and icons using SAPUI5 Heatmap Chart

[Former Member]

Hello Guys,

I have a very big problem since yesterday. I want to visualize business data coming from an Gateway OData Service I developed back-end using the SAPUI5 VizType "Heatmap". I was able to perform it actually but my Boss wants the tile to look like the ones we have on the SAP Fiori Launchpad Homepage with the WHITE background and also with the possibility to insert TEXTS and ICONS inside the tile, just like in the SAP Fiori Launchpad Homepage. Now I tried several times to CHANGE this background color MANUALLY inside the code BUT the framework does not want to listen to my desire and it assigns ANOTHER color automatically. It seems like it is not possible to change manually the background color of some Charts. I am not that sure but this is what I think after several trials. Can someone PLEASE tell me if it is possible to set the BACKGROUND color of my Heatmap Chart which is inside a VizFrame to be WHITE? Is it possible to also INSERT some ICONS inside that Heatmap Chart so that it will look like the tiles in the SAP Fiori Launchpad Homepage? I want to point out that I did NOT use the fiori configuration for my SAPUI5 Application(

'uiConfig' : {

  'applicationSet' : 'fiori',

  'showErrorMessage' : true

}

)

.

Below is my VizFrame settings

oVizFrame.setVizProperties({

               title : {

                         text : "Kontostandübersicht in " + sCurrenyKey

                       },

               plotArea: {

                               drawingEffect  : "glossy",

                               colorPalette : ["white"],

                               background : {

                                           border: {

                                                top: {

                                                    visible: true

                                                },

                                                bottom: {

                                                    visible: true

                                                },

                                                left: {

                                                    visible: true

                                                },

                                                right: {

                                                    visible: true

                                                }

                                            }

                               },

                               dataLabel:{

                                           visible : true,

                                           formatString : "",

                                           style: {

                                                 color: "red",

                                                 fontSize : "30px" 

                                           }

                               }

                          }

           });

Here is how my Boss wants it to look like  as Screenshot

Here is how MINE looks like:

PLEASE I need HELP. I tried to analyse the source code of the SAP Fiori Launchpad Homepage to see if I could find out how they implement their Heatmap to have such tiles. I will appreciate any hint. Thanks in advance for your support and have a blessed day

[Former Member · Accepted solution]

Hello Everyone,

just to let you guys know that I have found the solution to my problem. I used the WRONG control. Heatmap is a Chart control and I did not know there was also a Tile control. So the answer is to use  sap.m.Tile and bind it to my model properties in order to have the desired content inside. Have a great day and stay blessed