ADAPTING FLOORPLAN MANAGER AND WEB

DYNPRO ABAP BASED USER INTERFACES

CD268

Exercises / Solutions Michael Kraeft, Dr. Simon Hoeg / SAP AG Dr. Christian Günther, Regina Breuer / SAP AG

2

EXERCISE 1: CUSTOMIZE A GENERIC FLOORPLAN COMPONENT

Objectives In this exercise you will do some simple changes to the layout of a generic Web Dynpro Component. In the first part you will use the Customizing Editor. In the second part you change it during Runtime.

Part 1: Change Empty Table Text

Preparation: Start the Application in Administration Mode In the ABAP workbench select package TEST-CD268-<xx>, where <xx> must be replaced by your group number. In this package you will find the application configuration Y<xx>_S_EPM_FPM_PO_268. Double click it and then choose the menu entry “Web Dynpro Configuraton”->”Test”->”Execute in Administration Mode”. A browser window will start and show the selection screen of the EPM Purchase Order application.

Note: The URL is called with the additional URL parameter “sap-config-mode=X” and there is a yellow candy cane with text “Customizing Mode” indicating that the application is called in administration mode.

Start the Customizing Editor

Press the button to display the customizable areas. Select the table area. A new browser window is opened showing the customizing editor.

Create the Customizing

3

The customizing does not yet exist. Check that the name of the component is “FPM_LIST_UIBB_ATS”. Press the “New” button to create the customizing. If you like, you can enter a description for the customizing on the first popup. Press OK. No transport request is needed. So select the last radio button “No Transport Request” and press OK. The customizing is created and the editor shows the adaptation in change mode.

Change Empty Table Text Open the “General Settings” panel. Uncheck the checkbox labelled “Default „No Data‟ Text”. Now enter a suitable text in the input field below, labelled “‟No Data‟ Text”, e.g. “No Purchase Orders Found”. Save the settings. When asked for a transport request, choose the same settings as above.

Check the Result Now close the customizing editor window, switch to the application window and refresh the browser still in administration mode. Check that the empty table text is changed to the text you entered in the customizing editor.

Part 2: Change the Column Order Drag column “Purchase Order ID” between “Supplier Name” and “Total Gross Amount”. The customizing is saved automatically. On the transport dialog box, choose “No Transport Request” and press the OK button. Check that the column with header text “Purchase Order ID” is the third column in the table.

Check the Result Start the application to see the result for any user and search for purchase orders. It should look like this:

Remark: You can also change the layout using the “Personalize” button of the table.

4

SOLUTION 1: CUSTOMIZE A GENERIC FLOORPLAN COMPONENT

Part 1: Change Empty Table Text

Preparation: Start the Application in Administration Mode Start transaction SE80 and select package TEST-CD268-<xx>, where <xx> must be replaced by your group number. In this package you will find the application configuration Y<xx>_S_EPM_FPM_PO_268. Double click it and then choose the menu entry “Web Dynpro Configuration”->”Test”->”Execute in Administration Mode”.

A browser window will start and show the selection screen of the EPM Purchase Order application.

Note: The URL is called with the additional URL parameter “sap-config-mode=X” and there is a yellow candy cane indicating that the application is called in administration mode.

Start the Customizing Editor

Press the button to display the customizable areas.

5

Move the cursor over the table until this area is selected and the tool icon is visible in this area. Click anywhere in this area and a new browser window is opened showing the customizing editor.

6

Create Customizing The customizing does not yet exist. Check the name of the component. It must be “FPM_LIST_UIBB_ATS”. The configuration id must be „Y<xx>_EPM_PO_SRCH_LIST_CFG_268‟. Press the “New” button to create the customizing.

If you like, you can enter a description for the customizing on the first popup. Press OK.

No transport request is needed. So select the last radio button “no transport needed” and press OK.

The customizing is created and the editor shows the adaptation in change mode.

7

Change Empty Table Text Open the “General Settings” panel. Uncheck the checkbox labelled “Default „No Data‟ Text”. Now enter a suitable text in the input field below, labelled “‟No Data‟ Text”, e.g. “No Purchase Orders Found”. Save the settings.

When asked for a transport request, choose the same settings as above. Now close the customizing editor window, switch to the application window and refresh the browser. Check that the empty table text is changed to the text you entered in the customizing editor.

8

Part 2: Change the Column Order Drag column “Purchase Order ID” between “Supplier Name” and “Total Gross Amount”.

The customizing is saved automatically. On the transport dialog box, choose “No Transport Request” and press the OK button.

9

The result is the following:

Start the application without administration mode to see the result for any user.

10

Press the “Search” Button to fill the table.

This is the final result.

11

12

EXERCISE 2: USE AN ENHANCEMENT TO ADAPT YOUR APPLICATION

Objectives In this exercise you will adapt the application by using the Enhancement Framework: You will add a Quick Response Code UIBB that encodes the supplier address data to the Purchase Order Details page of the EPM Purchase Order application. This exercise is split into two parts:

Enhance the application and add the Quick Response Code UIBB.

Explore the enhancement by using the ABAP Workbench (transaction SE80)

Part 1: Add the Quick Response Code UIBB

