How do I create a custom parameters page?

<p>I have created some reports with parameters that are text boxes and drop downs. I would like to change the layout of where the text boxes and drop downs are on the screen and also the size of the boxes. Is there a way to do this? </p>
<p> </p>
<p>Thanks!</p>
<p>Steve</p>

Find more posts tagged with

Comments

JFreeman

<p>Take a look at this blog post on creating a custom parameters page: <a data-ipb='nomediaparse' href='http://blogs.actuate.com/custom-parameter-pages/'>http://blogs.actuate.com/custom-parameter-pages/</a></p>
<p> </p>
<p>That should be a good place to get started.</p>

SteveRut

<p>I found that blog but when I tried to run the example it didn't work. All I got was a title of the project. I will attach a picture. </p>

JFreeman

<p>It looks like you are attempting to run the parameters JSP page from within the designer. I do not believe this is how it was created or intended to run. It was created and intended to be run out of the open source BIRT viewer. I just tested it in the 4.4.2 BIRT viewer and it works properly.</p>
<p> </p>
<p>Are you wanting to create the custom parameters page to be used with an iHub installation?</p>

SteveRut

<p>Sorry I am a newbie intern. My task was to make reports, which I have done, but I want the parameter page to be different and I am having a difficult time with it. My background is with sql, not so much java or css, so I am trying to learn. Everything I have done so far is being run in the report designer and will not be integrated in our system here until I present them to my boss. Is there a way to make the jsp file work just using the report designer and viewer?</p>

JFreeman

<p>I believe that should be possible still but that example will need to be modified.<br>
Let me take a look at adapting that example to work within the designer.</p>
<p> </p>
<p>Is the end goal to have it published to an iHub instance?</p>

SteveRut

<p>Yes. We are going to be publishing them to our iHUB.</p>

JFreeman

<p>Thank you for the confirmation.</p>
<p>I will see if I can adapt that example to work with an iHub/Pro Designer environment.</p>

SteveRut

<p>Thanks for the help!</p>

SteveRut

<p>So I finally have my account set up on iHub. I am still searching for a solution to make a customized parameters list. Would there be any way to use an HTML form and send the parameters through that way?</p>

JFreeman

<p>Sorry for the delay, things are very busy on my end right now.</p>
<p>You can create an HTML form and send the parameters through that way.</p>
<p> </p>
<p>I just finished an example of using a report like a custom parameters page to then launch another report.</p>
<p>Take a look at that example from this thread: <a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/topic/36585-filter-parameter-depending-on-value-of-another-parameter/?p=136638'>http://developer.actuate.com/community/forum/index.php?/topic/36585-filter-parameter-depending-on-value-of-another-parameter/?p=136638</a></p>
<p> </p>
<p>If you are on iHub 3, it should work as is. If you are on iHub 3.1, I believe there will be a few tweaks needed.</p>

SteveRut

<p>Looks Great! I think that is exactly what I needed. Thanks for doing that for me! I will let you know if I have any other questions about it. </p>

JFreeman

<p>You're welcome.</p>
<p>Just let me know if you have any questions.</p>

SteveRut

<p>Jesse,</p>
<p> </p>
<p>Where exactly do the parameters from the first report get drilled into the second report? I think I may be missing something here. Any help would be great. Thanks!</p>
<p> </p>
<p>-Steve</p>

JFreeman

<p>In that particular example, there is only 1 parameter that is actually being passed into the next report design. The date selection parameters are there solely there for the purposes of filtering the order number parameter to only show when the order date is between the two dates selected (That was the specific requirement on the other thread).</p>
<p> </p>
<p>The order number parameter is going to be the one that is passed to the next report design. In order to pass it, I have created a static data element and created a drill-through hyper-link that passes the parameter in the drill-through.</p>
<p> </p>
<p>In order for the drill-through to pass the correct value from the drop down, there is a javascript function I added in the text element that is triggered when the order number is changed in the drop down to modify the drill-through URL to update it with the correct order number selected from the list.</p>

SteveRut

<div>
<div>Ok, so what I have are 2 text boxes that I want to pass to other report. I set 2 variables in birt (vars["full"] and vars["abbv"]). I am trying to drill the variable through but it isn't working right. Is it possible to do it this way?</div>
<div> </div>
<div><div id="paramPage"></div>
<div><div id="driver"></div>
</div>
<div><form id="form"></div>
<div>Full Word:</div>
<div> <span> </span><input type="string" name="full_word" id="fullWord" onChange="myFunction()"><br><br></div>
<div> <span> </span>Abbreviation Code:</div>
<div> <span> </span><input type="string" name="abb_code" id="abbv"><br><br></div>
<div></form></div>
<div></div></div>
<div> </div>
<div> </div>
<div><script type="text/javascript"></div>
<div> </div>
<div>myFunction()</div>
<div> </div>
<div>function myFunction() {</div>
<div> </div>
<div>var FW = document.getElementById("fullWord").value;</div>
<div>var AB = document.getElementById("abbv").value;</div>
<div> </div>
<div> vars["full"] = FW</div>
<div> vars["abbv"] = AB</div>
<div> </div>
<div> </div>
<div> <span> </span>}</div>
<div> </div>
<div> </div>
<div></script></div>

