Skip to Content

I’ve been involved in presales activities and customer implementations as well, where requirements as simple as “We would really like to see a picture of the material” came up. In standard SAP GUI this isn’t possible. However with the sidepanel in NWBC, we now have a possibility to view a material image that is context sensitive.

Here’s how to build such a simple chip, that shows an image uploaded via SE78.

Let this be inspiration for what else to build. Share your ideas in the comments section.

Create the web dynpro component

Firstly we need to build a web dynpro component to be used.

Go to transaction SE80 and select Web dynpro component and give your component a name, which fits your namespace.

Give a good description and save it as a local object for now.

After this we need to build create a context, where we can input our material number for identification in the viewer.

Afterwards create the attribute in which we will put the material number, make sure to input the type as matnr as well

Create the view

Now we are ready to create our view.

Select the main view and choose the context tab.

Drag the IMAGE_NODE from the component controller to the context in the context main windows

Afterwards create a new attribute in the context and use the type string

This will act as our image source url. Later we will program the URL.

Now go to the layout tab.

Right click the ROOTUIELEMENTCONTROLLER and choose insert element

Set the ID and set the type as image

As you see in the screenshot below, we now need to connect the source to our context.

Doubleclick the URL in the context

Now it is time to program the url, so our image becomes dynamic. We want the image to change when we select different materials right 😉

Goto the methods tab and select modifyview. The reason why we are using this method is that it is called everytime an event is happening.

Insert the sourcecode from below

DATA: lo_image type ref to cl_wd_image,

lo_component type REF TO if_wd_component,

lo_context TYPE REF TO if_wd_context,

lo_controller TYPE REF TO if_wd_controller,

lo_node TYPE REF TO if_wd_context_node,

lo_child TYPE REF TO if_wd_context_node,

lv_matnr type mara-matnr.

Data: i_name TYPE STXBITMAPS-TDNAME value ‘ZLOGOTEST’,

i_id TYPE STXBITMAPS-TDID VALUE ‘BMAP’,

i_btype TYPE STXBITMAPS-TDBTYPE VALUE ‘BMON’,

l_bds_bytecnt TYPE i,

l_bds_content TYPE TABLE OF bapiconten.

“First we get our context

lo_component = wd_comp_controller->wd_get_api( ).

lo_controller ?= lo_component.

CALL METHOD lo_controller->get_context

  RECEIVING

    context = lo_context.

lo_node = lo_context->root_node.

“Then we get the data from the node IMAGE_NODE, if you have changed this name, then change here.

lo_child = lo_node->get_child_node( ‘IMAGE_NODE’ ).

“Then the value in the matnr attribute

CALL METHOD lo_child->get_attribute(

  EXPORTING

    name = ‘MATNR’

  IMPORTING

    value = lv_matnr ).

i_name = lv_matnr.

i_btype = ‘BCOL’.

*– Get image contents

CALL FUNCTION ‘SAPSCRIPT_GET_GRAPHIC_BDS’

  EXPORTING

    i_object   = ‘GRAPHICS’

    i_name     = i_name “Image name

    i_id       = i_id

    i_btype    = i_btype “Image type(color or gray)

  IMPORTING

    e_bytecount = l_bds_bytecnt

  TABLES

    content    = l_bds_content[]

  EXCEPTIONS

    not_found  = 1

    OTHERS     = 2.

Data: l_length TYPE i,

l_content TYPE tsf_xsf_ct.

CALL FUNCTION ‘SAPSCRIPT_CONVERT_BITMAP’

  EXPORTING

old_format = ‘BDS’

    new_format = ‘BMP’

    bitmap_file_bytecount_in = l_bds_bytecnt

  IMPORTING

    bitmap_file_bytecount   = l_length

  TABLES

bds_bitmap_file         = l_bds_content[]

bitmap_file = l_content[]

  EXCEPTIONS

    OTHERS = 1.

Data: w_file TYPE xstring,

l_grline TYPE LINE OF tsf_xsf_ct,

l_linelength TYPE i.

DESCRIBE FIELD l_grline LENGTH l_linelength IN BYTE MODE.