Preparation: Start the Application in Configuration Mode In the ABAP Workbench select the package TEST-CD268-<xx>, where <xx> must be replaced by your group number. In this package you will find the application configuration Y<xx>_S_EPM_FPM_PO_268. Double click it and then choose the menu entry “Web Dynpro Configuration”->”Test”->”Execute”. A browser window will start with the initial screen of the EPM Purchase Order application.

Add the URL parameter “sap-config-mode=CONFIG”. There is a red candy cane with the text “Configuration Mode” indicating that the application is called in the configuration mode.

On the initial screen of the EPM Purchase Order application press the button “Search” . Below in the result list a set of purchase orders does appear. Click on an arbitrary purchase order ID to launch the corresponding purchase order details in a new browser window.

Start the Configuration Editor

Press the button “Configure Page” to enter the Configuration Editor. It appears in a new browser window. Skip

the initial screen by pressing the button “Continue in Display Mode” . The Configuration Editor appears for page “Purchase Order Header”.

Create the Enhancement To enhance the component configuration Y<xx>_S_EPM_UX_PO_OVP_268 press the item “Enhance” of button

choice “Additional Functions” . A dialog appears where you provide the workbench name of the enhancement implementation. Please choose a name from the Z name space, e.g. Z<xx>_ENHC_OVP_268. If you like, you can enter a “Short Text” for the enhancement. Then confirm the dialog via button OK. A second dialog appears where you can enter your package name (TEST-CD268-<xx>). Confirm the second dialog via button OK. The enhancement is created, a corresponding success message appears.

Add the Quick Response Code UIBB

Open the Navigation Panel by clicking the item “Navigation” of icon button “Navigation & Repositories” . Make sure that you have selected the Main Page “Purchase Order Header”.

Open the Repositories Panel by clicking the item “Repositories” of icon button “Navigation & Repositories” In the Repositories Panel select the UIBB Type “Freestyle Component” and search for component CD268_FPM_QR_UIBB.

13

Add this Quick Response Code UIBB to the Overview Page configuration. You can do this via drag & drop on to the Preview Panel or Overview Page Schema on the right hand side.

Adapt the Layout Select the just added Quick Response Code UIBB within the Preview Panel or Overview Page Schema. Open the

Attributes Panel by pressing the toggle button “Attributes” . Change the “Rendering Type” of the UIBB to the value “With Panel”. Also enter a title for it in the corresponding input field “Title”, e.g. “QR Code: Supplier Address”. Select section SECTION_1 within the Preview Panel or Overview Page Schema. Change the layout type of that section to the value “Two Column (2/3:1/3)” at field “Layout Type” within the Attributes Panel. Move the Quick Response Code UIBB to the second column of section SECTION_1. You can do this via drag & drop in the Preview Panel. The Form UIIBB Y<xx>_EPM_PO_HDR_FORM_CFG_268 and List UIBB Y<xx>_EPM_PO_ITEM_LIST_CFG_268 should stay in the first column of the section. Finally save your enhancement via button “Save” on the top of the screen. A corresponding success message “Data has been saved” does appear.

Check the Result Now switch to the application window that shows the purchase order details and refresh the browser. Check that the new Quick Response Code UIBB appears next to the “Purchase Order Details” Assignment Block.

Part 2: Explore your Enhancement in the ABAP Workbench

Explore the Properties and Versions In the ABAP Workbench select the package TEST-CD268-<xx>. Refresh the object list by pressing the button with

tooltip “Refresh Tree Display” . Under node “Enhancements” you will find the just created workbench object. Double click on that object. On the right hand side you find detailed information on the enhancement implementation on several tabs: “Properties”, “History”, “Technical Details”, “Component-Defined”, “XML Display”. Have especially a look at the tab “Properties” and the workbench information shown here. There is also a Version Management available on top at the menu “Utilities”, menu item “Versions”.

Explore the Delta Switch to the tab “Component-Defined” and “XML-Display” and have a look at the content here. Note that it has to be interpreted as delta (resp. difference) to the component configuration Y<xx>_S_EPM_UX_PO_OVP_268. And it reflects the changes done in Part 1, i.e. the added Quick Response Code UIBB together with the layout adaptations.

14

SOLUTION 2: USE AN ENHANCEMENT TO ADAPT YOUR APPLICATION

Part 1: Add the Quick Response Code UIBB

Preparation: Start the Application in Configuration Mode In the ABAP Workbench select the package TEST-CD268-<xx>, where <xx> must be replaced by your group number. In this package you will find the application configuration Y<xx>_S_EPM_FPM_PO_268. Double click it and then choose the menu entry “Web Dynpro Configuration”->”Test”->”Execute”.

A browser window will start with the initial screen of the EPM Purchase Order application. Add the URL parameter “sap-config-mode=CONFIG”. There is a red candy cane indicating that the application is called in the configuration mode. On the initial screen of the EPM Purchase Order application press the button “Search”.

15

Below in the result list a set of purchase orders does appear. Click on an arbitrary purchase order ID to launch the corresponding purchase order details in a new browser window.

Start the Configuration Editor Press the button “Configure Page” to enter the Configuration Editor.

It appears in a new browser window. Skip the initial screen by pressing the button “Continue in Display Mode”.

16

The Configuration Editor appears for page “Purchase Order Header”.