JFreeman

<p>I do not believe the way you are trying to set it up is going to work. I ran into a similar situation when I was first working on that example.</p>
<p> </p>
<p>The issue is that when you are using HTML/Javascript inside of a text element, this is client side code that is executed by the browser after the server side report generation code has already completed. Due to this, report variables can be read using the <value-of> or <viewtime-value-of> tags but cannot be written to.</p>
<p> </p>
<p>Which means on the drill-through you will not be able to link it to the report variables directly since they cannot be updated client side from the inputs you are creating.</p>
<p> </p>
<p>The way I worked around this was to dynamically update the URL that is created for the drill-through in the DOM tree. The drill-through creates an anchor tag with an href that holds the URL for the drill-through. I hook this anchor tag and dynamically update the href to change the parameter value in the URL when the list is changed.</p>

SteveRut

<p>Is it possible to do this with more than one parameter? Some of my reports have many parameters. Also, is there a way for me to know what the URL is so I know what to replace? Thank you in advance! I really appreciate you taking the time to help me with this!</p>

JFreeman

<p>Yeah, it should be possible to do with more than one parameter.</p>
<p> </p>
<p>When you hook the anchor tag, you are read the href value which will be the URL. Then you can modify the URL and pass it back to the href with you modified values.</p>
<p> </p>
<p>I can see about modifying my previous example to include 2 parameters if you would like.</p>

SteveRut

<p>That would be great! I am also a little confused about where the "js3_submitButton" came from when declaring the submitButton variable.</p>

JFreeman

<p>I bookmarked the data element I am using as the submit button for the drill-through. I named the bookmark "submitButton" and when run in the viewer js3_ is prepended to the bookmark text. That is how I hook it to get down to the anchor tag with the href for the drill-through.</p>
<p> </p>
<p>I will work on adding another parameter to the example for you.</p>

JFreeman

<p>Take a look at the attached example.</p>
<p>I removed all of the date stuff that isn't specific to your use case to simplify the example.</p>
<p> </p>
<p>I build 2 lists, one for country and one for status.</p>
<p>Each triggers a function on change that updates the URL to change the associated parameter values.</p>
<p> </p>
<p>Let me know if you have questions.</p>

SteveRut

<p>I can't seem to get it to work. I am using a text box, not a list. Do you think that has anything to do with it?</p>

JFreeman

<p>Using a text box should be pretty much the same except you don't have to dynamically populate it's contents like the list.</p>
<p> </p>
<p>Can you show me what you have setup right now and give me the specifics of the behavior you are seeing?</p>
<p> </p>
<p>Best case would be if you can replicate your setup and issue with the classic models data source so I can run the report to replicate your behavior.</p>

SteveRut

<p>I tried to recreate what is happening to me with your example with no luck. I cut yours down to basically what I have with different variable names: </p>
<p> </p>
<div><div id="paramList"></div>
<div><div id="countrySelectDiv"></div>
<div>Country: <input="text" id="countrySelect" onChange="updateSubmitButtonCountry()"><br><br></div>
<div></div></div>
<div><div id="statusSelectDiv"></div>
<div>Status: <input=text id="statusSelect" onChange="updateSubmitButtonStatus()"><br><br></div>
<div></div></div>
<div></div></div>
<div> </div>
<div> </div>
<div><script type="text/javascript"></div>
<div> </div>
<div> </div>
<div>function updateSubmitButtonCountry(){</div>
<div>var submitButton = document.getElementById("js3_submitButton").firstChild;</div>
<div>var oldCountry = submitButton.href;</div>
<div>oldCountry = oldCountry.substring(oldCountry.indexOf("Full+Word="));</div>
<div>oldCountry = oldCountry.substring(oldCountry.indexOf("=")+1, oldCountry.indexOf("&"));</div>
<div>var selectedCountry = document.getElementById("countrySelect").value;</div>
<div>var newHref = submitButton.href.replace("Full+Word"+oldCountry, "Full+Word="+selectedCountry);</div>
<div>submitButton.href = newHref;</div>
<div>console.log(submitButton.href);</div>
<div>}</div>
<div> </div>
<div>function updateSubmitButtonStatus(){</div>
<div>var submitButton = document.getElementById("js3_submitButton").firstChild;</div>
<div>var oldStatus = submitButton.href;</div>
<div>oldStatus = oldStatus.substring(oldStatus.indexOf("Status="));</div>
<div>oldStatus = oldStatus.substring(oldStatus.indexOf("=")+1, oldStatus.indexOf("&"));</div>
<div>var selectedStatus = document.getElementById("statusSelect").value;</div>
<div>var newHref = submitButton.href.replace("Status="+oldStatus, "Status="+selectedStatus);</div>
<div>submitButton.href = newHref;</div>
<div>console.log(submitButton.href);</div>
<div>}<span> </span></div>
<div> </div>
<div> </div>
<div></script></div>
<div> </div>
<div>When I run the driver page, everything works fine but it seems like the variable never gets into the href. When I use a valid default parameter value when I set up the hyperlink drill-through, that value gets passed on to the other report just fine. The problem is no matter what I type the default value never changes. I have "submitButton" in the bookmark. Is there maybe something that I missed? </div>
<div> </div>
<div>It makes me think something is wrong here:</div>
<div>var submitButton = document.getElementById("js3_submitButton").firstChild;</div>
<div> </div>
<div>Is there a way to look at the href/URL that is getting passed in the drill through to see if it is right?</div>
<div> </div>
<div>Thanks!</div>
<div>-Steve</div>

