Floor plan manager

There are two factors : 1. UI guidelines Normally Client uses many application some of them developed in the webdynpro for JAVA , some in Webdynpro for ABAP and some in CRM etc..etcClient will be seeing all different types of layout , To avoid this UI guidelines are prepared .Which helps developer to develop unified UI like: Button position ,Use of standard buttons like SAVE , EDIT , CLOSE on most of the screen. Second thing is UI accessibility : To make a business application available to those users who are dependent on technical support of various kinds due to disability like blind persons.(Example : when you assign label to input field in webdynpro for abap ,when user uses tab key to come on that field , system will read the field name for user so he/she can enter proper values in it) Combining these two concepts we got Floor plan manager to give unified look and feel. There are major three kind of FPM application you can create. OIF : Object instance floor plan (QAF : Quick Activity Floor plan ,is younger bro of OIF ) GAF: Guided activity floor plan

All these are used for developing different types of application. Lets say you want to develop a big application which provides the details of various areas with tabstrip control something like :

You can very well achieve this using Webdynpro for abap using tabstrip UI element , But FPMs OIF makes it Eassssssyyyyyyyy

FPM is nothing but a floor where you keep your webdynpro for abap components and combine them to make a unified UI application. To allow Webdynpro for abap component to participate in the FPM building it must implement the IF_FPM_UI_BUILDING_BLOCK interface.

So lets create a simple OIF application to Display two section with material and plant.Inside the material Section : material Detail, Important info . Incase of plant section will display plant and important info.

1. 2. 3. 4.

One Webdynpro component for material section with two views: ( one for material Display , one for important info ) One Webdynpro component for plant section with two views ( One for plant Display , One for important info ) Component configuration: which will combine the above two components to display it in tab strip style. Application configuration to execute the above component configuration.

Step 1.1: Create A simple Webdynpro for ABAP Component and put IF_FPM_UI_BUILDING_BLOCK interface and re-Implement it.

Step 1.2 Go to component controller and create a node ND_MARA for MARA and add the fields from the structure. To pre-fill the value into this node will use the supply function.( you can create the supply function by entering the name into Component controllers Context, node attribute ) Below screenshot shows the code which you can use inside your supply function.

** data declaration DATA ls_nd_mara TYPE wd_this->Element_nd_mara. ** @TODO compute values select single * from mara into CORRESPONDING FIELDS OF ls_nd_mara. ** bind a single element node->bind_structure( new_item = ls_nd_mara set_initial_elements = abap_true ).

Now: Drag that ND_MARA Node to the main View.

Go to Layout and create 3-4 input fields and label for the same Displaying material , Creation Date , Created By and etc..and map them with the node fields.

Step 1.3 Create one more view (VI_IMPINFO_MAT ) , which will be used to Display the Important info .Here I have used a simple Caption UI element.

Create a Window ( WI_IMPINFO_MAT ) and include the created view ( VI_IMPINFO_MAT )inside this.SO now you can see two views and two windows in your webdynpro for abap component. We need to keep all the views in the separate window which u want to include in FPM because u cant include views directly in the FPM. Save and Activate All.

Step 2.1 : Same way will create one more webdynpro component ZFPM_OIF_TUTORIAL2 for plant section. Repeat the same steps from 1.1 to 1.3 Crating Plant Section and two views , Two windows .Use table T001W for the plant. Supply function:

** data declaration DATA ls_nd_plant TYPE wd_this->Element_nd_plant. ** Get the Values Select single * from t001w into CORRESPONDING FIELDS OF ls_nd_plant. ** bind a single element node->bind_structure( new_item = ls_nd_plant set_initial_elements = abap_true ).

This is how your second webdynpro component will look like same as first one.

So till now we are done with the creation of two separate webdynpro for abap components .now its the time to make these two components together. Will use component configuration and application configuration for that. Step 3.1

From this step onwards floor plan mangers work starts. We have different types of standard component available to create various look and feel .Here we are looking to create something related to tab strip. So here we can use OIF concept. Go to SE80 open webdynpro component FPM_OIF_COMPONENT and create an Application named: ZFPM_OIF_DEMOAPP1

Save it and refresh the Object using refresh icon.You can see your application. Right Click on the Application you have created and select Select/change Configuration

It will open up internet window where you can provide the application configuration ID. ZFPM_OIF_DEMOAPP1_APC01

Click on create Button, SAVE it on Local Object. Step 3.2 When you save it, It will ask for the component configuration as in the below screen shot. Provide the name as: ZFPM_OIF_DEMOAPP1_CC01.

