Skip to Content
Author's profile photo Oliver Welzel

NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB

There is no doubt that the side panel is a very popular feature of the SAP NetWeaver Business Client (NWBC) for Desktop. Even though there are already some blogs available about this topic, I want to describe a simple example which combines interesting technologies in one scenario. The scenario consists of a SAP GUI transaction on the one hand and a side panel application showing a Floorplan Manager (FPM) chart GUIBB on the other hand. The chart GUIBB is based on the JavaScript library CVOM (Common Visual Object Modeler), but the handling of the library is completely hidden by FPM. In contrast to IGS (Internet Graphics Service) charts the CVOM charts are much more appealing because of their animation and interaction capabilities.

NetWeaver Enterprise Procurement Model

Both the transaction (SEPM_SO) and the side panel application are part of the NetWeaver Enterprise Procurement Model (NWEPM). The NWEPM is comparable with the classical flight model which is used since a long time at SAP for training, documentation, etc. NWEPM covers sales and purchasing business processes allowing more realistic demos than the flight model does. All applications of the NWEPM are only used for demo or test purposes. They are not intended for productive usage. The data which is displayed in the applications is demo data generated by a data generator.

The following NWBC for Desktop side panel demo is part of every SAP NetWeaver 7.40 starting from SP6.The example is purely relying on SAP Basis functionality, that’s why the BCV (Business Context Viewer) side panel is out of scope and Business Suite naming conventions do not apply.

Business Scenario

The business scenario is to visualize the monthly gross sales totals of a fictitious company called ITelO across the last six months for a given customer. The NWBC side panel is used to enhance a SAP GUI transaction (SEPM_SO) for maintaining sales orders. On the selection screen of the transaction a user selects a sales order and navigates to a detail screen. There the user can open the side panel and check a half-year sales history of the customer of this sales order.

FinalResult.png

Final Result when running the Scenario

Implementation
The following chapters cover all the necessary steps for the implementation of the scenario from creating the tags and the PFCG role entries, via creating a side panel CHIP page and a Web Dynpro CHIP up to the creation of an FPM UIBB CHIP wrapper for a chart GUIBB.

The reader should already have some basic knowledge in ABAP Web Dynpro, NWBC and PFCG, because the focus of this blog is not so much on a detailed description of how to use each development tool but more to get a general overview what has to be done and how the different steps depend on each other. Like a matryoshka doll the description is structured from the outer to the inner components.

Overview.png

Overview of the Implementation Structure

1. Tag Definition
The exchange of data between the SAP GUI transaction and the side panel application is based on matching tag names. The source field on the SAP GUI transaction screen is given a tag name and the same tag name must be used to identify the target parameter of the CHIP inport in the side panel.

The first step is to define a tag on the source side. This is done by starting the SAP GUI transaction SEPM_SO in the SAP NWBC and opening the SAP GUI property collector. In order to start the property collector it is necessary to keep the CTRL-key pressed while opening the NWBC menu Help -> Tools -> SAP GUI Property Collector. The tool allows the selection of a Dynpro field on the SAP GUI screen, in this case the field Business Partner ID, and creates a data line in the property collection table. The created data line must be selected and copied to the clipboard.

SAP GUI Property Collector.png

To store the copied tag information in the SAP system start transaction SM30, create a new entry for maintenance view NWBC_VC_GUI_TAG, paste the clipboard content and add a tag name. In this example the tag name is EPM_BUYER_ID and the tag information is stored in maintenance view NWBC_VS_GUI_TAG which is used for content delivered by SAP.

SM30.png

2. PFCG Role
The present scenario is part of the PFCG role SAP_BC_EPM_DEMO which is shipped with SAP NetWeaver 7.40 (SP6 or higher).

When starting transaction PFCG, open the role in edit mode, switch to the Menu tab and press the button Other Node Details. The transaction SEPM_SO is added as role menu entry to the PFCG role. From this menu entry a user, who has the role assigned, will start the whole scenario.

Additionally a menu entry for the side panel is required. Therefore the Web Dynpro application WDR_CHIP_PAGE is added as menu entry with the application configuration S_EPM_SIDE_PANEL. The next chapter contains more details regarding this application configuration.

