Skip to Content

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.

View.PNG

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_1(default).PNG

Config_2

Config_2(custom).PNG

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)

Attributes.PNG

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_1.PNG

TAB_2:

tab_2.PNG

P.S: Thanks for your interest and patience.

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

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

    (0) 
    1. Latif Bansal 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?

      Latif

      (0) 
  2. Shyam K Gangisetti

    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.

    (0) 

Leave a Reply