Massachusetts Institute of Technology

Web Dynpro for ABAP

Volume III: Floorplan Manager
By: Hendrik Pieterse
27 January 2011

Agenda
Purpose Features Architecture FPM UI Regions FPM Configuration Runtime APIs Useful Interfaces

27 January 2011

Purpose
SAP Framework for consistent Web Applications Provides mechanism to configure multiple WDA Components to form cohesive applications Advantages for Application Developers:
Prevents reinventing the wheel with pre-defined UI patterns, e.g. Forms, Lists, Tabs Allows customization of applications with no/minor code changes Plays on the strengths of WDA Componentization

Provide common APIs for:

Navigation Data-loss handling Messaging Personalization

Features
Predefined application patterns: Object Instance Floor plan (OIF)
Tabbed interface containing Main (and optional subordinate) tabs

Features
Predefined application patterns: Object Instance Floor plan (OIF)
Tabbed interface containing Main (and optional subordinate) tabs

Guided Activity Floor plan (GAF)

Application Roadmap containing Main (and optional subordinate steps)

Features
Predefined application patterns: Object Instance Floor plan (OIF)
Tabbed interface containing Main (and optional subordinate) tabs

Guided Activity Floor plan (GAF)

Application Roadmap containing Main (and optional subordinate steps)

Quick Activity Floor plan (QAF)

Simplified interface to Create, Delete, Display, and Change attributes and associations of Business Objects

Features
Various Configuration Editors for FPM adjustments
Global settings Application Floor plan Referenced Components Predefined UI Component Templates

Ability to define Configuration Variants

Complete set of configuration data for an OIF view or GAF roadmap Variant selection is controlled programmatically For example, to alter an application view based on user authorizations

Architecture
Components implement FPM Interface IF_FPM_BUILDING_BLOCK
Becomes UI Building Block (UIBB) Allows component to take part in event loop Ensure consistent implementations Allows framework adjustments without impacting components

The FPM acts as the Main Web Dynpro application

FPM_OIF_COMPONENT (Tabs) FPM_GAF_COMPONENT (Roadmap)

FPM UI Regions
Identification Region (IDR)
Header area (IDR Basic) Ticket area (IDR Extended) Items area

FPM UI Regions
Identification Region (IDR)
Header area (IDR Basic) Ticket area (IDR Extended) Items area

Message Region (MR)

Message Box area

FPM UI Regions
Identification Region (IDR)
Header area (IDR Basic) Ticket area (IDR Extended) Items area

Message Region (MR)

Message Box area

Context Navigation Region (CNR)

Toolbar area with: Standard Functions, e.g. (Save, Edit, Finish, Read-only and Next/Previous for GAF) Custom buttons Dropdown choices Navigation menus

FPM UI Regions
Identification Region (IDR)
Header area (IDR Basic) Ticket area (IDR Extended) Items area

Message Region (MR)

Message Box area

Context Navigation Region (CNR)

Toolbar area with: Standard Functions, e.g. (Save, Edit, Finish, Read-only and Next/Previous for GAF) Custom buttons Dropdown choices Navigation menus

Roadmap Region
GAF only

FPM configuration
Runtime (Administrator mode):
Start FPM application with URL parameter sap-config-mode=X From the application user interface using the Adapt Configuration link

Runtime (Expert mode):

From the application user interface using the Change Configuration link (User parameter FPM_CONFIG_EXPERT must be set to X )

Design time (Application Configuration):

From the Object Navigator of the ABAP Workbench using the Web Dynpro Application Configuration

Design time (Component Configuration):

From the Object Navigator of the ABAP Workbench using the Web Dynpro Component Configuration

FPM configuration editor

FPM configuration editor

Control Region:
Select the screens to preview/configure (initial, main or confirmation) Change or Display application global settings and configuration variants

Hierarchy:
Provides hierarchical display of configurable elements of the selected screen

Preview:
Presents the user interface of the application allowing UI element selection

Action Region:
Contains links to allowed actions for the selected UI element

Attribute View:
Allows changes to the attributes of selected UI elements Changes can be seen immediately in the Preview area

Message Region:
Shows potential conflicts in the configuration

FPM configuration editor

Application configuration
An Application Configuration defines the floor plan and IDR to be used

