Streamlining Processes with SAP: Tab Strip Wizard Interface Implementation Guide

 

  • A tab strip with a wizard interface combines the functionality of tabs for navigation with the step-by-step guidance of a wizard.
  • For every tab SAP generates a Sub Screen.
  • Here's a breakdown of its key features:
  1. Tabs: The tab strip typically appears at the top of the interface and consists of multiple tabs representing different sections or steps of a process. Each tab is labeled to indicate its purpose or content.
  2. Wizard Interface: The wizard interface guides users through a series of steps or stages to complete a task or process. Each step typically focuses on a specific aspect or action required from the user.
  3. Step Indicators: Alongside the tabs, there are usually visual indicators to show the user their progress within the wizard. This could be numbers indicating the current step out of the total steps, or a progress bar that fills up as the user advances.
  4. Navigation Controls: Users can typically navigate through the steps using the tabs, but there are also navigation controls provided, such as "Next" and "Previous" buttons, to move forward or backward in the process. These controls ensure flexibility in navigation.
  5. Validation and Feedback: The wizard interface often includes validation checks at each step to ensure that the user has entered correct information before proceeding to the next step. Feedback messages may appear to inform the user of any errors or missing information that need attention.
  6. Contextual Guidance: Depending on the complexity of the process, contextual guidance may be provided within each step to assist users in understanding what is required of them. This could include tooltips, help icons, or explanatory text.

Overall, a tab strip with a wizard interface offers users a structured and intuitive way to navigate through a multi-step process, providing guidance and feedback along the way to ensure a smooth user experience.


  • In our previous parts, we have seen how to display output on Normal Screen, Sub Screen and Modal dialog box.
  • Now, we will display output using Tab Strip.
  • Let’s take a real life requirement.

Requirement :-

  • Below is our header and Item table and we have multiple data in item table for corresponding header data.



  • We will create a tab strip in module pool.

  • We will create two tabs, one for Header data and one for Item data.



  • On header tab we will display the header data and on item tab we will display the item data.


Solution :-

  • Step 1 :- Create a executable program in ABAP Editor.



  • Step 2 :- Navigate to SE80 by clicking on Object List display.

  • Step 3 :- Create a screen 100 to perform the operation.



  • Step 4 :- Click on layout on Screen 100 to design the layout.



    • We have created a field label, a input output field and a push button SUBMIT to perform operation on that.
  • Step 5 :- click on tab strip with wizard and create a box for it → a screen will appear.



  • Step 6 :- Now, similar to tab control we have steps in tab strip also.

  • Step 7 :- Click on continue.

  • Step 8 :- Give a name of the tab strip and click on continue.



  • Step 9 :- Give text to the tab strip and click on continue.





  • Step 10 :- For every tab, SAP will automatically generate a sub screen → Click on continue → completed.



  • Step 11 :- Now, we can see we will have two tab for header and item.



  • Step 12 :- Save the layout and get back to our main program and activate it.



    • We can see in the above image that SAP have automatically written some codes for the tab strip and also have added two sub screens 101 and 102.

Designing layout on both Sub Screens :-

  • Step 13 :- Declare internal table and work area for both header and item table.



  • Step 14 :- Open the layout for Sub screen 101 and design fields for header table.



    Note :- We have discussed in our previous blogs, how to create the above, so, I don’t think it will create a trouble to anyone.

  • Step 15 :- Note :- Since, we have multiple line items in item table, So we will have to create a table control with wizard for the item table on Sub screen 102.



    Note :- We have discussed how to create a table control in the previous blogs, So please refer to it.

  • Step 16 :- Uncomment the PAI for screen 100 and write the logic into it.



  • Step 17 :- Activate the program and Create a transaction code for our program.




Code :-


*&---------------------------------------------------------------------*
*& Modulpool ZAR_MODULE_TAB_STRIP
*&---------------------------------------------------------------------*
*&
*&---------------------------------------------------------------------*
PROGRAM zar_module_tab_strip.
TABLES : ZAR_HEADER, ZAR_ITEM.
TYPES : BEGIN OF ty_header,
          order_number TYPE zar_order_number,
          order_date   TYPE zar_order_date,
          payment_mode TYPE zar_payment_mode,
          total_amount TYPE zar_total_amount,
          currency     TYPE zar_curency,
        END OF ty_header.
