Start of Content Area

Procedure documentation Creating UI Elements Locate the document in its SAP Library structure

You want the view of this application to display a tree and the name of a selected file. In this step, you integrate a tree into the view and bind it to the corresponding context attributes and actions. You also create a label and an input field.

Procedure

...

       1.      To open the TreeView, double-click TreeView in the project structure in the Web Dynpro Explorer.

       2.      Choose the Layout tab page.

       3.      Create the UI elements displayed in the table below and set the properties.

Property

Value

TheTree of type Tree

Properties of Tree – dataSource

This graphic is explained in the accompanying textFolderContent

Properties of Tree – rootVisible

false

Properties of Tree – title

Filesystem

Properties of Tree – width

200px

TheNode of type TreeNodeType as child of TheTree

Properties of TreeNodeType – dataSource

This graphic is explained in the accompanying text FolderContent

Properties of TreeNodeType – expanded

FolderContent.IsExpanded

Properties of TreeNodeType – hasChildren

FolderContent.HasChildren

Properties of TreeNodeType – iconSource

FolderContent.IconSource

Properties of TreeNodeType – ignoreAction

FolderContent.IgnoreAction

Properties of TreeNodeType – text

FolderContent.Text

Event – onAction

Select

Event – onLoadChildren

LoadChildren

Label of type Label

Properties of Label – labelFor

Input

This graphic is explained in the accompanying text       You cannot set this property until you have created the Input input field.

Properties of Label – text

Selected File

Input of type InputField

Properties of InputField – readOnly

True

Properties of InputField – value

This graphic is explained in the accompanying text TextOfSelectedNode

Result

You have created a tree with a node of type TreeNodeType in the TreeView and bound it to the context attributes. You have also placed an input field in the view and bound it to a context attribute to enable the name of the selected file to be displayed later.

Next step:

Creating a Resource Bundle for the File Structure

 

 

End of Content Area