Web Dynpro For ABAP: Massachusetts Institute of Technology
Web Dynpro For ABAP: Massachusetts Institute of Technology
Web Dynpro For ABAP: Massachusetts Institute of Technology
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
27 January 2011 2
Popup windows
Popup
windows
are
modal
dialog
boxes
which
the
user
has
to
acknowledge/dismiss
before
being
allowed
to
return
to
the
main
window
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
Issue: How to retrieve values/selections from popup window?
Popup windows
Popup
windows
are
modal
dialog
boxes
which
the
user
has
to
acknowledge/dismiss
before
being
allowed
to
return
to
the
main
window
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
Issue: How to retrieve values/selections from popup window? Context binding to Component Controller
Popup windows
Popup
windows
are
modal
dialog
boxes
which
the
user
has
to
acknowledge/dismiss
before
being
allowed
to
return
to
the
main
window
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
Issue: How to retrieve values/selections from popup window? Context binding to Component Controller Using Outbound Plugs and Parameters
Popup windows
Popup
windows
are
modal
dialog
boxes
which
the
user
has
to
acknowledge/dismiss
before
being
allowed
to
return
to
the
main
window
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
Issue: How to retrieve values/selections from popup window? Context binding to Component Controller Using Outbound Plugs and Parameters Using the Assistance Class
lo_api_component = wd_comp_controller->wd_get_api( ). lo_window_manager = lo_api_component->get_window_manager( ). "Create APPEND TO APPEND APPEND . . . message to present. 'This is a simple confirmation window' lt_message_text. cl_abap_char_utilities=>cr_lf TO lt_message_text. 'Are you ready to Proceed?' TO lt_message_text.
Portal integration
Built-in support for raising Portal events and/or navigating to Portal screens
Code Wizard provides predefined template code for each supported scenario Implemented in interface IF_WD_PORTAL_INTEGRATION Method
FIRE NAVIGATE_TO_OBJECT NAVIGATE_ABSOLUTE NAVIGATE_RELATIVE SUBSCRIBE_EVENT UNSUBSCRIBE_EVENT SET_WORK_PROTECT_MODE
Purpose
Trigger Portal Event Navigation to Business Object Navigate to predefined (external) URL Navigate to a URL relative to current (i.e. does not require specification of server host name or port Register as a listener to a specified Portal Event Unregister as a listener Prevent navigation away from application without user confirmation
Portal integration
Sample code
DATA: lo_api_component lo_portal_manager lo_window_manager lo_window lt_url_params ls_url_param
REF TO if_wd_component, REF TO if_wd_portal_integration, REF TO if_wd_window_manager, REF TO if_wd_window. wdy_key_value_list, 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 were 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. . . .
Portal integration
Sample code
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 = * * * * * * * ELSE. Not in the portal, use alternative mechanism . . . 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.
Portal integration
Sample code (continued)
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)
CLEAR lt_valueset. . . .
2. Bind the filterValue attribute of each UI TableColumn to the corresponding Filter Nodes attributes
3. Create an event handler for the UI Tables onFilter event 4. Implement the filtering in the Context Nodes 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
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
3. Define an event handler for the onSort event on the UI table 4. Bind each UI Table Columns 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
Sample code
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 lt_sort ls_sort FIELD-SYMBOLS: <fs_component> <fs_field> . . . type ref to cl_abap_structdescr, type abap_sortorder_tab, type abap_sortorder. type abap_compdescr, type any.
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)). write lv_date to lv_date_char mm/dd/yy. 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. . . . "Calculate the date "Convert to MM/DD/YYYY
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. . . .
Attributes properties
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 Elements 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
Attribute properties
Sample Code
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.
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
Specify the Component Use in the View Controller which requires access to the interface of CB
Cross-component calls
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
Cross-component calls
Sample code: Invoking the method on a used controller
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'.
Events
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 Tip: Think of events as a mechanism to invoke a method on mul:ple controllers from within the Component Controller
Events
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
Raising 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
Using events
Sample Code: dynamically attaching to external component's event
The Component usage must be defined on Controller's Property tab In this example it is called "BREADCRUMBS DATA: lo_cmp_usage lo_component_api
"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 handler_name = 'ONACTION_<action> controller_name = 'INTERFACECONTROLLER event_name = <event name>'.
"The current view controller "ACTION event handler method "Events Source Controller "Event name
Using events
Sample code: dynamically detaching from an external component's event
DATA: lo_cmp_usage lo_component_api TYPE REF TO if_wd_component_usage, 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
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 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 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).
References
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