day2 advanced

Massachusetts Institute of Technology

Web Dynpro for ABAP

Volume II: Advanced

By: Hendrik Pieterse

27 January 2011

27 January 2011 2

Agenda

 Popup Windows

 Portal Integration

 Fixed Value Sets

 Filtering Context Nodes

 Sorting Context Nodes

 Dynamic UI layout changes (API)

 Attribute properties

 Embedding External Components

 Cross-Component calls

 Using Events

 Enhancing Standard SAP

 Web Dynpro provides several options to provide value lookup or popup windows 1.  Navigation to a detail view (not a popup)

2.  Master/Detail views (e.g. Table above, detail view below –not a popup)

3.  Confirmation Popup window without a predefined view

− Mostly informational/confirmation

− No interactive UI elements

4.  With custom window and view

−  Quick implementation: Code Wizard provides sample code to generate Popup

−  Ability to define more complex interactions using any UI elements

−  Ability to present data from the context

Popup windows

Issue: How to retrieve values/selections from popup window?

Popup windows are modal dialog boxes which the user has to acknowledge/dismiss before being allowed to return to the main window










Popup windows

Issue: How to retrieve values/selections from popup window?   Context binding to Component Controller











Popup windows

Issue: How to retrieve values/selections from popup window?   Context binding to Component Controller   Using Outbound Plugs and Parameters











Popup windows

Issue: How to retrieve values/selections from popup window?   Context binding to Component Controller   Using Outbound Plugs and Parameters   Using the Assistance Class


 Sample code:

Popup windows: Confirmation

DATA: lo_window_manager TYPE REF TO if_wd_window_manager, lo_api_component TYPE REF TO if_wd_component, lo_window TYPE REF TO if_wd_window, lt_message_text TYPE string_table. lo_api_component = wd_comp_controller->wd_get_api( ). lo_window_manager = lo_api_component->get_window_manager( ). "Create message to present. APPEND 'This is a simple confirmation window' TO lt_message_text. APPEND cl_abap_char_utilities=>cr_lf TO lt_message_text. APPEND 'Are you ready to Proceed?' TO lt_message_text. . . .

Popup windows: Confirmation

lo_window = lo_window_manager->create_popup_to_confirm( text = lt_message_text button_kind = if_wd_window=>co_buttons_yesno message_type = if_wd_window=>co_msg_type_question close_button = abap_true window_title = 'Confirm you understood the message' * window_left_position = 0 * window_top_position = 0 window_position = if_wd_window=>co_center window_width = '100' window_height = '100' default_button = if_wd_window=>co_button_yes ). lo_window->open( ).

 Sample code (continued):

 Sample code using Custom window and view

Popup windows: Custom window and view

Popup window: custom window and view

