Skip to Content

The actual requirement: The employee data will be displayed in various tabs as check boxes (with some labels). Now each tab should have an incomplete icon besides the tab name. And as soon as employee fill up all the mandatory fields of that tab the icon should be changed to complete icon. Now this check need to implement in final save button or while navigating to other tab.

Here I have created a screen with tab strip, check box and icons to explain the requirement and also how I have achieved that. This is pretty simple indeed.

/wp-content/uploads/2013/01/tab_icon_webdynpro_abap_174010.png

To achieve the requirement, first of all we have to create a node with an attribute type string.

Then go to the tab strip and click on individual tabs CAPTION UI element in your view. There you can find a meta attribute called imagesource. Now simply find the created context node with that attribute.

/wp-content/uploads/2013/01/tab_icon_webdynpro_abap2_174011.png

Now click on main tab strip UI element. There you will find a OnSelect event under EVENTS meta tag. Simply create a method there. This method will trigger whenever you try to toggle from one tab to another tab.

/wp-content/uploads/2013/01/tab_icon_webdynpro_abap3_174012.png

Now in that method you have to write the code for each tabs mandatory field populated/filled or not. Based on that check simply assign the icon text to the attribute bind with the tab icon.

CASE tab.

WHEN ‘TAB’.

*Check for TAB mandatory fields

wd_assit->check_mandt_data

wd_this->fire_to_tab(      ).

WHEN ‘TAB_1’.

*Check for TAB mandatory fields

wd_assit->check_mandt_data

wd_this->fire_to_tab_1(        ).

WHEN ‘TAB_2’.

*Check for TAB mandatory fields

wd_assit->check_mandt_data

wd_this->fire_to_tab_2(    ).

WHEN ‘TAB_3’.

*Check for TAB mandatory fields

wd_assit->check_mandt_data

wd_this->fire_to_tab_3(    ).

ENDCASE.

Now the code in that assistance class method will be something like below:

Method check_mandt_data.

Check each attribute is initial or not. Write your own code here. Then based on that check the below condition to set the icon attribute.

  IF lv_field_check IS INITIAL.

    ls_n_image_tab-tab_image_icon = ‘~Icon/Done’.

  ELSE.

    ls_n_image_tab-tab_image_icon = ‘~Icon/incomplete’.

  ENDIF.

Here lv_field_check = space means all fields are checked. means tab complete. Here you can put any icon text as per your requirement.

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply