SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

How to use “Tray UI Element” in Web Dynpro with Static and Dynamic Programming

How to use “Tray UI Element” in Web Dynpro with Static and Dynamic Programming

Tray UI Element

As all the containers, this UI element includes a set of other UI Elements,but also provides additional functions. We create a WD Component with the structure presented in Fig.

WD component structure

How to use “Tray UI Element” in Web Dynpro with Static and Dynamic Programming

In the View Layout,we insert two Tray UI elements. The first element is used to show the candidate information, and the second Tray is used to show some details about the selected candidate. These details are: the country flag and the capital.In the MIMEs folder we import three pictures with the flags we have to display when the user chooses a competitor from that country.

After the Tray UI element is inserted in the View Layout, we can insert a Menu
(Fig.– right) and, in each menu, we can insert a menu option (Fig. – left).

Tray menu

How to use “Tray UI Element” in Web Dynpro with Static and Dynamic Programming

The menu options are: Menu, MenuActionItem,MenuCheckBox, MenuRadio- Button and MenuSeparator. In our case,we have chosen the option MenuAction- Item (Fig).

Creating a menu element

How to use “Tray UI Element” in Web Dynpro with Static and Dynamic Programming

View layout structure

How to use “Tray UI Element” in Web Dynpro with Static and Dynamic Programming

The first Tray has two menu options, used to show the second Tray UI element or to hide it. As we have mentioned above, most of the UI element properties can be bound. Hereunder, we show a list with some of the Tray UI elements properties that can be bound, and the attribute type in case the property is bindable(Table).

How to use “Tray UI Element” in Web Dynpro with Static and Dynamic Programming

We want to manipulate the UI element via the data held in the context. Therefore, we create a context node named DYNAMIC, with three attributes: two attributes of WDY_BOOLEAN type (ENABLED_OPTION1,ENABLED_OPTION2) and one attribute named VISIBLE, of WDUI_VISIBILITY type.To show the concurrent information and the corresponding details, we have created a context node with the dictionary structure YVIEW_CMPETITION, a database view defined in the ABAP Dictionary. The context structure is presented in Fig.

Context structure.

How to use “Tray UI Element” in Web Dynpro with Static and Dynamic Programming

The context node DETAIL is populated via the supply function method SUPPLY_COMPETITION (Listing).

Supply function method


METHOD supply_competition.

DATA: lt_content TYPE TABLE OF yview_cmpetition.

SELECT * FROM yview_cmpetition INTO TABLE lt_content.

IF sy-subrc = 0.

node->bind_table(new_items = lt_content).

ENDIF.

ENDMETHOD.


To be able to manipulate the enabled properties of the menu options created in the first Tray UI elements, we define the following data binding: (Fig)

Data binding

How to use “Tray UI Element” in Web Dynpro with Static and Dynamic Programming

To be able to manipulate the visible property of the second Tray with the ID “TRAY_DETAIL”,we define a data binding between these properties and the context attribute VISIBLE:

How to use “Tray UI Element” in Web Dynpro with Static and Dynamic Programming

At initialisation, we want the second Tray to be hidden, the MENU_OPTION1 to be enabled and the MENU_OPTION2 to be not enabled. To realise this,we encode the wdDoInit Hook method (Listing).

The wddoinit Hook method


METHOD wddoinit. 

DATA lr_node TYPE REF TO if_wd_context_node. 

DATA ls_data TYPE wd_this-element_dynamic. 

lr_node = wd_context-get_child_node('DYNAMIC'). 

ls_data-enabled_option1 = abap_true. 

ls_data-enabled_option2 = abap_false. 

ls_data-visible = cl_wd_tray=e_visible-none. 

lr_node-set_static_attributes( ls_data ). 

ENDMETHOD.

 

When the user selects the first menu option “MENU_OPTION1”,the Framework triggers the event handler method onactionshow (Listing ).

The onactionshow event handler method


METHOD onactionshow. 

DATA lr_node TYPE REF TO if_wd_context_node. 

DATA ls_data TYPE wd_this-element_dynamic. 

lr_node = wd_context-get_child_node('DYNAMIC'). 

ls_data-enabled_option1 = abap_false. 

ls_data-enabled_option2 = abap_true. 

ls_data-visible = cl_wd_tray=e_visible-visible. 

lr_node-set_static_attributes(ls_data). 

ENDMETHOD. 


When the user selects the second menu option MENListingU_OPTION2,the Framework triggers the event handler method onactionhide (Listing).

The onactionhide event handler method


METHOD onactionhide. 

DATA lr_node TYPE REF TO if_wd_context_node. 

DATA ls_data TYPE wd_this-element_dynamic. 

lr_node = wd_context->get_child_node('DYNAMIC'). 

ls_data-enabled_option1 = abap_true. 

ls_data-enabled_option2 = abap_false. 

ls_data-visible = cl_wd_tray=e_visible-none. 

lr_node->set_static_attributes(ls_data). 

ENDMETHOD. 

At runtime,we can choose to show or to hide the details about the competitor(Fig)

Runtime.

How to use “Tray UI Element” in Web Dynpro with Static and Dynamic Programming

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in