Creating Tree Controls Using Adaptive Tags

To create a form button or link to a popup window that allows users to select options from a structured list of objects, use the pt:standard.tree, pt:standard.treelink or pt:standard.treeurl tag.

The pt:standard.tree and pt:standard.treelink tags create a form button or link, and the pt:standard.treeurl tag returns a URL that can be used in JavaScript. All three tags use a selection of attributes to control the tree display. The first four attributes are required.

Attribute	Description	Default	Syntax
pt:Class	The ID of the types of objects to display in the tree. Community pages are not supported. (REQUIRED)	value required	`pt:Class='<classID1>,<classID2>,<classID3>,...'`
pt:RootID	The ID of the root folder to be displayed in the tree. Use ID 1 for all folders. (REQUIRED)	value required	`pt:RootID='<folderID>'`
pt:SubmitMd	The mode in which the tree submits data to the opening page. Use mode 2 (javascript submit for remote development). When the data is submitted, the javascript function defined in pt:Submit is called on the main page. (REQUIRED)	value required (=2)	`pt:SubmitMd='2'`
pt:Submit	The name of the javascript function in the parent page to call when the tree is submitted (can take in an array of objects with name, Object ID, and Class ID). Do not include parentheses ("()") in the value of this attribute. (REQUIRED)	value required	`pt:Submit='<javascriptFunctionName>'`
pt:AllowEmpty	Allows users to click finish in a tree window with nothing selected: true=allow no selection; false=must select.	false	`pt:AllowEmpty='true' or pt:AllowEmpty='false'`
pt:Display	Limits the display to the selected objects, referenced by Class ID and Object ID. Cannot be used to display folders. The Class ID of each object must be included in pt:Class. The pt:RootID must be specified even though it will be ignored. Note: Do not include any folder Class IDs (17, 20, 515) in the pt:Class value or the tree will not display correctly.	n/a	`pt:Display='<classID1>,<objectID1>,<classID2>,<objectID2>,...' pt:Class='<classID1>,<classID2>,...' pt:RootID='1'`
pt:Form / pt:Input	Puts the AActivitySpace ID of the tree space into the target form input (used to reopen the tree after it has been created). The pt:Form attribute is the name of the parent form to which data will be passed back. The pt:Input attribute is the name of the target input in the parent form. The AActivitySpace ID of the tree space is placed in this input.	n/a	`pt:Form='<formName>' pt:Input='in_hi_parentSpace'`
pt:Hide	Hides the specified objects. (See pt:openerLink for a list of Class IDs.)	n/a	`pt:Hide='<classID1>,<objectID1>,<classID2>,<objectID2>,...'`
pt:Multi	Allows users to select multiple items: true=checkboxes, false=radio buttons.	false	`pt:Multi='true' or pt:Multi='false'`
pt:Select	The default selected item(s) in the tree, referenced by Class ID and Object ID.	none	`pt:Select='<classID1>,<objectID1>,<classID2>,<objectID2>,...'`
pt:SelectMd	The tree select mode: 1=compositeselect, 2=leafselect, 3=leafcompositeselect (1 = select folders; 2 = select objects; 3 = select folders and objects).	2	`pt:SelectMd='<modeID>'`
pt:ShowRoot	Allows you to hide the root folder: true=display root folder, false=hide root folder (if false, subfolders are displayed at the top level).	true	`pt:ShowRoot='true' or pt:ShowRoot='false'`
pt:SubTitle	Subtitle of the tree, for user instruction (e.g., "Choose a user.").	none	`pt:SubTitle='<windowSubtitle>'`
pt:Title	Title of the tree popup window.	none	`pt:Title='<windowTitle>'`
pt:windowFeatures	Allows you to define the features argument for the resulting window.open() function call, specifying the features for a standard browser window.	(see syntax)	`pt:windowFeatures='location=no,menubar=no, resizable=yes,height=400,width=400'`
pt:windowName	Window name of the popup tree, used in the resulting window.open() function call.	'_blank1'	`pt:windowName='<windowName>'`
pt:Access	Advanced attribute. Access level for the objects to be displayed: None=0, Read=1, Select =3, Edit=7, Admin=15 Note: For objects in the Knowledge Directory (folders and documents), only two levels of security are available (0 or 1). Use pt:Access='1' to allow users access to Knowledge Directory objects.	3	`pt:Access='<accessLevel>'`
pt:CommunityMode / pt:CommunityID	Advanced attribute. Specifies whether to include community objects in the tree: 1=no communities, 2=this community (specified community + all parent communities), 3=all communities. Note: If CommunityMode=2, you must specify the community folder ID (not the community object ID) in the pt:CommunityID attribute.	1	`pt:CommunityMode='<communityMode>' pt:CommunityMode='2' pt:CommunityID='<communityFolderID>'`
pt:DirMode	Advanced attribute. Specifies which mode to use when selecting objects from the Knowledge Directory: 1=Browse Mode; 2=Edit Mode Note: The default mode is Edit (2); users who do not have edit access to the Knowledge Directory will see an "access denied" error when they access the tree.	2	`pt:DirMode='<dirMode>'`

