Trees in Web Dynpro

7/25/2019 Trees in Web Dynpro

1/27

Cons t r uc t ing a Recu rs i ve andLo adabl e Web Dyn pr o Tree

Re lease S A P Ne t W eave r 2004s


2/27

SAP Online Help 27.10.2005

Constructing a Recursive and Loadable Web Dynpro Tree 2

Copyright

Copyright 2005 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose

without the express permission of SAP AG. The information contained herein may bechanged without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietarysoftware components of other software vendors.

Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of MicrosoftCorporation.

IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400,OS/390, OS/400, iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner,WebSphere, Netfinity, Tivoli, and Informix are trademarks or registered trademarks of IBMCorporation in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin aretrademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, WorldWide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license fortechnology invented and implemented by Netscape.

MaxDB is a trademark of MySQL AB, Sweden.

SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, and other SAP products andservices mentioned herein as well as their respective logos are trademarks or registeredtrademarks of SAP AG in Germany and in several other countries all over the world. All otherproduct and service names mentioned are the trademarks of their respective companies.Data contained in this document serves informational purposes only. National productspecifications may vary.

These materials are subject to change without notice. These materials are provided by SAP

AG and its affiliated companies ("SAP Group") for informational purposes only, withoutrepresentation or warranty of any kind, and SAP Group shall not be liable for errors oromissions with respect to the materials. The only warranties for SAP Group products andservices are those that are set forth in the express warranty statements accompanying suchproducts and services, if any. Nothing herein should be construed as constituting anadditional warranty.


3/27



Icons in Body Text

Icon Meaning

Caution

Example

Note

Recommendation

Syntax

Additional icons are used in SAP Library documentation to help you identify different types of

information at a glance. For more information, see Help on HelpGeneral InformationClasses and Information Classes for Business Information Warehouseon the first page of anyversion of SAP Library.

Typographic Conventions

Type Style Description

Example text Words or characters quoted from the screen. These include fieldnames, screen titles, pushbuttons labels, menu names, menu paths,

and menu options.

Cross-references to other documentation.

Example text Emphasized words or phrases in body text, graphic titles, and tabletitles.

EXAMPLE TEXT Technical names of system objects. These include report names,program names, transaction codes, table names, and key concepts of aprogramming language when they are surrounded by body text, forexample, SELECT and INCLUDE.

Exampl e t ext Output on the screen. This includes file and directory names and theirpaths, messages, names of variables and parameters, source text, andnames of installation, upgrade and database tools.

Example text Exact user entry. These are words or characters that you enter in thesystem exactly as they appear in the documentation.

Variable user entry. Angle brackets indicate that you replace thesewords and characters with appropriate entries to make entries in thesystem.

EXAMPLE TEXT Keys on the keyboard, for example, F2or ENTER.


4/27



Copyright ............................................................................................................................ 2

Icons in Body Text.............................................................................................................. 3

Typographic Conventions................................................................................................... 3

Constructing a Recursive and Loadable Web Dynpro Tree......................................... 6

The Task............................................................................................................................. 6

Objectives........................................................................................................................... 7

Prerequisites....................................................................................................................... 7

System............................................................................................................................ 7

Knowledge ...................................................................................................................... 7

Sample Solution.............................................................................................................. 8

Next step:........................................................................................................................ 8

Copying a Web Dynpro component ............................................................................. 9

Procedure............................................................................................................................... 9

Copying the Web Dynpro component............................................................................. 9

Initial Project Structure........................................................................................................... 9

Next step:........................................................................................................................ 9

Recursive Context Nodes .......................................................................................... 10

Next step:...................................................................................................................... 10

Further Procedure for Creating the Web Dynpro Tree............................................... 11

Process Flow.................................................................................................................... 11

Next step:...................................................................................................................... 11

Creating the Context for the TreeView....................................................................... 12

Procedure ......................................................................................................................... 12

Result ................................................................................................................................... 13

Next step:...................................................................................................................... 13Procedure ......................................................................................................................... 14

Result ............................................................................................................................... 16

Procedure ......................................................................................................................... 18

Result ............................................................................................................................... 20

Initializing the Context ................................................................................................ 21

Procedure ......................................................................................................................... 21

Result ............................................................................................................................... 24

Event Handling: Expanding a Node ........................................................................... 25


