Show TOC

Creating and Configuring a Tabbed User Interface Building Block (UIBB)Locate this document in the navigation structure

Use

A tabbed UIBB consists of number of tabs. Each tab can, in turn, be configured to include other UIBBs.

Prerequisites

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

Procedure

Creating and Configuring a Tabbed UIBB

  1. Choose the UIBB pushbutton and select Tabbed Component.

  2. Enter the following details for the tabbed GUIBB and choose Save.

    • Component: FPM_TABBED_UIBB

    • View: TABBED_WINDOW

    • Configuration Name: An appropriate configuration name

  3. Choose Configure UIBB.

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

  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.

Creating the Master UIBB

  1. Choose Master UIBB.

  2. Choose the Form Component and create a Form UIBB. For more information, see the Creating and Configuring a Form Component section of the topic Creating a Form UIBB.

  3. Save your entries.

  4. Return to the Tabbed UIBB Component Configuration screen by clicking the link that points to the tabbed UIBB component configuration.

Creating Tabs

  1. Choose Tab under the Tabbed UIBB Schema tab.

  2. Configure the form or list as per your requirement under the newly created Tab and add fields. For more information, see Creating and Configuring a Form UIBB and Creating and Configuring a List UIBB.

  3. Save your entries.

Creating Wires

The wiring in the Tabbed UIBB configuration happens at two levels:

  • First level of wiring connects the Master UIBB and other UIBBs in the Main page

  • Second level of wiring happens within the tabbed UIBB

Note

The basic concept of wiring is to link one UIBB to other UIBB. The data flows from the source UIBB to the target UIBB through the connector class /BOFU/CL_FBI_CONNECTOR. If the source UIBB is a Form UIBB, the Collection arrow is used for connecting the UIBBs through the wire. If the source UIBB is a list UIBB, the Selection arrow is used to connect the UIBBs.

Follow these steps to perform the wiring that connects the Master UIBB and other UIBBs in the Main page:

  1. To complete the wiring, on the Wire Schema tab, choose the Graphical Wire Editor.

  2. Select the UIBBs under Available UIBBs.

  3. Drag and drop the UIBBSs to the panel on the right-hand side. The configuration box, has two arrows, Selection and Collection, that you use to move data to other UIBBs.

  4. Select the Collection/Selection arrow of any other UIBB and join it to the arrow head of the Master UIBB.

    Example

    The Collection arrow of the Bootstrap is joined to the arrow head of the Master UIBB.

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

  6. Choose Done. The configuration screen appears.

  7. Save the component configuration.

Follow these steps to perform the wiring within the Tabbed UIBB.:

  1. To complete the wiring, on the Wire Schema tab, choose Graphical Wire Editor .

  2. Select the UIBBs under Available UIBBs.

  3. Drag and drop the UIBBSs to the panel on the right-hand side. The configuration box, has two arrows, Selection and Collection , that you use to move data to other UIBBs.

  4. Select the Collection arrow of the Master UIBB and join it to the arrow head of the first UIBB.

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

  6. Similarly complete the wiring for other UIBBs if any.

  7. Choose Done. The configuration screen appears.

  8. Save the component configuration.

Using the Tabbed Exit

You use the Tabbed Exit feature to enable or disable certain tabs based on specific conditions.

  1. Choose the Master UIBB pushbutton.

  2. Choose the Form Component.

  3. Enter the following details for the UIBB:

    • Component: /BOFU/WDC_FBI_TABBED_EXIT

    • View: W_MAIN

    • Configuration Name: An appropriate configuration name

  4. Save your entries.

  5. Return to the Tabbed UIBB Component Configuration window by selecting the link that points to the tabbed UIBB component configuration.

  6. Select the Master UIBB.

  7. Choose Configure UIBB.

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

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

  10. In the Select Package dialog box, enter your required package and confirm your entry. The Configuration Context screen appears.

Configuring the Condition for Tab Control

  1. Navigate to Start of the navigation path Context Next navigation step tabControl End of the navigation path under Elements.

  2. Choose tabControl. The Attributes of the Element tabControl section appears.

  3. Enter the tab ID in the Tab ID field.

  4. Select the Final checkbox.

  5. Select the Hide if No Lead Sel checkbox.

  6. Choose Check.

  7. Select the tabControl row and choose Add.

  8. Choose the Condition option. The Attributes of the Element Condition section appears.

  9. Set the required condition using the following fields:

    • Component Name

    • Field Property

    • INCl/EXCL

    • Option

    • Selection Value

    • Selection Value

    Example

    If you want to include only those entries for which the CURRENCY_FIELD value is INR, then enter the following values for the corresponding fields:

    • Component Name - CURRENCY_FIELD

    • Field Property -Visible

    • INCl/EXCL - I

    • Option - EQ

    • Selection Value - INR

    • Selection Value - 0

  10. Save your entries.

  11. Return to the Tabbed UIBB Component Configuration screen.