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.

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 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.

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.

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.

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.

…

…

…

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.

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.

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.

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.

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.

The inport parameter is typed with the DDIC structure SEPM_CHIP_BUYER.

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.