Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Object instance floor plan

The following post explains the creation of simple floor plan manager application using OIF (Object instance floor plan).

Scenario: Executing a component using the Floor plan manager application. We will create a webdynpro component with two view and two windows with each view assigned to one window and we will display it using the OIF floor plan.

Standard component for OIF:  FPM_OIF_COMPONENT.

Any floor plan manager application usually consists of two different components.

1.      Floor plan specific component (FPM_OIF_COMPONENT or FPM_GAF_COMPONENT).

2.      Component for header area. (FPM_IDR_COMPONENT) [Not available for OVP]


Step 1: Go to the Tcode SE80 and create the webdynpro component as shown below.


Assign the component to the package or save it in the local object.

Step 2: In the implemented interfaces tab of the webdynpro component implement the interface (IF_FPM_UI_BUILDING_BLOCK) for the fpm which is essential for the component to participate in the FPM event.

Enter the interface name and press enter.


Click on the Re-implement button to implement the interface.


Once the interface has been implemented you can see the indicator turning into green. The methods of the interface can now be found in the methods tab of the component controller.

In this example we are just going to display the view using FPM configuration and hence there is no need to code in the methods. We will see how to use those methods in the later posts.

Step 3: Go to the layout tab of the view controller and Insert a text view UI element as shown below.


Provide the ID and type for the UI element and press enter.



Enter the Text “First View” in the text property of the Text View UI element.



Step 4: By default the view created at the time of creation of component will be embedded in the window created at the time of component. Now let us create one more view and embed it in a new window.

Right click on the view controller and choose create.


Provide the name and description for the view and press Enter.



In the layout tab of the view created add a text view UI element as done before in the first view.


Add the Text property of the text view as “Second View”.


Step 5: Create a window and embed the second view into that embed. Right click on the window and choose create.


Provide the name and description for the window and press enter.


Right click on the window and select embed view to add the view to the window.


Choose the view to be embedded as the second view and press enter.


Save and activate the whole component.

Step 6: Create an application and assign it to the component for the floor plan or directly create an application for the floor plan component FPM_OIF_COMPONENT.


Provide the component, interface view and plug name as shown below.



Step 7: Go to the Component FPM_OIF_COMPONENT and expand the application and select the application you have created.



Browser will open for the configuration editor of the floor plan.

Enter the configuration name for the FPM and click on create.



Assign the configuration to the package or save it in the local object.


Configuration for OIF will be created successfully. And as mentioned in the top we can see any FPM application will consist of two application specific components. Not applicable for OVP.

Enter the name for the configuration of component FPM_OIF_COMPONENT and press enter you will see the go to component configuration button becomes enabled.


You will get an error configuration does not exists. Click on the create button.


Assign this configuration to the package or save it in the local object.

Component configuration will be created. Expand the node main view on the left hand side in the navigation bar and choose the UIBB.


Select add main view in the right hand side tool bar.



In a same way as above expand the node main view2 and add the component and second view.


If you want to change the name of the main view you can change it using the attributes.


Save the configuration and test the configuration. You may get some default button of the FPM which we can disable it or delete it later. Now let’s test the configuration.




Main view 1


Main view 2



About Arun


Post a Comment

Powered by Blogger.