Using WE to display a custom box

Question

I have a report that I want the user to be able to sort or filter by clicking on a col header. When the user clicks on a col header, I want a small box to appear just below the col header with radio buttons to choose Asc or Desc and a drop-down list to choose a value to filter the col on.  I worked out the javascript for this in a text editor and it works (and I thought it was pretty cool). I've converted the javascript to Crystal Reports syntax and created some Webelements functions:
This first one sets up the styles and js functions -
// WEsortfilter
// Add options to sort A/D and to filter on columne clicked
// Pass in string of values from main rpt and sort ASC
// When col header is clicked - display form with radio buttons and drop
//      down list of values.
//When sort is selected or member of list execute sort/filter.
Function ()         
'<STYLE type="text/css">'
+ '.Test{border-style:solid;border-width:1px;border-color:navy;'
+ 'position:absolute; z-index:66; background-color:lightblue;width:6cm;'
+ 'height:.83cm;padding-left:10px;padding-top:5px;font-family:Verdana;font-size:9pt;}'
+ '.sortlink{font-size:10;font-family:Verdana;color:blue;}'
+ '</STYLE>'
//End of styles
//Javascript  to call sort/filter box
+ '<SCRIPT LANGUAGE="JavaScript">'
+ 'function displaySortFilter(myid){'
+ 'var topObj=document.getElementById(myid).offsetTop;'
+ 'var leftObj=document.getElementById(myid).offsetLeft;'
+ 'var cdObj=document.getElementById("Test").style;'
+ 'cdObj.display="";'
+ 'cdObj.left=leftObj;'
+ 'cdObj.top=topObj+26;'
+ '}</SCRIPT>'   //End of function
+ '<form name="sortfilter">'
+ '<div ID="Test" NAME="Test" class="Test"'
+ 'STYLE="display:none">'
+ '<div id="divradio" STYLE="position:absolute">
+ '<input type=radio name=radio ID=radio value="asc">'
+ '<Span>ASC</Span>'
+ '<input type=radio name=radio ID=radio value="desc">'
+ '<Span>DESC</Span>'
+ '<SELECT NAME="filteroptions" ID="filteroptions" >'
+ '<OPTION VALUE="0" selected>Choose One<BR>'
+ '<OPTION Value="00">First<BR>'
+ '</SELECT>'+ '</div></div></form>'
The second function creates a link for the user to click:
//WEcallSortFilter
Function ()
'<A Style="text-decoration:underline" ID="sbu" class="sortlink" href="" onClick="'
+ 'displaySortFilter(this.id);return false">SBU</A>'
The third one adds the style and js functionality to the report:
//Display sortfilter custom function
WhilePrintingRecords;
WEsortfilter
The last one adds the link to the report for the user
//Call sortfilter custom function
WhilePrintingRecords;
WEcallSortFilter
When I run this in the report through Infoview, the box pops up, however,
1)     it doesn't show up right under the link clicked, but in the location where it was placed in Crystal Reports design view. It shows up like a static object instead of at the location clicked.
2)     When the box displays, it is transparent. The other text on the rpt shows right through the box. I've tried changing the z-index to no avail. And no, making the box a solid color doesn't make it opaque. The other text showing through makes it difficult to click on any of the radio buttons.
All this is beyond the WE examples, but I''ve to kick it up  a level (or three) to get this project done.
Thanks

Answer 1

hey, ran some tests on your scenario. to answer your questions...
1) all of the functions are designed so that you don't have to make copies of them...all controls should be aok with being on a report more than once, as long as the element names are different...the ones that create on-click functionality (such as the collapsible section) require a different name for each control or you'll run into problems...the last iteration of the control on the report will be the only one that (sort of) works.
that being said, i created 2 formulae and ran your code without any issues with a duplicate of the function.
the only things that should cause something like this is
(a) a control name starting with a number or containing certain non alpha-numeric characters...they follow the same rules as javascript...unfortunately this little tip was not in the user guide even though it was on the list (my fault, sorry) or
(b) two control names that are the same or
(c) a duplicate of the same formula on the report.
2) another little tip that seemed to not make it into the user guide is to follow the same ordering principles on a report that you would with normal layering when designing a crystal report...i.e. right-click on objects in the designer and choose Format, then use the Move object action to bring the objects to the front.
note that if there is a select menu below these controls you will not be able to have the collapsible section (or any other control) cover that select menu up...this is a known issue in internet explorer and there is no workaround for that one.
hope that this helps,
jw