DATA: lo_window_manager TYPE REF TO if_wd_window_manager, lo_api_component TYPE REF TO if_wd_component, lo_window TYPE REF TO if_wd_window. lo_api_component = wd_comp_controller->wd_get_api( ). lo_window_manager = lo_api_component->get_window_manager( ). lo_window = lo_window_manager->create_window( window_name = 'WI_COURSE_SEL' title = ”Course Selection" * close_in_any_case = abap_true message_display_mode = if_wd_window=>co_msg_display_mode_selected * close_button = abap_true button_kind = if_wd_window=>co_buttons_ok message_type = if_wd_window=>co_msg_type_none default_button = if_wd_window=>co_button_ok ). lo_window->set_on_close_action( view = <current_view_controller> action_name = ‘ACTION<event_handler>’ ). lo_window->open( ).

 Sample code (continued)

 Code Wizard provides predefined template code for each supported scenario   Implemented in interface IF_WD_PORTAL_INTEGRATION

Portal integration

Built-in support for raising Portal events and/or navigating to Portal screens

Method Purpose FIRE Trigger Portal Event

NAVIGATE_TO_OBJECT Navigation to Business Object

NAVIGATE_ABSOLUTE Navigate to predefined (external) URL

NAVIGATE_RELATIVE Navigate to a URL relative to current (i.e. does not require specification of server host name or port

SUBSCRIBE_EVENT Register as a listener to a specified Portal Event

UNSUBSCRIBE_EVENT Unregister as a listener

SET_WORK_PROTECT_MODE Prevent navigation away from application without user confirmation

 Sample code

Portal integration

DATA: lo_api_component TYPE REF TO if_wd_component, lo_portal_manager TYPE REF TO if_wd_portal_integration, lo_window_manager TYPE REF TO if_wd_window_manager, lo_window TYPE REF TO if_wd_window. lt_url_params TYPE wdy_key_value_list, ls_url_param TYPE wdy_key_value. “Obtain the Portal Manager lo_api_component = wd_this->wd_get_api( ). lo_portal_manager = lo_api_component->get_portal_manager( ). “Ensure we’re running in the portal IF lo_portal_manager->m_portal_version IS NOT INITIAL. “Add any required parameters ls_url_param-key = "param_1". ls_url_param-value = ”value_1". APPEND ls_url_param TO lt_url_params. . . .

 Sample code

Portal integration

“Use the Portal Manager to perform the navigation “In this case, by opening new (external) portal window CALL METHOD lo_portal_manager->navigate_absolute EXPORTING navigation_target = 'ROLES://portal_content/<iView path> navigation_mode =

if_wd_portal_integration=>co_show_external_headerless

* window_features = window_name = lv_window_name * history_mode = IF_WD_PORTAL_INTEGRATION=>CO_NO_DUPLICATES * target_title = * context_url = * post_parameters = ABAP_FALSE * use_sap_launcher = ABAP_TRUE * launcher_parameters = business_parameters = lt_url_params. ELSE. “Not in the portal, use alternative mechanism . . .


Portal integration

“Alternative when not running in Portal: “Open regular external window (could open new window each time used) lo_window_manager = lo_api_component->get_window_manager( ). CALL METHOD lo_window_manager->create_external_window EXPORTING url = '/sap/bc/bsp/sap/demo/start.do?param_1=value_1’ title = ’Demo Window Title’ modal = abap_false has_menubar = abap_false is_resizable = abap_true has_scrollbars = abap_true has_statusbar = abap_false has_toolbar = abap_false has_location = abap_false RECEIVING window = lo_window. lo_window->set_remove_on_close( abap_true ). lo_window->open( ). ENDIF.

 Value helps provided by the Data Dictionary does not include an “All” option, which

is necessary when using dropdowns to Filter a set of values

 Useful when required to customize the list of values presented in a dropdown (e.g.

sorted in descending order)

 Creating custom list of values from a Context Node

 Only necessary to define once for a context node (e.g. WDDOINIT)

Fixed value sets

Fixed Value Sets can be used to provide a custom set of values to a dropdown list. Especially useful when building Table Filter values

 Sample code

Fixed value sets

METHOD set_fixed_val_docnames. “IMPORTING “ IM_INCLUDE_BLANK_ROW type BOOLEAN “ Add an additional blank row (useful for filters) “ “ IM_NODE_INFO type ref to if_wd_context_node_info “ “ Note: “ The Node Info can be obtained using the following code snippet: “ DATA im_node_info type ref to if_wd_context_node_info. “ im_node_info = wd_context->get_node_info( ).

DATA: lt_valueset type wdr_context_attr_value_list, lt_dd07v type standard table of dd07v, l_value type wdr_context_attr_value. FIELD-SYMBOLS: <fs_dd07v> type dd07v. CLEAR lt_valueset. . . .


Fixed value sets

if im_include_blank_row eq abap_true. clear l_value. append l_value to lt_valueset. endif. “Obtain values from DDIC or lookup table/class CALL FUNCTION 'DDIF_DOMA_GET’ EXPORTING name = '<DOMAIN_NAME>’ langu = sy-langu TABLES dd07v_tab = lt_DD07V EXCEPTIONS ILLEGAL_INPUT = 1 OTHERS = 2. . . .


Fixed value sets

if sy-subrc eq 0. “Add the domain values loop at lt_dd07v assigning <fs_dd07v>. l_value-value = <fs_dd07v>-domvalue_l. l_value-text = <fs_dd07v>-ddtext. append l_value to lt_valueset. endloop. endif. im_node_info->set_attribute_value_set( EXPORTING name = im_attr_name value_set = lt_valueset ). ENDMETHOD.

  Steps to using a Filter Row: 1.  Create new Context Node (e.g. FILTER_X) with

same attributes as the Node to be filtered

a)  Only those attributes to be filtered on is needed

b)  A default filter can be specified by specifying a default

