I've just started playing with the Tree Control. I don't know when this was introduced to HTML Composer, but it appears to lack some basic capabilities.

I would like to add a control to search for an item in the Tree Control.

I would like to add a button to expand or collapse the Tree Control.

I would like to add a button to select all or de-select all items in the Tree Control.

Has anyone been able to add these capabilities?

I haven't found anything in the documentation "Designing a User Interface for a Web Application With the HTML Composer" that discusses how you get a Tree Control with check boxes rather than radio buttons. It has to do with whether or not the control is set to multi-select, but I don't see that property anywhere.

Switching back and forth from Design, Parameters and HTML tabs seems to make the Tree Control external procedure run every time you return to the Design tab.

This message has been edited. Last edited by: Francis Mariani,

Finally found the way to choose between Radio and Checkboxes. I knew it had something to do with Single vs Multiple selection but could not find any property in Composer that would allow that to happen.

After going through some old code I had written I found it.

It all lies in the target .fex and how it handles the &parameter tied to the control.

For the tree control to use checkboxes, that is, to allow multiple selection, the .fex has to specify the &parameter as a multi-select OR:

WHERE NODE_NO EQ &P_NODE_NO.(OR(<1,1>,<1,2>)).P_NODE_NO.;

If you want radio buttons in the tree control, that is, a single select, then the underlying .fex has to use the parameter as this:

WHERE NODE_NO EQ &P_NODE_NO

This all assumes of course that the tree control created in HTML Composer is linked to the P_NODE_NO parameter in the example and then it will work.

Not very intuitive, I know ... I should say, not intuitive *at all* but that's how it is.

Welcome to my world.

1. In order to make it Mult-select > Go to paramaters tab and create a new paramter using the Multselect OR option. It's not clean as if you re-link your report, you will lose it if you have a -Default in there, so you need to drop and recreate it everytime you do that. -- We use a lot of SQL Pass-thru so we can't use njsden's suggestion

2. As far as deselcting all the selected, you can add a button and using a javascript function to unselect all.

3. This is my first attempt at using Tree Controls.

4. Saved Paramters do not work quite well with Tree Controls. It also saves above selected values which is supposed to be fixed in HF6, but I installed HF 6 and now my tree controls do not display at all.

5. I wish I could find a way to get the Displayed value of the tree control. I can get the name of the control and each level, as well as the value, but it would be nice to get the display.

I have spent the last few weeks working with Tree Controls, it's a slow process with them and this has been my worst nightmare at the moment.

Neftali,

Thanks for sharing your discovery. I would have never figured it out as I cannot find this behaviour documented in "Designing a User Interface for a Web Application With the HTML Composer".

MattC,

Self imposed discipline will turn the nightmare into a bad dream and that prepares you for the next nightmare...

I've been reading the posts about the tree control. Can anyone tell me an example of how you would use it? I've never tried using it, mostly because I haven't figured out what I would do with it. An example or 2 would be most appreciated. I guess my creativity is fading now that I'm getting more "seasoned" (OLD).

Mike in DeLand

Mike,

There are 2 tree control types:

1. single source - used with cube databases and we only support 3: SSAS, Essbase and SAP/BW. This tree control must be populated by a very specifically coded procedure as shown in our documentation.

2. multisource - this has layers that can be populated by a normal XML procedure and each layer "chains" to the next. For example, COUNTRY in layer1, CAR in layer 2, and MODEL in layer 3.

Thanks for the info! I was wondering if anyone could post a screen shot showing how they used the tree controls.

Mike

How does a single-source tree control 'know' that the external procedure containing WebFOCUS code is pointing to SSAS, Essbase or SAP/BW. Where is this documented? I see no mention of "SAS" and "Essbase" in the documentation "Designing a User Interface for a Web Application With the HTML Composer, Version 7 Release 7.03".

Please don't tell me I'm doing something wrong (again) by having my external procedure read an Oracle table.

Francis,

Page 196 of the manual you reference states multidimensional datasource for example SAP BW that uses the parent/child model. That is how we describe cube data. There is also a note on the same page that says cube data should be sued to populate single source trees.

