FLOOR PLAN MANAGER:-

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.

Integration

Floorplan Manager is a Web Dynpro ABAP application that is integrated into

the Web Dynpro ABAP development environment.

ADVANTAGES:-

 The design of all cross-application components of a user interface is

defined by Floorplan Manager.
 The design follows the SAP user interface design guidelines.
 Users of such applications benefit from a high level of recognition,
which enables them to quickly and easily familiarize themselves
with new applications.
 The integration of design templates such as floorplans and generic
user interface building blocks into Floorplan Manager accelerates
the creation of user interfaces and also ensures that the user
interfaces behave the same way in all applications.
 Time-consuming user interface programming is greatly reduced for
application programming.
 Simple applications are adjusted by configuring the underlying Web
Dynpro components and not by additional programming.
 Adjustments that you make to the user interfaces of applications
using the Floorplan Manager configuration editor are modification-
free changes.
 Floorplan Manager uses the Web Dynpro adjustment concept.
Floorplan manager supports creating and configuring User Interfaces with
following floorplans.

FLOOR PLAN TYPES

1.) Object Instance Floor Plan(OIF)

2.) Guided Activity Floor Plan(GAF)

3.) Quality Activity Floor Plan(QAF)

4.) Over View Floor Plan(OVP)

USING FPM the following FLOOR plans can be configured

IDR-> identification Regioon

MR-> Message Region

CNR-> Context Navigation Region

RE-> Road Map element / also called Content area

UIBB:- User Inter Face Building Blocks

Floorplan Manager supports you in creating and configuring

application-specific views with the following user interface building
blocks:

You have specific configuration editors available for configuring these user
interface building blocks. You can start From FPM prospective UIBB’s are
interface views that are provided by FPM application.

1.) Form component

2.) List component
3.) Tabbed component
4.) Search component
5.) Hierarchical list component
Important points to remember while implementing FPM:-

Web Dynpro applications and Web Dynpro components must fulfill the
following requirements for Floorplan Manager to be able to edit them:

1.) The Web Dynpro application is either assigned the Web Dynpro
component FPM_OIF_COMPONENT (Object Instance Floorplan
and Quick ActivityFloorplan), FPM_GAF_COMPONENT (Guided
Activity Floorplan), or FPM_OVP_COMPONENT (Overview Page
Floorplan).

NOTE:- With the assignment of one of these two Web Dynpro components,
the Web Dynpro application is automatically assigned the
FPM_IDR_COMPONENT Web Dynpro component through which the
identification region (IDR) of the chosen floorplan can be configured within
Floorplan Manager.

2.) In order the FPM frame work recognizes a UIBB the web dynpro
component that provides the UIBB must implement the
IF_FPM_UI_BUILDING_BLOCK webdynpro user interface .

This interface makes sure that the webdynpro application takes part in the
FPM EVENT LOOP.
 1.) CONFIGURATION EDITOR:

The form configure editor consist of the following areas

Message area:- In this region the potential conflicts in the configuration

such as tabs with same names etc are immediately displayed.

Navigation region:- This region is divided into following sub regions

i.) control area- In this area, you select which screens you would
like to configure for the selected Web Dynpro application. You can
choose whether you want to see theinitial screen, the main views
of an application variant, a dialog box, an error page, or the
confirmation screens in the preview of the selected application.
ii.) Variants- In this area, you can use the Change or Display
buttons to display or configure the application's global settings
and variant parameters.
iii.) Hirerarchy- This region gives you a hierarchical display of the
elements you can configure. The elements you can configure
depends on the current configuration of the application. The
hierarchy shows elements on the screen that you have selected.

PREVIEW area:- 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 in this area, you can
use the Change or Display buttons to display or configure the application's
global settings and variant parameters.

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
Form Component Editor for Floorplan Manager
You use the form editor to adjust a form within an application to your
specific business requirements. This is done by configuring form components

Features

The form editor consists of the following work areas:

Preview

In the preview, the system displays all form elements from the current
configuration to give you a picture of the layout of the form.

Hierarchy

The system displays all form elements (groups, melting groups, and
elements) in the hierarchy.

Attribute view

Attributes of the currently selected form element that can be changed using
the form editor are displayed in the attribute view.

Action area

The action area contains links to all the actions you can execute for the form
component. Which actions can be selected depends on the concrete
configuration of the form. This means that it can differ within a
configuration.

The form editor provides you with the following actions:

Add Group

Add Melting Group

Edit Feeder Class

Edit Parameters