LOOP AT l_content INTO l_grline.

  IF l_length > l_linelength.

    CONCATENATE w_file l_grline-line INTO w_file IN BYTE MODE.

  ELSE.

    CONCATENATE w_file l_grline-line(l_length) INTO w_file IN BYTE MODE.

  ENDIF.

  l_length = l_length – l_linelength.

  1. ENDLOOP.

DATA:url TYPE string,

guid TYPE guid_32,

cached_response TYPE REF TO if_http_response.

CREATE OBJECT cached_response

  TYPE

  cl_http_response

  EXPORTING

    add_c_msg = 1.

* set image to mime

cached_response->set_data( w_file ).

cached_response->set_header_field(

name = if_http_header_fields=>content_type

value = ‘image/pjpeg’ ).

cached_response->set_status( code = 200 reason = ‘OK’ ).

cached_response->server_cache_expire_rel( expires_rel =

180 ).

CALL FUNCTION ‘GUID_CREATE’

  IMPORTING

    ev_guid_32 = guid.

cl_wd_utilities=>construct_wd_url( EXPORTING

application_name = ‘ZTEST1’ “Webdynpro application name

IMPORTING out_local_url = url ).

CONCATENATE url ‘/’ guid sy-uzeit INTO url.

cl_http_server=>server_cache_upload(

url = url

response = cached_response ).

DATA lo_el_context TYPE REF TO if_wd_context_element.

DATA ls_context TYPE wd_this->element_context.

* get element via lead selection

lo_el_context = wd_context->get_element( ).

* get single attribute

lo_el_context->set_attribute(

EXPORTING

name = `URL`

value = url ).


Ok so now we have set the url to be changed dynamically by the input from the material number. However we still need to input something into the matnr attribute in our component comtroller.

Create the import method

Go back to the component controller and create a new method.

Make sure to mark this method as an interface method.

Create an importing parameter with the structure of MARA

Now use the web dynpro code wizard to set the material number into the context

Remember to press the set operation

Press the ok button and change the last value in the single attribute to the PARAM-IN-matnr

       set single attribute
LO_EL_IMAGE_NODE
->SET_ATTRIBUTE(
NAME
`MATNR`
VALUE = PARAM_INMATNR ).

Now right click on your web dynpro component and press activate. Mark everything and press ok

Now it is time for us to create a chip to be used in the sidepanel. This is instead of a web dynpro application

Creating the CHIP

Right click on your newly created web dynpro component and press create à Web Dynpro Chip

Give the chip a saying name and press continue

Save it in a local package

Give a proper display name and description and press save.

Click the inports tab and press the new button

Choose the INPORT_METH that we created in the component controller

If the popup comes up empty, check if you have set your inport_meth in your component controller as an interface method.

Press the new button in the parameters of port INPORT_METH

Select only MATNR, as this is the only one we are using for now.

Mark the line afterwards and press the show tags button