Page 198 at the top, shows the structure of what a procedure to populate a single source tree should look like.

Since we do not support an Oracle Cube, you should need to use a multisource tree for that data and multisource trees require at least 2 levels.

Thanks for pointing out the pages that describe Tree controls.

I suppose I read this "You may also use a tree control for non-hierarchical data sources" as meaning I can retrieve data from a simple Oracle table.

Yes.

Why is the first value of the multi-select Tree control selected, even if I have Default Selection set to No?

quote:

Why is the first value of the multi-select Tree control selected, even if I have Default Selection set to No?

I witnessed this as well. We would never pass in the parent in our tree control so I had to use javascript to force it unselected as well as not make it selectable.

Matt, I'm interested in seeing the JS you used to uncheck the checkbox. It resides in a table element that's part of a table that contains the tree control - did you write something to traverse the table > tr > td > table > tr > td ...

Some jQuery magic may help there.

To uncheck any checkbox that may be checked within the tree one could simply do something like this:

$('input:checkbox:checked', '#mytreeID').attr("checked",false);


To specifically address the "parent" checkbox one could try something like this:

$('#yourTreeID>table>tbody>tr:nth-child(1)>td:nth-child(2)>label>input:checkbox').attr("checked", false);


Though the latter is very specific and probably more "efficient" than just looking for all input elements recursively within the tree as done in the first example, the syntax is not only complex but also fragile as IBI may decide to change the internal HTML rendering of the tree control in future versions of the product and that would cause the second jQuery selector to stop working.

As we are usually being discouraged from interacting directly with the DOM when trying to manipulate the HTML controls implemented with HTML Composer, it would really help having more IbComposer_* JavaScript utilities offering wider functionality than the 6 or 8 functions currently available in 7.7.03.

Until that happens, we'll have to resort to inspecting the DOM and playing around it but beware of future upgrades or even HotFixes!!!

Neftali,

Thanks for the jQuery suggestion, it worked:

$('input:checkbox:checked', '#compUid_14_table_0').attr("checked",false);

Translating jQuery to English, does this line mean "uncheck ALL checkboxes in the html element with id 'compUid_14_table_0'"? Or just the first one, though I doen't see and reference to only one checkbox.

Regards,

quote:

To uncheck any checkbox that may be checked within the tree one could simply do something like this:

$('input:checkbox:checked', '#mytreeID').attr("checked",false);

Yes. The jQuery expression looks for ALL checkbox controls but only those that are currently in a checked status (:checked) and then unchecks them via attr("checked", false).

To target particularly the very first element in the tree then a more specific syntax is required such us the ugly one below:

$('#yourTreeID>table>tbody>tr:first>td:nth-child(2)>label>input:checkbox').attr("checked", false);

This one would, in theory and at a high-level, search for *the* checkbox control (there is only one in each line of the tree) found in the second TD element (the first one is used to display the tree lines) within the first TR in the TABLE control created under the tree ID, and then uncheck it (whew!).

Again, I would not advise to use such a construct as it is highly dependent on the internal DOM representation of the tree and that is not guaranteed to remain the same across different WebFOCUS versions but may be an interesting exercise anyway

This message has been edited. Last edited by: njsden,

This is the js that I am using to unselect it and disable the checkbox for the parent tree. I have multple tree controls in my HTML.

 function onInitialUpdate() 
                {
                var ins = document.getElementsByTagName('input');
                for (var i=0; i<ins.length; i++) 
                                {
                                //if (ins[i].getAttribute('type') == 'checkbox') 
                                                {
                                                //ins[i].checked = false;
												if (ins[i].id == 'compUid_9_1_0_undefined') { ins[i].disabled = true; }    
												if (ins[i].id == 'compUid_9_1_0_undefined') { ins[i].checked = false; }    
												if (ins[i].id == 'compUid_10_1_0_undefined') { ins[i].disabled = true; }    
												if (ins[i].id == 'compUid_10_1_0_undefined') { ins[i].checked = false; }    
												if (ins[i].id == 'compUid_115_1_0_undefined') { ins[i].checked = false; }    
												if (ins[i].id == 'compUid_115_1_0_undefined') { ins[i].disabled = true; }    


                                //alert(ins[i].name + ' ' + ins[i].id + ' ' + ins[i].form + ' ' + ins[i].value);


                                                }
                                }

                }
 