The side panel menu entry should look like in the below screenshot from PFCG. Important are the value Side Panel in field Node Option and the assignment of the transaction to the side panel application by the value in field Application Alias. Instead of assigning the transaction SEPM_SO in general, it would also be possible to define a role specific assignment. In this case the value would be {REF= 182} with 182 being the node ID of the menu entry for transaction SEPM_SO within this role.

PFCG.png

3. Side Panel Application Configuration (S_EPM_SIDE_PANEL)
The side panel page is built with the page builder which is the Web Dynpro application WDR_CHIP_PAGE. For this application we need to create the application configuration S_EPM_SIDE_PANEL. Within the application configuration the component configuration S_EPM_NWBC_SIDE_PANEL_CONF is referenced. The next chapter explains the creation of the component configuration S_EPM_NWBC_SIDE_PANEL_CONF.

Continuing with the application configuration it is optionally possible to specify a CHIP catalog. With a CHIP catalog a set of CHIPs is defined that can be added to the CHIP page, otherwise all existing CHIPs are offered for adding to the CHIP page. In the present example the CHIP catalog S_EPM_DEMO_CHIP_CATALOG is provided. This catalog offers all NWEPM CHIPs.

The option WDSIDEPANELREMOTECONSUMER must be set in order to enable the exchange of tagging data.

Also the CVOM chart that is used in this scenario requires a certain rendering mode. For this reason the option WDPREFERREDRENDERING must be set to Standards Mode which has an impact on the available browsers. When using Internet Explorer, version 9 or higher is mandatory.

App_Config_1.png

App_Config_2.png

App_Config_3.png

4. Side Panel Component Configuration (S_EPM_NWBC_SIDE_PANEL_CONF)
The component configuration S_EPM_NWBC_SIDE_PANEL_CONF is used to define the layout of the CHIP page. By starting the application configuration S_EPM_SIDE_PANEL in configuration mode it is possible to place the CHIPs from the CHIP catalog on the page and change settings like e.g. the title. This layout information and the CHIP settings are stored in the configuration S_EPM_NWBC_SIDE_PANEL_CONF.

The next steps explain how to create a CHIP that can finally be added to a CHIP page.

SP_Config.png

5. Web Dynpro CHIP (S_EPM_SALES_CHART_CHIP)
The central part is the creation of the Web Dynpro CHIP S_EPM_SALES_CHART_CHIP. A Web Dynpro CHIP is based on a Web Dynpro component. In this example the component is FPM_UCW_COMPONENT with the configuration S_EPM_SALES_CHART_UCW, the interface view FPM_WINDOW and the plug name DEFAULT. The next chapter explains the purpose of the component FPM_UCW_COMPONENT.

Also it is necessary to give the CHIP a display name and a description. Optionally a CHIP icon can be provided which is later displayed in front of the title. In the present example a chart icon is used.

CHIP.png

6. UIBB CHIP Wrapper Component Configuration (S_EPM_SALES_CHART_UCW)

The FPM chart GUIBB cannot be used directly in a Web Dynpro CHIP. It must be wrapped by the Web Dynpro component FPM_UCW_COMPONENT. The wrapping is simply done by creating a component configuration S_EPM_SALES_CHART_UCW for the Web Dynpro component FPM_UCW_COMPONENT which references the FPM_CHART_UIBB component with the configuration EPM_SALES_CHART_CFG. More information about the FPM GUIBB configuration EPM_SALES_CHART_CFG follows in the chapter below.

UCW.png

7. FPM Chart GUIBB Configuration (EPM_SALES_CHART_CFG)
When creating the FPM chart GUIBB configuration for component FPM_CHART_UIBB, first a feeder class must be provided. In this example the feeder class is called CL_EPM_SALES_CHART_FEEDER. The feeder class is explained in the next chapter.

As chart type the Column type is used. Furthermore the chart consists of two axes. One is the time axis with the six months and the other one is the sales axis with the cumulated sales amounts. The two axes are configured on the tab Chart UIBB Schema by choosing TIMES as a dimension and SALES as a measure. TIMES and SALES are fields of the chart data structure from the feeder class.

Chart.png

