The Floor Plan Manager (FPM) offers all the necessary interfaces and tools to integrate separate user interface (UI) building blocks (UIBBs) into FPM applications to implement application content independent from SAP’s standard patterns. These freestyle UIBBs can be used in FPM applications side-by-side with any generic component. They can benefit from FPM runtime functionality to interact and behave like standard content.

 As a general application framework, FPM provides navigation and messaging features to interact across application borders and content blocks. These features are completely tool supported and can be used by application experts and developers.

 This article describes how to implement freestyle UIBBs completely from scratch. In addition, we introduce the concepts of navigation and messaging, illustrated by examples.

Freestyle UIBBs — Basic Concept

With its variety of generic UIBBS (GUIBBs) for the most common UI templates, the FPM covers most of the typical content types required by ERP applications. Besides the known generic templates, there are further customer user interface (UI) requirements with unique backgrounds that follow their own logic. For example, see Figure 1, which shows the ERP application of the Leave Request. As an FPM application it includes calendar control as freestyle content in addition to the Leave Request form.

Figure 1

FPM application with freestyle content

In order to build applications with highly specific content, the FPM has the capability to deal with non-generic content as freestyle UIBBs. FPM applications can be assembled from a combination of generic and freestyle UIBBs or solely from freestyle content.

Freestyle UIBBs are embedded in the FPM phase model like any other UIBB, as outlined in Figure 7 of the article “Easily Configure SAP Web Dynpro Screens with Floorplan Manager” (https://sapinsider.org/IT/Articles/Easily-Configure-SAP-Web-Dynpro-Screens-with-Floorplan-Manager?id=EFA5DDD15FDB4051ABB76D274D9A3583). The phase model represents the runtime loop processed by all UIBBs that are part of the FPM application. By implementing the corresponding interface IF_FPM_UI_BUILDING_BLOCK, each WebDynpro component can act as a freestyle UIBB. Table 1 summarizes all methods of the interface IF_FPM_UI_BUILDING_BLOCK and their typical implementation.

Table 1

Methods of interface IF_FPM_UI_BUILDING_BLOCK and their uses

With the option to implement the interface, IF_FPM_UI_BUILDING_BLOCK along with any specific application for WebDynpro component, can be enriched to be a UIBB in FPM.  Thus, skilled experts can be equipped to bring their own specific content as freestyle UIBBs into an FPM application.

Freestyle UIBBs – Application Example

This article demonstrates how to create a complete new application and enable a WebDynpro component to act as an UIBB and add it to the newly created application.

FPM provides a separate Application Creation Tool (ACT). You find it in the FPM package APB_FPM_CONF as an application configuration with the name FPM_CFG_BO_MODEL_ACT. Figure 2 shows the configured package in the SAP Developer Workbench. Start the SAP Developer Workbench by opening the context menu, clicking the Test option, and starting transaction SE80.  

Figure 2

Developer Workbench with view to the FPM ACT

After the ACT has been launched, enter the name of the application and the configuration, and then select the Floor Plan type. In this example, you use the Overview Page Floorplan (OVP) with the parameters depicted in Figure 3.

Figure 3

View of the input parameters for creating a new application via ACT

Click the Next button in the ACT to navigate to the second step, where you can choose the package to store your data. The example uses the local workspace that is predefined in the second step. Save the configuration of the newly created FPM application.

The next step is to create a UIBB that embeds an existing WebDynpro view. To demonstrate some Web Dynpro features, this article shows you how to embed a Web Dynpro view that includes an “HTML Island,” demonstrating some HTML5 capabilities. Figure 4 shows the application with the freestyle UIBB included. The NY picture background behind the standard table demonstrates the state-of–the-art features available in WebDynpro when using FPM.

Figure 4

The FPM application with HTML Island, as seen in Outlook

To build a UIBB, first create a new WebDynpro component with the ABAP Workbench. Choose WebDynpro Comp./Intf. from the Repository Browser, add a new name, and press Enter. This step is shown in Figure 5. You can keep the predefined standard values. For our purpose, it is sufficient to use the local workspace $TMP before you activate the newly created content. $TMP is the local workspace in an SAP system where each user can store development objects that should not be transported. It can also be accessed by clicking the Local Object button in the package selection.

Figure 5

Create a new WebDynpro component in the Workbench

After creating the WebDynpro component, implement the interface IF_FPM_UI_BUILDING_BLOCK to enable the component to act as a UIBB within the FPM application. For this step, add the interface name to the component tab sheet Implemented Interfaces, as shown in Figure 6. Click the Save icon in the toolbar of the developer workbench or press CTRL+S to make the changes permanent. To create the empty bodies for each interface method, click the Reimplement button next to the interface name. The Reimplement button does not activate changes.

Figure 6

Add the interface IF_FPM_UI_BUILDING_BLOCK to the component

Having created a UIBB, add it to the FPM application. To do so, go back to the configuration. If you have created your configuration under your local workspace, you can navigate to it as shown in Figure 7. From the initial configuration screen, navigate to the Change Component screen.

Figure 7

Starting the FPM configuration

Click the Start Configurator button on the Configuration screen. Then click the active link with the name of the component configuration to reach the Application Configuration screen. In Figure 8 you can see the highlighted active link with the configuration name as it was previously defined in the ACT.

Figure 8

View of the Application Configuration with link to the component configuration

You can define the complete Floor Plan assembly from the Application Configuration screen and set up all the essential parameters. For the example, add the newly created Freestyle UIBB. In this context, you need to add a new UIBB of the type Freestyle Component to the Floor Plan section, as seen in Figure 9. You can use the input help of the fields for the component and for the window name. The example name for this article is ZTF_HTML_ISLAND for the WebDynpro component and for the window. You can also enter the names you have used for your component before.

Figure 9

Add a Freestyle UI Building Block to the Floor Plan configuration

You have almost completed the setup of a custom FPM application with a self-created UIBB. Starting the application with the current content, as seen in Figure 10, shows a completely empty FPM application, since we have not added any UI content to the WebDynpro view of the freestyle component.

Figure 10

Start the new created Floor Plan Manager application

We will use a view that demonstrates the feature called HTML Island. With this feature WebDynpro offers the possibility to add HTML5 content to common WebDynpro views in a programmatic way. More information about how to integrate HTML5 content in Web Dynpro applications can be found at: https://scn.sap.com/community/web-dynpro-abap/blog/2012/12/05/html5-islands-how-to-integrate-html5-into-your-web-dynpro-abap-applications.

Find the WebDynpro view for copying under the WebDynpro component WDR_TEST_HTML_ELEMENT, which is available in SAP’s standard shipment. From the Workbench, choose the view HC with the option Copy from the context menu, as shown in Figure 11.

Figure 11

Workbench dialog to copy the WebDynpro view

Specify your target component (e.g. ZTF_HTML_ISLAND) to copy the selected view to the particular component. Before you can activate your newly copied view within your component, you need to comment the code in the method WDDOMODIFYVIEW (as shown in Figure 12.)

Figure 12

Comment the available code in view method WDDOMODIFYVIEW

Activate your new view and replace the predefined view Main with it as the standard view under the WebDynpro Window, as shown in Figure 13. Add your view to the Window via drag and drop. After that, delete the view Main, as you do not need it any longer. Do not forget to activate the Window via CTRL + F3 when you have finished replacing the view.

Figure 13

Exchange the copied view with the Main view within the Window

As a final step, copy the related HTML resources that are necessary to bring some life to the HTML Island. To do so, you need to download all MIME resources under WebDynpro component WDR_TEST_HTML_ELEMENT to a local folder. Find it under the folder MIMEs, as seen in Figure 14. This is a manual step that needs to be done for all 10 resources separately.

Figure 14

Download the MIMEs required for active HTML5 content

After downloading the MIME content to a local folder, you upload it to your WebDynpro component. This step has to be executed manually. Select your own WebDynpro component and choose the context menu path, as shown in Figure 15.

Figure 15

Import the MIME objects to your own WebDynpro component

This import procedure needs to be triggered for all the 10 MIME objects individually.

Restart the FPM application from Figure 10. You see an internal server error message about a false browser mode. To manage this issue, tell the application to use the latest rendering engine. This is necessary to work with HTML islands. This information can be passed on with the URL parameter sap-ie=EDGE and can be added directly to the URL used in your browser. So the browser URL is concatenated as follows: https://your_server_id/sap/bc/webdynpro/sap/your_app_name?sap-language=EN&sap-wd-configId=your_config_name&sap-ie=EDGE. If you include the URL parameter for the latest SAP-theme (sap-theme=sap_corbu), the application renders as reflected in Figure 16.

Figure 16

FPM application with a Freestyle UIBB

To place the island image in the background of the application, place the mouse pointer over the Script field to trigger the replacement of the background picture with the Island, as shown in Figure 4. As a developer, you can use this new application as a starting point to learn WebDynpro and become more familiar with new features such as HTML Islands.

The following two sections introduce the FPM features for navigation and message handling.

Navigation

Navigation is one of the central aspects that needs to be covered by an application to allow the initiation of process chains when one application starts other related applications. FPM provides all the necessary functions to manage navigation tasks.

Start with the launchpad. The launchpad customizing is accessible via transaction LPD_CUST. This transaction offers a table view of all available launchpads. To create your own launchpad, click the New Launchpad button and enter the values shown in Figure 17.

Figure 17

Create a new launchpad

The smallest entity that can be customized in the launchpad is the application. Set different parameters according to the type of application. Applications can be grouped via folders. The depth of the folder structure on the left in Figure 18 is limited to two. Define your application link as a WebDynpro ABAP application with the parameters outlined in Figure 18.

Figure 18

The Folder structure and the application

Create a new application based on FPM_OVP_COMPONENT. You can do this with the ACT as outlined earlier. Call the application ZTF_LAUNCHPAD and the corresponding application configuration ZTF_LAUNCHPAD_CONFIGURATION (Figure 19). For information about the UIBB configuration refer to “Learn How to Use New Generic UI Building Blocks in the Floorplan Manager” (https://sapinsider.org/IT/Articles/Learn-How-to-Use-New-Generic-UI-Building-Blocks-in-the-Floorplan-Manager?id=84071120C7E34C26BF86DE65A656796E).

Figure 19

Application configuration for the launchpad application

Because you are embedding a launchpad UIBB (FPM_LAUNCHPAD_UIBB) into your Overview Page application, you need to configure the launchpad UIBB as depicted in Figure 20. Call your configuration ZTF_LAUNCHPAD_UIBB_CONFIGURATION and enter the role and instance combination you created.

Figure 20

The Launchpad UIBB configuration for the Island application

Each launchpad UIBB has four different views:

• Map
• Directory
• Index
• Tree

The Map view is shown by default. The others can be reached by clicking the corresponding button on the Home screen. The Map view reserves a screen area for the first hierarchy level on the home screen, along with a description and applications flagged to be shown as quick links.

Clicking one of the areas displays a detail screen for that area, showing the second hierarchy level as individual areas and all the applications defined. To facilitate the navigation to the detail screen, your application needs a second page of type Edit Page with the Window LPD_AREA_WINDOW. The Page IDs are CONTENTAREA_1 and CONTENTAREA_2 (Figure 21).

Figure 21

The component configuration of the “Detail Area” page

The Directory view also shows the first level as areas on the home screen, but displays the second level as drop-down list boxes where the applications can be accessed. The Index view shows all applications alphabetically and offers a search field to look for a specific application. The Tree view shows the hierarchy in a tree structure.

To enable switching between the views in our application, add four buttons to the toolbar area. You can add the buttons by right-clicking the toolbar section of the main page and selecting Add Toolbar Element. This triggers the corresponding FPM events: FPM_EVENT_LPD_MAP_VIEW, FPM_EVENT_LPD_DIR_VIEW, FPM_EVENT_LPD_IND_VIEW and FPM_EVENT_LPD_TREE_VIEW.

The four buttons are not essential for the application to work, but they let the user switch between the different views. Now you can access the application via a custom-built launchpad application. (Figure 22)

Figure 22

A launchpad to start the Island application

FPM offers a programmatic interface to allow developers to implement external navigation manually. Next, you can enhance your WebDynpro view and include an easy piece of code to initiate a navigation event to start another application.

As a first step, add a UI Control of type LinkToAction to your view. To do so, start the context menu of the ROOTUIELEMENTCONTAINER and choose the Insert Element option, as shown in Figure 23. You can add text for the UI Element (for example, Start Navigation) and create a new action event with an action handler. An action handler is a method that is invoked when the action is executed. This example uses an action handler with the name ONACTIONSTARTNAVIGATION. 

Figure 23

Add a UI element to the root Container

Implement the interface IF_FPM_NAVIGATE_TO in your newly created method, ONACTIONSTARTNAVIGATION, to provide the information for starting another application. An object of this interface type can be accessed directly from the method GET_NAVIGATE_TO, which is available in the global FPM variable LR_FPM, as shown in Figure 24.

The example code triggers another WebDynpro application – in particular, the application that offers a launchpad for generic navigation similar to the one you created earlier. The implementation of the method ONACTIONSTARTNAVIGATION in Figure 24 shows the code that needs to be inserted for this specific navigation case.

Figure 24

Implement a specific navigation task through interface IF_FPM_NAVIGATE_TO

After you have implemented and activated the new method, you can run the application again. Through the latest application feature, you can now find your action link. Click the Start Navigation button to start the test application with the GUIBB for the launchpad. Figure 25 highlights the link that you can find on the bottom part of your screen.

Figure 25

The action link to start navigation

Message Handling

It is essential for most ERP applications to handle messages. As a complete framework, FPM offers this functionality out-of-the-box. Every application can easily get access to the global message manager class, which allows adding, updating, and clearing of messages.

As opposed to exceptions, applications are using messages in situations in which the program continues to run. The user should be informed in one of three ways:

• Success messages
• Error messages
• Warning messages

The sample application brings up an error message that prevents navigation if you cannot see the HTML Island features. Extend your coding in method ONACTIONSTARTNAVIGATION and include a check to validate if the navigation will be used directly. This increments a global integer variable with each click on the active link for the navigation. First, add the necessary variable to the WebDynpro view, as shown in Figure 26.

Figure 26

Add a variable for counting to the WebDynpro view

You need to adjust the coding from Figure 24 to ensure that the message manager is used when the Navigation Link is clicked. Bring up an error message through the message manager object MO_MESSAGE_MANAGER. It can be accessed directly from the global FPM variable LR_FPM, as shown in Figure 27.

Figure 27

Implement an action for showing an error message

Figure 28 shows the output of the error message on top of the navigation screen within the message region. By default, all messages are displayed in the message region. The message region can be customized for each application individually in the General Settings of the Configuration Editor.

Figure 28

Output of the error message using the message manager

The message manager interface IF_FPM_MESSAGE_MANAGER offers some more methods to add and delete messages as described in Table 2. The Message Manager is capable of dealing with various sources of messages directly.

Table 2

Methods of interface IF_FPM_MESSAGE_MANAGER and their uses

Many SAP standard applications work with messages from table T100. This table is the central location for storing messages in ABAP. For more information about messages in the ABAP workbench, refer to “Maintaining Messages” (https://help.sap.com/saphelp_nw04/helpdata/en/d1/801b3e454211d189710000e8322d00/frameset.htm). It is very easy to integrate these messages, for instance after calling a function module that returns an error. If filled, the system message parameters can be passed on to the Message Manager directly. Otherwise, you can raise a specific message from table T100.

Kay Eidner

Kay Eidner graduated in economics and computer science at the University of Technology in Magdeburg. He has worked with and at SAP AG since 2000. He is currently working on IMS Development for SAP ERP HCM. His diverse areas of expertise include Java, ABAP, mobile technology, applications such as ESS, MSS, and DFPS, and several other focus areas in the context of SAP technology.

You may contact the author at .

If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.

Thomas Frambach

Thomas Frambach graduated in engineering and computer science at the University of Applied Science HTW Berlin. He has worked as a developer for SAP AG in Walldorf, Germany since 2004. As member of the FPM development team, he was responsible for the implementation of Floorplans. Currently, he is working on IMS Development for SAP ERP HCM with a focus on Talent Management.

You may contact the author at thomas.frambach@sap.com.

If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.