value for the attribute

2.  Bind the filterValue attribute of each UI TableColumn to the corresponding Filter Node’s attributes

3.  Create an event handler for the UI Table’s onFilter event

4.  Implement the filtering in the Context Node’s Supply Method:

−  Proactive: Retrieve the filter context node and restrict any entries which do not conform to the filter from

being added to the Node

−  Re-active: Delete any entries not matching filter just before binding to the context

Filtering context nodes

Reduce/limit the list of values presented to the user based on selected/specified criteria

Alternate Method: Presenting the list of allowed filters in a separate UI container

Steps: 1.  Create new Context Node (e.g. FILTER_X) with same attributes as the Node to be

filtered

a)  Only those attributes to be filtered on is needed

b)  A default filter can be specified by specifying a default value for the attribute

2.  Add UI buttons to Apply and Clear the filters:

a)  Create an event handler for each button’s OnClick event

b)  Apply: Invalidate the Node’s context

c)  Clear: Invalidate both the Filter and Node’s

contexts

3.  Implement the required filtering in the Context

Node’s Supply Method


 Sample code


METHOD supply_node_x. "Populate table lt_employees with the node’s new values . . . "Get and apply any specified filters lo_nd_filters = wd_context->get_child_node( name = wd_this->wdctx_filters ). call method lo_nd_filters->get_static_attributes importing static_attributes = ls_filters. "Filter by pernr if ls_filters-pernr is not initial. delete lt_employees where pernr ne ls_filters-pernr. endif. "Update the context call method node->bind_table( new items = lt_employees

set_intial_elements = abap_true ).

 Steps:

1.  Create new Context Node (e.g. SORT_ORDER_X) with same attribute names as the

Node to be sorted

a)  Attribute types must be WDUI_TABLE_COL_SORT_DIR

b)  A default sort order can imposed by specifying a default sort value for each attribute

2.  Create a custom method (e.g. SORT_NODE_X) in the View Controller, which:

a)  Retrieves the requested sort order

b)  Invokes a generic sort method (to be defined in the assistance class -see next slide)

3.  Define an event handler for the onSort event on the UI table

4.  Bind each UI Table Column’s sortState property to the corresponding attribute in SORT_ORDER_X

5.  Invoke method SORT_NODE_X from the “onSort” event handler as well as Node Supply

method

Sorting context nodes

Simply adding the ability to sort a table at runtime according to the user’s needs, can significantly increase the usefulness and adoption of an application

 Sample code

Sorting context nodes

The following code snippet provides a mechanism to sort any context node according to specified sort criteria

METHOD sort_wda_node_table. “IMPORTING “ im_sort_criteria TYPE <fields of CH_NODE_TABLE of type “ WDUI_TABLE_COL_SORT_DIR> “CHANGING “ ch_node_table TYPE TABLE <context node table> DATA: lo_descriptor type ref to cl_abap_structdescr, lt_sort type abap_sortorder_tab, ls_sort type abap_sortorder. FIELD-SYMBOLS: <fs_component> type abap_compdescr, <fs_field> type any. . . .


Sorting context Nodes

"Dynamically determine the columns we can sort by lo_descriptor ?= cl_abap_structdescr=>describe_by_data( im_sort_criteria ). CHECK lo_descriptor is bound. "Loop over all sort fields loop at lo_descriptor->components assigning <fs_component>. "Get the value of the field assign component sy-tabix of structure im_sort_criteria to <fs_field>. "Determine if the user sorted by this field case <fs_field>. when cl_wd_table_column=>e_sort_state-none or cl_wd_table_column=>e_sort_state-not_sortable. "Do nothing continue. when cl_wd_table_column=>e_sort_state-up. ls_sort-name = <fs_component>-name. ls_sort-descending = abap_false. append ls_sort to lt_sort. exit.


Sorting context Nodes

when others. ls_sort-name = <fs_component>-name. ls_sort-descending = abap_true. append ls_sort to lt_sort. exit. endcase. endloop. "Don't proceed if we did not recognize the sort column check lt_sort is not initial. "Sort the table according to the criteria sort ch_node_table by (lt_sort). ENDMETHOD.

  In situations when it is required to dynamically establish or alter the layout, method