5/27



Procedure ......................................................................................................................... 25

Result ............................................................................................................................... 26

Event Handling: Selecting an Entry............................................................................ 27

Procedure ......................................................................................................................... 27

Result ............................................................................................................................... 27


6/27



Construct ing a Recursive and Loadable WebDynpro Tree

In the following tutorial, you construct a Web Dynpro tree that only loads its data when theuser expands a node of the tree.

The Task

This tutorial shows you how to use a performance-efficient recursive Web Dynpro tree. Forthat purpose, you will insert the tree interface-element in a view. Furthermore, you willimplement the controller of the view in such a way, that only when the user expands a node,the direct sub-nodes and sub-elements of the node are added.

In this tutorial, you simulate a file structure that is to be displayed in the form of a tree. A WebDynpro tree represents the exact structure as it exists in the context of the view at runtime.Since it is impossible to know how many subfolders the file structure has, the context must be

constructed recursively. The recursive structure has the advantage that any number ofsubfolders can exist at runtime.

You also implement the selection of an entry from the tree-interface element. In this tutorial,you want to display the text of the selected entry in an input field.

You want the user interface of this Web application to have only one view. This view consistsof a tree-interface element, a label, and an input field for displaying the selected element.Initially, you want a node of the tree-interface element to be selected and expanded.


7/27



Objectives

When you have completed the described procedure, you will be able to:

! Use a context recursively

! Implement a Web Dynpro tree that loads data

! Implement an event handler that can react to the selection of a node of the tree.

Prerequisites

System

SAP Web Application Server 7.0

Knowledge

ABAP OO programming language

Basic knowledge of programming Web Dynpro applications

Basic knowledge of ABAP workbench


8/27



Sample Solution

Web Dynpro component WDT_TREE

Next step:

Copying a Web Dynpro component [Page 9]


9/27



Copying a Web Dynpro ComponentIn the system there is a master copy of a simple Web Dynpro component calledWDT_TEMPLATEavailable for this tutorial. This component consists of a window and an

embedded view. You can copy this component as described below, so you dont have to startfrom the very beginning.

Procedure

Copying the Web Dynpro Component...

1. Start the ABAP Workbench (Transaktion se80) and select the Web Dynpro componentWDT_TEMPLATE.

2. Open the context menu of WDT_TEMPLATEand copy the Web Dynpro component totree_comp.

3. Open the context menu of the new component tree_comp and create a Web Dynproapplication tree_app.

4. Activate this Web Dynpro component.

Initial Project StructureOnce the Web Dynpro component tree_comphas been copied, the following componentstructure is displayed in the launchpad of the ABAP workbench:

Next s tep:

Recursive Context Nodes [Page 10]


10/27



Recursive Context Nodes

In some applications, it may be necessary to display recursive data in the context. A simpleexample for the use of recursive data is the file system of an operating system. It consists offolders and files, and each folder can contain further folders and files. When definingcontroller contexts, it should be possible to display such recursive data structures.

In Web Dynpro, this is implemented as follows: Under the parent node, you insert a specialcontext node, a recursive node. You then assign this node the property repeated node. Thevalue of this property corresponds to the higher-level context node that is to be repeated. Atruntime, a recursive node is automatically of the non-singletontype and therefore existsexactly once for each parent node element.

To display a directory structure using the tree UI element, the following context structure isdefined in the example: At design time, a folder_contentnode is created that can representboth a folder and a document.

You can specify whether the node element represents a folder or a file by using the nodetypes TreeNodeTypeand TreeItemTypein the layout of the view. The TreeItemTypehas nochildren, the TreeNodeTypeis allowed to have children.

Next s tep:

Further Procedure for Creating the Web Dynpro Tree [Page 11]


11/27



Further Procedure for Creating the Web DynproTree

The individual steps for creating the tree UI-element are presented below.

Process Flow

The development process is divided into a declaration part and an implementation part.

In the declaration part, you execute the following steps:...

1. Create the context for the TreeView.

2. Create the necessary UI elements, including their binding to the context, and actions.

In the implementation part, you execute the following steps:

3. Create a resource bundle for the file structure.

4. Initialize the context.

5. Event handling for expansion of a node.

6. Event handling for selection of an entry.

Next step:

Creating the Context for the TreeView [Page 12]


12/27



