SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

How to use “Tree” in Web Dynpro with Static and Dynamic Programming

How to use “Tree” in Web Dynpro with Static and Dynamic Programming

With the tree UI element,we can visualise 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

How to use “Tree” in Web Dynpro with Static and Dynamic Programming

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

Context structure

How to use “Tree” in Web Dynpro with Static and Dynamic Programming

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 subnodes and which context attributes are going to be displayed (Fig.).

Inserting Node Type

How to use “Tree” in Web Dynpro with Static and Dynamic Programming

View layout

How to use “Tree” in Web Dynpro with Static and Dynamic Programming

Binding of the Context to the Tree elements

How to use “Tree” in Web Dynpro with Static and Dynamic Programming

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

TREE_NODE context node


METHOD supply_tree_node.

DATA:

ls_studentTYPE if_v_view=element_tree_node,lt_student LIKE TABLE OF ls_student.

ls_student-studentname = 'Ionescu Ana Maria'.

ls_student-value = 'A'.

APPEND ls_student TO lt_student.

ls_student-studentname = 'Marinescu Loredana'.

ls_student-value = 'B'.

APPEND ls_student TO lt_student.

ls_student-studentname = 'Marton Luminita'.

ls_student-value = 'C'.

APPEND ls_student TO lt_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 (Listing).

Populating the attributes of the TREE_LEAF context node

METHOD supply_tree_leaf.

DATA:

ls_studentTYPE if_v_view=>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-student info ='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.

 

Runtime

How to use “Tree” in Web Dynpro with Static and Dynamic Programming

Dynamic Programming

RUNTIME CLASS: CL_WD_TREE

Hereunder,we present a table showing the correspondence between the view designer name and the runtime name,with the proper types,in case of dynamic programming of a Tree UI element (Table).

How to use “Tree” in Web Dynpro with Static and Dynamic Programming

For the Tree UI element, we have, as aggregation, the Node Types: TreeItem-Type and TreeNodeType. The TreeItemType element has the CL_WD_TREE_ ITEM_TYPE runtime class and the TreeNodeType element has the CL_WD_TREE_NODE_TYPE runtime class.

The implementation of a dynamic Tree UI element with two node types (Tree- NodeType and TreeItemType)contains the following statements (Listing ):

Dynamic programming


METHOD wddomodifyview. 

DATA lr_container TYPE REF TO cl_wd_uielement_container. 

DATA lr_flow_data TYPE REF TO cl_wd_flow_data. 

DATA lr_tree TYPE REF TO cl_wd_tree. 

DATA lr_treenode TYPE REF TO cl_wd_tree_node_type. 

DATA lr_treeitem TYPE REF TO cl_wd_tree_item_type. 

IF first_time EQ abap_true. 

lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER'). 

lr_tree = cl_wd_tree=>new_tree( 

id = 'TRE_SEQUENTIAL' 

bind_data_source = 'TREE' 

title = 'Student info' 

default_node_icon_source = '~Icon/CheckedOk' 

). 

lr_flow_data = cl_wd_flow_data=>new_flow_data(element = 

lr_tree). 

lr_container->add_child(lr_tree). 

lr_treenode = cl_wd_tree_node_type=>new_tree_node_type( 

id ='TREE_NT' 

bind_data_source ='TREE.TREE_NODE' 

bind_text ='TREE.TREE_NODE.STUDENTNAME' 

). 

lr_treeitem = cl_wd_tree_item_type=>new_tree_item_type( 

id ='TREE_IT' 

bind_data_source ='TREE.TREE_NODE.TREE_LEAF' 

bind_text ='TREE.TREE_NODE.TREE_LEAF.STUDENTINFO' 

). 

lr_tree->add_node_type(index = 1 

the_node_type = lr_treenode). 

lr_tree->add_node_type(index = 2 

the_node_type = lr_treeitem). 

ENDIF. 

ENDMETHOD. 
 

Go through another example of Tree control in Web Dynpro.

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in