TYPES : BEGIN OF ty_item,
          order_number      TYPE zar_order_number,
          order_item_number	TYPE zar_order_item_number,
          order_description	TYPE zar_order_description,
          item_cost	        TYPE zar_total_amount,
        END OF ty_item.

DATA : lt_header type table of ty_header,
       ls_header type ty_header,
       lt_item type table of ty_item,
       ls_item type ty_item.

*&SPWIZARD: FUNCTION CODES FOR TABSTRIP 'ZAR_TAB'
CONSTANTS: BEGIN OF c_zar_tab,
             tab1 LIKE sy-ucomm VALUE 'ZAR_TAB_FC1',
             tab2 LIKE sy-ucomm VALUE 'ZAR_TAB_FC2',
           END OF c_zar_tab.
*&SPWIZARD: DATA FOR TABSTRIP 'ZAR_TAB'
CONTROLS:  zar_tab TYPE TABSTRIP.
DATA: BEGIN OF g_zar_tab,
        subscreen   LIKE sy-dynnr,
        prog        LIKE sy-repid VALUE 'ZAR_MODULE_TAB_STRIP',
        pressed_tab LIKE sy-ucomm VALUE c_zar_tab-tab1,
      END OF g_zar_tab.
DATA:      ok_code LIKE sy-ucomm.

*&SPWIZARD: OUTPUT MODULE FOR TS 'ZAR_TAB'. DO NOT CHANGE THIS LINE!
*&SPWIZARD: SETS ACTIVE TAB
MODULE zar_tab_active_tab_set OUTPUT.
  zar_tab-activetab = g_zar_tab-pressed_tab.
  CASE g_zar_tab-pressed_tab.
    WHEN c_zar_tab-tab1.
      g_zar_tab-subscreen = '0101'.
    WHEN c_zar_tab-tab2.
      g_zar_tab-subscreen = '0102'.
    WHEN OTHERS.
*&SPWIZARD:      DO NOTHING
  ENDCASE.
ENDMODULE.

*&SPWIZARD: INPUT MODULE FOR TS 'ZAR_TAB'. DO NOT CHANGE THIS LINE!
*&SPWIZARD: GETS ACTIVE TAB
MODULE zar_tab_active_tab_get INPUT.
  ok_code = sy-ucomm.
  CASE ok_code.
    WHEN c_zar_tab-tab1.
      g_zar_tab-pressed_tab = c_zar_tab-tab1.
    WHEN c_zar_tab-tab2.
      g_zar_tab-pressed_tab = c_zar_tab-tab2.
    WHEN OTHERS.
*&SPWIZARD:      DO NOTHING
  ENDCASE.
ENDMODULE.

*&SPWIZARD: DECLARATION OF TABLECONTROL 'ZAR_TABLE_CONT' ITSELF
CONTROLS: ZAR_TABLE_CONT TYPE TABLEVIEW USING SCREEN 0102.

*&SPWIZARD: LINES OF TABLECONTROL 'ZAR_TABLE_CONT'
DATA:     G_ZAR_TABLE_CONT_LINES  LIKE SY-LOOPC.

*DATA:     OK_CODE LIKE SY-UCOMM.

*&SPWIZARD: OUTPUT MODULE FOR TC 'ZAR_TABLE_CONT'. DO NOT CHANGE THIS LI
*&SPWIZARD: UPDATE LINES FOR EQUIVALENT SCROLLBAR
MODULE ZAR_TABLE_CONT_CHANGE_TC_ATTR OUTPUT.
  DESCRIBE TABLE LT_ITEM LINES ZAR_TABLE_CONT-lines.
ENDMODULE.

*&SPWIZARD: OUTPUT MODULE FOR TC 'ZAR_TABLE_CONT'. DO NOT CHANGE THIS LI
*&SPWIZARD: GET LINES OF TABLECONTROL
MODULE ZAR_TABLE_CONT_GET_LINES OUTPUT.
  G_ZAR_TABLE_CONT_LINES = SY-LOOPC.
ENDMODULE.

