tree with table in web dynpro abap

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2008 SAP AG 1

Displaying Dynamic Recursive Tree with

Table in Web Dynpro ABAP

Applies to:

This Article applies to Web Dynpro ABAP, ABAP HR, and Enterprise Portal 7.0.

Summary

This document describes about how to use the Tree UI element with recursive node by addressing a Real time Business Scenario in which the Organization Structure is displayed in a tree format with expanding and collapsing nodes (Organization Units and Sub Organization Units) and the employees under selected in Organization/Sub Organization Unit in Table of Web Dynpro for ABAP View.

Author: Jhansi Rani Miryala

Company: Intelligroup Inc

Created on: 26th February 2010

Author Bio

Jhansi Rani Miryala is working as EP Consultant in Intelligroup. She has experience of working on Web Dynpro Java, Web Dynpro ABAP, EP, Adobe Print/Interactive Forms and PDK (Portal Development Kit). She has completed her Master of Computer Applications.

Displaying Dynamic Recursive Tree with Table in Web Dynpro ABAP


© 2009 SAP AG 2

Table of Contents

Introduction ......................................................................................................................................................... 3

Scenario .............................................................................................................................................................. 3

Procedure ........................................................................................................................................................... 3

Steps to create a dynamically structured Recursive Tree Web Dynpro Application ...................................... 3 1) Create the Web Dynpro Component ........................................................................................................................ 3

2) Create the context in the view .................................................................................................................................. 4

3) Define the Supply function(s) ................................................................................................................................... 6

Code Block - 1 ................................................................................................................................................. 7

Code Block - 2 ................................................................................................................................................. 9 4) Design the Layout .................................................................................................................................................. 10

5) Define the Actions for ORGUNITS TreeNodeType ................................................................................................ 16

Code Block – 3 .............................................................................................................................................. 17 6) Define the Actions for SUBORGS TreeNodeType ................................................................................................. 19

Code Block - 4 ............................................................................................................................................... 20 7) Create a WebDynrpo Application ........................................................................................................................... 23

8) Test the application to see the output .................................................................................................................... 24

Sample Output: ................................................................................................................................................. 25

Related Content ................................................................................................................................................ 26

Disclaimer and Liability Notice .......................................................................................................................... 27



© 2009 SAP AG 3

Introduction

This article explains about the necessary steps to build a simple recursive tree structure with TREE UI element available in Web Dynpro ABAP. Tree UI element will be useful if you want to display the data in some hierarchy format. The hierarchy to be displayed is defined in the context in 2 ways:

1) Recursive Node: Number of elements is not known at design time

2) Non-recursive Node: Certain number of levels can be specified at design time

The Tree UI element is bound against the top-level context node to be displayed and TreeNodeType and TreeItemType are used to specify which sub nodes under the tree to be displayed. TreeItemType elements cannot have children; therefore, they are always displayed as leaves. It is used if we know at design time that the corresponding node does not have children. When using TreeNodeType elements, the decision of whether to use children is dynamically made at runtime.

I have considered the Organization Units hierarchy which people may come across at different scenarios with HR based applications in Web Dynpro ABAP with SAP HCM implementation. I thought of sharing this with the community through this article. So, I would like to present the Dynamic Organization Unit Structure in tree format with Organizational Units and corresponding Sub Organization Units of the logged in user, by capturing the data for the tree from ABAP HR. I used the tree element with the recursive node option to attain the organization hierarchy structure. The Organization Units and Sub Organization units are dynamic; that is, it depends on the user who logged into the portal/SAP. To enable this I have provided an Organization Tree structure with expanding and collapsing nodes by providing the facility to display the employees in a table format for selected Org Unit.

Scenario

Organization Structure is shown as Tree and whenever the user selects the Organization/Sub Organization Unit then corresponding employees are displayed in table format. The Tree data is dynamically populated at run time depending on logged in user.

Procedure

Steps to create a dynamically structured Recursive Tree Web Dynpro Application

1) Create the Web Dynpro Component

Go to the transaction SE80 and choose Web Dynpro Comp. / Intf. In the list, give a name and press Enter.



© 2009 SAP AG 4

You’d be asked to enter the description. Enter the description and press enter.

2) Create the context in the view

Go to the WDC (Web Dynpro Component) you just created and add the context to the view MAIN as mentioned below.



© 2009 SAP AG 5

The context I have used in this example is:

Context Node Attribute Type

Parent Node Cardinality Selection

Initialization Lead Selection Singleton

Repeat Node

ND_TREE Rootnode 1..1 0..1 Yes No