Creating the Context for the TreeView

Before you create the context for theview1, you must decide which data you want to displayin the tree. This includes visible data, for example the text of a node, and invisible data, forexample, whether a node can be selected.

The objective of this example application is to display a file structure in a tree and display thename of the selected file. This means that you need an attribute in the context in which thecurrently selected name is stored and can be displayed. Several context attributes arerequired for the nodes of the tree.

The application requirements are as follows:

Each node must be labeled

A file must have a different icon to a folder

A file is a leaf and can therefore have no further leaves or nodes

Selecting a file must trigger an event that displays the name of the file on the screen;selecting a folder must not trigger an event.

This results in several context attributes that you create in the view1context and in UIelement properties.

Procedure

1. Open the view view1(Web Dynpro Components: tree_comp > views > doubleclick onview1).

2. Switch to the tab page context.

3. Create the nodes and attributes displayed in the table below and set the properties.

Context Element Type Properties Value

Folder Value Node

Folder_content Recursion Node r epeat edNode VIEW1.FOLDER

Children_loaded Value attribute t ype bool ean

Text Value attribute t ype st r i ng

File Value Node

Text Value attribute Type st r i ng

Text_Of_Selected_Node Value attribute t ype st r i ng

The propertiesof the context nodes Folderand Fileare as follows:

Cardinality 0..n

Selection 0..1

Initialization of Lead selection true

Singleton false


13/27



The tree UI-element represents a hierarchy as it is saved in the context. If thetree is not recursive, then the entire desired structure in the context must bedisplayed with the help of context-nodes and context-attributes. In doing so,bear in mind that the child nodes possess the singleton-property false. Therebyit is achieved that there is a child node instance for every node element in theparent node.

If the singleton-property was true, only one single node instance would berepresented, whose content would change every time the lead-selection of theparent node changed. Thus, the context for the unselected node elementswould not contain child nodes, so that in the tree-UI-element there would be nodata displayed at the unselected places.

The foldercontext element later displays a folder in the tree of the view1. The name of thefolder is saved in the textattribute.

The recursive node folder_contentlinks to the folder, which can thus be nested as deeply asyou like.

The filecontext element later displays a file in the tree of the view1. The name of the file issaved in the textattribute.

ResultThe view1context is defined and its file structure can be nested as deeply as is required. Italso has the corresponding properties for displaying the tree as requested.

Next step:

Creating UI elements and actions [Page 16]


14/27



Creating UI Elements and actions You want to display a tree in the view and the name of a selected file. In this step, you createthe layout of the view and bind it to the corresponding context attributes and actions. You alsocreate a label and an input field.

Procedure...

1. To open the view1, doubleclick on view1in the launchpad of the Web Dynprocomponent.

2. Switch to the tab page layout.

3. Create the UI elements displayed in the screen shots and table below and set theproperties:

a) Treeelement type tree


15/27



b) Folderelement type TreeNodeType

The value of the property iconSourceis case sensitive so you must writeit in upper case!

c) Fileelement type TreeItemType


16/27



d) Label and input field

Property Value

Labelof type Label

Properties of Label labelFor Input

You cannot set this propertyuntil you have created the Inputinput field.

Properties of Label text Selected File

Inputof type InputField

Properties of InputField readOnly True

Properties of InputField value text_of_selected_node

Before you define actions, you must clarify which options will be available to the user of theapplication.

You want the user of this application to be able to expand the folders of the tree and selectfiles. When a folder is expanded, you want all the files it contains to be displayed, as well asany subfolders. If a file is selected, you want the name of the file to be displayed on thescreen. Nothing happens when a folder is selected.

There are two ways to implement the expansion of the folder. It is possible to load the wholefile structure into the view1context during initialization of the view1. This variant is notsuitable in this case, since the large file structure would mean a long loading process andtransfer of a large amount of data. A more performance-efficient solution would be preferable.

For this reason, the nodes of a tree UI-element have the event onLoadChildren, which istriggered whenever a node with no data is expanded. You can bind an action load_childrento this event to load all the necessary data belonging to the current node. In this tutorial, thedata to be loaded comprises the folders and files located directly underneath the selectedfolder. A parameter value must be transferred to the action event handler, to enable it to knowwhich node has been selected.

A tree node also has the event onAction. This is triggered whenever the user selects a tree