WDDOMODIFYVIEW can be used to create or change UI elements

 Allows for changing standard SAP layout by using a code enhancement

 UI Element API reference available at:

  http://help.sap.com/erp2005_ehp_04/helpdata/EN/6e/0048413e466e24e10000000a155106/

frameset.htm

  Navigate to: Reference -> User Interface Elements -> Category

Dynamic UI layout changes

 Sample code


METHOD wddomodifyview. data: lo_table type ref to cl_wd_table, lv_date type dats, lv_date_string type string, lv_date_char type char10. if first_time eq abap_true. lo_table ?= view->get_element( 'TABLE' ). "Build table columns for each day of the week do 7 times. lv_date = sy-datum – (7*(sy-index-1)). "Calculate the date write lv_date to lv_date_char mm/dd/yy. "Convert to MM/DD/YYYY lv_date_string = lv_date_char. call method wd_this->create_table_column exporting im_table = lo_table im_index = sy-index im_heading = lv_date_string. enddo. endif. ENDMETHOD. . . .


Dynamic UI Layout changes

METHOD create_table_column . data: lo_table_column type ref to cl_wd_table_column, lo_caption type ref to cl_wd_caption, lo_textview type ref to cl_wd_text_view. data: lv_index type string, lv_ctx_pth_text type string, lv_ctx_pth_tooltip type string. lv_index = im_index. condense lv_index. "Create the new Column control call method cl_wd_table_column=>new_table_column exporting h_align = cl_wd_table_column=>e_h_align-center sort_state = cl_wd_table_column=>e_sort_state-not_sortable bind_cell_design = lv_ctx_pth_color receiving control = lo_table_column. . . .



"Create a new Caption control call method cl_wd_caption=>new_caption exporting text = im_heading receiving control = lo_caption. lo_table_column->set_header( lo_caption ). “Set the header caption "Build the mapping paths concatenate <NODE> lv_index 'TEXT’ into lv_ctx_pth_text separated by '.'. concatenate <NODE> lv_index 'TOOLTIP’ into lv_ctx_pth_tooltip separated by '.'. "Create a new Text View control lo_textview = cl_wd_text_view=>new_text_view( exporting bind_text = lv_ctx_pth_text bind_tooltip = lv_ctx_pth_tooltip ). “Set the control as a Column Editor lo_table_column->set_table_cell_editor( lo_textview ). im_table->add_column( lo_table_column ). "Add new column to the table ENDMETHOD.

  Each Context Attribute has four specialized properties which can be used to control the behavior of a UI element:   Required

  Read only

  Visible

  Enabled

  Final (not supported – future use)

  The properties prevent the creation of excessive numbers of context attributes to control these behaviors, which in turn affects the overall performance of the application

  Binding the Context Attribute Properties in the View Designer: 1.  Select the binding button of the UI Element’s property

2.  Select “Bind to the Property of the Selected Attribute

3.  Select the property

  Programmatic control   Constants for each attribute is defined in IF_WD_CONTEXT_ELEMENT,

attribute E_PROPERTIES

Attributes properties

 Sample Code

Attribute properties

DATA: lo_node TYPE REF TO if_wd_context_node. lo_element TYPE REF TO if_wd_context_element. “Adjust Enabled property for attributes for ALL elements lo_node = wd_context->get_child_node( wd_this->wdctx_<NODE_NAME> ). CALL METHOD lo_node->set_attribute_property EXPORTING attribute_name = ‘<ATTRIBUTE_NAME>’ property = lr_elem->e_property-enabled value = abap_true. all_elements = abap_true. “Adjust the Read-Only property for this specific element & attribute lo_element = lo_node->get_element( ). CALL METHOD lo_element->set_attribute_property EXPORTING attribute_name = ‘<ATTRIBUTE_NAME>’ property = lr_elem->e_property-read_only value = abap_true.

  Embedding one Component within another provides access to the Window/Views defined in the embedded Component

  Generally provides a read-only view,

unless the used Component is completely self-contained, i.e.

  It requires no external parameters

  Can save its own data without an external event, etc.

  Allows the new Component to form part of the navigation chain by means of the Inbound/Outbound plugs defined on its Window

  Allows for mapping the context from Component B

