Show TOC

Creating a Search UIBBLocate this document in the navigation structure

Use

FPM BOPF Integration (FBI) aims at providing generic GUIBB feeder classes to consume business object services in FPM applications. This enables you to create UI layouts as Web Dynpro configurations for standard GUIBBs and to assemble these discrete GUIBB configurations in an application configuration.

The search UIBB is an FPM component, FPM_SEARCH_UIBB. For a BO model that includes a query, you can use the search UIBB to select a node instance and act as the application entry point. You must place the search UIBB on the initial screen and configure it with the /BOFU/CL_FBI_SUIBB_FEEDER feeder class. You can specify a query defined for the BO model as part of the configuration. This allows the user to enter various search parameters to get the required instance.

Prerequisites

In an SAP development system, you have created a Web Dynpro application and created an initial screen. For more information, see:

Procedure

Create and Configure a Search UIBB

  1. In the Navigation pane, choose the New button and choose Initial Screen.

  2. To create a search UIBB for the initial screen, on the Overview Page Schema tab, choose the UIBB button and choose Search Component. The system adds another UIBB row in the table below.

  3. In the UIBB row, enter the following details:

    • Component: FPM_SEARCH_UIBB

    • Configuration name: Any appropriate configuration name

    • Window name: SEARCH_WINDOW

  4. Save the component configuration.

  5. Select the UIBB and choose the Configure UIBB button.

  6. To create the configuration for your UIBB, in the Editor for the Web Dynpro ABAP Component Configuration screen, choose the New button.

  7. In the Create Configuration dialog box, enter any required description and confirm your entry.

  8. In the Select Package dialog box, enter your required package and confirm your entry.

  9. In the Edit Feeder Class dialog box, enter the feeder class as /BOFU/CL_FBI_SUIBB_FEEDER and choose the Edit Parameters button.

  10. In the Edit Parameters dialog box, enter the following parameters and choose the OK button:

    • Business Object : Name of the BO to which you have referred; for example, /BOFU/DEMO_CUSTOMER.

    • Node : Name of the node; for example, ROOT.

    • Query: The current query on the BO node from which the search results are retrieved; for example, SELECT_BY_ELEMENTS.

    • Select the Enable Only Result List in the checkbox.

  11. Choose the Search Criteria button.

  12. Select the attribute that is the basis of the search. For example, the customer number can be used as search criteria.

  13. Choose the Columns of Result List button and choose all the fields you want to appear in the search result.

  14. Save the component configuration.

Configure the Bootstrap UIBB

  1. Choose the UIBB button and select Form Component.

  2. Save the component configuration.

  3. Enter a suitable configuration name and choose the Configure UIBB button.

  4. To create the configuration for your UIBB, in the Editor for the Web Dynpro ABAP Component Configuration screen, choose the New button.

  5. In the Create Configuration dialog box, enter any required description and confirm your entry.

  6. In the Select Package dialog box, enter your required package and confirm your entry.

  7. In the Edit Feeder Class dialog box, enter the feeder class as /BOFU/CL_FBI_GUIBB_BOOTSTRAP and choose the Edit Parameters button.

  8. In the Edit Parameters dialog box, enter the following parameters and choose the OK button:

    • Business Object : Name of the BO to which you have referred; for example, /BOFU/DEMO_CUSTOMER.

    • Node : Name of the node, for example, ROOT.

    • URL Key Provider, for example, /BOFU/CL_FBI_URL_KEYPROVIDER

    • Preselection Key Provider, for example, /BOFU/CL_FBI_PRSEL_KEYPROVIDER

  9. Save the UIBB configuration and return to the component configuration screen.

  10. Under General Settings, choose the Floorplan Settings button and select Application Controller Settings. Enter the following parameters:

    • Web Dynpro component/class: /BOFU/WDC_FBI_CONTROLLER.

    • Configuration name: /BOFU/WDCC_FBI_CONTROLLER_NEW

Configure the Main Page Form UIBB

  1. In the Navigation pane, choose the Main Page table row.

  2. Enter the following details for the form GUIBB and save the component configuration:

    • Component: FPM_FORM_UIBB

    • View: FORM_WINDOW

    • Configuration name, for example, /BOFU/DEMO_CUSTOMER_ROOT_FORM

  3. To create the configuration for your UIBB, in the Editor for the Web Dynpro ABAP Component Configuration screen, choose the New button.

  4. In the Create Configuration dialog box, enter any required description and confirm your entry.

  5. In the Select Package dialog box, enter your required package and confirm your entry.

  6. In the Edit Feeder Class dialog box, enter the feeder class as /BOFU/CL_FBI_GUIBB_Form and choose the Edit Parameters button.

  7. In the Edit Parameters dialog box, enter the following feeder parameters and choose the OK button:

    • Business Object: Name of the business object, for example, /BOFU/DEMO_CUSTOMER.

    • Node: Name of the node, for example ROOT.

    • Select the Handles Toolbar checkbox.

  8. In the Form UIBB Schema tab, Choose the Element button and choose Add Group.

  9. In the Group Title column, enter a suitable title for the group.

  10. Choose the Child Element button and choose Add Elements to Group.

  11. In the Edit Group dialog box, select the element and choose the OK button.

  12. Save the component configuration and return to the component configuration screen.

Connect the UIBBs

  1. On the Wire Schema tab, Choose the Graphical Wire Editor button.

    The wire schema diagram appears on the configuration screen. You can see two parts of the screen. Under Available UIBBs, you can see the GUIBBs you created during the configuration. The other part is empty.

  2. Move the initial screen search UIBB configuration box to the right part of the screen. The configuration box, has two arrows, Selection and Collection, that you use to move data to other UIBBs.

  3. Move the form configured for the bootstrap to the right part of the screen.

  4. Select the Collection arrow of the initial screen box and join it to the arrow head on top of the bootstrap form.

  5. In the Connector Details dialog box, select /BOFU/CL_FBI_CONNECTOR as the connector class.

  6. Move the main form GUIBB to the right part of the screen.

  7. Connect the Collection arrow of the bootstrap form to the arrow head of the main form UIBB.

  8. In the Connector Details dialog box, select /BOFU/CL_FBI_CONNECTOR as the connector class.

  9. Choose the Done button. The Configuration reappears.

  10. Save the component configuration.

Test the Web Dynpro Application

  1. To go to the application configuration screen, click the first link below the tool bar.

  2. Choose the Test button.

  3. On the initial screen of the sample application, under Search Criteria, enter a customer number and choose the Continue button.

  4. To see the search result list, choose Enter.

  5. To see the main screen, choose the Continue button.