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.

clip_image002

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.

clip_image004

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

clip_image006

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.

clip_image008

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

clip_image010

 

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

clip_image012

 

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.

clip_image013

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

clip_image015

 

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

clip_image017

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

clip_image019

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

clip_image020

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

clip_image022

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

clip_image023

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

clip_image025

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.

clip_image026

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

clip_image028

 

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

clip_image029

 

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

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

clip_image031

 

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

clip_image033

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.

clip_image035

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

clip_image037

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.

clip_image039

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

clip_image040

 

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

clip_image042

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

clip_image044

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.

clip_image046

 

Output:

Main view 1

clip_image047

Main view 2

clip_image048

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.