ORGUNITS ND_TREE 0..n 0..1 No No

ORGEH ORGEH ORGUNITS

STEXT STEXT ORGUNITS

SUB_ORGS ORGUNITS 0..n 0..1 No No

ORGEH ORGEH SUB_ORGS

STEXT STEXT SUB_ORGS

SUB_ORGS_R

Recursive

Node

SUB_ORGS

SUB_ORGS

EMPS 0..n 0..n No No

NAME PAD_CNAME EMPS

POSITION HRP1000-STEXT EMPS

LOCATION T500P-NAME1 EMPS

PERNR PERSNO EMPS

Note: 1) Node ‘SUB_ORGS_R’ is the recursive node, which will be used to store the sub organization units.

2) All nodes that are not directly below the context root node must be non-singleton nodes, because all

elements should be displayed in a tree regardless of the lead selection.



© 2009 SAP AG 6

The context looks like as shown below.

Now we define the methods to process and code to retrieve the Organization Units and Sub Organization Units.

3) Define the Supply function(s)

Define a Supply Function S_ORGUNITS on ORGUNITS node and S_SUB_ORGS on SUB_ORGS node.

a) Define a Supply Function S_ORGUNITS on ORGUNITS node as shown below.

Note: To simplify this article I am showing the business logic in the Web Dynpro component.



© 2009 SAP AG 7

Now go to the Methods tab of the view and write the following code in the supply function method S_ORGUNITS to get Organization Units of logged in user.

Code Block - 1

METHOD s_orgunits .

* TYPES declaration

TYPES : BEGIN OF ty_orgunits,

pernr TYPE persno,

orgeh TYPE orgeh,

END OF ty_orgunits.

* DATA declaration

DATA : lo_nd_tree_nd TYPE REF TO if_wd_context_node,

lo_nd_orgunits TYPE REF TO if_wd_context_node,

ls_org_units TYPE wd_this->element_orgunits,

lt_org_units TYPE wd_this->elements_orgunits,

lv_pernr TYPE persno,

it_orgunits TYPE TABLE OF ty_orgunits.

* Navigate to the <ND_TREE> node

lo_nd_tree_nd = wd_context->path_get_node( path = 'ND_TREE' ).

* Navigate to the <ORGUNITS> node

lo_nd_orgunits = lo_nd_tree_nd->path_get_node( path = 'ORGUNITS' ).

* Get PERNR based on userid

CLEAR : lv_pernr.

SELECT SINGLE pernr FROM pa0105 INTO lv_pernr

WHERE subty = '0001'

AND endda GE sy-datum

AND begda LE sy-datum

AND usrid EQ sy-uname.

*Get Org Units for PERNR

CLEAR: it_orgunits.

SELECT pernr orgeh FROM pa0001 INTO TABLE it_orgunits

WHERE pernr EQ lv_pernr

AND sprps EQ space



AND persg NE '6'.

IF NOT it_orgunits IS INITIAL.

DELETE ADJACENT DUPLICATES FROM it_orgunits COMPARING orgeh.

*Get Org Units Texts for Org Units

SELECT objid stext FROM hrp1000 INTO TABLE lt_org_units

FOR ALL ENTRIES IN it_orgunits

WHERE plvar = '01'

AND otype = 'O'

AND objid = it_orgunits-orgeh

AND istat = '1'

AND begda <= sy-datum

AND endda >= sy-datum.

ENDIF.

* Bind the <LT_ORG_UNITS> to context node

lo_nd_orgunits->bind_table( lt_org_units ).

ENDMETHOD.



© 2009 SAP AG 8

b) Define a supply Function S_ SUB_ORGS on SUB_ORGS node as shown below.

Now go to the Methods tab of the view and write the following code in the supply function method S_SUB_ORGS to get Sub Organization Units under the Org. Unit.



© 2009 SAP AG 9

Code Block - 2

METHOD s_sub_orgs.

* TYPES declaration

TYPES: BEGIN OF ty_subids,

objid TYPE hrobjid,

sobid TYPE sobid,

END OF ty_subids.

* Data declaration

DATA: suborg_node TYPE REF TO if_wd_context_node,

lv_orgunit TYPE orgeh,

lt_suborg_units TYPE wd_this->elements_sub_orgs,

ls_suborg_units TYPE wd_this->element_sub_orgs,

it_subids TYPE TABLE OF ty_subids,

wa_subids TYPE ty_subids,

wa_suborgs TYPE ty_subids,

it_suborgs TYPE TABLE OF ty_subids.

