SAP provides a number of Generic User Interface Building Blocks (GUIBB ) generic building blocks such as Tabs UIBB , Form , and List UIBB . These allow you to reuse them into your applications without programming from scratch. In this recipe, we will see how we can add a list GUIBB in our applications.
The GUIBB list must have an associated feeder class that provides the data that is displayed in the list. We will add the list GUIBB in OIF application created earlier. We will add the GUIBB list in a new subview within the component configuration.
Within the list, we will display the columns showing the employee information based on our previously created structure (in Chapter 14, Web Dynpro for ABAP) ZST8_EMPLOYEE_ADDRESS as shown in the following screenshot:
For adding the list GUIBB in our applications, proceed as follows:
- We will first create the feeder class through transaction
SE24. On the Interfaces tab, we will add two interfacesIF_FPM_GUIBB_LISTandIF_FPM_GUIBB_LIST_EXTinterfaces (theIF_FPM_GIUBBinterface will come by itself).
- A number of methods are added due to the inclusion of the interfaces. We will write code in the two methods
GET_DEFINITIONandGET_DATA. - We first write the code within the method
GET_DEFINITION. We first call theDESCRIBE_BY_NAMEstatic method of theCL_ABAP_TYPEDESCRclass in order to get the details of the structureZST8_PERNR_ADDRESS. The reference returned is stored in the defined reference variableMYSTRUCTDESCR. - Next, the static method
CREATEmethod of theCL_ABAP_TABLEDESCRclass is called and the returned reference is stored inEO_FIELD_CATALOG.
- Next, we call the
GET_COMPONENTSmethod in order to get the components of our structureZST8_PERNR_ADDRESS. The components returned in the internal tableMY_COMPONENT_TAB. A loop is then run on the internal table. For each component, we set the properties as visible, read-only, and the column header to be used from the data dictionary definition. The property information is set using the structureWA_FIELD_DESCRIPTIONwhich is then appended to the internal table (exporting parameter)ET_FIELD_DESCRIPTION.
- Within the
GET_DATAmethod, for our requirement we only need to make very small code insertion. For simplicity sake, we assume that the data that is to be displayed in the list is available in the internal tableIT_ADDRESS(the coding for fetching this data is not shown). The two lines to be inserted are shown as follows:
- For all other methods, we will create empty implementations and save our code. Then save and activate your class.
- Next, we will go to the configuration editor and will add a new subview to our application. We will then use the Add UIBB button on the right-hand side of the configuration editor screen and choose the option Add List Component.
- For the List UIBB (1) window, within the attributes, we will enter a suitable configuration name (in our case
ZST_LIST_CONFIG) and click the Configure UIBB button on the right-hand side of the screen (note the component FPM_LIST_UIBB and view LIST_WINDOW are inserted automatically).
- This will lead to the editor for the Web Dynpro ABAP Component Configuration window and will generate an error saying that the configuration does not exist.
- We will then click the Create button. A pop up appears that asks the feeder class to be used for the list configuration. Enter the name of the feeder class created in the first step. Click the Edit Parameters button.
- Since there are no parameters defined, the save pop up will appear and will ask us to save our configuration. This will then take us to the component configuration of our configuration
ZST8_LIST_CONFIG.
- Then we will click the Configure Columns button. This will show the columns that we had set in the
GET_DEFINITIONmethod to be available for list configuration. We will use the Add Columns button in order to select the columns that we need to be shown in our list. We may change the header description also if we like and well as the displayed length and sequence.
- We set the description of the three fields in our structure as shown in the following screenshot:
- We save our configurations and then test the application configuration of our main application.
We first define the feeder class using the transaction SE24. The code is written for the two important methods GET_DATA and GET_DEFINITION. Both these methods are called each time the GUIBB is processed.
The GET_DEFINITION method has two exporting parameters that are filled within the code that we have written. The list of columns that are to be made available in the configuration editor is specified in the exporting parameter EO_FIELD_CATALOG, whereas, the properties of each column is specified in the exporting parameter ET_FIELD_DESCRIPTION. The properties that are set include the column heading that may be later changed at the time of configuration.
Within the GET_DATA method that provides the data to be displayed, the exporting parameter CT_DATA is filled with data. The statement for setting the value of EV_DATA_CHANGE to ABAP_TRUE must be there. If not, the data will not be displayed, however, the list columns are displayed correctly upon application run.
The configuration is then done. We create the configuration of the list UIBB and assign it the newly created feeder class. The GUIBB is attached to a new subview of our existing application.
Upon executing the application, the list is displayed along with the data.
There are other notable methods of the feeder class such as GET_PARAMETER_LIST, used to define parameters for your feeder class, the NEEDS_CONFIRMATION method that allows us to display a data loss dialog box, and the PROCESS_EVENT method that is used for handling any events triggered during the application execution.
At the minimal, coding must be entered in the mandatory methods GET_DEFINITION and GET_DATA.