Leads to component configuration for all involved components: FPM_OIF_COMPONENT

Show Top-level + sub-level tabs Adding new tabs

FPM_GAF_COMPONENT
Roadmap with the main and sub-steps

FPM_IDR_COMPONENT
Basic Version Application Title and Tooltip Extended Version Application Title, Tooltip and Items area

Application configuration
Allows specification of application-specific parameters, e.g. include:
Enabling Accessibility Mode Use of Delta Rendering Display of Splash Screen Forced use of External Stylesheet Disabling Extended Help by default Allowing Save Use of new Lightspeed Rendering

Component configuration
A Component Configuration defines the specific Components (UIBBs) to assemble into a Floorplan Manager application

Arranges the layout of the application, by allowing the following tasks:

Enabling Add extra steps or views Configure the toolbar with predefined buttons and navigation menus Attach your UIBBs to the relevant steps or views Attach predefined FOM GUIBBs Configure Quick Help for your application Configure an initial screen and/or confirmation screen Configure application variants Change the global application settings

Window layout:
Navigation hierarchy Preview Action area

Component configuration
Global Settings: Specify Application specific parameters
Define an Application Component Controller Define a default configuration and Variant

Specify the Resource Management Parameters

Indicate if UIBBs which are not visible, can be removed from memory so as to increase the performance and the memory footprint of the application (i.e. Transient)

Specify Messaging parameters

Message configuration
All messages are displayed in the Message Region, which is included in all FPM applications

Global Settings: Maximum message size

The Message Region will expand to accommodate up to the Maximum Message Size messages A scroll bar is presented to allow access to any messages exceeding the maximum limit

Message logs
You can produce a log of the messages for your application All previously reported messages can be seen via the Display Message Log link in the Message Region Note: You can also turn on the message log by using the URL parameter FPM_SHOW_MESSAGE_LOG=X

Header configuration
Both the Header and the Ticket areas can be configured at design-time in the Component Configuration window for the IDR configuration Ticket area:
Only available for the OIF applications To configure the ticket area, choose Add IDR Extended Attributes for Ticket Top and Ticket Bottom appear These attributes can be called dynamically to add: Label/value pairs Label/navigation link pairs Label/icon pairs

Toolbar configuration
Configuration Options for toolbar buttons: Button Type
Activation Function Alternate Function Other Function You Can Also Related Links Close
(GAF only)

Use
Primarily to be used as a Save button (automatically added by default) Application-specific function shown in the same toolbar region as the Save button Application-specific function shown in separate toolbar region Provide navigation links away from the FPM Provide navigation links away from the FPM Provides a Close button Returns to the Main Step to which the button is assigned Roadmap is executed sequentially by navigating up to the last screen (before the confirmation screen) or stopping if on error Provides mechanism to execute final action before the confirmation screen Each variant of the roadmap can have one Final Action

Exit to Main Step

(GAF sub-steps only)

Finish
(GAF main steps only)

Next steps/Final Action

(GAF only)

Generic UIBBs
Generic User Interface Building Blocks (GUIBB) are generic design templates which can be added to the Component Configuration during design time in place a of custom UIBBs

Standard FPM GUIBBs:

Form Component (FPM_FORM_UIBB) List Component (FPM_LIST_UIBB) Tabbed Component (FPM_TABBED_UIBB)

Requires a custom Feeder Class:

Must Implement Interface: IF_FPM_GUIBB_FORM for form components; IF_FPM_GUIBB_LIST for list components Provides: Data definition, structure or table definitions and their technical aspects via method An optional action definition based on metadata Action/event handling and data forwarding to the underlying application model

The actual data retrieval and display are only executed at runtime using the provided configuration

Generic UIBBs
Configuration Steps:
1. Select Add UIBB button in Component Configuration Action area. 2. In the Component field, enter FPM_FORM_UIBB or FPM_LIST_UIBB 3. In the View field, enter FORM_WINDOW or LIST_WINDOW 4. In the Configuration Name field, enter a name for the form component configuration 5. Select Save 6. Select Configure UIBB 7. Create a configuration name 8. Provide the name of the Feeder Class 9. The Form / List Editor is launched to specify the layout and actions