Embedding external components Modulariza;on by means of WD Components allows for code reusability and encapsula;on. Web Dynpro components can either be referenced or directly embedded within Windows/Views

 Steps: 1.  Establish a Component Usage for Component B (CB)

from Component A (CA) − Each usage must be labeled with a Component Use − This influences the name by which CB is known from

within CA

2.  Add the required view from CB: Option A – As a Navigation Target: Directly embedding the Window from CB into a Window of CA. Use of Window Plugs for navigation links

Option B – As View Layout Element: Adding a ViewContainerUIElement into a View from CA then embedding the Window from CB into the ViewContainer. This allows for presenting the View without any navigation requirement

Embedding external components

 Steps (continued)

2.  (continued) Select the View to embed

3.  Optional – only required when invoking

methods, listening to events or mapping

the context from CB

− Specify the Component Use in the View Controller which requires access to the

interface of CB


 Steps (continued)

4.  Optional – only required when requiring access to the context from CB

− Drag the required Context Node from CB to the Root node of the Controller to create

and map the context

− The mapped Nodes and Attributes can now be referenced and used in the same way

as any other Node / attribute


 Cross-component calls provide the mechanism to invoke methods on a used

Component, thus influencing its behavior or data

 To interact with an embedded component, the Interface Controller for CB must be

defined for each Controller requiring access to CB

 At runtime, the Component Usage must be instantiated

Cross-component calls

TIP: When using an external component from one or more controllers, its best to establish the component usage once in the COMPONENT_CONTROLLER DATA lo_cmp_usage TYPE REF TO if_wd_component_usage. lo_cmp_usage = wd_this->wd_cpuse_component_b( ). IF lo_cmp_usage->has_active_component( ) IS INITIAL. lo_cmp_usage->create_component( ). ENDIF.

 Sample code: Invoking the method on a used controller

Cross-component calls

DATA: lo_interfacecontroller TYPE REF TO ziwci_mit_demo_2. “Used Component lo_interfacecontroller = wd_this->wd_cpifc_component_b( ). “Component Usage “Invoke a method on the used component CALL METHOD lo_interfacecontroller->add_step EXPORTING im_step_id = ’step_1’ im_step_name = ’Step 1'.

 The following items of the Component Controller can be exposed on the

Component’s Interface:

  Context Nodes

Exposing components for re-use



  Context Nodes

  Methods




  Context Nodes

  Methods

  Events




  Context Nodes

  Methods

  Events

  Summarized in the Interface Controller




  Context Nodes

  Methods

  Events

  Summarized in the Interface Controller

  Inbound and Outbound Plugs of each Window can be exposed

  Summarized in the Interface View

 Exposed by selecting the Interface checkbox


 Allows a source Controller to synchronously inform any registered Listeners of the occurrence of an Event

  Listeners implement an event handler which is automatically invoked

 Events can pass parameters

 Established on the Component Controller, published both internally and externally

Events

Tip: Think of events as a mechanism to invoke a method on mul:ple controllers from within the Component Controller

 The order of event execution in the registered Listeners is undefined

 Potential use cases:   Due to a failed authorization check, all active Views should be updated into a read-only

mode   If the authorization check was implemented in another Component, it could simply raise

an Event   Each View would be required to register as an event listener

  It is possible to dynamically register/unregister for a used Component’s events   Useful in situations where the event name or handler is only known at runtime, or   When event handling are dependent on certain application states / logic

Events

 Before raising an event, first declare it on the Component Controller

  It is sometimes useful to create a method to allow other controllers to raise the event

 Example Code: Raising event SOME_EVENT

  It is also possible to dynamically register/unregister for a used Component’s events   Useful in situations where the event name or handler is only known at runtime, or   When event handling are dependent on certain application states / logic

Raising Events

