WebDynpro - Tree UI

[mani_sekar]

Tree - Sequential Implementation

With this UI element, we can visualize the hierarchy defined in the context. For this UI element, we can use:

• A sequential implementation with a non-recursive node in case the number of levels can be specified at design time
• A recursive implementation with a recursive node in case the number of levels is not known at design time

WD component

In this case (sequential implementation, we don’t need a recursive node. A context node TREE is created in the context node of the view controller. It has the cardinality 1...1 and is Singleton. Under this context node, we create another context node TREE_NODE with two attributes. Under this context node, we create another context node TREE_LEAF with an attribute.

Context structure

The attributes STUDENTNAME, VALUE and STUDENTINFO are of STRING type. The context node TREE_LEAF is not Singleton, because we need to create an instance of this node for each element of the TREE_NODE context node. In the STUDENTNAME attribute, we hold the name of each student; for each student we have proper information held in the attribute STUDENTINFO. In a Tree UI element, we can insert Node Types of type TreeItemType and TreeNodeType,to specify which sub nodes and which context attributes are going to be displayed.

Inserting Node Type

• Here node type means this one ( i.e node way –With in this something is there)
• Item type means ( i.e Final thing)

View layout

Binding of the Context to the Tree elements

The context node TREE_NODE is populated via the supply function method.

Note: If we create one more node (here 2 only created) .the first 2 node

Singleton is yes. All others are No.

TREE_NODE context node

METHOD supply_tree_node.  ( V_main = View Name )

   DATA: ls_student TYPE if_v_main=>element_tree_node, 
lt_student LIKE TABLE OF ls_student.

ls_student-studentname = 'SathishKumar'.
ls_student-value = 'A'.
APPEND ls_student TO lt_student.
clear ls_student.

ls_student-studentname = 'Ravi'.
ls_student-value = 'B'.
APPEND ls_student TO lt_student.
clear ls_student.

ls_student-studentname = 'Vivek'.
ls_student-value = 'C'.
APPEND ls_student TO lt_student.
clear ls_student.

node->bind_table( lt_student ).

ENDMETHOD.           

The values for the child node TREE_LEAF are set in the same way via a supply function method.

Populating the attributes of the TREE_LEAF context node

METHOD supply_tree_leaf.

   DATA: ls_student TYPE if_v_main=>element_tree_leaf,
lt_student LIKE TABLE OF ls_student.
DATA: lv_value TYPE string.

parent_element->get_attribute( EXPORTING name = 'VALUE' IMPORTING value = lv_value ).

CASE lv_value.

WHEN 'A'.

ls_student-studentinfo = 'Article - YES'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Exam - 5'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Academic year -II'.
APPEND ls_student TO lt_student.

WHEN 'B'.
ls_student-studentinfo = 'Article - NO'.
APPEND ls_student TO lt_student.

ls_student-studentinfo ='Academic year -I'.
APPEND ls_student TO lt_student.

WHEN OTHERS.

ls_student-studentinfo = 'Article - YES'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Exam - 3'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Academic year -IV'.
APPEND ls_student TO lt_student.

ENDCASE.

node->bind_table( lt_student ).

ENDMETHOD.

Output