Press the new button in tags for parameter MATNR and input /BSSP/:MATNR (This is SAP standard tag for material number and we might as well reuse this 😉

Now we are done with the web dynpro component and we move on to creating a role to test with.

Creating the role

Go to transaction PFCG and create a single role with a saying name

Give a proper descripton and switch to the users tab. Assign your user and switch to the menu tab afterwards.

Create a folder and give a saying name. Then press the transaction button and include VA01, VA02 and VA03 in that

Afterwards create an additional folder and double click the folder afterwards. Now press the Other node details and input the following

Application alias = {TR=VA01;VA02;VA03}{WDA=LO_OIF*}

Folder options = Sidepanel

So what does that mean?

Well the folder option is to indicate that this folder is only holding sidepanel content and shouldn’t be visible from the index page in NWBC and the application alias is a place to put which transactions and web dynpro applications this sidepanel is active for. So if you wanted this to work for MM03 as well, what should you input? 😉

Press save.

Creating the sidepanel page using pagebuilder

Press the little marker next to transaction and select web dynpro application

Make sure that you select the application type: Page. Now enter WDR_CHIP_PAGE as web dynpro application and the application config with a saying name. Press the create button

Now specify a name for the web dynpro component configuration as well, this can be the same. Then save this as a local object

Press continue and save your role.

Now right click on your newly created web dynpro application and press execute.

Internet explorer will open our new pagebuilder page, which is empty at the moment. Press the Wrench icon and select configuration

Press the add button. We are now loading the chip catalog, in here you will find all the chips that you can use for sidepanel content. (NB: it takes a while 😉

We will search for the one we just created.

Select the entry. Don’t worry that it is grey, this is because we haven’t created a description for it. Press the ok button.

Now it should load the material image chip and you can press save.

Close down internet explorer.

We are now done with the setup and are ready to test our newly created sidepanel. But first we need to upload a picture.

Upload an image

Go to transaction SE78.

Click the import button

Find your BMP picture of your material.

Save the image with the filename of the material number. Remember we have to do this because we are using the material number to construct the dynamic URL.

And choose as a color bitmap image

Press continue.

Now that the image is uploaded we are ready to test our sidepanel content.

Testing our hard work.

Open NWBC and go into VA01.

Input order type and customer name and input the material number.

Doubleclick the material number and open your sidepanel

Et voilá you have now created your own custom sidepanel

To report this post you need to login first.

26 Comments

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

  1. Simon Kemp

    Hi Jakob,

    Thanks for taking the time to share this. I am very interested in the sort of side panels people will create, I think maybe having somewhere for people to share their ideas would be good (apart from the comments here) 🙂

    One question, you don’t show the mapping of the GUI screen fields to the tags, is that because there is already a default mapping provided by SAP for the VA01 screen? Normally I guess you would also need to do the mapping and define the tags… right?

    Thanks,

    Simon

    (0) 
    1. Jakob Marius Kjær Post author

      Hi Simon,

      That is correct yes. However because we are using SAP standard tagging ( /BSSP/:MATNR) this is already maintained in the NWBC_VS_GUI_TAG table, so we don’t need to do the tagging here.

      (0) 
  2. Samuli Kaski

    Thanks for sharing. Showing a picture in VA01 is certainly possible with traditional dynpro programming using table controls and office controls if required. That said side panels are definitely powerful, especially since you can mix different UI frameworks. Would you consider formatting the ABAP code using ABAP code lighter for SCN.sap.com to make it more readable?

    (0) 
    1. Jakob Marius Kjær Post author

      Hi Samuli,

      I tried to use the code lighter to format the code, however i get a dump using it. You are welcome to take the source code and the you can upload it somewhere like dropbox or something, then ill take the HTML file and insert into the document.

      (0) 
      1. Samuli Kaski

        You are right, it does short dump with your code. Pinging Georgiy Shlyakhov, I’m sure he will be interested to hear about it. I will share the details in George’s document. The formatted code attached, it’s not pretty (you should use pretty printer in the ABAP editor) but it is already more readable.

        DATA: lo_image type ref to cl_wd_image,

        lo_component type REF TO if_wd_component,

        lo_context TYPE REF TO if_wd_context,

        lo_controller TYPE REF TO if_wd_controller,

        lo_node TYPE REF TO if_wd_context_node,

        lo_child TYPE REF TO if_wd_context_node,

        lv_matnr type mara-matnr.

        Data: i_name TYPE STXBITMAPS-TDNAME value ‘ZLOGOTEST’,

        i_id TYPE STXBITMAPS-TDID VALUE ‘BMAP’,

        i_btype TYPE STXBITMAPS-TDBTYPE VALUE ‘BMON’,

        l_bds_bytecnt TYPE i,

        l_bds_content TYPE TABLE OF bapiconten.

        “First we get our context

        lo_component = wd_comp_controller->wd_get_api( ).

        lo_controller ?= lo_component.

        CALL METHOD lo_controller->get_context

          RECEIVING

            context = lo_context.

        lo_node = lo_context->root_node.

        “Then we get the data from the node IMAGE_NODE, if you have changed this name, then change here.

        lo_child = lo_node->get_child_node( ‘IMAGE_NODE’ ).

        “Then the value in the matnr attribute

        CALL METHOD lo_child->get_attribute(

          EXPORTING

            name = ‘MATNR’

          IMPORTING

            value = lv_matnr ).

        i_name = lv_matnr.

        i_btype = ‘BCOL’.

        *– Get image contents

        CALL FUNCTION ‘SAPSCRIPT_GET_GRAPHIC_BDS’

          EXPORTING

            i_object   = ‘GRAPHICS’

            i_name     = i_name “Image name

            i_id       = i_id

            i_btype    = i_btype “Image type(color or gray)

          IMPORTING

            e_bytecount = l_bds_bytecnt

          TABLES

            content    = l_bds_content[]

          EXCEPTIONS

            not_found  = 1

            OTHERS     = 2.

        Data: l_length TYPE i,

        l_content TYPE tsf_xsf_ct.

        CALL FUNCTION ‘SAPSCRIPT_CONVERT_BITMAP’

          EXPORTING

            old_format              = ‘BDS’

            new_format              = ‘BMP’

            bitmap_file_bytecount_in = l_bds_bytecnt

          IMPORTING

            bitmap_file_bytecount   = l_length

          TABLES

            bds_bitmap_file         = l_bds_content[]

            bitmap_file             = l_content[]

          EXCEPTIONS

            OTHERS                  = 1.

        Data: w_file TYPE xstring,

        l_grline TYPE LINE OF tsf_xsf_ct,

        l_linelength TYPE i.

        DESCRIBE FIELD l_grline LENGTH l_linelength IN BYTE MODE.

        LOOP AT l_content INTO l_grline.

          IF l_length > l_linelength.

            CONCATENATE w_file l_grline-line INTO w_file IN BYTE MODE.

          ELSE.

            CONCATENATE w_file l_grline-line(l_length) INTO w_file IN BYTE MODE.

          ENDIF.

          l_length = l_length – l_linelength.

        ENDLOOP.

        DATA:url TYPE string,

        guid TYPE guid_32,

        cached_response TYPE REF TO if_http_response.

        CREATE OBJECT cached_response

          TYPE

          cl_http_response

          EXPORTING

            add_c_msg = 1.

        * set image to mime

        cached_response->set_data( w_file ).

        cached_response->set_header_field(

        name = if_http_header_fields=>content_type

        value = ‘image/pjpeg’ ).

        cached_response->set_status( code = 200 reason = ‘OK’ ).

        cached_response->server_cache_expire_rel( expires_rel =

        180 ).

        CALL FUNCTION ‘GUID_CREATE’

          IMPORTING

            ev_guid_32 = guid.

        cl_wd_utilities=>construct_wd_url( EXPORTING

        application_name = ‘ZTEST1’ “Webdynpro application name

        IMPORTING out_local_url = url ).

        CONCATENATE url ‘/’ guid sy-uzeit INTO url.

        cl_http_server=>server_cache_upload(

        url = url

        response = cached_response ).

        DATA lo_el_context TYPE REF TO if_wd_context_element.

        DATA ls_context TYPE wd_this->element_context.

        * get element via lead selection

        lo_el_context = wd_context->get_element( ).

        * get single attribute

        lo_el_context->set_attribute(

        EXPORTING

        name = `URL`

        value = url ).

        (0) 
    2. Jakob Marius Kjær Post author

      Hi Samuli,

      I’m not much into classical dynpro programming, but i would expect it to be a bit harder to do, than this.

      An example i created a sidepanel chip that showed a webpage that changed dynamically according a field in a web dynpro application. That took me two hours to do.

      Hopefully i’ll find some time to share more examples soon.

      (0) 
  3. Damean-BF Chen

    Cool … Many thanks for sharing.  We have been thinking of using GOS call (Generic Object Services) call to achieve something similar via SAPGUI; but this is way much cooler.

    (0) 
  4. Kim Brandt

    Hi Jacob

    I did your coding and it works fine when I hardcode the Image id.

    But when I dynamically read the matnr. nothing is read from the context.

    That means no matnr is set by the IN_PORT method. It cant be debugged?

    Table NWBC_CFG_GUI_TAG is maybe not properly maintained and can we do that

    ourself? Only one record with Program name SAPMV45A screen no. 4003 is there for tag id /BSSP/:MATNR.

    I call Side Panel for both Material Master and Sales Order using NEBC Desktop 5.0

    Thanks Kim

    (0) 
    1. Jakob Marius Kjær Post author

      Hi Kim,

      You are able to debug the inport method or anywhere else in the dynpro application, you just need to use the external breakpoints, then it should be fine.

      (0) 
      1. Kim Brandt

        Hi Jacob

        I did that of course but no breakpoint wat hit in the In_port method but the breakpoint in the Modifyview method was hitted with an empty lv_matnr for get attribute of  ‘MATNR’. When I change lv_matnr in the debugger to value matnr of the image it is displayed correctly it the Side Panel.

        Do you know how standard transactions fire the CHIPparameter (Tags to the In_port method?

        In table NWBC_CFG_TAG there is no entries for Material Master transaction. Can you set that in an userexit? Or what can we do in order to get our in_port method called/fired from a Standard SAP tranaction.

        Thanks Kim

        (0) 
          1. Kim Brandt

            Hi Jakob

            Thanks for link.
            But I can locate the path Help->Tools->SAP GUI Property Collector in the NWBC 5.0?
            I can find the standard SAP Help path but there is no Tools path beneaths?

            Thanks Kim

            (0) 
              1. Kim Brandt

                Hi Jokon

                ?

                I you talking about F1 help or Menu->Help? or What Help?

                In the meantime I got GUI Property Collector started from C/Directory but its empty/inactive.

                Thanks Kim

                (0) 
                  1. Kim Brandt

                    Hi Jakob

                    Got it now.

                    But SAP GUI Property Collector is not displaying anyting from NWBC but it works fine from SAP GUI transactions. Why that difference?

                    Thanks Kim

                    (0) 
                    1. Jakob Marius Kjær Post author

                      Not sure what you mean? You can’t use the GUI property collector along with NWBC?

                      If you maintain the tagging table using the GUI transactions, then it should be fine still.

                      (0) 
                  2. Kim Brandt

                    Hi Jakob

                    Side Panels stills dosnt show my image because get_attribute is empty in method Modifyview:
                    I used GUI Property Collector to get the entry for table NWBC_VS_GUI_TAG from standard transaction MM03 using sap gui for windows and got:

                    Program name: SAPLMGMM

                    Screen: 4004

                    Tag: lid:/wnd[0]titl.IsOnScreen.

                    and entered it into table as
                    Program name. SAPLMG*

                    Screen. *

                    Shouldn’t that be what required?

                    But Side Panel dont stop at breakpoint in In_port but only in Modifyview?

                    Thansk Kim

                    (0) 
                    1. Jakob Marius Kjær Post author

                      Hi Kim,

                      Sounds like your scripting isn’t enabled on your server, does any sidepanels show any data at all?

                      Check the profile parameter for scripting, can’t remember exactly what they are called. Also check in the WD_GLOBAL_SETTING to see if sending and recieving of data to sidepanel is enabled.

                      (0) 
                      1. Kim Brandt

                        Hi Jakob

                        My Side Panel works perfect. Hardcoded Image is displayed perfect from SE78. But no Matnr is send to the in_port method which is not called in debugging mode. Scripting works perfect from SAP standard ERP but not from NWBC. I can open SAP GUI Property Collector from NWBC but nothing is recorded unlike fra SAP standard ERP. Docu talks simultaniously to open SGPC in NWBC but you can only hit one button at same time. So how do we fill SGPC from NWBC, seems to be my issue?

                        Thanks Kim

                        (0) 
                      2. Kim Brandt

                        Hi Jakob

                        Thanks. Now my in_port method is called in debugging mode. Maybay because I changed the WD_GLOBAL_SETTING paramters for Side Panel 😉 Now I need to change the tagged matnr in MM03 supposed to be set in the in_port method? For time being it is Titl.TEXT which is the screen name 🙁

                        Thanks Kim

                        (0) 

Leave a Reply