Create the Enhancement To enhance the component configuration Y<xx>_S_EPM_UX_PO_OVP_268 press the item “Enhance” of button choice “Additional Functions”.

A dialog appears where you provide the workbench name of the enhancement implementation. Please choose a name from the Z name space, e.g. Z<xx>_ENHC_OVP_268. If you like, you can enter a “Short Text” for the enhancement. Then confirm the dialog via button OK.

17

A second dialog appears where you can enter your package name (TEST-CD268-<xx>). Confirm the second dialog via button OK.

The enhancement is created, a corresponding success message appears.

Add the Quick Response Code UIBB

Open the Navigation Panel by clicking the item “Navigation” of icon button “Navigation & Repositories” . Make sure that you have selected the Main Page “Purchase Order Header”. Open the Repositories Panel by clicking the item “Repositories” of icon button “Navigation & Repositories”.

18

In the Repositories Panel select the UIBB Type “Freestyle Component” and search for component CD268_FPM_QR_UIBB.

Add this Quick Response Code UIBB to the Overview Page configuration. You can do this via drag & drop on to the Preview Panel or Overview Page Schema on the right hand side.

19

Adapt the Layout Select the just added Quick Response Code UIBB within the Preview Panel or Overview Page Schema. Open the Attributes Panel by pressing the toggle button “Attributes” . Change the “Rendering Type” of the UIBB to the value “With Panel”. Also enter a title for it in the corresponding input field “Title”, e.g. “QR Code: Supplier Address”.

20

Select section SECTION_1 within the Preview Panel or Overview Page Schema. Change the layout type of that section to the value “Two Column (2/3:1/3)” at field “Layout Type” within the Attributes Panel.

Move the Quick Response Code UIBB to the second column of section SECTION_1. You can do this via drag & drop in the Preview Panel. The Form UIIBB Y<xx>_EPM_PO_HDR_FORM_CFG_268 and List UIBB Y<xx>_EPM_PO_ITEM_LIST_CFG_268 should stay in the first column of the section.

21

Finally save your enhancement via button “Save” on the top of the screen. A corresponding success message “Data has been saved” does appear.

Check the Result Now switch to the application window that shows the purchase order details and refresh the browser. Check that the new Quick Response Code UIBB appears next to the “Purchase Order Details” Assignment Block.

22

Part 2: Explore your Enhancement in the ABAP Workbench

Explore the Properties and Versions In the ABAP Workbench select the package TEST-CD268-<xx>. Under node “Enhancements” you will find the just created workbench object.

23

Double click on that object. On the right hand side you find detailed information on the enhancement implementation on several tabs: “Properties”, “History”, “Technical Details”, “Component-Defined”, “XML Display”. Have especially a look at the tabs “Properties” and “Technical Details” and the workbench information shown here.

24

There is also a Version Management available on top at the menu “Utilities”, menu item “Versions”.

Explore the Delta Switch to the tab “Component-Defined” and “XML-Display” and have a look at the content here. Note that it has to be interpreted as delta (resp. difference) to the component configuration Y<xx>_S_EPM_UX_PO_OVP_268. And it reflects the changes done in Part 1, i.e. the added Quick Response Code UIBB together with the layout adaptations.

25

26

EXERCISE 3: USE CONTEXT-BASED ADAPTATIONS (CBA) TO ADAPT YOUR

APPLICATION TO DIFFERENT USE-CASES

Objectives In this Exercise you will adapt the application based on different runtime situations: You will add a Notes UIBB only for managers and you will layout the supplier address based on the addresses country code. To do this we will use the feature of context-based adaptations, which allows adapting the involved configurations based on an arbitrary set of dimensions. This exercise is split into three parts:

Prepare the application to be adaptable based on the adaptation scheme CD268 (which is already prepared for you and provides the dimensions Role and Country Code)

Create a static CBA for the manager and add the Notes UIBB for him

Create a dynamic CBA changing the address layout based on the country code of the address

Part 1: Prepare the application Go to SE80 and create a new Web Dynpro application in package TEST-CD268-<xx>.

Name it Z<xx>_S_EPM_FPM_PO_268_CBA and assign component FPM_ADAPTABLE_OVP, Interface View FPM_WINDOW and Plug Name DEFAULT to it.

Add ROLE and COUNTRY as application parameters (simply add these 2 parameters without specifying any value for them on the parameters tab).

Create an application configuration for the new application and give it the same name as the application

Change the application configuration and assign Z<xx>_S_EPM_UX_PO_OVP_268_CBA (which doesn‟t exist so far) as component configuration for component FPM_ADAPTABLE_OVP.

For component FPM_OVP_COMPONENT assign your original OVP configuration (Y<xx>_S_EPM_UX_PO_OVP_268).

Copy the settings of application parameters from the original application configuration (Y<xx>_S_EPM_FPM_PO_268) to your new application configuration (in the example only FPM_EDIT_MODE is relevant which has to be set to Read-Only)

Then navigate to the component configuration Z<xx>_S_EPM_UX_PO_OVP_268_CBA.

You will come to the initial screen and see an error message stating “Object Component Configuration Z<xx>_S_EPM_UX_PO_OVP_268_CBA does not exist”.

Create it by pressing the “New” Button.