Configure Toolbar

Configure Group
The form editor provides you with the following functions for editing a group:

Add Group Element You can select a field from the field catalog. Fields are
configured in more detail by changing the group element attributes.

Change Group Element Attributes The display type, visibility of the label,
label text, and index can be changed. Any other group element attributes
that can be changed depend on the display type.

Delete Group Element The form editor provides you with the following
functions for editing a toolbar:

Add Button

Change Button

Delete Button

You can use the Check Mandatory Fields checkbox to determine whether the
system checks that all mandatory fields have entries. If not all of the
mandatory fields have entries and, for example, the user tries to leave the
form, the system generates an error message.

The form editor provides you with the following functions for editing a group:

Change Group Attributes

The group name, group type, and index can be changed.

Add New Group

Add Melting Group

Add Element

STEPS to implement FPM

Step1:- Create an Web Dynpro component with the required UIBB and
implement the webdynpro interface IF_FPM_UI_BUILDING_BLOCK.

Step2:- Create a Web dynpro Application and specify parameters according

to which floor plan instance you are using.

Step3:- Using the FPM Configuration editor create the configuration for the
application.

Step4 :- Test your application

EXAMPLE FOR OIF:-

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 interfaceIF_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.
Example for Object Instance FLOOR Plan

Step 1 : Create Webdynpro Component

Step 2 : Assign implemented interfaces Name: IF_FPM_UI_BUILDING_BLOCK and Reimplement it

Step 3 : Create Context VIEW1 & VIEW2

Step 4 : Create context node for VIEW1
Step 5 : Design VIEW1 as shown below
Step 6 : Create node for VIEW2
Step 7 : Design VIEW1 as shown below

Step 8 : Add VIEW1 to window ZFPM_OIF_EXAMPLE

Step 9 : Add one more window ZFPM_OIF_EXAMPLE1 and embed VIEW2.

Step 10 : Create WD Application by filling

Component : FPM_OIF_COMPONENT

Interface View : FPM_WINDOW

Plug Name : DEFAULT

And save it in your Package.

Step 11 : Activate WD Component

Step 12 : Now go to your package and navigate to the WD Application

Right Click on your WD Application and CREATE CONFIGURATION

It will open the FPM Configuration Editor in Internet Explorer

Step 13 : Create a Configuration by selecting CREATE link

Step 14 : Step Create a OIF Configuration by giving name and clicking on START NEW
COMPONENT CONFIGURATION

Step 15 : Create ZFPM_OIF Configuration

 Fill ZFPM_OIF in Configuration column

Click on Start New Component Configuration

Step 16 : DISPLAY it and go for CHANGE

Create Variant :
Step 17 : Create Main View
Step 18 : Create another main view
Step 19 : Configure MAINVIEW(Flights ) 's UIBB
Component : WD Component Name

View : Interface View Name ( window name)

Step 20 : Configure MAINVIEW(Customer) 's UIBB

Component : WD Component Name

View : Interface View Name ( window name)

Save and close the window

Step 21 : Create IDR ( Page Header )

Click on Start new configuration

Step 22 : And in new window give title for App and save it

Step 23 : In Changed Configurations : Click on SAVE

Now Test the Application :

Result :
Example for Guided Activity FLOOR Plan

Steps to create a Road Map using FPM (FPM_GAF_COMPONENT)

 Create a Webdynpro Component with a view and a window (view name and window name must be
different).
 Choose the Implemented Interfaces tab

In the first row of the Name column, enter the FPM interface IF_FPM_UI_BUILDING_BLOCK and save
your entry.

In the Action column, click the Reimplement button. The icon in the Implementation State column
indicates that your component is completely implemented.

 Choose Activate.

When you create a component, Webdynpro automatically creates and assigns a Window and a View
to it. You may add further Windows and Views. It is recommended that you add only one View to one
Window.
Create another view and a window. Embed the view inside the window.
 Save and Activate.
You have now created a Webdynpro Component, implemented the required
IF_FPM_UI_BUILDING_BLOCK interface and configured two views (in two separate windows) for your
component.

View1 Layout:

View2 Layout:

Creating a Webdynpro Application

1. In the Object Navigator, right-click your Webdynpro Component and choose Create Webdynpro
Application. In the Create Webdynpro Application dialog box, enter a name for your application and
choose OK. Your new Webdynpro Application appears in the preview.

2. Enter the following information to create a GAF application:

Component: FPM_GAF_COMPONENT

Interface View: FPM_WINDOW

Plug Name: Default

