Getting started with Floor Plan Manager (Web Dynpro for ABAP)

By Pranav Nagpal, Infosys 

What is FPM?

Floorplan Manager (FPM) is a Web Dynpro ABAP application that provides a framework for

developing new Web Dynpro ABAP application interfaces consistent with SAP UI guidelines

(Standard definition from SAP doc). You can use the Floorplan Manager Configuration editor to

combine application-specific views of one or more business applications to a new FloorPlan

Manager application. Floorplan manager supports creating and configuring applications with

following floorplans 

Object Instance Floorplan (OIF)

Guided Activity Floorplan (GAF)

Quality Activity Floorplan (QAF)

Using the FPM configuration editor following floorplan areas can be configured:

Identification Region (IDR)

Message Region (MR)

Context Navigation Region (CNR)

Roadmap Element

Getting Started

This BOK will provide you step by step procedure to create a simple FPM application. In this we

will create application with Object Instance Floorplan (OIF). OIF will let you create a tabbed

application; tabs will contain different views from a single or multiple components. 

Below are the steps to create a FPM application.

1. Create a Web Dynpro Component with the required UIBBs and implement the Web

Dynpro interface IF_FPM_UI_BUILDING_BLOCK.

2. Create a Web Dynpro Application and specify parameters according to which floorplan

instance you are using.

3. Using the FPM Configuration Editor, create a configuration for the application.

4. Test your application.

Creating a Web Dynpro Component

Open your SAP workbench and go to transaction SE80. Select Webdynpro component and enter name of new Zcomponent as shown below and press enter. It will popup a confirmation window before proceeding, press yes to create.

Select the implemented interface tab and add an interface IF_FPM_UI_BUILDING_BLOCK and press enter. Following screen will appear with a button Reimplement.

Press the Reimplement button and green icon in the Implementation State column indicates that your component is completely implemented. 

Expand the tree structure of view and double click on main view. Now add a UI element say text view here. Give it text say “Hello”. The screen will look like as shown below.

Now right click on Views and create a new view. It will ask for view name and description. Enter the required info and press enter.

Now in the second view add another text view.

Give any text for text view, say Welcome to world of FPM. Now right click on Windows and create a new Window. Give the name for new window and save it.

In the newly created window embed the second view, which you have created above. Right click on window name as shown below and select embed view.

Click here to continue...

Give View name using F4 help and component name will come automatically. Refer the screen below.

See the screen shot below, now window would look like this with a new view embedded in it.

Activate the component.

Creating the Webdynpro Application

Right click on component name and create a new Web Dynpro application as shown below.

Enter the following information.

         Component: FPM_OIF_COMPONENT / FPM_GAF_COMPONENT

         Interface View: FPM_WINDOW

         Plug Name: Default

See the screen below for more information. After filling the required details press save button.

Select the local objects created for your login Id or your package in which you are working. As shown below.  

Expand the Webdynpro tree and webdynpro application and search for the application created in above step. Now right click on the application name and select Create/Change Configuration.

Browser will open a new application which will provide the frame work to configure our application. See the screen below for more details.

Create a configuration using FPM Configuration Editor

Give any Z-Configuration ID and click on button Create.

Click here to continue...

Browser will navigate to following screen. Fill the names in Configuration column.

Click on save button. Message will appear to inform you that the components are saved but the configuration do not actually exist. To create the configuration select the row containing your FPM_OIF_COMPONENT and choose Go to Component Configuration.

In the below screen click on Create button and save in the relevant package.

 The FPM Configuration Editor displays the Component Configuration window for your OIF (or GAF) component, which is divided into following areas.  

Navigation hierarchy Preview Action area 

To add one more view to application click on Add Main View.

In the hierarchy, expand the two Main View nodes and the two Sub view nodes. Note the two UIBB elements, one for each sub view. Choose the UIBB element belonging to the first sub view to display its attributes in the preview. 

Click here to continue...

Set these attributes to your first view of your Web Dynpro component (containing the text ‘Hello’). Enter the Component name (use the input help and search function to find your component). 

Enter the View (once you have entered the component name, the View input help displays the list of views for that component). Select window name containing your Main view for first UIBB.  

Similarly for second main view UIBB select the component and second view. Follow the screen shots shown below.

Your screen will look like this

Click on Save Button. You will see a success message.

 Testing application

Go back to your SAP screen and refresh your package. You will see that configuration has been created for your application. Expand the configuration tree and test the configuration you have created. To test right click on the configuration name select Test as shown below.

You will see application in separate browser with two tabs. See the screens below.