Focal Point
HTML Composer: How to make the Tree Control intelligent

This topic can be found at:
http://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/8987075426

September 28, 2012, 02:23 PM
Francis Mariani
HTML Composer: How to make the Tree Control intelligent
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,


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
September 28, 2012, 03:50 PM
njsden
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.



Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
September 28, 2012, 04:00 PM
MattC
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.


WebFOCUS 8.1.05
October 01, 2012, 10:42 AM
Francis Mariani
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...


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
October 02, 2012, 07:16 AM
Mike in DeLand
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


Webfocus 8
Windows, Linux
October 03, 2012, 12:00 PM
David Glick
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.


David Glick
Director WebFOCUS App Studio
and WebFOCUS Developer Studio
WebFOCUS Division
Information Builders, Inc.
Direct (917) 339-5560
Voice Mail (212) 736-6250 x3560
Fax (212) 947-5168
Email david_glick@ibi.com
October 03, 2012, 12:29 PM
Mike in DeLand
Thanks for the info! I was wondering if anyone could post a screen shot showing how they used the tree controls.

Mike


Webfocus 8
Windows, Linux
October 03, 2012, 01:33 PM
Francis Mariani
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


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
October 04, 2012, 10:06 AM
David Glick
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.


David Glick
Director WebFOCUS App Studio
and WebFOCUS Developer Studio
WebFOCUS Division
Information Builders, Inc.
Direct (917) 339-5560
Voice Mail (212) 736-6250 x3560
Fax (212) 947-5168
Email david_glick@ibi.com
October 04, 2012, 10:53 AM
Francis Mariani
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.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
October 05, 2012, 07:28 AM
David Glick
Yes.


David Glick
Director WebFOCUS App Studio
and WebFOCUS Developer Studio
WebFOCUS Division
Information Builders, Inc.
Direct (917) 339-5560
Voice Mail (212) 736-6250 x3560
Fax (212) 947-5168
Email david_glick@ibi.com
October 25, 2012, 12:28 PM
Francis Mariani
Why is the first value of the multi-select Tree control selected, even if I have Default Selection set to No?


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
October 26, 2012, 11:04 AM
MattC
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.


WebFOCUS 8.1.05
October 26, 2012, 11:12 AM
Francis Mariani
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 ...


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
October 26, 2012, 11:43 AM
njsden
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!!!



Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
October 26, 2012, 11:53 AM
Francis Mariani
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,


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
October 26, 2012, 12:05 PM
njsden
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 Smiler

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



Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
October 26, 2012, 12:38 PM
MattC
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);


                                                }
                                }

                }
 



WebFOCUS 8.1.05
October 26, 2012, 12:41 PM
MattC
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.


WebFOCUS 8.1.05
October 26, 2012, 01:06 PM
Francis Mariani
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...


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
October 26, 2012, 01:43 PM
Francis Mariani
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...


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
October 26, 2012, 02:02 PM
njsden
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?



Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
October 26, 2012, 02:17 PM
Francis Mariani
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.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
October 26, 2012, 02:23 PM
Francis Mariani
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.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
December 11, 2012, 02:45 PM
MattC
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.


WebFOCUS 8.1.05
December 11, 2012, 03:09 PM
Francis Mariani
"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.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
December 12, 2012, 07:36 AM
MattC
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.


WebFOCUS 8.1.05
January 22, 2013, 11:59 PM
Neenz
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?


WF: 7.6.8
OS/Platform: Windows, Unix
January 23, 2013, 04:09 PM
Neenz
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??


WF: 7.6.8
OS/Platform: Windows, Unix
January 24, 2013, 07:27 AM
MattC
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);

                                    }
                                }
 



WebFOCUS 8.1.05