The post describes, to display a list uibb and a form uibb on an FPM OVP application. The list UIBB displays the billing data and on each row selection, the billing data are displayed in the form UIBB with the help of wiring.
For the list uibb, the table type is used.
First point is to design the list uibb. So create a class and implement the interfaces as shown below.
Create a table attribute.
Go to the GET_DEFINITION method.
Put the below code.
Go to the GET_DATA method.
select data from VBRK table and put the shown code.
Now we have to create the LIST UIBB configuration and assign the created feeder class-ZCL_BILLING_DOC_LIST
Provide a configuration name as- ZCC_LIST_BILLING_DOC and click on New button.
Provide the feeder class and click on edit parameters.
In general settings, choose visible row count, scroll mode as paging, selection mode as single selection, enable event as selection raises as FPM event.
Under List UIBB schema, add few fields as shown or as per requirement. Save the configuration. So we have completed the creation of list uibb configuration.
Next task is to create – OVP application and embedding list uibb configuration in this. So execute Tx- FPM_WB
Select Wizard for creating empty FPM application.
Provide a application name, floorplan as Overview page and automatically application configuration name and floorplan configuration name appears. Click on Next button.
Save this.
Click on Edit Configuration(FLUID)
Provide the title, from UIBB, select List UIBB.
Provide the lsit uibb configuration name created before ZCC_LIST_BILLING_DOC. Save it.
Test the applciation.
So we have the list uibb displaying the billing records.
Next task is to create a form UIBB and embedding to the above created OVP application.
So create a feeder class and implement the relevant interfaces as shown below.
Go to the GET_DEFINITION method.
Put the below code.
So the feeder class is ready ( remember though we use some methods, never forget to activate all the methods).
Now create a FORM UIBB configuration.
Provide a name as- ZCC_FORM_BILLING_DOC and click on the new button.
It asks for the feeder class.
Provide the above created feeder class-ZCL_BILLING_DOC_FORM.
Under Form Uibb Schema, select add elements at current level.
Select some fields and make display type as text view. Now go to the Preview section as we have to rearrange the display of the fields.
In preview all selected fields are displayed like this.
Rearrange the fields as needed. Save the form UIBB configuration.
Now go to the OVP floorplan configuration. Already the list uibb configuration is added and add the form component.
It asks for the form configuration name.
Provide the name as ZCC_FORM_BILLING_DOC which was created above and save it.
Test the application and now we have the list and form uibb displayed as desired. Now the next task is to when any row is selected in the list uibb that information should be displayed in the form uibb by wiring technique.
For wiring we need two different classes .
- Container class – which stores that data when row is selected from list uibb.
- Connector class- which takes the container data and supplies to the FORM uibb feeder class, so that the list row data can be displayed on the FORM uibb.
So created a class- ZCL_BILL_CONTAINER_LIST_FORM and add an attribute. Here the attribute type as VBRK as we need to transfer one single row.
Create a connector class namely- ZCL_BILL_CONNECTOR_LIST_FORM and add the interface – IF_FPM_CONNECTOR.
Add one attribute which is a reference to the container class.
Now for wiring, add the interface – IF_FPM_FEEDER_MODEL in the list feeder class.
Add one attribute which is a reference to the container class in the list feeder class.
In the list feeder class, go to the marked method.
Here create an instance of the container class.
In the list feeder class, go to the marked method.
Well, read the selected line form the list uibb and put back the value into the container object attribute which later can be accessed by the connector class and will be passed to the form feeder class.
In the list feeder class, go to the marked method.
Provide a name space. This name space has to be unique in the list feeder class->connector class->form feeder class
In the list feeder class, go to the marked method.
Bind the container data to more generic so that it can be accessed by the connector class.
In the list feeder class, go to the marked method.
Put the below code, as we work on lead selection, so the port type should be LS. This code help us while creating a wiring and defining port type in OVP floor plan configuration.
Now go to the connector class. We have an name space attribute.
Go the methods tab and add class constructor method.
Go to class constructor method.
Provide the same name space as provided the list feeder class.
In the connector class, go to the marked method.
We receive the input from the list uibb and assign the data to the object of the container reference.
A snap shot that tell how the data passed form list feeder class to connector class.
In the connector class, go to the method GET_OUTPUT.
Assign the container instance to the more generic reference so that the data can be accessed by the form feeder class.
Now in the form feeder class, add the interface – IF_FPM_FEEDER_MODEL.
Declare an attribute which is the reference to the connector class.
Go to the highlighted method in the form uibb feeder class.
set the name space.
Go to the highlighted method in the form uibb feeder class.
assign the connector class instance.
Go to the highlighted method in the form uibb feeder class.
Assign the container instance attribute which is nothing but the billing record information.
Now we finished the coding part and have to do the wiring.
Go to the OVP Application, go to the Wire Schema. Click on Create Wire icon.
provide the component which is nothing but the target component and its configuration name as ZCC_FORM_BILLING_DOC. provide the container class.
Set connector class name as – ZCL_BILL_CONNECTOR_LIST_FORM and port type as LS( Lead Selection ). Now we have to pass the source component and its configuration name.
provide the list configuration name as- ZCC_LIST_BILLING_DOC and for port identifier click on F4 option. Select the port identifier from pop up screen.
Save the wiring configurtaion.
Now test the application.
Select a row and the data displayed in the form UIBB.
SAPCODES 