9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP

PM Chart GUIBB | SAP Blogs

Products
Products Industries
Industries Support
Support Training
Training Community
Community Developer
Developer Partner
Partner

About
About

 
Home / Community / Blogs + Actions

NWBC Side Panel Demo combining a SAP

GUI Transaction with an HTML5-based FPM
Chart GUIBB
November 21, 2013 | 2,323 Views |

Oliver Welzel
more by this author

UI SAP Business Client (NWBC)

SAP NetWeaver | cvom | demo application | enterprise procurement model | epm | fpm | html5 | itelo

share
0 share tweet share

Follow RSS

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 1/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

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.

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 2/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

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

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 3/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

1. Tag De nition
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

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 4/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

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.

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 5/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

3. Side Panel Application Con guration (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.

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 6/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

4. Side Panel Component Con guration

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

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 7/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

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.

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 8/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

6. UIBB CHIP Wrapper Component Con guration

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

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 9/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

7. FPM Chart GUIBB Con guration (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.

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 10/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

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

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 11/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

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

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 12/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

” 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(

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 13/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

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

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 14/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

” 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_de nition.

” 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’

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 15/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

EXPORTING

language = ‘E’

TABLES

month_names = mt_month_names.

ENDIF.

ENDMETHOD.

Alert Moderator

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

Raf Boudewijns

January 20, 2014 at 1:54 pm

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…

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 16/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

Oliver Welzel Post author

January 21, 2014 at 3:49 pm

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

Raf Boudewijns

January 22, 2014 at 7:50 am

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

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 17/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

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

Oliver Welzel Post author

January 22, 2014 at 1:06 pm

Hi Raf,

thanks for your feedback! Good to hear that you

could benefit from this blog.

Ciao

Oliver

Simon Kemp

January 24, 2014 at 1:52 am

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

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 18/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

Oliver Welzel Post author

January 24, 2014 at 3:14 pm

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

Former Member

February 3, 2014 at 1:38 pm

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.

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 19/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

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?

Oliver Welzel Post author

February 3, 2014 at 3:32 pm

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

Raf Boudewijns

February 3, 2014 at 3:40 pm

that was actually my mistake earlier

Former Member

February 4, 2014 at 7:21 am

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

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 20/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

Former Member

February 4, 2014 at 12:24 pm

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.

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 21/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

Oliver Welzel Post author

February 4, 2014 at 5:56 pm

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

Former Member

February 4, 2014 at 6:29 pm

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.

Erik Hoven

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 22/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

September 4, 2014 at 9:39 am

Thanks….great blog

Christian Punz

January 30, 2015 at 1:31 pm

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

Former Member

February 4, 2015 at 3:03 pm

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

Oliver Welzel Post author

February 6, 2015 at 2:26 pm

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 23/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

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

Former Member

February 6, 2015 at 2:39 pm

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

Oliver Welzel Post author

February 6, 2015 at 3:35 pm

Hi Kim,

“lid:/[0]/titl.Text” sounds like the default selection

when you start the property collector. Did you

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 24/25
9/18/2018 NWBC Side Panel Demo combining a SAP GUI Transaction with an HTML5-based FPM Chart GUIBB | SAP Blogs

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

Former Member

February 6, 2015 at 6:13 pm

Hi Oliver

That works!
Many thanks.

Brgds Kim

Share & Follow

Privacy Terms of Use Legal Disclosure Copyright Trademark Cookie Preferences Sitemap Newsletter

https://blogs.sap.com/2013/11/21/nwbc-side-panel-demo-combining-a-sap-gui-transaction-with-an-html5-based-fpm-chart-guibb/ 25/25