* Get Org Unit from parent node

parent_element->get_attribute(EXPORTING name = 'ORGEH' IMPORTING value = lv_orgunit).

IF NOT lv_orgunit IS INITIAL.

* get suborgs

SELECT objid sobid FROM hrp1001

INTO TABLE it_subids

WHERE otype = 'O'

AND objid = lv_orgunit

AND plvar = '01'

AND rsign = 'B'

AND relat = '002'

AND istat = '1'


AND endda >= sy-datum.

* Pupulate the <SOBID> as <OBJID>

IF NOT it_subids IS INITIAL.

LOOP AT it_subids INTO wa_subids.

wa_suborgs-objid = wa_subids-sobid.

APPEND wa_suborgs TO it_suborgs.

CLEAR: wa_suborgs.

ENDLOOP.

ELSE.

EXIT.

ENDIF.

IF NOT it_suborgs IS INITIAL.

*Get SubOrg Units Texts for SubOrg Units

SELECT objid stext FROM hrp1000

INTO TABLE lt_suborg_units

FOR ALL ENTRIES IN it_suborgs

WHERE objid = it_suborgs-objid


AND endda >= sy-datum

AND langu = sy-langu.

ENDIF.

ENDIF.

* Bind the table to the node

node->bind_table( lt_suborg_units ).

ENDMETHOD.



© 2009 SAP AG 10

4) Design the Layout

a) In the view MAIN insert the UI element Tree by selecting an Insert Element from the context menu of

ROOTUIELEMENTCONTAINER.

Now select the Tree UI element to create a tree.



© 2009 SAP AG 11

Tree UI element is inserted into the Layout.

Now bind the dataSource to the node ND_TREE and give the required text to rootText property.

The screen shot below shows the bounded attributes dataSource, rootText highlighted.



© 2009 SAP AG 12

b) After inserting the Tree UI element, a NodeType should be placed for the Tree UI element to display the entries.

Select the Insert Node Type option from the context menu of the tree, which will be used to display the

Organization Units.

Give some ID (Ex: ORGUNITS) and select the TreeNodeType from the Typ list.



© 2009 SAP AG 13

After inserting the TreeNodeType bind the text property of TreeNodeType(Orgunits) to the context attribute STEXT under ORGUNITS node declared.

The screen shot below shows the bounded attribute text highlighted.



© 2009 SAP AG 14

Now bind the dataSource of the NodeType(ORGUNITS) to the context node ORGUNITS.

c) Now insert one more NodeType under UI element named SUBORGS and bind its text to STEXT under SUB_ORGS node and its dataSource to SUB_ORGS node. It is used to display the Sub Organization Units.



© 2009 SAP AG 15

d) After inserting the Tree UI element, create the table to display the employees under the selected Org Unit/Sub Org Unit.

Bind the table to the context node EMPS as shown below.



© 2009 SAP AG 16

5) Define the Actions for ORGUNITS TreeNodeType

a) Define the Action to get the Employees under the selected Org Unit/Sub Org Unit.

Create an action GET_ORG_EMPS on onAction of the ORGUNITS (TreeNodeType UI element) to get

the employees under the selected Org. Unit.

The action created is shown in below

Write the following code on the action GET_ORG_EMPS.



© 2009 SAP AG 17

Code Block – 3

METHOD onactionget_org_emps .

* Data declaration

DATA: lo_nd_orgunit TYPE REF TO if_wd_context_node,

lo_el_orgunit TYPE REF TO if_wd_context_element,

ls_orgunit TYPE wd_this->element_orgunits,

lo_nd_emps TYPE REF TO if_wd_context_node,

lt_emp_list TYPE if_main=>elements_emps,


lt_hrpernr TYPE TABLE OF hrpernr,

lt_pa0002 TYPE TABLE OF pa0002,


lt_hrp1000 TYPE TABLE OF hrp1000,

lt_t500p TYPE TABLE OF t500p,

wa_emp_list LIKE LINE OF lt_emp_list,

wa_hrpernr TYPE hrpernr,

wa_pa0002 TYPE pa0002,


wa_hrp1000 TYPE hrp1000,

wa_t500p TYPE t500p.

CLEAR: lv_orgunit.

* Navigate to ORGUNIT Node

lo_nd_orgunit = wd_context->path_get_node( path = `ND_TREE.ORGUNITS` ).

* Navigate to EMPS node

lo_nd_emps = wd_context->get_child_node( name = wd_this->wdctx_emps ).

* Get the current element