Within this new configuration enter CD268 as adaptation scheme (attribute “Schema” of element “configData”) and save it.

Part 2: Create an adaptation for managers Create an adaptation of your floorplan configuration for the role manager.

To create or edit context based adaptations you have to start your application in configuration mode (by adding URL-Parameter sap-config-mode=config to URL) and navigate from there to the configuration editor (by pressing the

“Configure Page” button).

You will get an error message that you are not allowed to edit this configuration. Therefore enter the editor in display mode.

Open up the adaptation panel (via the button in the toolbar) and create an adaptation (via the button in the Adaptation Panel Header) for ROLE = MANAGER. Leave Country as “Non-Specific” and enter “Z” as Namespace.

27

Within the adaptation add a freestyle UIBB to the main page. You can use:

Component: FPM_NOTES_WRAPPER

Configuration ID: EPM_PD_NOTES

Window Name: NOTES_WINDOW

Test it by starting the new application twice (one time with adding URL-Parameter ROLE=MANAGER, one time without it). Check that the notes UIBB is only there when the application was started with URL-Parameter ROLE=MANAGER.

Part 3 (optional): Create a dynamic CBA changing the address layout This is a quite advanced exercise as it involves some coding. You should only create the coding if you are an experience FPM developer. Otherwise you should copy the coding from our sample solution which we provide in class CL_EPM_PO_FORM_FEEDER_00.

Your task is to adapt the layout of the supplier‟s address based on the country code. So that for addresses from France the street number is displayed in front of the street name, while for German addresses it‟s the other way round. This can be achieved in 3 steps:

Extend the existing feeder class (CL_EPM_PO_FORM_FEEDER), so that it informs the FPM framework about the changed country code. This is done by firing an ADAPT_CONTEXT event whenever the country code is changed.

To do these in a modification-free manner create a new feeder class ZCL_EPM_PO_FORM_FEEDER_<xx> as a subclass of the original one. Then you have to redefine method IF_FPM_GUIBB_FORM~GET_DATA. Within this redefinition call the parent class‟ IF_FPM_GUIBB_FORM~GET_DATA method, then check if the country code has changed and if necessary fire the FPM event IF_FPM_CONSTANTS=>GC_EVENT-ADAPT_CONTEXT. Provide the changed country code as parameter COUNTRY in the event parameters.

Assign the new feeder class to the existing configuration (Y<xx>_EPM_PO_HDR_FORM_CFG_268) by creating a context-based adaptation for all values.

To do this start your application again in configuration mode and navigate to the main page by executing the

search and clicking on any purchase order id. There you can “Show the configurable areas” via the toolbar button, and navigate to the form configuration editor by the overlay on top of the form.

Within the form configuration editor open the adaptation panel and add an adaptation for all roles and all countries (on the Add Adaptation Popup leave “Non-Specific” checked for all dimensions and enter only Z as namespace there).

In this adaptation replace the feeder class by your own class (in the General Settings panel).

Finally create another adaptation for the context COUNTRY=FR (Leave checkbox “Non-Specific” for Role checked and add Z as namespace again). Within this adaptation change the order of street and house number (technical field names street and building).

Test it by starting the new application again and select a french supplier (e.g. Angeré) on the initial screen. Check that the order of Street and house number is reversed

28

SOLUTION 3: USE CONTEXT-BASED ADAPTATIONS (CBA) TO ADAPT YOUR

APPLICATION TO DIFFERENT USE-CASES

Part 1: Create a new application based on component FPM_ADAPTABLE_OVP. Go to transaction SE80 (Object Navigator), select your package TEST-CD268-<xx> and create a Web Dynpro application via context menu on the package folder.

Name it Z<xx>_S_EPM_FPM_PO_268_CBA and provide FPM_ADAPTABLE_OVP as component FPM_WINDOW as Interface View and DEFAULT as Plug Name.

29

Switch to the Parameters tab and add the 2 dimensions of schema CD268 (COUNTRY and ROLE) as Parameters. This is necessaryfor setting the runtime context as URL parameters.