Generic UIBBs
Feeder Class Methods: Name
GET-DEFINITION GET_PARAMETER_LIST

Description
Provide all necessary information for configuring the list/ form Called at design time to define the list parameters supported by the feeder class. This list is used by the FPM Configuration Editor to provide the input fields for these parameters First method called at runtime when the list/form is created The first method called during an event loop. Can be used to forward changed data to other components Called within the FPM event loop, forwarding the FPM PROCESS_EVENT to the feeder class Called within the FPM event loop, forwarding the FPM PROCESS_BEFORE_OUTPUT event to the feeder class. Provides the form data after the event has been processed

INITIALIZE FLUSH PROCESS_EVENT GET_DATA

FPM Runtime APIs

Headers Toolbars Messaging Dialog Boxes

API: Header
Adjusting the IDR:
During runtime, use the IDR API to make changes to the individual IDR areas This API consists of the methods encapsulated in the IF_FPM_IDR interface Also possible to provide application a link to the FPM Configuration Editor Accessed via CL_FPM_SERVICE_MANAGER

Events:
FPM generally only ensures only that all affected UIBBs are informed All standard Function buttons are attached to a hard-coded FPM events Some button events are pre-configured (e.g. Previous, Next, Save) which may require no extra code Special case: Printing Even though a Print button is provided there is no print support in FPM

API: Header
Methods: Region
Header

Method Name
GET_APPLICATION_TITLE SET_APPLICATION_TITLE SET_HEADER_VISIBILITY GET_TICKET

Description
Retrieves the title text and its tooltip Specify a new title text and/or tooltip Display or hide the header entirely Retrieves the ticket top, bottom and tooltip texts Specify new texts for the ticket top, bottom and tooltips Display or hide the ticket area Adds a new item group to the item area as simple text strings. Each item consists of a label, its tooltip, a value and the values tooltip. A group consists of an arbitrary amount of items Similar to ADD_ITEM_GROUP_BY_VAL, but passing a reference to a context node attribute, allowing dynamic updates and data types other than string Adds a pair of label/navigation links. The link itself is provided by the report launchpad Clears all items from the IDR

Ticket

SET_TICKET GET_TICKET_VISIBILITY ADD_ITEM_GROUP_BY_VAL

Items

ADD_ITEM_GROUP_BY_REF

ADD_NAVIGATION_ITEM INITIALIZE_ITEMS

API: Header
Example:
DATA: lo_fpm_idr TYPE REF TO if_fpm_idr, lo_fpm TYPE REF TO if_fpm. lo_fpm = cl_fpm_factory=>get_instance( ). lo_fpm_idr ?= lo_fpm->get_service( cl_fpm_service_manager=>gc_key_idr ). lo_fpm_idr->set_ticket( EXPORTING iv_top iv_bottom iv_top_tooltip iv_bottom_tooltip ).

API: Toolbars
Changing Toolbars:
GAF Toolbar: Interface IF_FPM_CNR_GAF (initial screen or main screen) OIF Toolbar: Interface IF_FPM_CNR_OIF (initial screen or main screen) Accessed via CL_FPM_SERVICE_MANAGER API Methods require different parameters depending on GAF or OIF floor plan

Events:
FPM generally only ensures only that all affected UIBBs are informed All standard Function buttons are attached to a hard-coded FPM events Some button events are pre-configured (e.g. Previous, Next, Save) which may require no extra code Special case: Printing Even though a Print button is provided there is no print support in FPM

API: Toolbars
Interface IF_FPM_CNR_xxx Methods:

Name
DEFINE_BUTTON

Description
Create/Change both standard and application-specific buttons. Parameter IV_FUNCTION defines the button type (see IF_FPM_CONSTANTS=>gc_button). Parameter ELEMENT_ID is needed for application-specific buttons must be changed Create/Change both standard and application-specific buttonchoices. Parameter IV_FUNCTION defines choice type (see IF_FPM_CONSTANTS=>gc_button_choice). Parameter ELEMENT_ID is needed if application-specific buttons must be changed subsequently Create a separator at runtime in the Other Functions area Activate / Deactivate the duplication of the toolbar Define launchpads for the You Can Also menu bar

DEFINE_BUTTON_CHOICE