*&SPWIZARD: INPUT MODULE FOR TC 'ZAR_TABLE_CONT'. DO NOT CHANGE THIS LIN
*&SPWIZARD: PROCESS USER COMMAND
MODULE ZAR_TABLE_CONT_USER_COMMAND INPUT.
  OK_CODE = SY-UCOMM.
  PERFORM USER_OK_TC USING    'ZAR_TABLE_CONT'
                              'LT_ITEM'
                              ' '
                     CHANGING OK_CODE.
  SY-UCOMM = OK_CODE.
ENDMODULE.

*----------------------------------------------------------------------*
*   INCLUDE TABLECONTROL_FORMS                                         *
*----------------------------------------------------------------------*

*&---------------------------------------------------------------------*
*&      Form  USER_OK_TC                                               *
*&---------------------------------------------------------------------*
 FORM USER_OK_TC USING    P_TC_NAME TYPE DYNFNAM
                          P_TABLE_NAME
                          P_MARK_NAME
                 CHANGING P_OK      LIKE SY-UCOMM.

*&SPWIZARD: BEGIN OF LOCAL DATA----------------------------------------*
   DATA: L_OK              TYPE SY-UCOMM,
         L_OFFSET          TYPE I.
*&SPWIZARD: END OF LOCAL DATA------------------------------------------*

*&SPWIZARD: Table control specific operations                          *
*&SPWIZARD: evaluate TC name and operations                            *
   SEARCH P_OK FOR P_TC_NAME.
   IF SY-SUBRC <> 0.
     EXIT.
   ENDIF.
   L_OFFSET = STRLEN( P_TC_NAME ) + 1.
   L_OK = P_OK+L_OFFSET.
*&SPWIZARD: execute general and TC specific operations                 *
   CASE L_OK.
     WHEN 'INSR'.                      "insert row
       PERFORM FCODE_INSERT_ROW USING    P_TC_NAME
                                         P_TABLE_NAME.
       CLEAR P_OK.

     WHEN 'DELE'.                      "delete row
       PERFORM FCODE_DELETE_ROW USING    P_TC_NAME
                                         P_TABLE_NAME
                                         P_MARK_NAME.
       CLEAR P_OK.

     WHEN 'P--' OR                     "top of list
          'P-'  OR                     "previous page
          'P+'  OR                     "next page
          'P++'.                       "bottom of list
       PERFORM COMPUTE_SCROLLING_IN_TC USING P_TC_NAME
                                             L_OK.
       CLEAR P_OK.
*     WHEN 'L--'.                       "total left
*       PERFORM FCODE_TOTAL_LEFT USING P_TC_NAME.
*
*     WHEN 'L-'.                        "column left
*       PERFORM FCODE_COLUMN_LEFT USING P_TC_NAME.
*
*     WHEN 'R+'.                        "column right
*       PERFORM FCODE_COLUMN_RIGHT USING P_TC_NAME.
*
*     WHEN 'R++'.                       "total right
*       PERFORM FCODE_TOTAL_RIGHT USING P_TC_NAME.
*
     WHEN 'MARK'.                      "mark all filled lines
       PERFORM FCODE_TC_MARK_LINES USING P_TC_NAME
                                         P_TABLE_NAME
                                         P_MARK_NAME   .
       CLEAR P_OK.

     WHEN 'DMRK'.                      "demark all filled lines
       PERFORM FCODE_TC_DEMARK_LINES USING P_TC_NAME
                                           P_TABLE_NAME
                                           P_MARK_NAME .
       CLEAR P_OK.

*     WHEN 'SASCEND'   OR
*          'SDESCEND'.                  "sort column
*       PERFORM FCODE_SORT_TC USING P_TC_NAME
*                                   l_ok.

   ENDCASE.

 ENDFORM.                              " USER_OK_TC

*&---------------------------------------------------------------------*
*&      Form  FCODE_INSERT_ROW                                         *
*&---------------------------------------------------------------------*
 FORM fcode_insert_row
               USING    P_TC_NAME           TYPE DYNFNAM
                        P_TABLE_NAME             .