Creating an Application Configuration

1. In the Object Navigator, right-click your new Webdynpro Application and choose Create/Change
Configuration. The FPM Configuration Editor (Editor for the Webdynpro ABAP Application Configuration)
opens in a browser window.

2. Enter a name for your application’s configuration in the Configuration ID field.

Note that configuration names are global you may not use the same configuration name for different
applications.

3. Choose Create. In the Create Configuration dialog box, enter the relevant Package and choose OK.

4. The application configuration window displays your new configuration.

Within your configuration are the following two components:

 FPM_GAF_COMPONENT
 FPM_IDR_COMPONENT
5. You will create configurations for both of these components. In the configuration column, enter names
for both components and click ‘Save’ button. A message appears to inform you that the components
are saved, but that the configurations do not actually exist. You will create a configuration for the
FPM_GAF_COMPONENT now.
6. Select the row containing your FPM_GAF_COMPONENT and click Go to Component Configuration
button.

7. Click Create to configure the component.

8. In the Create Configuration dialog box, choose the relevant Package and choose OK.

9. In the Main Step that comes by default select the UIBB and in the attributes select the component
name and view that needs to be displayed below the main step. In component F4 help you can find your
Webdynpro ABAP components only if your component implements the IF_FPM_UI_BUILDING_BLOCK
interface.
10. To re-name the road map step name select the main step in hierarchy and in attributes enter the new
name for the road map step.

11. To add another road map step click on Add Main Step button and repeat the above step to insert a
view below it.
To insert a new button, click on Add Toolbar Element button and a pop up opens. Select Other
Function button.
In the corresponding Road map step a button gets inserted. You can enter a label for the button and an
FPM event ID. Based on the FPM Event ID we can write logic for the button inside the process_event
method in component controller which gets created when the component implements the
IF_FPM_UI_BUILDING_BLOCK.

Configuring the FPM_IDR_COMPONENT to create Page Header:

There are 2 ways by which you can create configuration for the IDR component
1. We can select the IDR component and click on Go to Component Configuration button and create IDR.

2. You can configure Page header by clicking the Configure IDR button.

Enter the IDR configuration ID and click Create button.

In the Create Configuration dialog box, choose the relevant Package and choose OK.
Enter Road Map in the Application title which is displayed as the page header. Click ‘Save’ button to save
the data.

Select the Webdynpro Application and enter the application configuration name in the application
parameters tab so that the application comes to know its corresponding application configuration

On click on Previous, Next, Submit buttons the method Process_Event( ) in component controller gets
triggered.

Standard buttons like Previous, Next have standard FPM event id (Eg: gc_event_next_step).

For custom button like “Submit” when we create in component configuration we need to enter a FPM
Event ID,

Using the FPM Event ID we can write logic for the submit button.
Output:
Quick help in Floor Plan Manager (FPM) applications

You can use this function in a floorplan to provide application users with a helpful explanation of a
subview, initial screen, main step, or substep at runtime. The quick help is only displayed if the user has
activated it using the context menu.

There are two ways to create quick help:

1. Creating Quick Help as Direct Text

2. Creating Quick Help Linking to a Documentation Object

Creating Quick Help as Direct Text :

1 . Go to the FloorPlan component configuration screen. It may be OIF or GAF or OVP component
configuration screen. Here I am using OIF component.

2 . Click on “Add Explanation” button on the right.

3 . The following screen is displayed where we can add Quick help for SubView in the OIF component.

4 . Enter the help text in ‘Text’ field .

5 . Click ‘Save’ and Test the application.

6 . Right click on anywhere in the application, and from the context menu click ‘Display Quick Help’.
7 . The quick help is displayed on the top.

1 . Go to SE61 to create a Documentation Object.

Select Document Class as ‘General Text’ and language as ‘English’.

2 . Enter a name for Documentation Object and Click on CREATE.

3 . The following screen is displayed, here we can enter the help text.

Save and Activate the Documentation Object.

4 . Go to the FloorPlan component configuration screen, and click on ‘Explanation’ button.

5 . Enter the created Documentation Object in ‘Docu. Object’ field.

6. Save and Test the Application.

7 . Right click on anywhere in the application, and from the context menu click ‘Display Quick Help’.

8 . The Quick Help is displayed on the top.

When to use Direct Help:

 It is local; it cannot be used in multiple applications.

 When the Quick Help is short.

When to use Documentation Object:

 It is Global. When the content of the quick help is used in multiple views or applications.
 When the Quick Help is long.