wd_this->fire_some_event_evt( im_pernr = ‘00000007’ " pernr_d ).

 Sample Code: dynamically attaching to external component's event

Using events

“The Component usage must be defined on Controller's Property tab “In this example it is called "BREADCRUMBS” DATA: lo_cmp_usage TYPE REF TO if_wd_component_usage, lo_component_api TYPE REF TO if_wd_view_controller. "Register the event handler for the Breadcrumb events lo_component_api = wd_this->wd_get_api( ). lo_cmp_usage = wd_this->wd_cpuse_breadcrumbs( ). CALL METHOD lo_cmp_usage->add_event_handler EXPORTING listener = lo_component_api "The current view controller handler_name = 'ONACTION_<action>’ "ACTION event handler method controller_name = 'INTERFACECONTROLLER’ "Event’s Source Controller event_name = ’<event name>'. "Event name

 Sample code: dynamically detaching from an external component's event

Using events

DATA: lo_cmp_usage TYPE REF TO if_wd_component_usage, lo_component_api TYPE REF TO if_wd_view_controller. "Remove the event handler for the Breadcrumb events lo_component_api = wd_this->wd_get_api( ). lo_cmp_usage = wd_this->wd_cpuse_breadcrumbs( ). CALL METHOD lo_cmp_usage->remove_event_handler EXPORTING listener = lo_component_api "The current view controller handler_name = 'ONACTION<action>' "ACTION event handler method controller_name = 'INTERFACECONTROLLER’ ”Event Source Controller event_name = ’<event_name>'. "Event name

 Frequently necessary to alter standard SAP functionality to cater to custom requirements

 Code modifications cause repercussions during patch / upgrade cycles

 Code enhancements solves the limitation by adding / replacing Standard (or custom) code in a controlled fashion   Independent development objects   Can be traced, activated or deactivated using the Enhancement Information System   Switch enhancements on/off via Switch framework

  In Web Dynpro, the following enhancements are possible:   Adding/Hiding UI elements to a view   Adding new nodes to a controller context   Embedding additional views in a window   Adding custom logic before or after an existing method   Completely replacing an existing method with custom logic

Enhancing standard SAP

Enhancing standard SAP TIP: It is advisable to use a namespace prefix to the name of the enhancement implementa:on and the names of any new objects created as part of the enhancement. This helps to prevent name conflicts with objects from the original component, for example:

Enhancement Name: /MIT/ENH_LSO_RECRUITMENT_1/ New BuGon ID: /MIT/button_1

Steps: 1. While in Display mode, select Enhance from the Menu, or select the toolbar icon

2. Enter a unique name and a short descrip:on for your enhancement implementa:on. If mul:ple enhancements are made, you can group them into a Composite Enhancement, which allows you to enable/disable them as a unit.

3. Perform the required enhancements

4. Save and Ac:vate the changes

Note: Note that enhanced objects in the Component Controller, such as methods and context nodes, cannot be included in the Interface Controller and therefore not in the external interface of the component.

Enhancing a View:  The following changes are allowed for Views:

1. Creating a new View 2. Creating new UI elements 3. Removing existing UI elements

−  The standard element is not physically removed, but becomes Suppressed

−  An additional property is added indicating the Enhancement which altered the element.

Enhancing a Controller:  The following changes are allowed for Controllers:

1. Creating a Pre-Exit. Code to be executed before the existing method logic.

2. Creating a Post-Exit. Code will be executed after the existing method logic.

3. Overwriting a method by creating an Overwrite-Exit. The existing method logic is completely replaced by custom code.


Note: After applying patches or upgrades, all Exits may require re-evaluation in case the standard logic was significantly altered.

Enhancing the Context:  The following changes are allowed for a Context:

1. Adding new attributes to existing Nodes. Must be consistent with the dictionary structure (if applicable).

2. Creating new Nodes and attributes. It is only possible to change or delete an enhancement Node from the enhancement implementation in which it was created

Enhancing a Window:  The following changes are allowed for Windows:

1. Embedding additional views.

2. Enhance the navigation structure by creating, changing or suppressing navigation links (similar to UI elements).


Beware: Changing naviga:on structures through enhancements can cause inconsistencies

 Web Dynpro ABAP http://help.sap.com/erp2005_ehp_04/helpdata/EN/77/3545415ea6f523e10000000a155106/frameset.htm

 Cross-Component Programming http://help.sap.com/erp2005_ehp_04/helpdata/EN/a7/1d8b412bb5b35fe10000000a1550b0/frameset.htm

 Dynamic Programming http://help.sap.com/erp2005_ehp_04/helpdata/EN/94/29984197eb2e7be10000000a1550b0/frameset.htm

 Modification-Free Enhancements http://help.sap.com/erp2005_ehp_04/helpdata/EN/c5/f4b9422e0fb911e10000000a1550b0/frameset.htm

References

day2 advanced

Documents