*&SPWIZARD: BEGIN OF LOCAL DATA----------------------------------------*
   DATA L_LINES_NAME       LIKE FELD-NAME.
   DATA L_SELLINE          LIKE SY-STEPL.
   DATA L_LASTLINE         TYPE I.
   DATA L_LINE             TYPE I.
   DATA L_TABLE_NAME       LIKE FELD-NAME.
   FIELD-SYMBOLS <TC>                 TYPE CXTAB_CONTROL.
   FIELD-SYMBOLS <TABLE>              TYPE STANDARD TABLE.
   FIELD-SYMBOLS <LINES>              TYPE I.
*&SPWIZARD: END OF LOCAL DATA------------------------------------------*

   ASSIGN (P_TC_NAME) TO <TC>.

*&SPWIZARD: get the table, which belongs to the tc                     *
   CONCATENATE P_TABLE_NAME '[]' INTO L_TABLE_NAME. "table body
   ASSIGN (L_TABLE_NAME) TO <TABLE>.                "not headerline

*&SPWIZARD: get looplines of TableControl                              *
   CONCATENATE 'G_' P_TC_NAME '_LINES' INTO L_LINES_NAME.
   ASSIGN (L_LINES_NAME) TO <LINES>.

*&SPWIZARD: get current line                                           *
   GET CURSOR LINE L_SELLINE.
   IF SY-SUBRC <> 0.                   " append line to table
     L_SELLINE = <TC>-LINES + 1.
*&SPWIZARD: set top line                                               *
     IF L_SELLINE > <LINES>.
       <TC>-TOP_LINE = L_SELLINE - <LINES> + 1 .
     ELSE.
       <TC>-TOP_LINE = 1.
     ENDIF.
   ELSE.                               " insert line into table
     L_SELLINE = <TC>-TOP_LINE + L_SELLINE - 1.
     L_LASTLINE = <TC>-TOP_LINE + <LINES> - 1.
   ENDIF.
*&SPWIZARD: set new cursor line                                        *
   L_LINE = L_SELLINE - <TC>-TOP_LINE + 1.

*&SPWIZARD: insert initial line                                        *
   INSERT INITIAL LINE INTO <TABLE> INDEX L_SELLINE.
   <TC>-LINES = <TC>-LINES + 1.
*&SPWIZARD: set cursor                                                 *
   SET CURSOR LINE L_LINE.

 ENDFORM.                              " FCODE_INSERT_ROW

*&---------------------------------------------------------------------*
*&      Form  FCODE_DELETE_ROW                                         *
*&---------------------------------------------------------------------*
 FORM fcode_delete_row
               USING    P_TC_NAME           TYPE DYNFNAM
                        P_TABLE_NAME
                        P_MARK_NAME   .

*&SPWIZARD: BEGIN OF LOCAL DATA----------------------------------------*
   DATA L_TABLE_NAME       LIKE FELD-NAME.

   FIELD-SYMBOLS <TC>         TYPE cxtab_control.
   FIELD-SYMBOLS <TABLE>      TYPE STANDARD TABLE.
   FIELD-SYMBOLS <WA>.
   FIELD-SYMBOLS <MARK_FIELD>.
*&SPWIZARD: END OF LOCAL DATA------------------------------------------*

   ASSIGN (P_TC_NAME) TO <TC>.

*&SPWIZARD: get the table, which belongs to the tc                     *
   CONCATENATE P_TABLE_NAME '[]' INTO L_TABLE_NAME. "table body
   ASSIGN (L_TABLE_NAME) TO <TABLE>.                "not headerline

*&SPWIZARD: delete marked lines                                        *
   DESCRIBE TABLE <TABLE> LINES <TC>-LINES.

   LOOP AT <TABLE> ASSIGNING <WA>.

*&SPWIZARD: access to the component 'FLAG' of the table header         *
     ASSIGN COMPONENT P_MARK_NAME OF STRUCTURE <WA> TO <MARK_FIELD>.

     IF <MARK_FIELD> = 'X'.
       DELETE <TABLE> INDEX SYST-TABIX.
       IF SY-SUBRC = 0.
         <TC>-LINES = <TC>-LINES - 1.
       ENDIF.
     ENDIF.
   ENDLOOP.

 ENDFORM.                              " FCODE_DELETE_ROW