Explanation: what the above step will do it ? It will map the component configuration ZFPM_OIF_DEMOAPP1_CC01 with the current application configuration. If you see the second line in component Usage, IDR_USAGE. Its used for the Top banner.Called Identification region. Check out the article Tutorial on IDR usage to develop header To know about IDR_USAGE.

Now click on the Button Go to Component Configuration (if you cant see It active press ENTER) It will open up a new window with pre-fill value. Click on the Create button to create Component configuration.

Step 4.1 You should see the below screen if you dont Please stop chatting with your girl friend and concentrate here .

In component configuration we have something called main View and SubView. So here for our application will create two Main Views (Material Section, Plant Section) Now for each Main View we want to display two information (Material Display, Important Info for material) .Each Main View will contain two sub Views. You can use the side bar buttons to create Main and sub view.

Same is the case with Plant Section: Use the ADD main view button to add one more MAIN view and rename it as showed it in below screenshot.( PLANT_SEC ) Main View ID is just for reference and for dynamic changes. Right now you can give any name to it. I gave MATERIAL_SEC and PLANT_SEC . Now Lets Add Subview to the Main View: Material Section. You might be seeing a Default Subview available, you can rename it as ID : MAT_DISPLAYName : Material display

Now here is the important step: Click on the attribute button and put your webdynpro component and Window of that component which you want to display under Material Section Main View. Note: Make sure your webdynpro component is Active and it reimplent the interface IF_FPM_UI_BUILDING_BLOCK ( Step 1.1 )

Add one more Subview using the ADD subview button, Add another window inside it. And in the attribute component: ZFPM_OIF_TUTORIAL1 and View : WI_IMPINFO_MAT .

Step 4.2 Same repeat with the Second Main view , Renaming the default subview and adding one more subview. Add the second webdynpro component and its Windows . In last it will looks like as below :

Step 4.3 SAVE the component configuration .Save the Application configuration and use the TEST Button on the application configuration to test the application.Or Go to Se80 open the application configuration you created and execute it. NOTE : you need to run application configuration not the application.

Logical easy to follow step by step guide to creating your first Floor plan manager application
My initial impression of floor plan manager was that standard FPM ABAP Web Dynpros provided by SAP such as ESS/MSS (fite_vc*) are really good and provide a standard way of not only delivering functionality but also via the fpm enhancements an easy, semi robust and consistent way of enhancing them. I will go into this a bit more in a separate topic. As for creating a new Web Dynpro application from scratch using FPM, at first I was not so sure it was worth it. Nothing about creating one seemed straightforward, there didnt seem to be any massive advantage and it seemed to be a different way of doing things to standard ABAP Web Dynpro. This is not the case and once you get you head around them they essentially provide a wrapper of standard customizable functionality which you can wrap around your existing Web Dynpro for ABAP knowledge. If you have already had a go at these you may have found like me that some of the information available gets you create applications and component configurations (dont worry if you dont know what these are) based on SAP WDP components such as FPM_GAF_COMPONENT, FPM_OVP_COMPONENT or FPM_OIF_COMPONENT which then seem to disappear from your SE80 view. You may or may not have realised that thats because there is no link to your ZWDP at this point and you are just creating the FPM wrapper for the application. Anyway I will try and explain this in a way that made sense to me and that I would have found helpful when first learning. First just to touch on the types of FPM you have available to you which implement a set of standard behaviour associated with each type.