lo_el_orgunit = lo_nd_orgunit->get_element( ).

lo_el_orgunit = wdevent->get_context_element( 'CONTEXT_ELEMENT' ).

* get all declared attributes

lo_el_orgunit->get_static_attributes(IMPORTING static_attributes =ls_orgunit ).

* Get the selected Org Unit

lv_orgunit = ls_orgunit-orgeh.

* Get the Employees under Org Unit

REFRESH : lt_hrpernr, lt_pa0002, lt_pa0001, lt_hrp1000, lt_t500p,lt_emp_list.


* Get the <PERNR> for the given ORG Unit

CALL FUNCTION 'HRCM_ORGUNIT_EMPLOYEE_LIST_GET'

EXPORTING

plvar = '01'

otype = 'O'

objid = lv_orgunit

begda = sy-datum

endda = sy-datum

TABLES

pernr_table = lt_hrpernr

EXCEPTIONS

path_error = 1

root_error = 2

no_employees_found = 3

OTHERS = 4.

IF NOT lt_hrpernr[] IS INITIAL.

* Get the Names from PA0000

SELECT * FROM pa0002 INTO TABLE lt_pa0002

FOR ALL ENTRIES IN lt_hrpernr



© 2009 SAP AG 18

WHERE pernr = lt_hrpernr-pernr


AND begda LE sy-datum.

* Get the Position from PA0001






IF lt_pa0001[] IS NOT INITIAL.

**Get Position Text from HRP1000

SELECT * FROM hrp1000 INTO TABLE lt_hrp1000

FOR ALL ENTRIES IN lt_pa0001

WHERE plvar = '01'

AND otype = 'S'

AND objid = lt_pa0001-plans

AND istat = '1'



AND langu EQ sy-langu.

SELECT * FROM t500p INTO TABLE lt_t500p


WHERE persa = lt_pa0001-werks.

ENDIF.

ENDIF.

ENDIF.

LOOP AT lt_hrpernr INTO wa_hrpernr.

wa_emp_list-pernr = wa_hrpernr-pernr.

* Prepare the Full Name

READ TABLE lt_pa0002 INTO wa_pa0002 WITH KEY pernr = wa_hrpernr-pernr.

IF sy-subrc = 0.

CONCATENATE wa_pa0002-nachn wa_pa0002-vorna

INTO wa_emp_list-name SEPARATED BY space.

ENDIF.


IF sy-subrc = 0.

*Position Title

READ TABLE lt_hrp1000 INTO wa_hrp1000 WITH KEY objid = wa_pa0001-plans.

IF sy-subrc = 0.

wa_emp_list-position = wa_hrp1000-stext.

ENDIF.

*Work location

READ TABLE lt_t500p INTO wa_t500p WITH KEY persa = wa_pa0001-werks.

IF sy-subrc = 0.

wa_emp_list-location = wa_t500p-name1.

ENDIF.

ENDIF.

APPEND wa_emp_list TO lt_emp_list.

CLEAR : wa_emp_list, wa_hrpernr, wa_pa0002,

wa_pa0001, wa_hrp1000, wa_t500p.

ENDLOOP.

SORT lt_emp_list BY pernr.

IF NOT lt_emp_list[] IS INITIAL.

* Bind the Employees table to the node

CALL METHOD lo_nd_emps->bind_table



© 2009 SAP AG 19

EXPORTING

new_items = lt_emp_list

set_initial_elements = abap_true.

ENDIF.

ENDMETHOD.

6) Define the Actions for SUBORGS TreeNodeType

a) Before creating an action for SUBORGS node, create an attribute ‘ND_SUBORG_REF’ to store the reference to the SUB_ORGS context node as show below which is used to retain the reference for the dynamic recursive nodes. Otherwise we get the exception when we click on the sub organization for the second time.

b) Define the action GET_SUB_ORG_EMPS on onAction of the SUBORGS (TreeNodeType UI element) to get the employees under the selected Sub Org. Unit.

The screen below shows the Action created on SUBORGS TreeNodeType.



© 2009 SAP AG 20

Write the following code on the action GET_SUB_ORG_EMPS.

Code Block - 4

METHOD onactionget_sub_org_emps.

* Data declaration

DATA: lo_nd_suborg TYPE REF TO if_wd_context_node,

lo_el_suborg TYPE REF TO if_wd_context_element,

ls_suborg TYPE wd_this->element_orgunits,

lo_nd_emps TYPE REF TO if_wd_context_node,

lt_emp_list TYPE if_main=>elements_emps,


lt_hrpernr TYPE TABLE OF hrpernr,