*&---------------------------------------------------------------------*
*&      Form  COMPUTE_SCROLLING_IN_TC
*&---------------------------------------------------------------------*
*       text
*----------------------------------------------------------------------*
*      -->P_TC_NAME  name of tablecontrol
*      -->P_OK       ok code
*----------------------------------------------------------------------*
 FORM COMPUTE_SCROLLING_IN_TC USING    P_TC_NAME
                                       P_OK.
*&SPWIZARD: BEGIN OF LOCAL DATA----------------------------------------*
   DATA L_TC_NEW_TOP_LINE     TYPE I.
   DATA L_TC_NAME             LIKE FELD-NAME.
   DATA L_TC_LINES_NAME       LIKE FELD-NAME.
   DATA L_TC_FIELD_NAME       LIKE FELD-NAME.

   FIELD-SYMBOLS <TC>         TYPE cxtab_control.
   FIELD-SYMBOLS <LINES>      TYPE I.
*&SPWIZARD: END OF LOCAL DATA------------------------------------------*

   ASSIGN (P_TC_NAME) TO <TC>.
*&SPWIZARD: get looplines of TableControl                              *
   CONCATENATE 'G_' P_TC_NAME '_LINES' INTO L_TC_LINES_NAME.
   ASSIGN (L_TC_LINES_NAME) TO <LINES>.

*&SPWIZARD: is no line filled?                                         *
   IF <TC>-LINES = 0.
*&SPWIZARD: yes, ...                                                   *
     L_TC_NEW_TOP_LINE = 1.
   ELSE.
*&SPWIZARD: no, ...                                                    *
     CALL FUNCTION 'SCROLLING_IN_TABLE'
          EXPORTING
               ENTRY_ACT             = <TC>-TOP_LINE
               ENTRY_FROM            = 1
               ENTRY_TO              = <TC>-LINES
               LAST_PAGE_FULL        = 'X'
               LOOPS                 = <LINES>
               OK_CODE               = P_OK
               OVERLAPPING           = 'X'
          IMPORTING
               ENTRY_NEW             = L_TC_NEW_TOP_LINE
          EXCEPTIONS
*              NO_ENTRY_OR_PAGE_ACT  = 01
*              NO_ENTRY_TO           = 02
*              NO_OK_CODE_OR_PAGE_GO = 03
               OTHERS                = 0.
   ENDIF.

*&SPWIZARD: get actual tc and column                                   *
   GET CURSOR FIELD L_TC_FIELD_NAME
              AREA  L_TC_NAME.

   IF SYST-SUBRC = 0.
     IF L_TC_NAME = P_TC_NAME.
*&SPWIZARD: et actual column                                           *
       SET CURSOR FIELD L_TC_FIELD_NAME LINE 1.
     ENDIF.
   ENDIF.

*&SPWIZARD: set the new top line                                       *
   <TC>-TOP_LINE = L_TC_NEW_TOP_LINE.

 ENDFORM.                              " COMPUTE_SCROLLING_IN_TC

*&---------------------------------------------------------------------*
*&      Form  FCODE_TC_MARK_LINES
*&---------------------------------------------------------------------*
*       marks all TableControl lines
*----------------------------------------------------------------------*
*      -->P_TC_NAME  name of tablecontrol
*----------------------------------------------------------------------*
FORM FCODE_TC_MARK_LINES USING P_TC_NAME
                               P_TABLE_NAME
                               P_MARK_NAME.
*&SPWIZARD: EGIN OF LOCAL DATA-----------------------------------------*
  DATA L_TABLE_NAME       LIKE FELD-NAME.

  FIELD-SYMBOLS <TC>         TYPE cxtab_control.
  FIELD-SYMBOLS <TABLE>      TYPE STANDARD TABLE.
  FIELD-SYMBOLS <WA>.
  FIELD-SYMBOLS <MARK_FIELD>.
*&SPWIZARD: END OF LOCAL DATA------------------------------------------*

  ASSIGN (P_TC_NAME) TO <TC>.

*&SPWIZARD: get the table, which belongs to the tc                     *
   CONCATENATE P_TABLE_NAME '[]' INTO L_TABLE_NAME. "table body
   ASSIGN (L_TABLE_NAME) TO <TABLE>.                "not headerline

