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:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
Post a Comment