Implementing Tabbed GUIBB in Floor Plan Manager

1 . Go to SE80 and Create a Web Dynpro Component say ‘YDEMO_TABBED_UIBB’.

2 . Give its default window name as ‘WIN_1’ and view as ‘VIEW_1’.

3 . Double click on component name and go to ‘Implemented Interfaces’ tab and enter

‘IF_FPM_UI_BUILDING_BLOCK’ and press ENTER.

4 . Click Reimplement.

5 . Go to the view ‘VIEW_1’ and create a page header.

6 . Set the title of page header say ‘TAB-1’.

7 . Create a second view and give it a name say ‘VIEW_2’.

8 . In VIEW_2 , create a page header and set its title as ‘TAB-2’.

9 . Create third view and name it as ‘VIEW_3’.

10 . In VIEW_3 create a page header and set its title as ‘TAB-3’.

11 . Now, create a second window and name it as ‘WIN_2’.

12. Create a third window and name it as ‘WIN_3’.

13. Embed ‘ VIEW_1’ in ‘WIN_1’.

14 . Embed ‘VIEW_2’ in ‘WIN_2’.

13 . Embed ‘VIEW_3’ in ‘WIN_3’.

14 . Activate the component.

15 . Create Application .

16 . In the ‘Properties’ tab, enter the values as displayed below.

17 . Now, go to the package where you have created your application , expand the node ‘Web Dynpro’
and expand ‘Web Dynpro Application’ and locate the name of your component, in our case it is
‘YDEMO_TABBED_UIBB’.Right-click on it click ‘Create/Change Configuration’.
18 . The below screen is displayed, where we have to create Application Configuration.

19 . Enter a name in Configuration Id field say ‘YDEMO_TABBED_UIBB_ID’ and click on ‘Create’.

20 . It will ask for package name.

21 . The following screen is displayed where we have to create OIF configuration.

22 . Enter a Configuration Id say ‘YDEMO_TABBED_UIBB_CONF’ and press ENTER and click on ‘Go to
component configuration’.

23 . Click on Create.
24. Enter a package name.

25 . The below screen is displayed, now click on ‘Attributes’.

26 . The below screen is displayed.

27 . Enter the following values in fields.

Component : FPM_TABBED_UIBB

View : TABBED_WINDOW

28 . Now we have to create a configuration for Tabbed UIBB , enter a configuration name say
‘YDEMO_TABBED_UIBB_CC’ in the field Configuration Name and press Enter.And click on ‘Configure
UIBB’.

29 . Click on ‘Create’.
30 . Enter a package name.

31 . The following screen is displayed.

32 . Click on Attributes.
33 . Enter the name of the component we created earlier , in your case it is ‘YDEMO_TABBED_UIBB’ , In
the view click on F4.

34 . Select ‘WIN_1’ and click OK.

35 . Now the screen looks this way.

36 . On the top click on ‘Add Tab’.

37. The below screen is displayed, now click on ‘Attributes’ button.

38 . Enter Component as ‘YDEMO_TABBED_UIBB’ and View as ‘WIN_2’.

39 . Add another tab by clicking on ‘Add Tab’ button and enter component name as
‘YDEMO_TABBED_UIBB’ and view as ‘WIN_3’.
40 . Click on ‘Save’.

41 . Now Test the Application.

43 . Output.
Creating FPM Applications with the ACT

ACT stands for ‘Application Creation Tool’.

It is a Web Dynpro Application provided by SAP to reduce the effort in creating new FPM Applications.

It allows application developers to create FPM applications and their corresponding configurations for all
available floorplans (OIF, GAF, and OVP).

Let’s get started.

Now, we will create OIF Application using ACT.

Starting the ACT:

1. Go to SE80 and open the package ‘APB_FPM_CONF’.

2. Navigate to the Web Dynpro Applications folder in the hierarchy and choose the
FPM_CFG_APPL_CREATION_TOOL Web Dynpro application.
3 . Right-click on it and choose Test from the context menu.

4 . Now , the ACT tool opens in the browser.

In the field ‘Application Name’, you can enter the name of a

 Existing WD Application (or)

 Create a New Application.

5 . Here I will create new Application, say ‘ZDEMO_ACT_FPM’ and give it a description.
6 . You can select the floorplan from the dropdown list, I am selecting OIF floorplan.

7 . Now , in the ‘Proposed Configuration Names’ table, you can enter your own configuration names for
each of Application, Floorplan and Header configurations or you can click on ‘Propose’ button on top.

