To Change icon in Fiori Launchpad

[Hazam_koyaty]

I want to Change the icon of the Launch Pad Tile with Custom icon. Currently it is possible to Change the icon available in sap-icon:// . How can we the icon with Custom icon or add icon inside sap-icon://  .

[laszlo_kajan2]

If it is enough that you replace named SAP icons with your custom icons (accessible under the original name), .

You could also do this with a custom tile.

But if you want to 'simply' add your custom icon font to those supplied by SAP and use it on a standard tile on the FLP, here (below) is how you can do it.

Warning: this solution seems to be stretching the limits of the current FLP implementation quite a bit. Its supportability across SAP upgrades is not assured.

In short:

1. Use a custom HTTP handler for your FLP ('/default_host/sap/bc/ui2/flp'), a subclass of standard /UI2/CL_FLP_HTTP_HANDLER
2. Redefine IF_HTTP_EXTENSION~HANDLE_REQUEST() to extend the FLP:
   1. Add CSS for your custom font
   2. Add JS to add your new icons
3. Use /n/IWFND/GW_CLIENT to set your icon (the FLPD appears to be overly strict about what icons are valid)

Step-by-step:

1. Create a new class ZUI2CL_FLP_HTTP_HANDLER as a subclass of /UI2/CL_FLP_HTTP_HANDLER
2. Set ZUI2CL_FLP_HTTP_HANDLER as the handler of your FLP. Your FLP is probably at '/default_host/sap/bc/ui2/flp'.
3. Redefine ZUI2CL_FLP_HTTP_HANDLER::IF_HTTP_EXTENSION~HANDLE_REQUEST to add your CSS for the custom font, and JS for adding your new icons:

     METHOD if_http_extension~handle_request.
       CALL METHOD super->if_http_extension~handle_request
         EXPORTING
           server = server.
   
       DATA(lv_relative_path_exp) = server->request->get_header_field( if_http_header_fields_sap=>path_info_expanded ).
       DATA(lv_relative_path_exp_lc) = lv_relative_path_exp.
       TRANSLATE lv_relative_path_exp_lc TO LOWER CASE.    " ABAP is case insensitive although URLs by standard are case sensitive
       " E.g.: /ui2/ushell/shells/abap/fiorilaunchpad.html
   
       IF lv_relative_path_exp_lc CP '*fiorilaunchpad.html'.
   
         DATA(lv_content_as_string) = server->response->get_cdata( ).
         IF lv_content_as_string IS NOT INITIAL.
   
           DATA(lv_mycustom_font_css) = |        <style type="text/css">\n| &&
                   |@font-face \{\n| &&
                   | /* Icon and Icon Pool */\n| &&
                   | /* https://help.sap.com/saphelp_uiaddon20/helpdata/en/21/ea0ea94614480d9a910b2e93431291/content.htm */\n| &&
                   | font-family: 'MyCustom-icons';\n| &&
                   | src: url('/sap/public/bc/WebIcons/zmycustom/MyCustom-icons.ttf') format('truetype');\n| &&
                   | font-weight: normal;\n| &&
                   | font-style: normal;\n| &&
                   |\}\n| &&
                   |        </style>\n\n|.
   
           DATA(lv_custom_flp_html) = lv_mycustom_font_css && |        <!-- iPhone splash screens -->|.
   
           REPLACE FIRST OCCURRENCE OF '<!-- iPhone splash screens -->' IN lv_content_as_string WITH lv_custom_flp_html.
   
           " Add custom icons (icon font)
           DATA(lv_mycustom_icon_font_js) = |// Register MyCustom icon font\n| &&
             |                    sap.ui.core.IconPool.addIcon('goods-receipt', 'mycustom', 'MyCustom-icons', 'e000', false, true);\n|.
   
           DATA(lv_custom_icons) = lv_mycustom_icon_font_js && |                    sap.ushell.iconfonts.registerFiori2IconFont();|.
   
           REPLACE FIRST OCCURRENCE OF 'sap.ushell.iconfonts.registerFiori2IconFont();' IN lv_content_as_string WITH lv_custom_icons.
   
           " Consider parent's comment:
           "   "extracted to separate method, because we need an ATC exemption for false positive XSS error"
           server->response->set_cdata( lv_content_as_string ).
   
         ENDIF.
       ENDIF.
   
     ENDMETHOD.
   

