Skip to Content
Author's profile photo Latif Bansal

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)





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:

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 ).



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” >


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

Step11: Execute test.

Results on Webclient UI:





P.S: Thanks for your interest and patience.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Nice document 🙂

      Author's profile photo Former Member
      Former Member

      Nice document .. can we display different assignment blocks of overview page in tab ?

      Author's profile photo Ashwin Guduru Veera
      Ashwin Guduru Veera

      Yes. As Durga mentioned, you can use the TILE LAYOUT for showing assignment blocks as tabs for an overview page

      Author's profile photo Former Member
      Former Member

      Good Document.. 🙂    

      Hi madhumati i am not sure but i think for displaying AB's in tabs we can make use of tile layout concept..

      Author's profile photo GirishKumar Chevuru
      GirishKumar Chevuru

      Very Good Document 🙂

      Author's profile photo Harish Kumar
      Harish Kumar

      Nice doc..

      Thanks for share..

      Author's profile photo Sanket Jain
      Sanket Jain

      Hi Latif,

      It is a nice document.

      But while writing the code for creating the tabs in .htm page i am getting the error mentioned as:

      "There is no tag "tabContainer" in the description of the BSP extension of thtmlb ".

      can you pls help me out in this.

      Author's profile photo Latif Bansal
      Latif Bansal
      Blog Post Author

      Hi Sanket,

      Sorry for late reply.

      Please try to copy paste the above code to avoid any typo. Still if you face issue, please check in SE24 for class CL_THTMLB_TAB_CONTAINER.

      If you have this class it should work. Which CRM version are you using anyways?


      Author's profile photo Former Member
      Former Member

      Hi Latif,

        Very Nice Blog. 🙂

      I have a doubt. What is the tab container id??. where i find this??actually i followed all steps.i struck over here while am working with CRM7.0

      Shyam K Gangisetti.