I am using Propose button here.

In the description column, you can enter the descriptions for each configuration.

8 8. Now hit ‘Create’ button.

9 . Give a package name and click OK.

10 . Now select ‘Floorplan Configuration’ or whichever configuration you want to edit, I am

selecting ‘Floorplan configuration’ and click on’Configuration Editor’.
11 . The OIF configuration screen is displayed.

12 . You can now configure the OIF configuration. I have added two views here.

And enter the Component and View names for each view as you wish.
13 . Save the Application.

14 . Test the Application.

OUTPUT :

View 1 :

View 2 :
Demo on FPM LIST GUIBB with Edit/Save/Delete/Sort/Filter Functionality

In this tutorial we will learn on how to use List GUIBB with Edit, Update, Delete, Sort, Filter
functionality.

The application, used in this tutorial is a demo without any real business logic, due to the fact
that we want to concentrate on necessary setting and logic for achieving the required
functionality.

The process consists of two parts:

 Creating the Feeder Class

 Configuration.

1 . Go to SE24 and create a class say ‘YCL_LIST_GUIBB’.

2 . In the class go to “Interfaces” tab and enter “IF_FPM_GUIBB_LIST”.

3 . Now, press Enter.

4 . Very Important: Go to Methods tab and go inside each and every method and activate them
individually because they will be in Inactive state.
5 . In menu goto->sections->public.

6 . In the public section enter the following code :

types t_itab type STANDARD TABLE OF zstudent.

data FLAG type BOOLEAN .
data C_FLAG type BOOLEAN .
data ITAB type T_ITAB .

Here the table I have used is “zstudent” which contains id,name,marks,dept fields.
7 . Now, go to method “GET_DEFINITION” enter the following code.

data itab type STANDARD TABLE OF zstudent.

data wa_field type fpmgb_s_listfield_descr.

data wa_action type fpmgb_s_actiondef.

data it_action type fpmgb_t_actiondef.

eo_field_catalog ?= cl_abap_tabledescr=>describe_by_data( itab ).

wa_field-name = 'ID'.
wa_field-allow_sort = 'X'.
wa_field-allow_filter = 'X'.
insert wa_field into table et_field_description.

wa_field-name = 'NAME'.
wa_field-allow_sort = ' '.
wa_field-allow_filter = 'X'.
insert wa_field into table et_field_description.

wa_field-name = 'DEPT'.
wa_field-allow_sort = ' '.
wa_field-allow_filter = 'X'.
insert wa_field into table et_field_description.

wa_field-name = 'MARKS'.
wa_field-allow_sort = ' '.
wa_field-allow_filter = 'X'.
insert wa_field into table et_field_description.

wa_action-id = 'DEL'.
wa_action-enabled = 'X'.
wa_action-visible = 02.
wa_action-text = 'Delete'.
wa_action-tooltip = 'delete current selected record'.
wa_action-action_type = 0.

append wa_action to it_action.

wa_action-id = 'SAVE'.
wa_action-enabled = 'X'.
wa_action-visible = 02.
wa_action-text = 'Save'.
wa_action-tooltip = 'Save records'.
wa_action-action_type = 0.

append wa_action to it_action.

et_action_definition = it_action.

9 . Goto method “FLUSH” and enter the following code.

data f_usage type fpmgb_s_fieldusage.

if flag = 'X'.
return.
endif.
flag = 'X'.

select * from zstudent into table itab.

ct_data = itab.
ev_data_changed = 'X'.

if ct_field_usage is initial.
f_usage-name = 'ID'.
f_usage-read_only = 'X'.
f_usage-mandatory = 'X'.
f_usage-enabled = 'X'.
append f_usage to ct_field_usage.
f_usage-name = 'NAME'.
f_usage-read_only = ' '.
f_usage-mandatory = 'X'.
f_usage-enabled = 'X'.
append f_usage to ct_field_usage.
f_usage-name = 'DEPT'.
f_usage-read_only = ' '.
f_usage-mandatory = 'X'.
f_usage-enabled = 'X'.
append f_usage to ct_field_usage.
f_usage-name = 'MARKS'.
f_usage-read_only = ' '.
f_usage-mandatory = 'X'.
f_usage-enabled = 'X'.
append f_usage to ct_field_usage.

ev_field_usage_changed = 'X'.
endif.

9 . Goto method “FLUSH” and enter the following code.

data wa_change_log type fpmgb_s_changelog.

data count type i.
FIELD-SYMBOLS <ROW> TYPE ANY.