lt_hrp1000 TYPE TABLE OF hrp1000,

lt_t500p TYPE TABLE OF t500p,

wa_emp_list LIKE LINE OF lt_emp_list,

wa_hrpernr TYPE hrpernr,



wa_hrp1000 TYPE hrp1000,

wa_t500p TYPE t500p.

* Navigate to SUB_ORGS Node

lo_nd_suborg = wd_context->

path_get_node( path = `ND_TREE.ORGUNITS.SUB_ORGS` ).

* Navigate to EMPS node

lo_nd_emps = wd_context->get_child_node( name = wd_this->



© 2009 SAP AG 21

wdctx_emps ).

IF NOT lo_nd_suborg IS INITIAL.

wd_this->nd_suborg_ref = lo_nd_suborg.

ENDIF.

IF NOT wd_this->nd_suborg_ref IS INITIAL.

lo_nd_suborg = wd_this->nd_suborg_ref.

* Get the current element

lo_el_suborg = lo_nd_suborg->get_element( ).

lo_el_suborg = wdevent->get_context_element( 'CONTEXT_ELEMENT' ).

* get all declared attributes

lo_el_suborg->

get_static_attributes( IMPORTING static_attributes = ls_suborg ).

* Get the selected Sub Org Unit

CLEAR: lv_orgunit.

lv_orgunit = ls_suborg-orgeh.

* Get the Employees under Org Unit

REFRESH : lt_hrpernr, lt_pa0002, lt_pa0001, lt_hrp1000,

lt_t500p,lt_emp_list.


* Get the <PERNR> for the given Org. Unit

CALL FUNCTION 'HRCM_ORGUNIT_EMPLOYEE_LIST_GET'

EXPORTING

plvar = '01'

otype = 'O'

objid = lv_orgunit

begda = sy-datum

endda = sy-datum

TABLES

pernr_table = lt_hrpernr

EXCEPTIONS

path_error = 1

root_error = 2

no_employees_found = 3

OTHERS = 4.

IF NOT lt_hrpernr[] IS INITIAL.

* Get the Names











IF lt_pa0001[] IS NOT INITIAL.

**Get Position Text from HRP1000

SELECT * FROM hrp1000 INTO TABLE lt_hrp1000


WHERE plvar = '01'

AND otype = 'S'

AND objid = lt_pa0001-plans



© 2009 SAP AG 22

AND istat = '1'



AND langu EQ sy-langu.

SELECT * FROM t500p INTO TABLE lt_t500p


WHERE persa = lt_pa0001-werks.

ENDIF.

ENDIF.

ENDIF.

LOOP AT lt_hrpernr INTO wa_hrpernr.

wa_emp_list-pernr = wa_hrpernr-pernr.

* Prepare the Full Name


IF sy-subrc = 0.

CONCATENATE wa_pa0002-nachn wa_pa0002-vorna INTO wa_emp_list-name

SEPARATED BY space.

ENDIF.


IF sy-subrc = 0.

*Position Title

READ TABLE lt_hrp1000 INTO wa_hrp1000 WITH KEY objid = wa_pa0001-plans.

IF sy-subrc = 0.

wa_emp_list-position = wa_hrp1000-stext.

ENDIF.

*Work location

READ TABLE lt_t500p INTO wa_t500p WITH KEY persa = wa_pa0001-werks.

IF sy-subrc = 0.

wa_emp_list-location = wa_t500p-name1.

ENDIF.

ENDIF.

APPEND wa_emp_list TO lt_emp_list.

CLEAR : wa_emp_list, wa_hrpernr, wa_pa0002, wa_pa0001, wa_hrp1000, wa_t500p.

ENDLOOP.

SORT lt_emp_list BY pernr.

IF NOT lt_emp_list[] IS INITIAL.

* Bind the Employees table to the node

CALL METHOD lo_nd_emps->bind_table

EXPORTING

new_items = lt_emp_list

set_initial_elements = abap_true.

ENDIF.

ENDIF.

ENDMETHOD.

We are done with the processing logic, and we have to create the application and run it to see the result.



© 2009 SAP AG 26

Related Content

For more information, visit the Tree UI Element Help

For more information, visit the Web Dynpro ABAP Home Page

http://help.sap.com/saphelp_nw70/helpdata/EN/21/ad884118aa1709e10000000a155106/content.htm

http://www.sdn.sap.com/irj/scn/articles-webdynpro-all



© 2009 SAP AG 27

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.

SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk.

SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

tree with table in web dynpro abap

Documents