*&SPWIZARD: mark all filled lines                                      *
  LOOP AT <TABLE> ASSIGNING <WA>.

*&SPWIZARD: access to the component 'FLAG' of the table header         *
     ASSIGN COMPONENT P_MARK_NAME OF STRUCTURE <WA> TO <MARK_FIELD>.

     <MARK_FIELD> = 'X'.
  ENDLOOP.
ENDFORM.                                          "fcode_tc_mark_lines

*&---------------------------------------------------------------------*
*&      Form  FCODE_TC_DEMARK_LINES
*&---------------------------------------------------------------------*
*       demarks all TableControl lines
*----------------------------------------------------------------------*
*      -->P_TC_NAME  name of tablecontrol
*----------------------------------------------------------------------*
FORM FCODE_TC_DEMARK_LINES USING P_TC_NAME
                                 P_TABLE_NAME
                                 P_MARK_NAME .
*&SPWIZARD: BEGIN OF LOCAL DATA----------------------------------------*
  DATA L_TABLE_NAME       LIKE FELD-NAME.

  FIELD-SYMBOLS <TC>         TYPE cxtab_control.
  FIELD-SYMBOLS <TABLE>      TYPE STANDARD TABLE.
  FIELD-SYMBOLS <WA>.
  FIELD-SYMBOLS <MARK_FIELD>.
*&SPWIZARD: END OF LOCAL DATA------------------------------------------*

  ASSIGN (P_TC_NAME) TO <TC>.

*&SPWIZARD: get the table, which belongs to the tc                     *
   CONCATENATE P_TABLE_NAME '[]' INTO L_TABLE_NAME. "table body
   ASSIGN (L_TABLE_NAME) TO <TABLE>.                "not headerline

*&SPWIZARD: demark all filled lines                                    *
  LOOP AT <TABLE> ASSIGNING <WA>.

*&SPWIZARD: access to the component 'FLAG' of the table header         *
     ASSIGN COMPONENT P_MARK_NAME OF STRUCTURE <WA> TO <MARK_FIELD>.

     <MARK_FIELD> = SPACE.
  ENDLOOP.
ENDFORM.                                          "fcode_tc_mark_lines
*&---------------------------------------------------------------------*
*& Module STATUS_0100 OUTPUT
*&---------------------------------------------------------------------*
*&
*&---------------------------------------------------------------------*
MODULE status_0100 OUTPUT.
 SET PF-STATUS 'TABSTRIP'.
* SET TITLEBAR 'xxx'.
ENDMODULE.
*&---------------------------------------------------------------------*
*&      Module  USER_COMMAND_0100  INPUT
*&---------------------------------------------------------------------*
*       text
*----------------------------------------------------------------------*
MODULE user_command_0100 INPUT.
if sy-ucomm eq 'SUBMIT'.
select Order_number order_date payment_mode
  total_amount currency from ZAR_HEADER
  into table lt_header where
  order_number = ZAR_HEADER-ORDER_NUMBER.

  if lt_header is not INITIAL.
    Read table lt_header into ls_header index 1.
    if sy-subrc eq 0.
      ZAR_HEADER-ORDER_NUMBER = ls_header-order_number.
      ZAR_HEADER-order_date = ls_header-order_date.
      ZAR_HEADER-payment_mode = ls_header-payment_mode.
      ZAR_HEADER-total_amount = ls_header-total_amount.
      ZAR_HEADER-currency = ls_header-currency.
    endif.
    select order_number order_item_number
      ORDER_DESCRIPTION item_cost from ZAR_ITEM
      into TABLE lt_item FOR ALL ENTRIES IN lt_header
      where order_number = lt_header-order_number.
  endif.
endif.
if sy-ucomm eq 'BACK'.
  LEAVE to SCREEN 0.
endif.
ENDMODULE.

Execute the Program :-



  • Click on submit button.


  • Click on item details.



Comments

Popular posts from this blog

Understanding Different Types of SAP Function Modules: Normal, RFC, and Update

Mastering ABAP: A Step-by-Step Guide to Function Modules and Groups for Modularized Programming

Introduction to SAP