8. FPM Feeder Class (CL_EPM_SALES_CHART_FEEDER)

Finally a feeder class for the chart GUIBB is required. This ABAP class must implement the FPM interfaces IF_FPM_GUIBB_CHART and IF_FPM_CHIP_FEEDER.

The CHIP inport and parameter are defined in the method CHIP_INIT of the interface IF_FPM_CHIP_FEEDER. Also the parameter is associated in this method with the tag name EPM_BUYER_ID which was specified in transaction SM30.

From the chart GUIBB interface IF_FPM_GUIBB_CHART only three methods are implemented. The method INITIALIZE retrieves and stores the month names which are used as axis values. The method GET_DEFINITION defines the structure of the chart data and sets the titles of the two axes. The method GET_DATA selects and returns the chart data of the given buyer ID from the data base. The chart data is provided by an internal table based on the DDIC structure SEPM_CHART_DATA.

ChartData.png

The inport parameter is typed with the DDIC structure SEPM_CHIP_BUYER.

ChipBuyer.png

Below there is a code snippet with the relevant methods. All other methods of the interfaces IF_FPM_GUIBB_CHART and IF_FPM_CHIP_FEEDER are implemented empty. The code uses some of the nice new ABAP language features coming with SAP NetWeaver 7.40.

 

PRIVATE SECTION.
  CONSTANTS gc_buyer_inport TYPE string VALUE `BUYER`.

  CONSTANTS gc_buyer_id TYPE string VALUE `BUYER_ID`.

  CONSTANTS gc_buyer_tag TYPE string VALUE `EPM_BUYER_ID`.

  DATA mt_month_names TYPE STANDARD TABLE OF t247.

  DATA mo_chip_api TYPE REF TO if_chip_api.

