Initializing HTML Trees

For this example, the PeopleCode for initializing the HTML tree was put into the PostBuild event of the component that contained the page with the HTML area used with the HTML tree.

The PostBuild PeopleCode Example program is an example of how to initialize the HTML tree using the Tree classes and load only the root node into the HTML tree rowset.

The first time a user expands a node, the direct children of the node are loaded into the HTML tree rowset by the FieldChange PeopleCode Example program, shown in the following section. This chunking functionality enables the HTML tree to support trees of any size with good performance.

You cannot simply copy either the PostBuild or FieldChange PeopleCode example programs into your application. You must modify them to make them work with your data. You must make these changes to the PostBuild PeopleCode to initialize HTML trees:

  1. Set the PAGE_NAME and PAGE_FIELD_NAME fields.

    The PAGE_NAME field contains the name of the page that contains the HTML area and the invisible field that processes HTML tree events. The PAGE_FIELD_NAME field is the page field name of the invisible field that is used to process the HTML tree events.

    Note:

    The PAGE_FIELD_NAME field is the page field name of the invisible field, not the invisible field name.

  2. Set tree-specific variables.

    The &SET_ID, &USERKEYVALUE, &TREE_NAME, &TREE_DT, and &BRANCH_NAME variables contain specific information about the tree. Set these values to the tree you want to open. In the example PeopleCode that follows, these variables are set as follows:

    &SET_ID = PSTREEDEFN_VW.SETID; 
    &USERKEYVALUE = ""; 
    &TREE_NAME = PSTREEDEFN_VW.TREE_NAME; 
    &TREE_DT = PSTREEDEFN_VW.EFFDT; 
    &BRANCH_NAME = "";
    
  3. Set the PAGE_SIZE field.

    If you do not want the page to expand vertically to display the tree, set the PAGE_SIZE to a number of rows that will fit inside the HTML area. If some vertical expansion is okay, but you do not want the page to get too large, set the PAGE_SIZE to whatever value you like. Set the PAGE_SIZE to 0 if you do not care how big the page gets.

  4. Set the DISPLAY_LEVELS field to the number of levels that will fit inside the HTML area.

    If this field is set too large, wrapping may occur. Positional links at the top of the HTML area enable the user to navigate as the tree expands.

  5. (Optional) Set the DISPLAY_OPTION field.

    The default for the DISPLAY_OPTION field is to display both the node name and the description. You can display just the node name or just the description. The values for this field are:

    Field Value Description

    N

    Display the name only.

    D

    Display the description only.

    B

    Display both the name and description.

  6. (Optional) Set the STYLECLASSNAME field for the root node.

    The STYLECLASSNAME field controls the style of the link associated with a node or leaf. The default for the STYLECLASSNAME is PSHYPERLINK. If PSHYPERLINK is not the style you want to use, change this field value to the style you want.

  7. Change the last line to assign the output of GenerateTree to the field attached to the HTML area that will display the tree.

    In the example that follows, the HTML area control is the DERIVED_HTML.HTMLAREA. You must specify the record and field name associated with the HTML area control on your page.

PostBuild PeopleCode Example

The PeopleCode for initializing the HTML tree for this example was put into the PostBuild event of the component that contained the page with the HTML area used with the HTML tree.

This example shows how to initialize the HTML tree using the tree classes and load only the root node into the HTML tree rowset:

