Creating multiple tabs for a single view using multiple configurations

This blog shall guide you towards creating multiple tabs for a single simple view and showing data using different fields of same/different context nodes in that view on Webclient UI by calling separate config keys for each tab.

Step1: Open your componenent containing the view u need to work on in transaction BSP_WD_CMPWB.

Step2: Select the view you want to customize with multiple tabs.

Step3: Create as many configurations as the number of tabs you want to show. (You may use the default one as for first tab)

(In the example here, i have used two configurations: 1st with object and subobject as <DEFAULT> and second with object TEST and subobject <DEFAULT>, as my requirement consisted of creating two tabs only)

Step4: For each configuration select the field you want to show in each tab.

(In the example here, i chose personal details in config 1 for First Tab and office details in config 2 for Second Tab as in pictures below)

Config_1

Config_2

Step5: Create a table attribute GT_TAB_LINK type CRMT_THTMLB_LINK_T for the IMPL class of your view and a variable GV_VIEW_ID type STRING for accesing which tab is clicked and to be shown in HTML, and you may give default value as ‘1’ (this is the view ID for first tab, which you will see in next step)

Step6: Re-define the DO_INIT_CONTEXT method of IMPL class to build the tab link table for the tabs to be shown in Webclient UI to user giving link IDs, Onclick events and Tab Names to be shown to user. Below is the sample code:

DATA:
ls_link  TYPE crmt_thtmlb_link.

REFRESH tab_links.
CLEAR ls_link.

ls_link-id      = ‘1’.                             “This tab is made as initial value for gv_view_id as can be seen above to show this tab as selected on Initial load
ls_link-onclick = ‘PERSONALDATA’.
ls_link-text    = ‘Personal Data’.
APPEND ls_link TO tab_links.
CLEAR ls_link.

ls_link-id      = ‘2’.
ls_link-onclick = ‘OFFICIALDATA’.
ls_link-text    = ‘Official Data’.
APPEND ls_link TO tab_links.
CLEAR ls_link.

Step7: Create Event Handlers EH_ONPERSONALDATA and EH_ONOFFICIALDATA. In both set the gv_view_id to ‘1’ and ‘2’ respectively.

Step8: Re-define the DO_CONFIG_DETERMINATION method on IMPL class to call separate configurations as prepared by you for different tabs.

Sample code used in the example:

  CASE gv_view_id .

    WHEN ‘1’.

      me->set_config_keys( iv_object_type = ‘<DEFAULT>’

                   iv_object_sub_type = ‘<DEFAULT>’

                   iv_propagate_2_children = abap_true ).

    WHEN ‘2’.

      me->set_config_keys( iv_object_type          = ‘TEST’

                   iv_object_sub_type      = ‘DEFAULT’

                   iv_propagate_2_children = abap_true ).

    WHEN OTHERS.

  ENDCASE.

Step:9 Modify the .htm page of your view adding the following code at the start of page immediately below headers to shoe the tabs on Web UI ffrom the TAB_LINKS table built above.

<thtmlb:tabContainer  id                                        = “tc1”

                                 design                                 = “TABS”

                                 checkContent                       = “FALSE”

                                 tabLinks                               = “<%= controller->TAB_LINKS %>”

                                 selectedTabLinkId                 = “<%= controller->GV_VIEW_ID %>”

                                 noExcelDownloadButton        = “TRUE”

                                 noPersonalizeButton             = “TRUE”

                                 noTableGraphicsButton          = “TRUE” >

</thtmlb:tabContainer>

Step 10. Save and Activate all. The funcionality is built and ready to be tested.

Step11: Execute test.

Results on Webclient UI:

TAB_1:

TAB_2:

P.S: Thanks for your interest and patience.