For a full list of ALI object type class IDs, see ALI Object Type Class IDs and Modes.

The following code sample produces a button with an "onclick" action that opens a popup window.

<pt:standard.tree xmlns:pt='http://www.plumtree.com/xmlschemas/ptui/' value="Button
Name" class="gContentSection" pt:windowName='myWindow' pt:windowFeatures='location=no,menubar=no,height=500,width=300'
pt:RootID='1' pt:Multi='true' pt:SelectMd='2' pt:SubmitMd='2' pt:Submit='PickerSubmit'
pt:Title='User' pt:SubTitle='Pick users' pt:Class='1'/>

The pt:treeLink tag can be used in the same way, except that it generates an anchor tag using the supplied text instead of a form button. In this tree control, the selection is limited to one user.

<pt:standard.treeLink xmlns:pt='http://www.plumtree.com/xmlschemas/ptui/' pt:windowName='myWindow'
pt:windowFeatures='location=no,menubar=no,height=500,width=300' pt:RootID='1' pt:Multi='false'
pt:SelectMd='2' pt:SubmitMd='2' pt:Submit='PickerSubmit' pt:Title='User' pt:SubTitle='Pick
a user' pt:Class='1'>Pick a user</pt:standard.treeLink>

Clicking the link opens a popup window that allows the user to browse and choose the referenced object type, as shown in the image below. (If the popup was opened using the first code sample, the tree would display checkboxes instead of radio buttons to allow multiple choices.)

As noted above, tree tags require a JavaScript function (named in the pt:Submit attribute) to handle the submission from the tree. The following sample code takes in an array with name, Object ID, and Class ID. When the pt:Multi attribute is set to false (single selections only), only the first set of declarations is necessary.

function PickerSubmit (myInput)
{
item0Name = myInput[0].Name;
item0ObjectID = myInput[0].ObjectID;
item0ClassID = myInput[0].ClassID;

item1Name = myInput[1].Name;
item1ObjectID = myInput[1].ObjectID;
item1ClassID = myInput[1].ClassID;
...
}

For optimum usability, the return array can be placed into hidden form elements and posted back to the source page so that the transformer link can specify which items should be selected if the user opens the dialog box again.

function returnFromFolderSelection(arrIn){
var tmpObject;
var iLength;

iLength = arrIn.length;


if (iLength > 0) {
tmpObject = arrIn[0];
document.Form1.HiddenSelectedFolderName.value = tmpObject.Name;
document.Form1.HiddenSelectedFolderObjectID.value = tmpObject.ObjectID;
document.Form1.HiddenSelectedFolderClassID.value = tmpObject.ClassID;
}
document.Form1.submit();
}

Parent topic: Standard Adaptive Tag Library (pt:standard)

AquaLogic User Interaction Development Guide

Creating Tree Controls Using Adaptive Tags