Header Ads

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.

image

 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.
image 
 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:
image

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.
image

 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
image

 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:
image

 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.
image

 Eventually call EXPAND_NODE.  
image
Since the tree context node is available in your event handlers these methods can be used to collapse or expand nodes programmatically.    
Powered by Blogger.