I would also be interested if you also tried using "Saved Parameters" with your tree control. I am interested in what values are saved when you have multple child nodes selected, does it select all the levels up to the parent when you pull up your saved report?

HF 6 was supposed to fix it and it does partially, but when you have 2 or more child nodes selected it selects all the levels of the hierarchy when you pull it back up.

Matt, thanks for the JS. I've gone the jQuery route:

Select all:

$('input:checkbox', '#compUid_14_table_0').attr("checked",true);

Deselect all:

$('input:checkbox', '#compUid_14_table_0').attr("checked",false);

Of course, there's a lot more to do. I'd like to completely open and completely close the tree when selecting/deselecting all.

In my multi-select tree, the checkboxes are independent of each other - checking a parent does not check the children. This is what the customer wants and I certainly hope a future hotfix doesn't change this behaviour - this and others should be property options for the Tree control...

Select all:

$('input:checkbox', '#compUid_14_table_0').attr("checked",true);

Oh well, this only selects the checkboxes for some levels down - not all levels...

It should select all checkboxes within "#compUid_14_table_0". If that's the out-most element ID then it should work.

What happens if you first expand all of the nodes and then play with checking/unchecking them all with jQuery?

If I expand nodes and then trigger the jQ, they get checked. If I refresh the screen and have four check boxes visible and then trigger the jQ, the four visible ones get checked (funny, I thought selecting was going down at least one level, even if hidden, but I am wrong). Deselecting works - all checkboxes, hidden or not are deselected.

Ah ha! There's a difference between never un-collapsed and previously uncollapsed but now collapsed. The branches you open and close become known (to the DOM?) and then get selected even if they're closed.

Got Webfocus 8 installed and to provide an update they did add some new functionality to the Tree Control

1. Added the Property of "Multple" so now you don't have to go to the parameters page and add a new Multiple OR paramater.

2. Added another Property of "Select all children" Whenever a Node in the Tree gets selected, all the dependant child nodes should become selected as well.

Now I haven't tested item #2 but I like the feature.

I do also see a slight issue on my end as it appears in version 8 they are pre-populating all the nodes in the tree control versus 7 where they would only pull the parent nodes and when you expanded a parent node then it would go out and retreive the child nodes. This is a performance issue for me so I need to figure out if there is some sort of toggle to not do this.

If anyone has any suggestions please let me know. I do have a case open on this.

"in the tree control... they would only pull the parent nodes and when you expanded a parent node then it would go out and retreive the child nodes" - I didn't think this occurred, I haven't noticed any behaviour to suggest it.

I am pretty confident it behaves that way. I have a parent node that has over 3,000 child nodes at the next level. On initial load in 7.7 it comes up within seconds, but if I expand that parent node, then it takes about 20-30 seconds to display all those child nodes, where as it is different in version 8, where it is taking over a minute to build the entire hierarchy, but when you expand that same node after on load it takes a split second.

I am trying to get this working. Should I add any specific .js files to get it working? and does #compUid_14_table_0' reference the first node?

I am trying to use the jquery to fix my issue. I have a dynamic multi select tree control and am using the following query.

 
<SCRIPT type="text/javascript">
                $('input:checkbox:checked', '#compUid_1').attr("checked",false);
</SCRIPT> 

But I get an error that-
Object doesn't support this property or method. Am I missing something??

Try a little javascript. This is what I use

 function onInitialUpdate() 
                {
                var ins = document.getElementsByTagName('input');
                for (var i=0; i<ins.length; i++) 
                                {
                                    {
			if ((ins[i].name == 'compUid_9') && (ins[i].value=="Product")) { ins[i].disabled = true; ins[i].checked = false; }    
                                      //alert(ins[i].name + ' ' + ins[i].id + ' ' + ins[i].form + ' ' + ins[i].value);

                                    }
                                }