Hi I have a different kind of request from our payroll customer. We have a payroll report that runs by year from, year to, pay no from, pay no to. But now she wants to add effective date from and effective date to. She wants to have an opotion in the launch page like 1)by year or 2)by effective date. Then based on either 1) or 2) option these input fields will appear on the launch page, 1) year from, year to, payno from, payno to. For 2) effective date from, effective date to. and then run the report with different selection criteria. How do I design this user interface?

Thanks
Abu

This message has been edited. Last edited by: <Kathryn Henning>,

The following thread contains an example of hiding/showing user web page controls, based on user triggered events: http://forums.informationbuild...657043036#7657043036

The example uses the jQuery show() / hide() methods.

You can add a Sorting parameter to your report, e.g. &SORTBY, and add a "BY &SORTBY" in the appropriate position. On your Launch page add the &SORTBY with the sort choices passing the sort field to the report.

If you are using the HTML Composer and do not have jQuery to create your launch page, you can use a radio button (say radio1) with the option for (1) by year or (2) by effective date. Then create two panels - panel1 with the year label and the year text field or year dropdown list; panel2 with the effective date labels and the text/calendar fields for start and end date.

You can use javascript to hide the panels:

document.getElementById('panel_name').style.display="none";

You can use javascript to show the panels:

document.getElementById('panel_name').style.display="block";

On the radio button, you can add an onclick event to check the selection made using:

if ( document.getElementById('radio1').value == 1 ) {
  document.getElementById('panel1').style.display="block";
  document.getElementById('panel2').style.display="none";
}
else { ... }

You can also set the x and y coordinates of the panels if you want them to appear in the same spot:

document.getElementById('panel1').style.top=y_coordinate;
document.getElementById('panel1').style.left=x_coordinate;

y and x_coordinate are numbers in pixels

Thanks David, Alex and JL. I am trying to implement as JL proposed. I will try the jQuery one also but need to learn the jQuery a bit before that.