element. In this example, the user can select a file. You have to define an appropriate actionselectto be able to react to the selection of a file. The event of the tree-node can then bebound to this action. You must also declare a parameter for this action to save the selectedelement.

Result

You have created a tree with two nodes of type TreeNodeTypeand TreeItemTypein theTreeViewand bound it to the context attributes. You have also placed an input field in theview and bound it to a context attribute to enable the name of the selected file to be displayedlater.

You have defined the necessary actions load_childrenand select. The implementation of themethods is covered later in this tutorial.


17/27



Next s tep:

Creating a Resource Bundle for the File Structure [Page 18]


18/27



Creating a Resource Bundle for the File Structure

You want the structure of the file system simulated in the tree. Therefore you create twointernal tables, one for the folders and one for the files. The internal tables consists of two

fields, one for the parent key and one for the child key.

You fill these tables once when you start the application.

Procedure

4. Create two new attributes for the tables containing the tree structure:MT_FOLDER_STRUCand MT_FILE_STRUC. Associated type is in both casesTIHTTPNVP. (This table type consists of two fields nameand valuethat you use forchild key and parent key.)

4. Switch to the tab page methodsand create two new methods fill_foldertableand

fill_filetableand implement them as follows:

FILL_FOLDERTABLE()

METHOD fill_foldertable .

DATA: wa_folder TYPE ihttpnvp.

* field NAME corresponds to child key* field VALUE corresponds to parent key

wa_folder-name = 'C'.wa_folder-value = 'Drives'.APPEND wa_folder to wd_this->mt_folder_struc.

wa_folder-name = 'D'.wa_folder-value = 'Drives'.APPEND wa_folder to wd_this->mt_folder_struc.

wa_folder-name = 'Documents'.wa_folder-value = 'C'.APPEND wa_folder to wd_this->mt_folder_struc.wa_folder-name = 'Program_Files'.wa_folder-value = 'C'.APPEND wa_folder to wd_this->mt_folder_struc.wa_folder-name = 'Temp'.wa_folder-value = 'C'.APPEND wa_folder to wd_this->mt_folder_struc.wa_folder-name = 'Windows'.

wa_folder-value = 'C'.APPEND wa_folder to wd_this->mt_folder_struc.

wa_folder-name = 'Games'.wa_folder-value = 'D'.APPEND wa_folder to wd_this->mt_folder_struc.

wa_folder-name = 'Word'.wa_folder-value = 'Documents'.APPEND wa_folder to wd_this->mt_folder_struc.

wa_folder-name = 'Winzip'.wa_folder-value = 'Program_Files'.APPEND wa_folder to wd_this->mt_folder_struc.wa_folder-name = 'Accessories'.

wa_folder-value = 'Program_Files'.APPEND wa_folder to wd_this->mt_folder_struc.


19/27



wa_folder-name = 'Java'.wa_folder-value = 'Windows'.APPEND wa_folder to wd_this->mt_folder_struc.wa_folder-name = 'Temporary_Internet_Files'.wa_folder-value = 'Windows'.APPEND wa_folder to wd_this->mt_folder_struc.

wa_folder-name = 'Soccer'.wa_folder-value = 'Games'.APPEND wa_folder to wd_this->mt_folder_struc.wa_folder-name = 'Chess'.wa_folder-value = 'Games'.APPEND wa_folder to wd_this->mt_folder_struc.

ENDMETHOD.

FILL_FILETABLE()

method FILL_FILETABLE .

DATA: wa_file TYPE ihttpnvp.

* field NAME corresponds to child key* field VALUE corresponds to parent key

wa_file-name = 'start.bat'.wa_file-value = 'C'.APPEND wa_file to wd_this->mt_file_struc.

wa_file-name = 'calc.xls'.wa_file-value = 'Documents'.

APPEND wa_file to wd_this->mt_file_struc.wa_file-name = 'db.mdb'.wa_file-value = 'Documents'.APPEND wa_file to wd_this->mt_file_struc.

wa_file-name = 'first.doc'.wa_file-value = 'Word'.APPEND wa_file to wd_this->mt_file_struc.wa_file-name = 'second.doc'.wa_file-value = 'Word'.APPEND wa_file to wd_this->mt_file_struc.