WDP Component FPM_OIF_COMPONENT - Object Instance Floorplan WDP Component FPM_GAF_COMPONENT - Guided Activity Floorplan WDP Component FPM_OVP_COMPONENT - Overview Page Floorplan For this example I am going to create an application based on FPM_GAF_COMPONENT which basically creates an application with a number of steps along the top of the page. Something to keep in mind before we get into the nuts and bolts of this, each step can reference a window/view of different WDP applications. Step 1 - Create standard Web Dynpro Window/View First of all create a standard ABAP WDP application based on the hello world example here (http://www.sapdev.co.uk/webapps/webdynpro/wdp_helloworld.htm). Now add a second view and window to the application, I have created VIEW2 and WINDOW2.

Also add a caption or some other element to this second view so it is different to the first. I have just added a caption element with This is the Second View as the text value Now embed this new view into the new window as described in the hello world tutorial.

The final stage is to assign the FPM interface to this WDP component. Within the Implemented interfaces tab of the WDP component add the interface IF_FPM_UI_BUILDING_BLOCK and press enter

Now press the Reimplement button and the traffic light should turn green. Save and Active everything.

This now allows you to use this within a FPM Web Dynpro application but thats it for this standard web dynpro for a while, try and forget about it for now as the next few things are created independently or linked to SAP floor plan manager WDP components rather than this. The link to this comes later and hopefully this distinction will help with understanding. Step 2 Create a GAF component application Using transaction SE80 view the FPM_GAF_COMPONENT Web Dynpro Comp. / Intf.

Right click on the Web Dynpro Application node and click create, also just for info you can also expand this node and see all the application created for this component, z ones will be along the bottom. You never know you may see some you have already created but wasnt sure where they had gone!

Give the new application a name such as zmyfpm_app.

Step 3 Create a GAF application configuration Now find the application you have just created and right click on it and select Create/Change Configuration

You will now be taken to the Flexible User Interface Designer (FLUID) where you will need to enter a Configuration ID such as ZMYFPM_APP_CONFIG and press the create button.

Enter transport details, description and press OK.

You will now see the following screen where you need to enter a name for the two blank configuration entries and press save. You should then get as save message and 2 messages saying the configurations do not exist. This is fine we will create them now.

Step 4 Create GAF component configurations Now its time to create the component configurations which can be done via the FLUID browser. Simply highlight the first GAF_COMPONENT row and press Go to Component Configuration. You will now be presented with the following create screen with all the relevant details filled in. Press create button.

Enter transport details, description and press OK

Next click on the Attributes button to populate the attributes of the default step 1 UIBB. Right this is where you reference back to your actual Web Dynpro component (i.e. ZWDP_HELLOWORLD). The component field is the WDP component name and the view iscan anyone guess?.wrong its the window of the WDP:-). Having said that the view is embedded into the window and the view contains all the fields etc so it does make some kind of sense. Also if you use the dropdown help button it will show you the list of windows within that WDP component.

Press Save and you should get the data successfully saved message.

Step 5 Create GAF component configurations Return to the previous screen within FLUID using the breadcrumb link

Press the test button

You should then see the following screen containing the step from the FPM side of things and the Hello World text from the custom helloworld WDP.

Adding an new step to the basic Floor plan manager application

This guide follows on from the previous one which shows you how to create a floor plan manager application in 4 easy to follow steps. I will now show you how to add more steps to the application.

Step 1 - Goto application configuration page

New steps are added within the application configuration page so once you have created the basic FPM applicationsimply return to the Application configuration page within the FLUID (Flexible User Interface Designer)

If you nolonger have this open, via SE80 find the application you created previously(within FPM_GAF_COMPONENT WDP component), right click on it and select "Create/Change Configuration"

Within the FLUID Press change

Select the FPM_GAF_COMPONENT and press Go to Component Configuration

Step 2 Add Second tab to your GAF based FPM application Once within the component configuration click the Add Main Step button, a new step will then be added instantly to the application.

If you saved it now you would get an error as each step must be assigned a WDP component and View/Window

Click on the Attributes button within the new step and add your WDP component and View details. Reference the second View/Window that you created earlier.

Save the configuration and you should get the data saved successfully message

Step 3 Test your GAF based FPM application Return to the previous screen within FLUID using the breadcrumb link

Press the test button

You should then see the following screen containing the steps from the FPM side of things and the differnt text values from the custom helloworld WDP views/Windows depending on which step you are in.

Before starting Floor plan manager let us have a little recall on what exactly a webdynpro application as it got something to do with the floor plan manager. Webdynpro Application: A webdynpro application is an application that can be called by the user from the browser using the URL generated for a webdynpro application. It is an independent program that connects the URL which can be accessed by the user to the Window of the webdynpro component.

Technically the webdynpro application is connected to the interface view of the window by an inbound plug and it does not contain any corresponding information about any elements of the corresponding component. It just act as the carrier of the webdynpro component and triggers the execution of the component when the URL is being called. Note: Inbound plug of the window has to be of type start up plug. Coming to the topic what a floor plan manager is and how it is related to an webdynpro application as mentioned earlier, the explanation is as below. Floor Plan Manager:

