Tree Hierarchy in Web Dynpro

[Former Member]

Hello All,

I want to create a web dynpro application that implements some functionlity that I saw in the SAP backend system. In the backend, I have a transaction that allows me to drill down into nodes and add and remove them with a right click context menu. This is like a tree structure with the ability to add, remove and modify node elements. I want to present this to the front end user using web dynpro and possible in a nice table format. How can I go about doing this? Any suggestions?

Thanks

Marshall.

[Former Member · Accepted solution]

Search for TreeByNestingTableColumn and read the excellent weblogs by Valery Silaev:

/people/valery.silaev/blog/2005/06/13/master-of-columns-part-i

/people/valery.silaev/blog/2005/06/20/master-of-columns-part-ii

Armin

[Former Member · Accepted solution]

Thanks Armin,

That works really great for displaying something.

But what about now if I want to insert a node at a particular level? And then commit that to the backend?

Any suggestion? Is this possible with this UI Element?

Thanks

Marshall

[Former Member · Accepted solution]

Of course that's possible. Adding a tree node is just adding a context element at the corresponding position. This is completely independent from the display of the context data using a TreeByNestingTableColumn.

Armin

[Former Member · Accepted solution]

Hi Armin,

I'm having a little trouble thinking about this logically because of the recursive child node in the context.

Can you give me a little insight into how this might be achieved? ie which UI elements to use, what to do in the context and how to insert a row in the TableByNestingTree Element?

I would appreciate it,

Thanks

Marshall.

[Former Member · Accepted solution]

Please read the mentioned weblogs carefully.

Armin

[Former Member · Accepted solution]

Armin,

I have read both the blogs very carefully. However, the blogs assumes that the reader has alot of knowledge in this area. I dont. The first blog was somewhat easy to follow, but the second blog makes hardly any sense to me and its hard to relate it to the scenario I'm trying to implement. I found a document called "Integration of a Tree Structure in a Web Dynpro Table" which was very helpful and simple to follow. However, its too simple, and I am trying to figure out how to add nodes and leafs to the table at runtime. Eventually, this needs to be sent to the backend via RFC.

Thanks for guiding me to those blogs and maybe they will be useful in the future. But if there are any other docs, How-To guides or knowledge you would like to share then I will be very grateful.

Thanks for the help.

Marshall.

[Former Member · Accepted solution]

Ok, I try to explain with a simple example.

Say, your context has the following structure:

WebDynproClass (node, cardinality=0:n)
- expanded (boolean)
- name (string)
- SubClasses (recursive node -> Class)

Then, you can build the following tree:

UIElement (root)
+ AbstractCaption (e_1)
   + AbstractButton (e_1_1)
      + Button (e_1_1_1)
+ RadioButton (e_2)

with code like

/* helper method, put inside //@@begin others...//@@end section */
private IWebDynproClassElement addSubClass(String name, IWebDynproClassElement parent)
{
  IWebDynproClassElement child = (parent == null)
    ? wdContext.nodeWebDynproClass().createAndAddWebDynproClassElement()
    : parent.nodeSubClasses().createAndAddWebDynproClassElement();
  child.setExpanded(true);
  child.setName(name);
  return child;
}

/* builds initial tree, call from wdDoInit() */
private void init()
{
  IWebDynproClassElement root = addSubClass("UIElement", null);
  IWebDynproClassElement e_1 = addSubClass("AbstractCaption", root);
  IWebDynproClassElement e_1_1 = addSubClass("AbstractButton", e_1);
  IWebDynproClassElement e_1_1_1 = addSubClass("Button", e_1_1);
  IWebDynproClassElement e_2 = addSubClass("RadioButton", root);
}

Now if you want to add "Caption" as subclass of "AbstractCaption" later, you have to find the context element that represents the "AbstractCaption" class and add it as above:

IWebDynproClassElement parent = find("AbstractCaption");
addSubClass("Caption", parent);

If you have to implement the find() method at all depends on your application. Maybe you want to

- provide a context menu (available since 7.1) on the tree nodes to add child nodes, or

- provide a static menu at the table cell editor (since 7.0)

- you provide a toolbar button to add a child node to the currently selected tree node (since 6.40)

Example for a static menu at a TextView cell editor:

Table (dataSource = WebDynproClass)
+ TreeByNestingTableColumn (expanded = WebDynproClass.expanded)
   + TextView (text = WebDynproClass.name)
      + Menu
         + MenuItem (id = AddChildItem, onAction = AddChild, nodeElement -> AddChild.parent)

Action "AddChild" has text "Add Child" and a parameter "parent" of type IWebDynproClassElement. Action handler is

  public void onActionAddChild(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent, com.sap.demo.rec.treetable.comp.wdp.IPrivateMainView.IWebDynproClassElement parent )
  {
    //@@begin onActionAddChild(ServerEvent)
    addSubClass("Child #" + parent.nodeSubClasses().size() + " of " + parent.getName(), parent);
    //@@end
  }

Then you will get a menu at each tree node with an entry "Add Child" that adds a new child node with some generic text.

Armin

[Former Member · Accepted solution]

Hi Armin,

Thanks for explaining.

I was wondering how I might be able to add an editable row underneath the lead Selected row of the table. For example, say I have the following tree table.

- RootNode
  - Child1
    - SubChild1
  - Child2

If I have Child1 selected and a click a button called Insert Node, how can I add an editable row underneath Child1 and have some input fields so I can name the next node SubChild2, and then I can click the newly created SubChild2 and add leaves to it??

Do I need to have a separate context node for the new row and then add it into the recursive node? Or can I do all this in the recursive node? Can you help me with the steps please?

Thanks.

[monalisa_biswal · Accepted solution]

hi Marshall,

For your scenario recursive node would be the most appropriate option.

Through parameter mapping you will get to know the currently selected element.

To create an element under that you have to access recursive node on that element and add elements to that node.

wdDoModifyView->

IWDButton btn = (IWDButton)view.getElement(<"Add Button">);

btn.mappingOfOnAction().addSourceMapping(

"nodeElement",

"nodeElement");

In onActionButton()->

IPrivate<view>View.I<Node>Element selectedElement = (IPrivate<view>View.I<Node>Element ) nodeElement;

IPrivate<view>View.I<Node>Node childNode=selectedElement.node<Recursive>Node();

IPrivate<view>View.I<Node>Element newElement = childNode.create<Node>Element ();

childNode.addElement(newElement);

[Former Member · Accepted solution]

Hi Monalisa,

in my layout i have a toolbar bar button called "Insert Node".

This button fires an action with the signature

onActionInsertNode( wdEvent, IPrivate<n>.ILevelElem elem).

the code inside this event calls the method to add the node

addNewLevel(elem.nodeCHILD_LEVEL(), elem.getID());  // NULL pointer exception at this line

this is the method implementation

public void addNewLevel( com.sjm.wdp.wdp.IPrivateTreeAppCompView.ILEVELNode node, java.lang.String parentId )
  {
    //@@begin addNewLevel()
    PrivateTreeAppCompView.ILEVELElement newLevelElement;
    if(parentId.equals(Levels.getParentId(node.LEAD_SELECTION)))
    {
    	newLevelElement = wdContext.nodeLEVEL().createLEVELElement();
 	node.addElement(newLevelElement);
    }
    //@@end
  }

notice that I'm grabbing the lead selection id of the node selected.

However, this code gives me a null pointer exception at the line the calls the method addNewLevel.

What am I doing wrong?

[Former Member]

Solved