METHOD if_fpm_chip_feeder~chip_init.

  mo_chip_api = io_chip_api.

  DATA(lv_type_name) =

    cl_abap_elemdescr=>describe_by_data( VALUE sepm_chip_buyer( ) )->get_relative_name( ).

  ” Create the CHIP inport with parameter and tagging info

  mo_chip_api->add_dynamic_inport(

    inport_description =

      cl_chip_port_helper=>create_port_descr_from_ddic(

        VALUE #( name         = gc_buyer_inport

                 display_name = gc_buyer_inport

                 description  = text-003

                 type_name    = lv_type_name

                 param_info   = VALUE #( ( name         = gc_buyer_id

                                           display_name = gc_buyer_id

                                           description  = text-004

                                           tagging_info = VALUE #( ( tag = gc_buyer_tag ) ) ) ) ) )

    activate_immediately = abap_true ).


ENDMETHOD.

METHOD if_fpm_guibb_chart~get_data.


  CHECK io_event->mv_event_id = if_fpm_constants=>gc_event-handle_chip_inport.

  ” The chart shall display the sales history of a buyer given by its ID that covers

  ” the last six months including the current month. The monthly sales figure is the

  ” sum of all sales order gross amounts of the given buyer in that month.

  DATA lt_chart_data TYPE sepm_chart_data_tab.

  DATA lo_inport_event TYPE REF TO if_chip_port_event.


  io_event->mo_event_data->get_value(

    EXPORTING

      iv_key   = if_fpm_constants=>gc_event_param-chip_port_event

    IMPORTING

      ev_value = lo_inport_event ).


  IF lo_inport_event IS BOUND AND lo_inport_event->get_port_name( ) = gc_buyer_inport.

    DATA lv_buyer_id TYPE sepm_chip_buyer.


    mo_chip_api->get_data_from_inport_event(

      EXPORTING

        inport_event = lo_inport_event

      CHANGING

        data_change  = lv_buyer_id ).


    IF lv_buyer_id IS NOT INITIAL.

      ” Calculate the first day of the whole sales history.

      DATA(lv_date) =

        CONV sydatum( |{ sy-datlo(4) }{ sy-datlo+4(2) – 5 WIDTH = 2 ALIGN = RIGHT PAD = ‘0’ }01| ).

      ” A correction is necessary if the first day is part of the last year.

      IF lv_date+4(2) <= 0. lv_date+4(2) = lv_date+4(2) + 12. lv_date(4) = lv_date(4) – 1. ENDIF.

      ” Prepare selection range with the given buyer ID.

      DATA(lt_bp_id_selection) =

        VALUE if_epm_so_header=>tt_sel_par_partner_ids(

          ( sign = ‘I’ option = ‘EQ’ low = lv_buyer_id ) ).

      ” Prepare selection range for the monthly time interval.

      DATA(lt_time_selection) =

        VALUE if_epm_so_header=>tt_sel_par_create_timestamps( ( sign = ‘I’ option = ‘BT’ ) ).

      ASSIGN lt_time_selection[ 1 ] TO FIELD-SYMBOL(<ls_time_selection>).

      ” Calculate the sum of gross amounts for each of the six months

      ” starting from the past until the current month.

      DO 6 TIMES.

        APPEND INITIAL LINE TO lt_chart_data ASSIGNING FIELD-SYMBOL(<ls_chart_data>).

        ” Set a display text for this month.

        DATA(lv_month) = lv_date+4(2).

        <ls_chart_data>-times = mt_month_names[ lv_month ]-ltx.

        ” Set the first day of this month as low value of the time selection range.

        <ls_time_selection>-low  = |{ lv_date }000000|.

        ” Calculate the first day of the next month.

        WHILE lv_date+4(2) = lv_month. lv_date = lv_date + 1. ENDWHILE.

         

        ” Set the last day of this month as high value of the time selection range.

        <ls_time_selection>-high = |{ CONV sydatum( lv_date – 1 ) }235959|.


        ” Calculate the gross amount sum of all sales orders of the given buyer for this month.

        SELECT SUM( so~gross_amount )

          FROM snwd_so AS so JOIN snwd_bpa AS bp ON bp~node_key = so~buyer_guid

          INTO @<ls_chart_data>-sales

          WHERE bp~bp_id IN @lt_bp_id_selection AND so~created_at IN @lt_time_selection.

      ENDDO.

    ENDIF.

    ” Set the sales history data. The data might be empty if no buyer ID is given.

    io_chart_data->get_table_model( )->set_data( lt_chart_data ).
  ENDIF.


ENDMETHOD.

METHOD if_fpm_guibb_chart~get_definition.


  ” Define the structure and some text properties of the chart data

  io_chart_model->get_table_model( )->set_definition(

    io_field_catalog     =

      CAST #( cl_abap_tabledescr=>describe_by_data( VALUE sepm_chart_data_tab( ) ) )

    it_field_description =

      VALUE #( ( name = |TIMES| text = text-001 )

               ( name = |SALES| text = |{ text-002 } [EUR]| ) ) ).


ENDMETHOD.


METHOD if_fpm_guibb~initialize.

  ” Retrieve all month names in the language of the current user

  CALL FUNCTION ‘MONTH_NAMES_GET’

    TABLES

      month_names = mt_month_names

    EXCEPTIONS

      OTHERS      = 1.


  ” If there are no month names in the language of the user, take the English names

  IF sy-subrc <> 0.

    CALL FUNCTION ‘MONTH_NAMES_GET’

      EXPORTING

        language    = ‘E’

      TABLES

        month_names = mt_month_names.

  ENDIF.

ENDMETHOD.

