There are many reasons why you may want to interact with a Tree Prompt with JavaScript. Maybe you want to enable the finish button if a member on the bottom level is selected, or to select the last member, or to ensure only 5 members are selected.
This post isn’t to detail every possible scenario, but to detail the some functions available and how to use them. It’s important to note that I am hardly a JavaScript expert, so there may be better ways to do anything I say here.
First you need to identify your tree prompt. Unlike most prompt controls, where the identifier changes based on the type viewer being used, the tree prompt can be called using window.treePROMPTNAME. Unfortunately we can’t apply an onmousedown event to the tree prompt, so we have to wrap it in a div.
Createa tree prompt and give it the name “Time”. Drag an HTML item to the left of the tree prompt
<div id='myTree'>
and an HTML item to the right
</div>
.
Now we can attach an event to capture the clicks:
<script> document.getElementById('myTree').onmousedown=function(){runTree('Time')}; </script>
Any click inside that div will now trigger the runTree function passing ‘Time’ as an argument.
Because there are a number of JavaScript functions are run upon selecting an element we can’t immediately get the value of the element. So we can use the setTimeout function to wait 200 milliseconds before getting the data.
<script> function runTree(id) { t=setTimeout('checkTree("'+id+'")',200); } </script>
After 200 milliseconds the checkTree function will run, also passing Time as the argument.
<script> function checkTree(id) { selectedTreeNode = window['tree'+id].getLastSelectedNode(); if(!selectedTreeNode) {return} alert(selectedTreeNode.getName()); alert(selectedTreeNode.getValue()); alert(selectedTreeNode.getLevel()); } </script>
The checkTree function will now alert the selected elements Name, MUN, and Tree level. Note the Tree Level is from the tree prompt, not the member’s hierarchy level. But knowing these, we can then call other functions. You could check the level number of the selected element and enable or disable the tree prompt while popping up a message.
You can programmatically set the default value of the tree prompt using JavaScript. Unfortunately it appears it is only possible to do this on the first level.
<script> var node = window.treeTime.getRootNode().getChildren()[window.treeTime.getRootNode().getChildren().length-1]; node.setSelected(true); node.updateNodeSelection(); node.updateParent(); window.treeTime.setLastSelectedNode(node); </script>
This will only effect the prompt after the page has been loaded. Prompt pages should be fine, but prompts on the report page will need to have a default value set in the prompt macro.
I learned about these functions by going through the js file associated with tree prompts. Check out ..webcontentpromptingCTreeIE5NS6.js for more Tree Prompt functions.
It worth noting that these functions are written by IBM, and are liable to change on upgrade. I’d be interested in hearing if these work in any of the previous versions of Cognos.
Very nice! Please keep up the JavaScript work, would be fun to see what other web languages we can use!
Hi,
your javascript for accessing tree prompts and selecting one is a hell of a script that saved me from a difficult situation since my business wanted a tree prompt to have two different default values selected according to a test. I had a solution before which concisted in such a case to double the prompts, the QS behind, its parameters and the QS of my main charts. But the drawback is that it can quickly become a mess to manage. So your solution is perfect for me. Nonetheless I must say I’m not very good at javascript and I would need now to browse the tree prompt in a loop in order to select the default value according to its getValue() result.
Would you be kind enough to help me and tell me how is it possible to assess in a loop its getvalue() ?
Thanks in advance for your help
Hi Greg,
You can use getRootNode().getChildren() to get an array of the nodes on the first level. Unfortunately I have no found a way to access their children as they don’t actually exist on the page until the node is expanded.
As an example, if I have a tree prompt named “Time” based on the time hierarchy, with the top level being Years, the following would loop through the top level until it finds the string “2005” and select the node.
HI,Paul.I got so much benefit ,so thanks for your sharing.But i also have a problem to ask you .I wanna your help if you have time to reply.My problem is that ,my client wanna Tree prompt to be acted like this:If he clicked the father node, then the children nodes would be marked with “√”; if he deselect the father node,then the children nodes would be deselect too!Can you realize these functions ?
A lot of people ask for this, to match the Excel tree prompt. I’ve tried to find a way to do this, I just don’t think it’s possible with the current API. The children in tree prompts don’t exist in the DOM until you expand the father. The only thing to do would be to put in an enhancement request with IBM.
I found something on the web for your problem. Maybe this will help you:
http://cognoswithashu.blogspot.de/2016/04/cognos-tree-prompt-with-javascript-on.html
Hi, could someone help me with the code to select time period from the first day of current year to last day of previous month?
Thank you in advance
This period I would like to set as a default value for tree prompt.
Could you suggest a way to restrict multiple leaf notes beging selected. At a time the user should be allowed to select only a single leaf under each level. Is this possible? Appreciate your response.
Can some one help me with defaulting a value in value prompt based on a data item in the query and still allowing users to change the prompt selection. I need to use Java script to get this functionality in cognos 10.1
Hi, Can you suggest me how to expand tree node using javascript?
Hii Paul,
I have a question. ihave list with plan_type, Plan_info columns. List is sectioned on the basis of plan_type.The plan_type column is having 3 plans(ABC, DEF, XYZ). I required a buttons named as “Show Plan Basics” and “Hide Plan Basics” for each plan in the list.
When user clicks on ABC Plan Button, it will show only respective plan details and hide when click on respective plan button. lly for other plans also. I got only little bit. when click on any plan button it goes to first plan details.
To do this , I applied “div tag” to list table. And I took two buttons one for show plans basics and one for hide plans basics inside list. Based on div id i am showing and hiding list. But it works only first plan.
Could please help me ….
Regards,
Ram