wa_file-name = 'wz.com'.wa_file-value = 'Winzip'.APPEND wa_file to wd_this->mt_file_struc.

wa_file-name = 'test.zip'.wa_file-value = 'Winzip'.APPEND wa_file to wd_this->mt_file_struc.

wa_file-name = 'calculator.exe'.wa_file-value = 'Accessories'.APPEND wa_file to wd_this->mt_file_struc.wa_file-name = 'notepad.exe'.wa_file-value = 'Accessories'.APPEND wa_file to wd_this->mt_file_struc.wa_file-name = 'paint.exe'.wa_file-value = 'Accessories'.APPEND wa_file to wd_this->mt_file_struc.

wa_file-name = 'app.java'.wa_file-value = 'Java'.APPEND wa_file to wd_this->mt_file_struc.


20/27



wa_file-name = 'app.class'.wa_file-value = 'Java'.APPEND wa_file to wd_this->mt_file_struc.

wa_file-name = 'soccer.exe'.wa_file-value = 'Soccer'.APPEND wa_file to wd_this->mt_file_struc.

wa_file-name = 'field.lnd'.wa_file-value = 'Soccer'.APPEND wa_file to wd_this->mt_file_struc.

wa_file-name = 'chess.exe'.wa_file-value = 'Chess'.APPEND wa_file to wd_this->mt_file_struc.

endmethod.

In the next step you will call these two methods within the standard method wddoinit.

Result

You have created two new internal tables to build up the structure of the tree by appendingthe tables with the folder or file name as child key and the corresponding parent key.

Next s tep:

Initializing the Context [Page 21]


21/27



Initializing the ContextIn the previous steps, you have created the context structure to represent the file system. Youhave also created a resource bundle containing the file structure.

In this step, you will load the content of the resource bundle to the context.

To do this, you load the resource bundle in the method wddoinit()and add the required folderto the context. You also set the individual context attributes, to which the individual tree nodesare bound. This means the name of the folder and file to be displayed.

Procedure...

1. To open the TreeView , double-click on view1of the Web Dynpro componenttree_comp.

2. Switch to the tab page methods.

3. Enter the following lines:

WDDOINIT()

method WDDOINIT.

data:lr_current_node type ref to if_wd_context_node,lr_current_element type ref to if_wd_context_element.

* Fill tables with the structure of the treefill_foldertable( ).fill_filetable( ).

lr_current_node = wd_context->get_child_node( 'FOLDER' ).lr_current_element = lr_current_node->create_element( ).lr_current_node->bind_element( lr_current_element ).lr_current_node->set_lead_selection( lr_current_element ).lr_current_element->set_attribute( name = 'TEXT' value =

'Rootknoten' ).

* Create the root nodecreate_node(

exportingcur_element = lr_current_elementparent_key = 'Drives' ).

endmethod.

The method create_node()creates the root node and an element for each child. A child canbe a folder or a file.

4. Implement the method create_nodeas follows:

a) Add the following parameters to this method.


22/27



b) Enter the following code lines.

Create_node()

method CREATE_NODE .

DATA:lr_cur_node TYPE REF TO if_wd_context_node,folder_item TYPE ihttpnvp,file_item TYPE ihttpnvp.

* create the new node by requesting it as a child nodelr_cur_node = cur_element->get_child_node( 'FILE' ).

* create elements for filesLOOP AT wd_this->mt_file_struc INTO file_item

WHERE value = parent_key.create_file_element(EXPORTING

file_item = file_itemcur_node = lr_cur_node).

ENDLOOP.

lr_cur_node = cur_element->get_child_node( 'FOLDER_CONTENT' ).

* Create elements for foldersLOOP AT wd_this->mt_folder_struc INTO folder_item

WHERE value = parent_key.create_folder_element(EXPORTING

folder_item = folder_itemcur_node = lr_cur_node ).

ENDLOOP.

Endmethod.

The method create_node()creates the root node and an element for each child. A child canbe a folder or a file.

5. To create an element for each folder in the tree you have to implement the followingmethod create_folder_element. This method is called in create_node.



23/27



b) Enter the follwing program code.

Create_folder_element()

method CREATE_FOLDER_ELEMENT .

data:lr_cur_element type ref to if_wd_context_element.

lr_cur_element = cur_node->create_element( ).lr_cur_element->set_attribute( name = 'TEXT' value = folder_item-

name ).