Floor plan manager is an framework using which we can create and configure the webdynpro applications of the webdynpro abap. Using the configuration editor of the floor plan manager we can combine different application specific view of the different component into a single new floor plan manager application. This floor plan manager application can be integrated into the portal for accessing this component. This is something similar to view where in view we have our application data distributed across different tables and we combine it in a view where as here different components which are required to do a particular functionality are assembled using a FPM application. Advantages of Floor plan manager: 1. This design follows the SAP UI guidelines. 2. User of this application benefits by quicky and easily familarize themselves with the new applications. 3. The integration of Floor plan and GUIBB in the FPM accelerates the creation of UI and ensure that all the UI element behave in a same way. 4. Time consuming user interface programming is greatly reduced by application programming. 5. Simple applications are adjusted by configuring the FPM instead of modifying the webdynpro component. (Reduced development effort). [E.g hiding a view of container in the view.] 6. Any such adjustment made to the application using the configuration editor of the FPM are called modification free changes. 7. FPM Uses the webdynpro adjustment concept. 8. Integration of different webdynpro components in one FPM application. SAP UI guidelines says the use of FPM is preferred instead of Webdynpro application as it increases the consistency of UI elements.

Adjustment concept is nothing but fitting the webdynpro application according to your needs which again classified into implicit and explicit configurations. Role of Floor plan manager:

Floor plans are nothing but a design template for the application that represent the certain task or process where as floor plan manager implements this floor plan to maintain the uniformity across the applications. Some of the Available floor plans for creating and confguring the Applications are: 1. Object instance floorplan(OIF) 2. Guided activity floor plan(GAF) 3. Quick activity floor plan(QAF) 4. Overview page floor plan(OVP) The floor plan manager automatically implements the following areas of the floor plan. 1. Identification area 2. Navigation region 3. Message area 4. Content area Content area: Content area is the areas of FPM where the system displays the application specific view. We can call and change these areas directly using the configuration editor whereas floor plan manager checks whether these changes are leading to any technical errors. Floor plan manager also supports in creating and configuring the application specific view using UIBB. (User interface building blocks). Some UIBBs are: 1. Form component 2. List component 3. Tabbed component 4. Search component 5. Hierarchical list component We have a special configuration editor for configuring these UIBBs. An this configuration editor can be started from the FPM configuration editor. Pre-requisites: Some pre-requisites that the webdynpro application and component should posses in order to be configured by the floor plan manager are as below.

1. The webdynpro application must be assigned to the component of the floor plan or you can directly go and create an application to any one of these components. Some standard floor plan components: 1. FPM_OIF_COMPONENT Object instance floor plan 2. FPM_GAF_COMPONENT Guided activity floor plan 3. FPM_OVP_COMPONENT Overview page floor plan Note: When assigning the webdynpro application to one of the first two components the webdynpro application is also automatically assigned to the FPM_IDR_COMPONENT using which we can configure the identification area of the floor plan. 2. The webdynpro component must have implemented the interface IF_FPM_UI_BUILDING_BLOCK. Configuration editor of floor plan manager:

We can use FPM configuration editor to enhance application to fit the user needs. Navigation region:

The navigation region is divided into two regions. 1. Control region 2. Hierarchy Control region: In this area we select which screen of the webdynpro application you would like to configure. Hierarchy: This area gives the hierarchical display of elements we can configure. Preview: The preview function shows you the user interface of the application. You can use the preview function to navigate within the user interface. However, not every element can be accessed. A selected element is highlighted in color in the hierarchy view and its attributes displayed in the attribute view. Action area The action area contains links to all the actions you can execute for the selected application user interface. The actions that can be selected depend on the concrete configuration of the application. This means that selection of actions can differ within a configuration. Attribute view When you select a configurable user interface element either in the preview or in the hierarchy, the attributes of these user interface elements are displayed in the attribute view. You can change these attributes here. The attributes you can change depend on the user interface element you selected. You can immediately see any changes made in the preview. Message area In this area, potential conflicts in the configuration, such as tabs with the same name, are immediately displayed. Floor plan manager application: A floor plan manager application is an application that calls one of the floor plan. We can use explicit configuration to assign additional webdynpro components as user specific views using UIBBs.Some generic webdynpro components are: FPM_LIST_UIBB List component FPM_FORM_UIBB Form component FPM_TABBED_UIBB Tabbed component So far we have studied what is the floor plan manager, what are its roles and what is floor plan manager application.

difference between NORMAL WEDYNPRO and FPM WEBDYNPRO FPM WEBDYNPRO 1) configure the ui elements 2) rapid access 3) adaptable for users 4) personalization 5) we can add more webdynpro components views through this fpm. 6) user friendly

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. 2. 3. 4.

Create a Web Dynpro Component with the required UIBBs and implement the Web Dynpro interface IF_FPM_UI_BUILDING_BLOCK. Create a Web Dynpro Application and specify parameters according to which floorplan instance you are using. Using the FPM Configuration Editor, create a configuration for the application. 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.

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.

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.

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.