"If your DW Prompt had conditional/dynamic prompt inputs (e.g., multiple ‘School’ drop-downs that appear once the previous school is chosen), an Advance Web Prompt Form will not support conditional display – all form controls will display. This may require the text instructions you include on a prompt form to be redesigned."
However, thanks to the incorporation of the Label control type, prompts can be made more dynamic using a combination of HTML, Cascading Style Sheets, and JavaScript.
Due to privacy restrictions, we are not allowed to provide specific details as to how to create such a dynamic prompt form; however, the following example provides general information to help you get started. If you have direct questions, send us an email.
Example
In this simple example, a web form prompts the user for optional range of years. If the user specifies "Text" from the select list, two text boxes appear. A more sophisticated interface could be created by incorporating Ajax to populate controls.
HTML
Define the HTML controls using a Label control in the AWA configuration utility. In general terms, any form element with a name prefixed with "report." is passed to the PL/SQL stored procedure as a parameter. This example uses "hidden" controls. Values are assigned to the hidden fields using JavaScript.<input type="hidden" name="report.p_begin_year" id="report.p_begin_year" />
<input type="hidden" name="report.p_end_year" id="report.p_end_year" />
<table>
<tr>
<td><b>Select your controls: </b></td>
<td>
<select name="controlType" id="controlType" onChange="showHide();">
<option value="N" selected="true">None</option>
<option value="T">Text Boxes</option>
<option value="S">Select List</option>
</select>
</td>
</tr>
<tr>
<td>
<div id="textBoxes">
<b>Begin Year: </b><input name="beginText" id="beginText" size="4" maxlength="4" onChange="setValue();" /><br />
<b>Begin Year: </b><input name="endText" id="endText" size="4" maxlength="4" onChange="setValue();" />
</div>
<div id="selectList">
Select list coming soon
</div>
</td>
</tr>
</table>
<input type="hidden" name="report.p_end_year" id="report.p_end_year" />
<table>
<tr>
<td><b>Select your controls: </b></td>
<td>
<select name="controlType" id="controlType" onChange="showHide();">
<option value="N" selected="true">None</option>
<option value="T">Text Boxes</option>
<option value="S">Select List</option>
</select>
</td>
</tr>
<tr>
<td>
<div id="textBoxes">
<b>Begin Year: </b><input name="beginText" id="beginText" size="4" maxlength="4" onChange="setValue();" /><br />
<b>Begin Year: </b><input name="endText" id="endText" size="4" maxlength="4" onChange="setValue();" />
</div>
<div id="selectList">
Select list coming soon
</div>
</td>
</tr>
</table>
Cascading Style Sheets
In this example, CSS was used to hide a set of text boxes until the appropriate option (Text) is selected by the user.<style> type="text/css">
#textBoxes { display: none; }
#selectList { display: none; }
</style>
#textBoxes { display: none; }
#selectList { display: none; }
</style>
JavaScript
The following JavaScript code is an example of hiding and displaying form controls, as well as setting the value of the hidden fields that will be passing parameter values to the stored procedure.<script> type="text/javascript">
function showHide() {
// The value of the select list determines what is visible
var sel = document.getElementById("controlType");
// Elements with a name prefixed with "report" are passed to the PL/SQL
// procedure as a parameter
document.getElementById("report.p_begin_year").value = "";
document.getElementById("report.p_end_year").value = "";
document.getElementById("beginText").value = "";
document.getElementById("endText").value = "";
if (sel[sel.selectedIndex].value == "T") {
document.getElementById("textBoxes").style.display = "block";
document.getElementById("selectList").style.display = "none";
} else if (sel[sel.selectedIndex].value == "S") {
document.getElementById("selectList").style.display = "block";
document.getElementById("textBoxes").style.display = "none";
} else {
document.getElementById("selectList").style.display = "none";
document.getElementById("textBoxes").style.display = "none";
}
}
function setValue() {
var sel = document.getElementById("controlType");
if (sel[sel.selectedIndex].value == "T") {
document.getElementById("report.p_begin_year").value = document.getElementById("beginText").value;
document.getElementById("report.p_end_year").value = document.getElementById("endText").value;
} else if (sel[sel.selectedIndex].value == "S") {
alert("Set using select list");
}
}
</script>
function showHide() {
// The value of the select list determines what is visible
var sel = document.getElementById("controlType");
// Elements with a name prefixed with "report" are passed to the PL/SQL
// procedure as a parameter
document.getElementById("report.p_begin_year").value = "";
document.getElementById("report.p_end_year").value = "";
document.getElementById("beginText").value = "";
document.getElementById("endText").value = "";
if (sel[sel.selectedIndex].value == "T") {
document.getElementById("textBoxes").style.display = "block";
document.getElementById("selectList").style.display = "none";
} else if (sel[sel.selectedIndex].value == "S") {
document.getElementById("selectList").style.display = "block";
document.getElementById("textBoxes").style.display = "none";
} else {
document.getElementById("selectList").style.display = "none";
document.getElementById("textBoxes").style.display = "none";
}
}
function setValue() {
var sel = document.getElementById("controlType");
if (sel[sel.selectedIndex].value == "T") {
document.getElementById("report.p_begin_year").value = document.getElementById("beginText").value;
document.getElementById("report.p_end_year").value = document.getElementById("endText").value;
} else if (sel[sel.selectedIndex].value == "S") {
alert("Set using select list");
}
}
</script>
SunGard, Advance, AWA, and Advance Web Access are registered trademarks of SunGard Data Systems, Inc.
No comments:
Post a Comment