Create an application configuration for the new application Launch Web Dynpro application CONFIGURE_APPLICATION (Application Configuration Editor and enter the name of your new application in both input fields and press New

After working through some popups you will reach the application configuration edit screen. Use the Assign Configuration Name to assign a component configuration name (Z<xx>_S_EPM_UX_PO_OVP_268_CBA) for the usage of FPM_ADAPTABLE_OVP and the original OVP configuration (Y<xx>_S_EPM_UX_PO_OVP_268) to the usage of FPM_OVP_COMPONENT. Additionally set the parameter FPM_EDIT_MODE to read-only

30

Now when saving you get an error message that Z<xx>_S_EPM_UX_PO_OVP_268_CBA doesn‟t exist. To create it click on the component name. This will bring you to the component configuration editor.

Create a component configuration Z<xx>_S_EPM_UX_PO_OVP_268_CBA for this component. In the selection screen enter FPM_ADAPTABLE_OVP as Component Name and Z<xx>_S_EPM_UX_PO_OVP_268_CBA as configuration. Then press the New button.

After processing some popups you should get to the edit screen where you can

Change this new configuration and enter CD268 as adaptation scheme Select node configData in the Configuration Context hierarchy and enter CD268 as Schema. Then Save the configuration.

Solution Part 2: Start your application in configuration mode (by adding URL-Parameter sap-config-mode=config) and press “Configure Page”

31

This will bring you to the configuration editor of the floor plan configuration. Open the Adaptations Panel via the toolbar

In the header of the adaptation panel press “Add”. The “Add Adaptation” Popup will open. Uncheck the “Non-Specific” checkbox for dimension Role and enter “MANAGER” for Role. Enter a Z in the Namespace field (this will ensure that all created adaptations will be created within the customer namespace)

Press OK. Now an adaptation for Managers is created and selected in the configuration editor. Open the navigation panel...

32

... and select the Main Page

Use the Overview Page Schema to add a Freestyle UIBB

33

Enter FPM_NOTES_WRAPPER as component, EPM_PD_NOTES as Configuration Name and NOTES_WINDOW as Window Name

That‟s it. To test it start the application twice. One time add parameter &ROLE=MANAGER to the start URL. You should see then the additional notes UIBB in the bottom part of the main screen. Starting the application without this parameter or with any other parameter value will bring the original version without the Notes UIBB.

Solution Part 3: Go to Transaction SE24 and create a new class ZCL_EPM_PO_FORM_FEEDER_<xx>. After pressing the Create button you have to enter a valid description and the base class as shown in the screenshots

34

After your class is created go to the method tab of the class builder and create a redefinition of method IF_FPM_GUIBB_FORM~GET_DATA

Add the following code to this methods implementation (you can find this code as well in the system in class CL_EPM_PO_FORM_FEEDER_00): field-symbols: <country> type SNWD_COUNTRY.

"Determine country before data is updated

data: lv_country_before type snwd_country.

assign COMPONENT 'COUNTRY_CODE' of STRUCTURE CS_DATA to <COUNTRY>.

LV_COUNTRY_BEFORE = <COUNTRY>.

"Call the original logic

35

CALL METHOD SUPER->IF_FPM_GUIBB_FORM~GET_DATA

EXPORTING

IO_EVENT = io_event

IV_RAISED_BY_OWN_UI = IV_RAISED_BY_OWN_UI

IT_SELECTED_FIELDS = IT_SELECTED_FIELDS

IV_EDIT_MODE = IV_EDIT_MODE

IO_EXTENDED_CTRL = IO_EXTENDED_CTRL

IMPORTING

ET_MESSAGES = ET_MESSAGES

EV_DATA_CHANGED = EV_DATA_CHANGED

EV_FIELD_USAGE_CHANGED = EV_FIELD_USAGE_CHANGED

EV_ACTION_USAGE_CHANGED = EV_ACTION_USAGE_CHANGED

CHANGING

CS_DATA = CS_DATA

CT_FIELD_USAGE = CT_FIELD_USAGE

CT_ACTION_USAGE = CT_ACTION_USAGE.

if ev_data_changed = abap_true."No CBA needed without changed data..

data: lo_fpm type ref to if_fpm.

lo_fpm = CL_FPM_FACTORY=>GET_INSTANCE( ).

if lo_fpm is bound and

lo_fpm->MO_ADAPTATION_MANAGER is bound. "Check if CBA is active

assign COMPONENT 'COUNTRY_CODE' of STRUCTURE CS_DATA to <COUNTRY>.

if <country> ne LV_COUNTRY_BEFORE. "Only fire CBA event when country has changed

data: lo_event type ref to CL_FPM_EVENT.

"create CBA event

lo_event = CL_FPM_EVENT=>CREATE_BY_ID(

IF_FPM_CONSTANTS=>GC_EVENT-ADAPT_CONTEXT ).

"Provide new country code

lo_event->MO_EVENT_DATA->SET_VALUE( iv_key = 'COUNTRY' IV_VALUE = <COUNTRY> ).

"fire event

lo_fpm->RAISE_EVENT( lo_event ).

endif.

endif.

endif.

Don‟t forget to save and activate your new class. Now start your application Z<xx>_S_EPM_FPM_PO_268_CBA in configuration mode again and navigate to the

configuration editor via the “Go to Page” toolbar button. There navigate to the Main Page , select the Form UIBB in the Overview Page Schema and navigate via the “Configure UIBB” Button to the form‟s configuration.

36

There open the adaptation panel and create a new adaptation. On the “Add adaptation” popup enter Z as namespace and leave everything else as it is and simply press ok! You should see now an adaptation in the adaptation panel valid for all roles and all countries (ROLE=*, COUNTRY=*). This adaptation will completely conceal the original configuration and will be used whenever there exists no more specific adaptation.

Now use the “Feeder Class” Toolbar button in the General Settings to replace the original feeder class with your just created extended feeder class. Then create a further adaptation as a child of the just created adaptation. To do this select the adaptation for Role =* and Country=* and press the Add button in the header of the adaptation panel. Uncheck the non-specific checkbox for Country, enter FR as value and Z as namespace. Then press OK

37

Now adjust the address for France and change the sequence of street name and house number. Go to the Form UIBB Schema and select Element Street (which is part of Group (2)). Then change the Start column from L to M and the End column from O to P. Adjust the label text so that it reflects the changed order of the fields. Then Select Element BUILDING and change the Start and the End column from P to L. Save.

38

Now when you run the application and select a purchase order with a French supplier you should see the order of street and house number reversed.

39

EXERCISE 4: ENHANCE A FREESTYLE WEB DYNPRO COMPONENT

Objectives This exercise demonstrates how to use the enhancement framework to extend a Web Dynpro ABAP component. You learn how to enhance an existent view by adding new UI elements, new outbound plugs and new context attributes. You will create a new view as enhancement and embed this into the main window of your component. Furthermore you learn how to include another Web Dynpro ABAP component into your component. In the last part of this exercise you practise to enhance an existent method. This exercise contains 5 parts.

Part 1: Add a freestyle component to your application Enhance the „Initial Sceen‟ of your OVP configuration Y<xx>_S_EPM_UX_PO_OVP_268 by the freestyle component YY_CD268_SUPDASH_<xx>. For your configuration enhancement use your already existent enhancement implementation from exercise 2 or create a new one. When creating a new enhancement implementation name it „Z_CONFIG_ENH_GROUP_XX‟ and assign your package „TEST-CD268-XX‟. Use the window WI_MAIN as „Window Name‟ for the UIBB. The content of the freestyle component should be visible underneath the Search UIBB of your OVP component. Run your application configuration Y<xx>_S_EPM_FPM_PO_268 to check the result. Carry out the search and select an arbitrary line of the result list. The freestyle component contains KPI‟s showing the performance of the selected supplier. Result:

40

Part 2: Enhance the main view of your freestyle component For this part and the following parts you must use the enhancement mode offered within the workbench. You switch into the enhancement mode by pressing the enhancement icon located on the menu bar of the workbench. Ensure that you have launched the Web Dynpro Explorer e.g. by displaying your component.

Enhance the view VI_MAIN of your component YY_CD268_SUPDASH_<xx>. For your component enhancement implementation use the name „Z_COMP_ENH_GROUP_<xx>‟ and assign your package „TEST-CD268-<xx>‟. Navigate to the main view with the ID „VI_MAIN‟ of your component YY_CD268_SUPDASH_<xx>. Carry out the following tasks:

Create an outbound plug TO_RANKING For defining navigation later on

Create an outbound plug TO_DASHBORD For defining navigation later on

Add a new node „ENH_CTX_NODE‟ of cardinality 1..1 to the context

For attributes definition (next steps)

Add an attribute with the name „TOGGLE_CHECKED‟ of type WDY_BOOLEAN to this node

Used for binding later on

Add an attribute with the name „TOGGLE_TEXT‟ of type STRING to this node. The default value of this attribute should be „Ranking‟

Used for binding later on

Enhance the toolbar UI element with the ID = TB_SD by an UI element of type „ToolBarToggleButton‟.

Bind the property „checked‟ to context attribute „TOGGLE_CHECKED‟

Bind the property text to the context attribute „TOGGLE_TEXT‟

Bind the visibility property to the already existent context attribute „SUPPLIER_SELECTED‟.

The new button should be placed next to the already existent button „Details‟

Create an action handler „TOGGLE‟ for the event „on Toggle‟ of this UI element. Implement the action handler „TOGGLE‟:

When the toggle is pressed with state checked is „on‟ (abap_true), the outbound plug „TO_RANKING should be fired. The text of the „ToolBarToggleButton‟ should be changed to „Dashboard‟.

When state checked is off (abap_false) the outbound plug „TO_DASHBOARD‟ should be fired. The text of the „ToolBarToggleButton‟ should be changed to „Ranking‟.

Hint: Use the wizard

Alternatively you can copy the coding of the action handler from our sample solution. You find the action handler „TOGGLE‟ in the view „VI_MAIN‟ of the Web Dynpro component „S_CD268_SUPDASH_00‟ (Package „CD268_SOLUTIONS‟)

41

Run your application configuration Y<xx>_S_EPM_FPM_PO_268 and check the result. The new button „Ranking‟ should be visible and active. By pressing this button the title of the button should be changed to „Dashboard‟.

42

Part 3: Create a new view and define navigation Create a new view named „RANKING‟ as enhancement for your component YY_CD268_SUPDASH_<xx>. For this view do the following:

Change the layout of the ROOTUIELEMENTCONTAINER to „RowLayout‟.

Add a UI element of type „TextView‟ to this view. Assign the value „header1‟ to the property „design‟. Maintain an arbitrary text e.g. „Enhancement view of group <xx>‟.

Add an inbound plug to this view called „IN_RANKING‟. Activate your enhancement view. Enhance the main window „WI_MAIN‟ of your component YY_CD268_SUPDASH_<xx>:

Embed the new view „RANKING‟ as additional view to the VIEW_CONTAINER element of the view VI_MAIN.

Define a navigation link between the outbound plug „TO_RANKING‟ of the view „VI_MAIN‟ to the inbound plug „IN_RANKING‟ of the new view „RANKING‟.

Define a navigation link between the outbound plug „TO_DASHBOARD‟ of the view VI_MAIN to the inbound plug „IN_DASHBOARD‟ of the view „DASHBOARD‟.

Activate your enhancement and run the application again to check the result. Result: If you press the button „Ranking‟ the navigation to the new view „RANKING‟ is carried out. Your text defined for the „TextView‟ should be visible on the screen. If you press the toggle button again, the content of the view „DASHBOARD‟ will be visible again and the name of the button will changed to „Ranking‟.

43

Part 4: Include an already existent Web Dynpro ABAP component into your component The powerful re-use mechanism of a Web Dynpro ABAP component is also available in enhancement mode. To use an already existent component do the following steps:

Add an UI element of type „ViewContainerUIElement‟ to your view „RANKING‟. Change the „Layout data‟ property to „RowHeadData‟. Activate your enhancement.

Launch your component into the workbench editor, switch into enhancement mode and add the component „CD268_SUPPLIER_RANKING‟ to the „Used Components‟ list.

Navigate to the main window WI_MAIN of your component, switch into enhancement mode and embed the interface view „WIN_MAIN‟ of the component „CD268_SUPPLIER_RANKING‟ to the view container of the new view „RANKING‟.

Activate your enhancement and run your application again. Result: The content of the ranking component is now visible.

44

Part 5: Enhance an existent action handler You can enhance any existent method by a „Pre-Exit„, „Post-Exit„ or an „Overwrite„ Exit method. This part of the exercise demonstrates the enhancement of an already existent action handler by a „Pre-‟ Exit method. Remark: For this exercise you can choose any of the offered exits. Navigate to the „Methods‟ tab of the view VI_MAIN of your component „YY_CD268_SUPDASH_<xx>‟. Switch into the enhancement mode. Create a „Pre-Exit‟ method of the action handler „ONACTIONON_DETAIL‟ (hint: on the „Methods‟ tab scroll horizontally to the right of the screen to access the „Pre-Exit‟ creation button). Implementation task: When pressing the „Detail‟ button, the window „WI_POPUP‟ should pop up (hint: use the wizard). Activate your enhancement and run your application again. Result: When pressing the button „Detail‟ a popup raised up showing details about the supplier information.

45

SOLUTION 4: ENHANCE A FREESTYLE WEB DYNPRO COMPONENT

Solution Part 1: Add a freestyle component to your application

In SE80 launch the OVP configuration Y<xx>_S_EPM_UX_PO_OVP_268 within the editor by double-clicking on the appropriate entry in the object tree of the workbench (Web Dynpro -> Component Configurations).

Press button „Display Configuration‟ which is located on the menu bar of the workbench editor.

The Web Dynpro ABAP application „configure_component‟ will be launched into the browser.

In the configuration editor switch into the enhance mode of the configuration editor by selecting the entry „Enhance‟ from the button choice with the text „Additional Functions‟.

46

You can use the already existent enhancement implementation created in exercise 2 or you create a new enhancement. When creating a new enhancement name it „Z_CONFIG_ENH_GROUP_<xx>‟ and assign it to your package „TEST-CD268-<xx>‟.

47

From the navigation panel select the „Initial Screen‟ of your OVP. Within the „Overview Page Schema‟ assignment block add a new UIBB of type „Freestyle Component‟ to the Section with the ID SECTION_1.

48

Enter your freestyle component YY_CD268_SUPDASH_<xx> into the component input field and assign the window „WI_MAIN‟ to the „Window Name‟ input field of the new row within the Overview Page Schema.

Save your enhancement by pressing the button labeled „Save‟ located on the menu bar of the configuration editor.

Run your application and check the result: Within the workbench navigate to your application configuration Y<xx>_S_EPM_FPM_PO_268. From the context menu (launched by right mouse click) choose the entry „Test‟.

49

Your application will be launched into the browser. Carry out the search and select an arbitrary row of the search result list. Notice that the supplier dashboard component is shown below the purchase order list.

50

51

Solution Part 2: Enhance the main view of your freestyle component For this part and the following parts you must use the enhancement mode offered within the workbench. You switch into the enhancement mode by pressing the enhancement icon located on the menu bar of the workbench. Ensure that you have launched the Web Dynpro Explorer e.g. by displaying your component.

Name the enhancement Z_COMP_ENH_GROUP_<xx>

Use package TEST-CD268-<xx>.

52

Enhance the view VI_MAIN of your component YY_CD268_SUPDASH_<xx>. Navigate to the main view with the ID „VI_MAIN‟ of your component YY_CD268_SUPDASH_<xx>. Enhance the view, select the just created enhancement.

Switch to tab “Outbound Plugs” and add 2 plugs „TO_RANKING‟ and „TO_DASHBOARD‟ to the list.

Switch to the „Context‟ Tab and add one new node to the context root node with node name „ENH_CTX_NODE‟. Keep the default cardinality „1..1‟.

53

Add 2 attributes to this node. Name the first attribute „„TOGGLE_CHECKED‟ and use as type „WDY_BOOLEAN‟.

54

The second attribute of type „STRING‟ should named „TOGGLE_TEXT‟.

Then set the default value of the text attribute „TOGGLE_TEXT‟ to „Ranking‟.

55

Now enhance the toolbar UI element with the ID = TB_SD by an UI element of type „ToolBarToggleButton‟.

Bind the „checked‟ attribute to the context attribute „TOGGLE_CHECKED‟.

56

Bind the „text‟ attribute to the context attributes „TOGGLE_TEXT‟ defined above.

57

The visibility property should be bound to the already existent context attribute „SUPPLIER_SELECTED‟.

Create an action handler „TOGGLE‟ for the event „on Toggle‟ of this UI element.

58

Implement the action-handler: Switch to tab “Actions” and double-click the action “TOGGLE“ Use the code wizard to read the context attribute ENH_CTX_NODE.TOGGLE_CHECKED.

Place the cursor in an empty row between “method” and “endmethod”.

Press the Wizard button

59

Make sure the “Context” tab is selected (1). Check that the read operation is selected (2). Press the “Context” button to choose the context attribute (3). Choose the attribute “TOGGLE_CHECKED” (4). Press the OK button (5).

60

In the coding place the cursor at the end of the just generated coding. Now use the wizard to set the attribute ENH_CTX_NODE.TOGGLE_TEXT. This is similar to reading a context attribute. For this select the Context Operation „Set‟. Select the context attribute “TOGGLE_TEXT”.

Place the cursor at the end of the just generated coding and use the wizard to start navigation to outbound plug „TO_DASHBOARD‟. On the “General” Tab select “Start Navigation”, and use the value help to select the outbound plug “TO_DASHBOARD”.

61

Now remove the duplicate variable declarations. DATA lo_nd_enh_ctx_node TYPE REF TO if_wd_context_node.

DATA lo_el_enh_ctx_node TYPE REF TO if_wd_context_element.

DATA ls_enh_ctx_node TYPE wd_this->Element_enh_ctx_node.

Fill the toggle text attribute according to the toggle check state. Replace the following code: * @TODO fill attribute

* lv_toggle_text = 1.

By if lv_toggle_checked = abap_true.

lv_toggle_text = 'Dashboard'.

else.

lv_toggle_text = 'Ranking'.

endif.

Copy the coding generated for navigation, place the same “if” clause around the statements and replace “dashboard” by “ranking” in part where the toggle-checked is true. if lv_toggle_checked = abap_true.

wd_this->fire_to_ranking_plg(

).

else.

wd_this->fire_to_dashboard_plg(

).

endif.

62

You can also remove the duplicate navigation through the context, some generated comments, and the coding should look like:

Activate the enhancement.

63

Run your application configuration Y<xx>_S_EPM_FPM_PO_268 and check the result. The new button „Ranking‟ should be visible and active. By pressing this button the title of the button should be changed to „Dashboard‟.

64

Solution Part 3: Create a new view and define navigation From the navigation panel open the context menu on the “views” entry and choose “Create as Enhancement”.

Select the enhancement implementation

And enter view name “RANKING”.

Change the Layout of the ROOTUIELEMENTCONTAINER to “RowLayout”.

65

Insert a TextView UI element.

Change the design to “header1” and enter the header text „Enhancement View of Group <XX>‟.

66

Switch to tab „Inbound Plugs‟ and add a new entry „IN_RANKING‟.

Activate the enhancement

Now choose the window WI_MAIN and switch to enhancement mode.

Expand the window tree until you see the VIEW_CONTAINER in VI_MAIN and choose “Embed View” from the context menu.

67

Use the value help to add the “RANKING” view to the view container. Hint: If you do not see this view here, activate the ranking view and try again.

Define navigation links from the outbound plug “TO_RANKING” to the inbound plug “IN_RANKING”. This can be done by simply dragging the outbound plug to the inbound plug.

Accept the popup.

68

Create the navigation link to the dashboard in the same way.

Check that there are these 2 new navigation links in the window hierarchy.

Activate the enhancement. Retest the application. When you press the ranking button you will see the title of the enhancement view and the changed toggle button text. Press the button again to get back to the dashboard view.

69

70

Solution Part 4: Include a Web Dynpro ABAP Component into your component Navigate to the view „Ranking‟, switch to enhancement mode and add a UI element of type „ViewContainerUIElement‟ to the layout of this view:

Change the „Layout data‟ property to „RowHeadData‟

71

Double click the component YY_CD268_SUPDASH_<xx> and enter enhancement mode.

Declare the usage of component CD_268_SUPPLIER_RANKING. Enter a name for the component usage, e.g. „RANKING_CMP‟.

72

Select the window WI_MAIN from the navigation panel, switch to enhancement mode and embed a new view into the ranking contents container.

Choose the value help to embed the interface view WIN_MAIN of you component use of CD268_SUPPLIER_RANKING.

73

Activate the enhancement and retest your application. Now you see the ranking view as soon as you switch to it.

74

Solution Part 5: Enhance an existent action handler by a ‘Pre-Exit’ method

Select view VI_MAIN and switch to enhancement mode.

Choose the „Methods‟ tab. Scroll to the right or compress the table columns until you see the “Pre-Exit” column of the methods list. Press the “Pre-Exit” button of method „ONACTIONON_DETAIL‟.

Use the code wizard to display a popup.

75

Select the radio button “Generate Popup” and use the value help to choose “WI_POPUP” of the current component.

76

The resulting coding looks like this:

Activate the enhancement and retest your application. Select a purchase order and press the details button. Then the popup is shown.

© 2012 by SAP AG. All rights reserved. SAP and the SAP logo are registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company. Sybase and the Sybase logo are registered trademarks of Sybase Inc. Sybase is an SAP company. Crossgate is a registered trademark of Crossgate AG in Germany and other countries. Crossgate is an SAP company.