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:

http://[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!

/wp-content/uploads/2014/02/abap_icon_395297.jpg

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,

/wp-content/uploads/2014/02/abap_icon1_395255.jpg

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.

/wp-content/uploads/2014/02/abap_icon2_395256.jpg

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,

/wp-content/uploads/2014/02/abap_icon3_395257.jpg

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! 🙂

To report this post you need to login first.

6 Comments

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

  1. Jason Moors

    Hi Chandrashekhar,

    Thanks, I think it’s worth mentioning that the SAPUI5 icons, having been implemented as Fonts, i.e. vectors rather than images, which mean they can resize and scale without losing any quality.

    If you plan to use the ABAP images, you just need to consider what they will look like on Retina displays etc.

    Many thanks,

    Jason

    (0) 
    1. Chandrashekhar Mahajan Post author

      Hi Jason,

      Yes I totally agree with you. In the blog, I already mentioned that ABAP icons can be best suitable for desktop based ui5 application. sapui5 icons will be best for the reasons you mentioned!

      Regards,

      Chandra

      (0) 
  2. Mateus Luis Oliveira

    HI Chandrashekhar.

    I know that this post is not about it, but could you give a tip?

    I,m strating to study abou UI5 and I did’n understand how connect my ui5 application with ECC.

    I read a few articles about it, but, I’m not sure how to do it.

    Could you help me?

    Thanks man.

    (0) 
  3. Srdjan Boskovic

    Hi Chandrashekhar,

    appreciate your post ! I want to use icons from an older ABAP system, in a landscape without Gateway and cut off from central GW hub. I have the icon ID, let say @5B@ and need SICF service, that would return the icon content (gif, png …). Any ideas how to accomplish that – or, alternatively, export ICON table, with icon content (gifs), to use it from my app?

    Thanks in advance,

    srdjan

    (0) 
      1. Srdjan Boskovic

        Hi Chandra,

        to avoid CORS (and being PyRFC author 🙂 ), I wrote short Python script below, to loop over the ICON table, get GIFs and save them locally, under <ICON-ID>.gif filenames.

        I added the ID field to ZMIME_S, minor modified Z_TEST_MIME_LIST to fill the ID and set the RFC attribute, to make Z_TEST_MIME_LIST callable from Python.

        It worked as expected, thanks for sharing this FM.

        from pyrfc import Connection

        import requests

        def get_connection(conn):

             print ‘Connecting …’, conn[‘ashost’]

             return Connection(config={‘return_import_rfcmeta’: True}, **conn)

        I64 =  {

            “user”: “user”,

            “passwd”: “pass”,

            “ashost”: “10.11.12.13”,

            “sysnr”: “00”,

            “client”: “001”,

            “lang”: “EN”

        };

        base_url = ‘https://system1234.sapportal.de

        c = get_connection(I64)

        Icons = c.call(‘Z_TEST_MIME_LIST’)[‘MIME_TAB’]

        for i in Icons:

            r = requests.get(base_url + i[‘URL’], auth=(‘user’, ‘pass’))

            filename = ‘I64icons/’ + i[‘ID’] + ‘.’ + r.headers[‘content-type’][-3:]

            f = open(filename, ‘w’)

            f.write(r.content)

            f.close()

        Kind regards,

        srdjan

        (0) 

Leave a Reply