describe table it_change_log lines count.

if it_change_log is not initial.

loop at it_change_log into wa_change_log.

if sy-tabix <= count.

ASSIGN WA_CHANGE_LOG-TABLE_ROW->* TO <ROW>.

UPDATE ZSTUDENT FROM <ROW>.

endif.

FLAG = ' '.

C_FLAG = 'X'.

endloop.

endif.

10 . Goto method “PROCESS_EVENT” and enter the following code.

data wa_messages like line of et_messages.

data wa type zstudent.

if io_event->mv_event_id = 'DEL'.

read table itab index iv_lead_index into wa.

delete zstudent from wa.
if sy-subrc eq 0.
flag = ' '.
wa_messages-msgid = 'ZLIST_GUIBB'.
wa_messages-msgno = '000'.
wa_messages-severity = 'S'.

append wa_messages to et_messages.

else.

wa_messages-msgid = 'ZLIST_GUIBB'.
wa_messages-msgno = '001'.
wa_messages-severity = 'E'.

append wa_messages to et_messages.

endif.
endif.

IF IO_EVENT->MV_EVENT_ID = 'SAVE'.

IF C_FLAG = 'X'.

wa_messages-msgid = 'ZLIST_GUIBB'.
wa_messages-msgno = '000'.
wa_messages-severity = 'S'.

append wa_messages to et_messages.

c_flag = abap_false.

ENDIF.

ENDIF.

11 . Activate each and every method individually and afterwards activate the class.
12 . Now go to SE80 and create a web dynpro component say “YLIST_GUIBB”.

13 . Double click on component name and click on Implemented Interfaces tab and enter
“IF_FPM_UI_BUILDING_BLOCK”.
14 . Click on “Reimplement”.

15 . Activate the component.

16 . Create the application.
17 . In “Properties” tab enter the following values

Component : FPM_OIF_COMPONENT

Interface view : FPM_WINDOW

Plug name : DEFAULT

18 . Go to the package where you have saved the WebDynpro Application and right click on the
Application and click “Create/Change Configuration”.
19 . Enter a application configuration id say “YLIST_GUIBB_ID”.

20 . Hit create and enter a package name.

21 . Now enter a configuration id for OIF Component and click go to component configuration.

22 . Click on create.

23 . Choose package name.

24 . The following screen is display.

25 . Now click on ‘Attributes’ button and enter Component as “FPM_LIST_UIBB”.

26 . Place your cursor on View field and hit F4.

27 . Select “LIST_WINDOW”.

28 . In the “configuration Name” field enter a name for configuration say “YLIST_GUIBB_CC”
and click on “Configure UIBB”.
29 . Now hit create to create configuration id.

30 . Select Package.

31 . Now a screen appears this way. Here we have to enter the feeder class name which we have
created earlier, in our case it is “YCL_LIST_GUIBB” and click on “Edit Parameters”.
32 . Now click ‘OK’.

33 . Now the following screen is displayed, click on “Configure Columns” button.

34 . The following screen is displayed.

35 . Click on Select all and click on Add columns.

36 . Click “OK”.
37 . Now click on “Marks” column on the right. Here we want to make Marks column as
editable.

38 . Select Display type as “Input Field”.

39 . Select the ‘department’ on the right column and select its display type as “Drop Down”.

40 . Now, click on “Configure Toolbar” on top .

41 . The following screen is displayed .

42 . Move ‘DEL’ , ‘SAVE’ , <separator> onto right side and hit ‘OK’.

43. Now hit “SAVE” button on top to save the configuration.

44 . Go to Setting on the right column and change the “row count” to 10.

45 . You can also display the LIST GUIBB as ALV; just select Rendering Style as “ALV
Rendering”.

46 . Now go to the OIF configuration screen and delete the default ‘Save’ button provided by
FPM.(Optional step).
47. Hit “Delete” button and “Save” on top to save the configuration.
48 . Now, Test your Application, it looks this way.
49 . Let’s check Update functionality, I am changing the marks of student AA-41 from 199 to
100.
50 . Hit Save.
51 . Now let’s check “Filter Functionality”, im checking for all students whose marks are ‘0’.
52 . Now let’s check ‘Delete functionality’, select any row.
53 . Now hit ‘Delete’ button on toolbar.
54 . Now , let’s check ‘Sort’ functionality, click on ‘Student’s id’ header.

( Descending )
55 . Ascending Order.
56 . This is how it looks if we render the list as ALV. ( Refer to Step 45 ).