Create a Tree view display in CRM web UI

This blog gives the steps to create a Tree view display in CRM web UI. Below is a screen shot of the sample implementation.

Prerequisites: The business objects used should be defined in the business object layer as well. Also the dependent objects should be defined via relations.

Step 1: Context node for the tree

First of all you need a context node for the tree, which holds the displayed entities and defines the tree columns. It basically reflects the complete UI state of the tree control in the model.

In our example this is CASEHISTORY context node, which inherits from CL_BSP_WD_CONTEXT_NODE_TREE: Its method GET_TABLE_LINE_SAMPLE defines the tree columns available for display:

Here define a column as NODE_NAME which will be the node column (See screen shot for HTML Code). Of special importance is the REFRESH method of the tree, since it initializes the display:The built-in node factory is used here to create a root node for each BOL entity to be displayed in the tree.

The BOL entities for tree display come from the tree context node itself.

Step 2: Context nodes for the top level entries in the tree

In order to display entries in the tree you need a class which defines its top level and which inherits from the CL_BSP_WD_TREE_NODE_PROXY class. In the CRM workbench this class appears as “Tree Node Proxy” beneath the tree node “CASEHISTORY” under “Tree Structure”.

Besides the usual Getters and Setters used for display during runtime the context node offers a GET_CHILDREN method called when the user would like to see

Redefine method GET_NODE_NAME to display the text for the NODE. Redefine method GET_ICON to display the required ICON.

Step 3 : Basic Tag Tree

To get the tree rendered the simple tree sample application uses the <crmic:tree> tag in its html page (IbaseTree.htm). For your current development, please use The content of the tree comes from the CASEHISTORYcontext node with in the Table attribute via binding: table = “//CASEHISTORY/Table”. The node table, which knows about selected, opened and closed nodes, etc. also comes from the tree context node. It is handed over with the “nodeTable” attribute:

Step 4 : Tree event handling

When a node is collapsed on the UI for example a “collapse” event (see attribute “onCollapseNode” above) is raised; this is processed in the DO_HANDLE method of the controller: It delegates the event to the tree context node.

Collapse or expand tree node Call the COLLAPSE_NODE method of the tree context node when a tree node is collapsed on the UI.