4. The current FLPD will not let you set your new icon 'sap-icon://mycustom/goods-receipt', with validation error 'Warning: Icon URI is not valid; it must start with "sap-icon://" and adhere to the URI format', even though the icon URI is clearly valid. Use the Gateway Client to set the new icon on your tile:
   1. Copy the 'Instance ID' of your tile from the FLPD, as shown in the tile configuration view in the upper right corner, e.g. '003N7XD8E8UTBWP05K0MRVWUV'
   2. Start /n/IWFND/GW_CLIENT
      1. Set an HTTP request header 'Accept' 'application/json'
      2. Execute the GET request:

         /sap/opu/odata/UI2/PAGE_BUILDER_CUST/PageChipInstances(pageId='X-SAP-UI2-CATALOGPAGE%3A<Z_your_FLP_catalog>',instanceId='<tile_instance_id>')
         

   3. Copy the returned JSON to the left window with the 'Use as Request' button
   4. Change the "d.configuration.tileConfiguration.display_icon_url" to the URL of your new icon, e.g. 'sap-icon://mycustom/goods-receipt'
   5. Change the HTTP method to PUT and execute
      1. The result should be '204 (success) - No Content'
   6. Your new icon URI is now set
5. Refresh your FLP in the browser: your new icon is now shown

[Former Member]

You can add custom icon fonts to sap.ui.core.IconPool

refer

How to use custom Icon Font in SAPUI5? - SAP ABAP,SAPUI5,SAP HANA,SAP Fiori,OData,Netweaver Gateway,...

[former_member486309]

Hi Rajesh,

This is applicable for a particular application. I am looking for a solution which works globally.

For example, if a icon is used for multiple applications.

If we somehow add this to the icon library from where the icon comes as default then we won't need to add any CSS I guess.

We can add this icon in a normal way what we do for the default icons available in the icon list.

If anyone has implemented this, please let me know.

Regards,

Gaurav

[S0021332585]

Hi Hazam,

You can replace the standard icon with a custom one following below easy steps:

1. Create a custom theme -> T-Code /UI5/THEME_DESIGNER
2. Build an Publish the theme
3. Download to local PC the theme published -> T-Code /UI5/THEME_TOOL
4. Extract the zip folder's
5. Add a custom icon image to path /Base/baseLib/<your_custom_theme>/img/misc/<your_image>.png
6. Add below custom .css code into path /UI5/sap/fiori/themes/<your_custom_theme>/library.css

div[title='Launch "<title_of_your_tile>"'] > span[aria-label="sap-logo-shape"] {
        bottom: 27px !important;
}

div[title='Launch "<title_of_your_tile>"'] > span[aria-label="sap-logo-shape"]:before {
    background-image: url("../../../../../Base/baseLib/<your_custom_theme>/img/misc/<your_image>.png") !important;
    background-size: 38px 38px !important;
    display: inline-block;
    width: 38px;
    height: 38px;
    content: " ";
}

7. Create a .zip archive and upload the custom theme

That's all! Refresh your page and new icon will appear!

Find in attachment my result on Fiori Luanchapd.

BR

Luca

[Former Member]

Hi Hazam,

I found a workaround for this. Please check

Hope it helps.

Regards,

Jaime

[former_member39002]

Hi Hazam,

I was fighting with this issue and I started of with the link from Simon.

After a while I figured it out.

In order to be able to use you own Font you have to:

1. Create a folder in the CSS folder called: fonts

2. Upload your TTF and EOT files there

3. Add in the css:

@font-face { 

font-family: 'MY-icons'; 

src: url('fonts/My-Library.ttf'), 

url('fonts/My-Library.eot');

font-weight: normal; 

font-style: normal; 

} 

4. Add the icons you need in the JS file:

sap.ui.core.IconPool.addIcon("icon-name", "my-icons", "My-icons", "e65c");

the uri to your icon will be: sap-icon://my-icons/icon-name

and use the setIcon method to set it to a button or somewhere else.

Regards,

Ilina

[Former Member]

Helli Llina

  I was trying to follow your solution.

Question on step 1. Create a folder in the CSS folder called: fonts

Where is this CSS folder located that is being talked about?

thanks a lot

preet

[former_member39002]

Hi Preet,

My solution is actually for a Fiori App rather than Launchpad.

I will see if I manage to figure out how that can be done.

Regards,

Ilina

[former_member486309]

Hi IIina,

Please can you let me know which of the JS file are you referring to.

Is it IconPool.js?

Please can you let me know the process of modification of this file and what is its location.

I need to use a custom icon for the tiles on launchpad and want this to be available on global level rather than for a particular application.

Regards,

Gaurav

[Former Member]

Hello,

I was looking for the same functionality.

I didn't found any "easy" solution.

Please have a look to SAP help:

Using Icon Font in SAPUI5 - User Interface Add-On for SAP NetWeaver - SAP Library

The trick is to enhance the CSS style and reference your own icons.

I'll try it later on.

Regards,

[Hazam_koyaty]

Hello,

Did you try your Solution . Could you please provide the steps to acheive this.

Regards,

[Hazam_koyaty]

Hello,

Did you try your Solution . Could you please provide the steps to acheive this.

Regards,

[Former Member]

Hello,

Still not tested the solution 🙂

I'm still focusing on tiles contents more than look and feel.

Regards,