ABAP Icon Explorer – SAPUI5 application

ABAP Icon Explorer – SAPUI5 application: In sapui5 application, we can use various icons to beautify its look and feel. On SAPUI5 demokit, you can find Icon Explorer which has around 500+ icons which you can use in your application. you can also see various icons at SAPUI5 SDK – Demo Kit

There was blog on ABAP Icon Library by Patrick Wenger where it is mentioned that

Dealing with web frontends, the need of a consistant icon library is crucial. Of course you can use the icons of the SAPUI5 library. But besides this, every SAP ABAP stack also hosts an nice icon library. You can use the following url to have a look at the icons:

https://[HOST][PORT]/sap/bc/bsp/sap/it00/mime_sap_icons.htm

So I was thinking can we have sapui5 application which will show all icons from SAP NW AS ABAP? Apart from icons from  Icon Explorer if someone is interested to display icons from backed system, there should be some application which will provide those icons. These icons will be best suitable for desktop based ui5 application. Users will be familiar with these icons as those are being used in almost all SAP transactions!

for example, see these buttons with some backend icons!

Source at ABAP Icons on Buttons

In this blog, I will provide demo of an ABAP Icon explorer UI5 application which will display various icons from ABAP Application server.

first I created simple function module to capture icon data as below,

 FUNCTION z_test_mime_list. *"---------------------------------------------------------------------- *"*"Local Interface: *"  EXPORTING *"     REFERENCE(MIME_TAB) TYPE  ZMIME_T *"----------------------------------------------------------------------    DATA: icon_tab TYPE STANDARD TABLE OF icon,          icont_tab TYPE STANDARD TABLE OF icont,          wa_icon LIKE LINE OF  icon_tab,          wa_icont_tab LIKE LINE OF icont_tab,          ls_mime TYPE zmime_s,          url TYPE string.    SELECT * FROM icon INTO TABLE icon_tab .    IF icon_tab[] IS NOT INITIAL.      SELECT  * FROM icont        INTO TABLE icont_tab        FOR ALL ENTRIES IN icon_tab        WHERE langu = sy-langu        AND id = icon_tab-id.    ENDIF.    LOOP AT icon_tab INTO wa_icon.      IF wa_icon-internal IS NOT INITIAL.        READ TABLE icont_tab INTO wa_icont_tab WITH  KEY id = wa_icon-id.        IF sy-subrc = 0.          REPLACE ALL OCCURRENCES OF '@' IN wa_icon-internal WITH ''.          CONCATENATE 's_' wa_icon-internal '.gif' INTO url.          CONCATENATE '/sap/public/bc/icons/' url INTO url.  "You can append absolute path with host and port name as well          ls_mime-name = wa_icon-name.          ls_mime-url = url.          ls_mime-shorttext = wa_icont_tab-shorttext.          APPEND ls_mime TO mime_tab.        ENDIF.      ENDIF.    ENDLOOP. ENDFUNCTION. 

I am exporting table type ZMIME_T which refers to structure ZMIME_S with fields NAME, URL and SHORTTEXT of type string. Then I created simple GW service as below,

and redefined method MIMESET_GET_ENTITYSET of generated class ZCL_ZTESTMIME_DPC_EXT as below,

 METHOD mimeset_get_entityset.    DATA: ls_entity LIKE LINE OF et_entityset,          lt_mime_tab TYPE zmime_t,          ls_mime_tab TYPE zmime_s.    CALL FUNCTION 'Z_TEST_MIME_LIST'      IMPORTING        mime_tab = lt_mime_tab.    LOOP AT lt_mime_tab INTO ls_mime_tab.      MOVE-CORRESPONDING ls_mime_tab TO ls_entity.      APPEND ls_entity TO et_entityset.    ENDLOOP. ENDMETHOD. 

With this code, I am able to get relative URLs to all icons from ABAP stack. I developed simple UI5 application to consume this GW service and was able to explore all icons. But I was thinking how to make this available to all to explore icon library. For that, first i downloaded the OData service response in JSON format and then appended SAP demo system host name https://sapes1.sapdevcenter.com/ to relative URL exposed from my OData service. I created local json file and used in my demo application. you can see the demo application at ABAP Icon Explorer SAPUI5 Application

Below is the output screen of the application. I used DataSet UI element to display icons.

There is option to search icons based on ShortText. So if you wan to see icons which contain description as “material”, you can search it as shown below,

I hope you will explore ABAP Icons and will use it in your application. Just do not forget to replace SAP Demo system host name with your SAP system host name in real productive applications!

Please let me know your views, comments. Happy exploring ABAP Icons! ????