CREATE_SEPARATOR SET_DUPLICATE_TOOLBAR DEFINE_YOU_CAN_ALSO

API: Toolbars
Interface IF_FPM_CNR_xxx Methods:

Name
DEFINE_RELATED_LINKS GET_BUTTONS GET_BUTTON_CHOICES GET_SEPARATORS GET_RELATED_LINKS GET_YOU_CAN_ALSO

Description
Use this method to edit the menu bar for Related Links Determines which buttons (and their configurations) are to be shown in the toolbar Determines which button-choices (and their configurations) are to be shown in the toolbar Determines the positions of the separators in the toolbar (only in the Other Functions area) Determines the contents of the Related Links menu in the toolbar Determines the contents of the You Can Also menu in the toolbar

API: Toolbars
Example:
DATA: lo_cnr_gaf TYPE REF TO if_fpm_cnr_gaf, lo_fpm TYPE REF TO if_fpm. lo_fpm = cl_fpm_factory=>get_instance( ). lo_cnr_gaf ?= lo_fpm->get_service( cl_fpm_service_manager=>gc_key_cnr_gaf ). lo_cnr_gaf->define_button( EXPORTING iv_variant_id (op%onal; e.g. my_variant_1'; current variant if skipped) iv_mainstep_id (op%onal; e.g. mainstep_1; current main step if skipped) iv_subvariant_id (op%onal; e.g. subvariant_123) iv_substep_id (op%onal; e.g. substep_1) iv_function (e.g. EXIT_TO, FINISH, SAVE_DRAFT , see IF_FPM_CONSTANTS=>gc_button) iv_screen (op%onal; Screen to be changed (e.g. INIT, MAIN) iv_element_id (op%onal; to allow changing buSon proper%es aTerwards) iv_sequence_id (op%onal; determine place to insert buSon; only when using OTHER_FUNCTIONS) iv_design (op%onal; BuSon-Design) iv_enabled (op%onal; BuSon-Enabling) iv_explanation (op%onal; BuSon-Explana%on) iv_on_action (op%onal; determines the Event-Id for a buSon; iv_hotkey (op%onal; key-combina%on for ac%va%ng the event of this buSon> ).

API: Toolbars
Example continued:
lo_cnr_gaf->define_button_choice( EXPORTING iv_variant_id (op%onal; e.g.'variant_1; current variant if skipped) iv_subvariant_id (op%onal;subvariant_xyz) iv_mainstep_id (op%onal;mainstep_1; mainstep if skipped) iv_substep_id (op%onal;substep_99) iv_function (e.g. OTHER_FUNCTIONS (appl-specic buSon-choices)) iv_screen (op%onal; the screen where the UI-Element has to be changed (INIT, MAIN) iv_element_id (op%onal; only if you want to change the buSon-choice proper%es aTerwards) iv_sequence_id (op%onal; only if you use OTHER_FUNCTIONS; determines the place where to insert this buSon-choice) iv_enabled (op%onal; BuSon-Choice-Enabling) iv_text (op%onal; BuSon-Choice-Label) iv_tooltip (op%onal; BuSon-Choice-Tool%p) iv_visibility (op%onal; BuSon-Visibility) it_menu_action_items (menu elements of a BuSon-Choice) ).

API: Messaging
Changing Toolbars: Interface IF_FPM_MESSAGE_MANAGER provides methods similar to IF_WD_MESSAGE_MANAGER, e.g.:
Clearing all messages Raising exceptions Reporting messages

Using the FPM Message Manager:

1. Declare a global attribute in the Component Controller e.g.: MR_MESSAGE_MANAGER as type IF_FPM_MESSAGE_MANAGER 2. Obtain reference to instance in method WDDOINIT METHOD wddoinit. "Get handle to the IF_FPM interface wd_this->mr_fpm = cl_fpm_factory=>get_instance( ). "Get handle to the FPM Message Manager wd_this->mr_message_manager = wd_this->mr_fpm->mo_message_manager. ENDMETHOD.

API: Dialog boxes

Initiate/Manage via The NEEDS_CONFIRMATION method during the FPM Event Loop The PROCESS_EVENT method for the handling of application-specific dialog boxes Work-protect mode (offered by the Portal and the NWBC) using the IF_FPM_WORK_PROTECTION interface

API: Dialog boxes

Data-Loss Dialog Boxes: Any UIBB can request a data-loss dialog box:
During the NEEDS_CONFIRMATION method of the FPM event loop By returning the pre-defined instance of the class CL_FPM_CONFIRMATION_REQUEST as detailed below: METHOD needs_confirmation IF <condition>. eo_confirmation_request = cl_fpm_confirmation_request=>go_data_loss. ENDIF. ENDMETHOD.

Custom Confirmation Dialog Boxes: Create custom instance of the class CL_FPM_CONFIRMATION_REQUEST adding application-specific text

Useful FPM Interfaces

Application Controllers Application Configuration Controllers Shared Data Components Transactions

Application controllers
An Application Controller is a singleton instance of a Component provided by the application. Useful when it is necessary for single component instance to participate in all FPM events to control the end-to-end application

Implements interface IF_FPM_APP_CONTROLLER Not possible with simple UIBBs because:

1. Interface IF_FPM_UI_BUILDING_BLOCK only participate in the event loop when the corresponding UIBBs are visible at the time the event loop happens or become visible after the current event loop has finished successfully

2. UIBBs cannot make assumptions about the sequence in which they are called

Application controllers
Interface Methods: Method
BEFORE_FLUSH AFTER_FLUSH BEFORE_NEEDS_CONFIRMATION AFTER_NEEDS_CONFIRMATION BEFORE_PROCESS_EVENT AFTER_PROCESS_EVENT

Use
Executes before/after the regular FPM FLUSH methods Executes before/after the regular FPM NEEDS_CONFIRMATION methods Executes before/after the regular FPM PROCESS_EVENT methods

Application configuration controllers

Application-specific configuration controller (AppCC) allows for:
Performing checks affecting more than one UIBB Making global FPM event adjustments, e.g. Cancelling events Changing event parameters Reading the structure of the FPM application at runtime Changing the structure of the FPM application dynamically Selecting a Configuration Variant at runtime

Implement one of the following Web Dynpro interfaces in a Web Dynpro component:
IF_FPM_OIF_CONF_EXIT for an OIF application IF_FPM_GAF_CONF_EXIT for a GAF application

Application configuration controllers

Examples of IF_FPM_xxx_CONF_EXIT Interface Methods: Method
GET_VARIANTS GET_MAINVIEWS GET_MAINSTEPS ADD_UIBB ADD_MAINVIEW RENAME_MAINSTEP

Use
Primarily to be used as a Save button (automatically added by default) Returns a list of all main views for a given variant for OIF applications Returns a list of all main steps for a given variant (GAF applications) Dynamically adds UIBB to a main view, sub-view, main step, or sub-step Dynamically adds another main view at runtime Dynamically renames a Main Step at runtime

Shared Data Components

There is often the need to share data between these components, especially when the UIBBs of an application are implemented in several distinct Components.

Sharing Component:
Implements Interface IF_FPM_SHARED_DATA (a marker interface containing no methods or attributes)

Consuming Components:
Declare a usage to the Shared Data Component Communicate via Context Mapping and/or method calls

FPM controls the lifecycle of the Shared Component Generally also specified for Application Controllers

Transactions
Transactions are supported by FPM in a systematic manner Provided by implementing Interface IF_FPM_TRANSACTION Optional interface providing the following advantages:
Logical sequence in which the interface methods are called Transaction steps can be split up into the required sequence The check save validate sequence provides high transaction integrity The check save fail recover sequence provides robustness

Transactions
IF_FPM_TRANSACTION Interface Methods:

Method Name
CHECK_BEFORE_SAVE

Description
The rejected return parameter indicates whether the pre-save validation was successful. Return FALSE if the check was successful, TRUE to reject the save request Performs the actual save and any required database commits. Called when CHECK_BEFORE_SAVE returned FALSE. If the save was indeed successful, then the method AFTER_COMMIT is called Perform clean up activities such as: releasing database locks, releasing other resources, triggering an event for processing Perform any roll back activities and/or release locks and resources

SAVE

AFTER_COMMIT

AFTER_REJECTED_SAVE

References
http://help.sap.com/saphelp_autoid70/helpdata/en/9f/ 95467bbefc4a808fffeba4c5177258/frameset.htm