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.
- 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_IN-MATNR ).
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
- SAP Managed Tags:
27 Comments