Assigned Tags

      21 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Raf Boudewijns
      Raf Boudewijns

      Interesting document, however I am (completely) stuck as of step 6. We're on SAP NetWeaver 7.31 and the EPM content is available albeit not the same as in 7.40 (according to your document).

      As of step 4 things are different in our version... we have other chip components instead of the FPM_UCW_COMPONENT. We have a S_EPM_CHART_DISPLAY and an additional S_EPM_MAP_DISPLAY. Not sure whether I need a "wrapper" configuration for those (but I think not).

      Anyways, assuming that we don't need this wrapper, then something else is still wrong/not configured as our side-panel doesn't show any data. Will investigate this further...

      Author's profile photo Oliver Welzel
      Oliver Welzel
      Blog Post Author

      Hi Raf,

      yes, the wrapper is only needed if you want to use an FPM UIBB in a sidepanel CHIP like in the scenario described in this blog. FPM_UCW_COMPONENT is a Web Dynpro component that does also exist in 7.31. It is not part of NWEPM but belongs to FPM and wrapps UIBBs generically to provide the UIBB with an FPM runtime within the CHIP environment. The reason why the scenario of this blog is not available in 7.31 is because FPM does not offer the chart UIBB there.

      Did you try an own sidepanel implementation or the NWEPM sidepanel scenario in 7.31 based on the transaction SEPM_SO? Without knowing the details it is hard to say why you do not see any data. It could be e.g.that the Web Dynpro parameter WDSIDEPANELREMOTECONSUMER is not enabled or that the profile parameter sapgui/user_scripting does not allow scripting or a lot of individual pitfalls depending on the implementation.

      Ciao

      Oliver

      Author's profile photo Raf Boudewijns
      Raf Boudewijns

      Hey Oliver,

      I actually got it to work, but forgot to update here. Basically it worked from the beginning, I just hadn't opened the side panel wide enough to see it 😳

      The scenario for 7.31 will actually work when following the steps from your blog up until steps 4/5. The side panel shows a chart and a map. The latter doesn't work for me (at the client) because I currently don't have (direct) internet access over there (due to changes in their firewall). The chart only shows data for 1 month (in my example as I didn't generate much data for the EPM data model yet) and by default it shows a couple of months worth. Only the last month is filled (in my case) and since the side panel wasn't wide enough, it didn't show.

      Anyways, thanks a lot! Thanks to this blog I have a better understanding of how this works (and quite frankly I'm impressed).

      Cheers,

      Raf

      Author's profile photo Oliver Welzel
      Oliver Welzel
      Blog Post Author

      Hi Raf,

      thanks for your feedback! Good to hear that you could benefit from this blog.

      Ciao

      Oliver

      Author's profile photo Simon Kemp
      Simon Kemp

      Hi Oliver,

      Thanks for taking the time to share this, it has helped me a lot to understand how the whole thing hangs together. I have to admit my brain still hurts when I look at the Application and Component Configurations... having not done a whole lot of WDA development myself I think I need to review how that all works exactly. Have you come across any good (simple) explanations of the different types of configurations? 🙂

      Thanks,

      Simon

      Author's profile photo Oliver Welzel
      Oliver Welzel
      Blog Post Author

      Hi Simon,

      I can totally understand you. 🙂

      The last section of the following SAP help page might give you an idea why there are two types of configurations in Web Dynpro.

      Configurations simply allow the reuse of components and applications in different scenarios.

      Translated into the scenario of this blog there are three relevant entities in the sidepanel:

      A CHIP page with a CHIP on it running an FPM chart GUIBB.

      1. The CHIP page is based on WDR_CHIP_PAGE (application and component) and has a scenario-specific configuration (chapter 3 and 4).

      2. The CHIP itself (chapter 5).

      3. The Web Dynpro component FPM_UCW_COMPONENT displayed in the CHIP with its scenario-specific configuration (chapter 6). Now follows an exception due to the usage of FPM. The Web Dynpro component FPM_UCW_COMPONENT is only a wrapper and that's why we additionally need a configuration for the FPM chart GUIBB (chapter 7).

      I hope I could clarify this aspect.

      Ciao

      Oliver

      Author's profile photo Former Member
      Former Member

      Hi Oliver,

      I've had a look at your guide. I've done as you have described above on a  NW 7.40 SP 4 system, but my chart is empty. No errors or anything.

      I've debugged the get data and there is data in the tables. Do you have any idea why i might not get the charts?

      Author's profile photo Oliver Welzel
      Oliver Welzel
      Blog Post Author

      Hi Jakob,

      did you expand the sidepanel far enough to see all six months? By default the NWEPM data generator creates only sales orders for the current month which is displayed on the very right side and might not be visible.

      In order to have a nicer demo you can generate data for the last six months. Just start transaction SEPM_DG, enter 2000 Sales Orders on the tab Basic Settings, provide a six month interval on the tab Sales Orders under "Created On - Options", "Selected Date Interval" with "Date To" beeing the end of the current month and press F8.

      Ciao

      Oliver

      Author's profile photo Raf Boudewijns
      Raf Boudewijns

      that was actually my mistake earlier 😉

      Author's profile photo Former Member
      Former Member

      Hi Oliver,

      Thanks for getting back to me so quickly. I have data in the internal tables, look at the debugger in the attached screenshot. But my graph isn't showing at all 🙁 Sidepanel.pngDebugger.png

      Author's profile photo Former Member
      Former Member

      Hmm i tried to test the EPM top 5 buyers and that is only working using Chrome as browser. So i can't get IE or NWBC to show the graphic. I've tried to change the rendering method to standard without any help.

      Even upgraded my IE to 11, which didn't really do any good either. It would be great if we could change the default rendering engine to another browser like Chrome or firefox. that would help a lot for the theme designer and CSS as well.

      Author's profile photo Oliver Welzel
      Oliver Welzel
      Blog Post Author

      Hi Jakob,

      I tested the scenario with NWBC 4.0 PL 10 and IE10/IE11 successfully.

      From your screenshot it looks like a reimplementation as the names are different. If this is the case could you just try to add the CHIP "Customer Sales History (Floorplan Manager + CVOM)" via personalization to your CHIP page and see whether this CHIP works or not?

      The only way I can reproduce the behaviour you described is by setting the heigth of the chart to 0.

      Ciao

      Oliver

      Author's profile photo Former Member
      Former Member

      Hi Oliver,

      Thanks for getting back to me. I managed to get it working by downgradig my IE to version 9.

      tested on IE 10 and 11 without any luck.

      Author's profile photo Erik Hoven
      Erik Hoven

      Thanks....great blog ➕

      Author's profile photo Christian Punz
      Christian Punz

      hi Oliver,

      worked well on our system (Suite on HANA, NWBC ABAP patch 43, IE11, NWBC 5.0 PL 3). Thank you for the hint regarding the generation of EPM data with TCODE SEPM_DG and the setting for browser STANDARD MODE.

      Also thanks to Julie Plummer for the reference in her blog NWBC at SAP TechEd Berlin 2014 - Wrapup.

      Hopefully I am able to find a way for integrating the CVOM-graphics in the workcenters as well (instead of the obsolete flash-islands)...

      br

      christian

      Author's profile photo Former Member
      Former Member

      Hi Oliver

      How do I get my SAP GUI Property Collector filled with values from NWBC transaction? Mine is empty but filled from Standard GUI for Windows. But I dont think the Property value is the same?

      Thanks Kim

      Author's profile photo Oliver Welzel
      Oliver Welzel
      Blog Post Author

      Hi Kim,

      so, you could use the property collector with SAP logon but not with SAP GUI in NWBC? You can switch the input source via the drop-down field "Process". For NWBC you have to choose "SAP GUI in NWBC".

      Finally it is not relevant whether you start the target transaction (here SEPM_SO) within the SAP logon or within SAP GUI in NWBC. In both variants you would copy the same properties via the SAP GUI Property Collector.

      I hope I could help you with this answer.

      Ciao

      Oliver

      Author's profile photo Former Member
      Former Member

      Hi Oliver

      I can start the property collector both from within NWBC and SAP GUI.
      When I choose "SAP GUI in NWBC" nothing is collected.When I choose "SAP Logon" my screen is correctly collected but property is only set "lid:/[0]/titl.Text and not the wanted field name. How do i get a tab-field name collected instead of the titl.Text?

      Thanks

      Kim

      Author's profile photo Oliver Welzel
      Oliver Welzel
      Blog Post Author

      Hi Kim,

      "lid:/[0]/titl.Text" sounds like the default selection when you start the property collector. Did you already select your target field (here the business partner id)?

      If not you have either to press the button "Property Viewer" and select the target field from the UI element tree or press the button "Select from Screen" and choose the field directly from the screen. In the latter case make sure you do not release the mouse button after click down on the "Select from Screen" button until you reached your target field.

      Ciao

      Oliver

      Author's profile photo Former Member
      Former Member

      Hi Oliver

      That works!
      Many thanks.

      Brgds Kim

      Author's profile photo Mallika Shaik
      Mallika Shaik

      Hi

      Can you please let me know how to open SAP GUI Property Collector.