JFreeman

<p>You can use your browsers console output and debugging tools to look at the href value (i prefer Chrome's debugging tools).</p>
<p> </p>
<p>What do you see from the console output logging in the code you posted?</p>
<p>Do you see the href changing at all?</p>
<p>I would also output/inspect the value that is being read from the text box to make sure that value is being read/set properly.</p>

SteveRut

<p>The chrome console did it for me! The parameter wasn't getting inserted in the link correctly. Just in case anyone else needs this information, this is what I did in the function:</p>
<p> </p>
<p>var param = document.getElementById("fullword").value;</p>
<p>var newHref = submitButton.href.replace(".rptdesign", ".rptdesign&Full+Word="+param);</p>
<p> </p>
<p>I want to thank you so much for the help!! I hope I don't have anymore questions but if I do I will let you know.</p>

JFreeman

<p>You're welcome.</p>
<p>I'm happy to be of assistance.</p>

SteveRut

<p>So I came across something in which I will need to think of a creative solution I think. With some of the parameters I want the user to be able to choose multiple values. My question is, how should I set that up in the href? Would it be something like &param=value1+value2 or or &param=value1&param=value2? </p>

JFreeman

<p>I believe is should be: &param=value1&param=value2</p>
<p> </p>
<p>Shouldn't be too hard to modify the code to loop through the array of values from the selection list and append each to the URL.</p>
<p> </p>
<p>Let me know if you have issues.</p>

SteveRut

<p>Just in case anyone also needs help with this I figured a few things out. </p>
<p> </p>
<p>So I figured out that it is &param=value1,value2,value3 in the URL when you want multiple values for one parameter</p>
<p> </p>
<p>I wanted to use checkboxes and have the values added and removed when they were checked or not checked. Here is an example of the solution I came up with. There may be a better or easier way but I am new to this and it worked for me.</p>
<p> </p>
<div>div id="PlatformSelectDiv"></div>
<div>Platform: <br></div>
<div> <input type="checkbox" id="param1" value="data1" onClick="updateSubmitButton1()">sample text 1<br></div>
<div> <input type="checkbox" id="param2" value="data2" onClick="updateSubmitButton2()">sample text 2<br></div>
<div> <input type="checkbox" id="param3" value="data3" onClick="updateSubmitButton3()">sample text 3<br></div>
<div><br><br></div>
<div></div></div>
<div> </div>
<div>
<div>function updateSubmitButton1(){</div>
<div> </div>
<div> </div>
<div>var submitButton = document.getElementById("js3_submitButton").firstChild;</div>
<div>var param = document.getElementById("param1").value;</div>
<div> </div>
<div>if(document.getElementById("param1").checked == true){</div>
<div>if(document.getElementById("param2").checked == true || document.getElementById("param3").checked == true){</div>
<div>var newHref = submitButton.href.replace("&ParamName=", "&ParamName="+param+",");</div>
<div>}</div>
<div>else{</div>
<div>//This is because I started with a default value of "" when I linked the report parameters to the driver</div>
<div>var newHref = submitButton.href.replace("&__isNull=ParamName", ""); </div>
<div>submitButton.href = newHref;</div>
<div>var newHref = submitButton.href.replace(".rptdesign", ".rptdesign&ParamName="+param);</div>
<div>}</div>
<div>}</div>
<div>if(document.getElementById("param1").checked == false){</div>
<div>if(document.getElementById("param2").checked == true || document.getElementById("param3").checked == true){</div>
<div>var newHref = submitButton.href.replace(","+param, "");</div>
<div>submitButton.href = newHref;</div>
<div>var newHref = submitButton.href.replace(param+",", "");</div>
<div>submitButton.href = newHref;</div>
<div> </div>
<div>}</div>
<div>else{</div>
<div>var newHref = submitButton.href.replace("&ParamName="+param, "");</div>
<div>}</div>
<div>}</div>
<div>submitButton.href = newHref;</div>
<div>console.log(submitButton.href);</div>
<div>}</div>
<div> </div>
</div>
<p>and then make function updateSubmitButton2() and function updateSubmitButton3() by changing param1, param2, and param3 around to the right spots. </p>
<p> </p>
<p>Hope this can help somebody one day!</p>