Component Rowset &TREECTL; 
&NODE_ROWSET = CreateRowset(Record.TREECTL_NODE); 
&TREECTL = CreateRowset(Record.TREECTL_HDR, &NODE_ROWSET); 
&TREECTL.InsertRow(1); 
&REC = &TREECTL.GetRow(2).GetRecord(1); 
/* Set the HDR options: 
1) PAGE_NAME - Name of the page that contains the HTML Area 
and the invisible field that will be used to process the HTML 
tree events. 
2) PAGE_FIELD_NAME - Page field name of the invisible field that 
will be used to process the HTML tree events. 
3) PAGE_SIZE - Number of nodes or leaves to send to the browser at 
a time.  
Set to 0 to send all of the visible nodes or leaves to the browser.
Default value: 0 
4) DISPLAY_LEVELS - Number of levels to display on the browser at 
a time.  Default value: 8 
5) COLLAPSED_IMAGE - Collapsed node image name.  
Default value: PT_TREE_COLLAPSED 
6) EXPANDED_IMAGE - Expanded node image name.  
Default value: PT_TREE_EXPANDED 
7) END_NODE_IMAGE - End node image name.  
Default value: PT_TREE_END_NODE 
8) LEAF_IMAGE - Leaf image name.  Default value: PT_TREE_LEAF 
9) IMAGE_WIDTH - Image width.  
All four images need to be the same size.  Default value: 15 
10) IMAGE_HEIGHT - Image height.  Default value: 12 
11) INDENT_PIXELS - Number of pixels to indent each level.  
Default value: 20 
*/ 
&REC.GetField(Field.PAGE_NAME).Value = "TREECTL_TEST"; 
&REC.GetField(Field.PAGE_FIELD_NAME).Value = "TREECTLEVENT"; 
&REC.GetField(Field.PAGE_SIZE).Value = 15; 
&REC.GetField(Field.DISPLAY_LEVELS).Value = 8; 
&REC.GetField(Field.COLLAPSED_IMAGE).Value = "PT_TREE_COLLAPSED"; 
&REC.GetField(Field.EXPANDED_IMAGE).Value = "PT_TREE_EXPANDED"; 
&REC.GetField(Field.END_NODE_IMAGE).Value = "PT_TREE_END_NODE"; 
&REC.GetField(Field.LEAF_IMAGE).Value = "PT_TREE_LEAF"; 
&REC.GetField(Field.IMAGE_WIDTH).Value = 15; 
&REC.GetField(Field.IMAGE_HEIGHT).Value = 12; 
&REC.GetField(Field.INDENT_PIXELS).Value = 20; 
&SET_ID = PSTREEDEFN_VW.SETID; 
&USERKEYVALUE = ""; 
&TREE_NAME = PSTREEDEFN_VW.TREE_NAME; 
&TREE_DT = PSTREEDEFN_VW.EFFDT; 
&BRANCH_NAME = ""; 
&MYSESSION = %Session; 
&SRC_TREE = &MYSESSION.GetTree(); 
&RES = &SRC_TREE.OPEN(&SET_ID, &USERKEYVALUE, &TREE_NAME, 
&TREE_DT, &BRANCH_NAME, False); 
/* Just insert the root node into the &TREECTL Rowset.  
If the root node has children, set the &PARENT_FLAG to 'X', 
so that its children will be loaded on demand. */ 
&ROOT_NODE = &SRC_TREE.FindRoot(); 
If &ROOT_NODE.HasChildren Then 
   &PARENT_FLAG = "X"; 
Else 
   &PARENT_FLAG = "N"; 
End-If; 
&NODE_ROWSET = &TREECTL.GetRow(2).GetRowset(1); 
&NODE_ROWSET.InsertRow(1); 
&REC = &NODE_ROWSET.GetRow(2).GetRecord(1); 
/* Set the NODE values: 
1) LEAF_FLAG - If this is a leaf set to "Y".  Default value: N 
2) TREE_NODE - Node name. 
3) DESCR - Node description.  (optional) 
4) RANGE_FROM - Leaf's range from value. 
5) RANGE_TO - Leaf's range to value. 
6) DYNAMIC_FLAG - If this leaf has a dynamic range, set to "Y".  
Default value: N 
7) ACTIVE_FLAG - Set to "N" for the node or leaf not to be a link.
  Default value: Y 
8) DISPLAY_OPTION - Set to "N" to display the name only.  
Set to "D" to display the description only.  
Set to "B" to display both the name and the description.  
Only used for nodes.  Default value: B 
9) STYLECLASSNAME - Used to control the style of the link 
associated with the node or leaf.  Default value: PSHYPERLINK 
10) PARENT_FLAG - If this node is a parent and its direct 
children will be loaded now, set to "Y".  If this node is a 
parent and its direct children are to be loaded on demand, 
set to "X".  Default value: N 
11) TREE_LEVEL_NUM - Set to the node's level.  Default value: 1 
12) LEVEL_OFFSET - If a child node is to be displayed more than 
one level to the right of its parent, specify the number of 
additional levels.  Default value: 0 
*/ 
&REC.GetField(Field.LEAF_FLAG).Value = "N"; 
&REC.GetField(Field.TREE_NODE).Value = &ROOT_NODE.NAME; 
&REC.GetField(Field.DESCR).Value = &ROOT_NODE.DESCRIPTION; 
&REC.GetField(Field.RANGE_FROM).Value = ""; 
&REC.GetField(Field.RANGE_TO).Value = ""; 
&REC.GetField(Field.DYNAMIC_FLAG).Value = "N"; 
&REC.GetField(Field.ACTIVE_FLAG).Value = "Y"; 
&REC.GetField(Field.DISPLAY_OPTION).Value = "B"; 
&REC.GetField(Field.STYLECLASSNAME).Value = "PSHYPERLINK"; 
&REC.GetField(Field.PARENT_FLAG).Value = &PARENT_FLAG; 
&REC.GetField(Field.TREE_LEVEL_NUM).Value = 1; 
&REC.GetField(Field.LEVEL_OFFSET).Value = 0; 
&SRC_TREE.Close(); 
DERIVED_HTML.HTMLAREA = GenerateTree(&TREECTL);