cur_node->bind_element( new_item = lr_cur_elementset_initial_elements = abap_false ).

Endmethod.

6. To create an element for each file in the tree you have to implement the followingmethod create_file_element . This method is also called in create_node.


b) Enter the follwing program code.

Create_file_element()

method CREATE_FILE_ELEMENT .

DATA:lr_cur_element TYPE REF TO if_wd_context_element.

lr_cur_element = cur_node->create_element( ).

lr_cur_element->set_attribute( name = 'TEXT' value = file_item-name).

cur_node->bind_element( new_item = lr_cur_elementset_initial_elements = abap_false ).

endmethod.


24/27



Result

You have defined method that create the root node and methods that create the child nodesof the root node. A child can be a file or a folder.

When you start the applicaton now, you will see the root node and you can expand it to seethe first level.

Next step:

Event Handling: Expanding a Node [Page 25]


25/27



Event Handling: Expanding a Node

You want the user of this application to be able to expand nodes in the tree to display thefolders and files that they contain.

As mentioned above, there are two opportunities to create the content of the tree. In the lessperformance-efficient variant, you create the entire content of the tree during initialization andtransfer a large amount of data to the browser. This would certainly be a viable option in thecase of a small tree. In this case, no event handling and no load_childrenaction is required.Since the context is filled in the view1, you can expand and collapse nodes withoutestablishing a connection to the server.

However, in this application it is possible that a very large amount of data will be displayed inthe tree and that the user will not expand every node. Therefore, it is more efficient to onlyload the data that the user wants to see into the context. You have already made thenecessary steps to meet the requirements so that data is only loaded when a node isexpanded for the first time. You have defined the load_childrenaction, which contains a nodeelement as a parameter. You have bound this action to the event onLoadChildrenof the treenode.

Now you have to implement the method onActionload_children() , to load data for the selectednode. This method is only executed once for each node.

You can reuse the private method create_node()that you created for context initializationpurposes.

Procedure...

1. To open the view1, double-click view1in the project structure in the Web DynproExplorer.

2. Switch to the tab page methods.

3. Implement the method onAct i onl oad_chi l dr en( ) as follows:

ONACTIONLOAD_CHILDREN()

method ONACTIONON_LOAD_CHILDREN.

data parent_key type string.data children_loaded type wdy_boolean.

* check that the children of the same node weren't loaded a second* timecontext_element->get_attribute( exporting name = 'CHILDREN_LOADED'

importing value = children_loaded ).check children_loaded = abap_false.context_element->set_attribute( name = 'CHILDREN_LOADED' value =

abap_true ).

context_element->get_attribute( exporting name = 'TEXT' importingvalue = parent_key ).

* create the child nodescreate_node(

exportingcur_element = context_elementparent_key = parent_key ).

endmethod.


26/27



You have to check in the method whether the children of a parent node werealready loaded or not. If you dont check this the child elements will be displayedmultiple when you expand and collapse the same node several times.

4. Add parameter CONTEXT_ELEMENTto the interface of this method:

Result

You have added all the necessary lines in the method onActionload_children() to load data fora node when it is selected.

Next s tep:

Event Handling: Selecting an Entry [Page 27]


27/27


Event Handling: Selecting an Entry

When a file in the tree is selected, you want its name to be displayed in the input field.

You have defined the action Select, which contains the selected node as a parameter. To fillthis parameter with the correct value at runtime, you have executed a parameter mapping.

In this step, you transfer the name of the selected element to the context attributetext_of_selected_node to display the file name in the input field.

Procedure...

1. To open the view1, double-click view1of the Web Dynpro component.

2. Switch to tab page methods.

3. Enter the following lines in the method onAct i onSel ect ( ) :ONACTIONselect()

method ONACTIONSELECT .

data:text type string,children_loaded type boolean.

context_element->get_attribute(exporting name = 'TEXT'importing value = text ).

wd_context->set_attribute(

exportingname = 'TEXT_OF_SELECTED_NODE'value = text ).

endmethod.

4. Add parameter CONTEXT_ELEMENTto the interface of this method:

Result

You have added all the necessary lines in the method onActionSelect()to display the name ofa selected file in the input field.

Trees in Web Dynpro

Documents

Transcript of Trees in Web Dynpro