We can use Custom Prompts for multiple functionalities:-
Disabling Prompts, Dynamic Defaults, Custom buttons/Image buttons, Defaults history LOV, and other features.
I am attaching one code which
- Resembles original Webi 6.5 Prompt
- Include ways to give Refresh action on clicking Refresh Button.
- Adding multiple values to be passed to OpenDocument by Scripts
<script type="text/javascript">
function cli2(k)
{for (var i=12; i >= 1;i--) {
document.getElementById('b2'+i).style.background="white";
document.getElementById('b2'+i).style.color="darkblue";}
document.getElementById('b2'+k).style.background="darkblue";
document.getElementById('b2'+k).style.color="white";
run2();
}
function clileft2()
{document.getElementById('Year2').value-=1;}
function cliright2(){document.getElementById('Year2').value=parseInt(document.getElementById('Year2').value)+1;}
function run2()
{var date2="";
var month2="";
for (var i=12; i >= 1;i--) {
if (document.getElementById('b2'+i).style.background=="darkblue"){if (i<10){date2="0"+i+"/01/";} else {date2=i+"/01/";}}
}
date2+=document.getElementById('Year2').value;
//alert(date2);
document.getElementById('Date2').value=date2;
}
</script>
<script type="text/javascript">
function cli(k)
{for (var i=12; i >= 1;i--) {
document.getElementById('b'+i).style.background="white";
document.getElementById('b'+i).style.color="darkblue";
document.getElementById('b2'+i).style.background="white";
document.getElementById('b2'+i).style.color="darkblue";
}
document.getElementById('b'+k).style.background="darkblue";
document.getElementById('b'+k).style.color="white";
if(k!=12){
document.getElementById('b2'+(k+1)).style.background="darkblue";
document.getElementById('b2'+(k+1)).style.color="white";
document.getElementById('Year2').value=parseInt(document.getElementById('Year1').value);
}
if(k==12){
document.getElementById('b2'+(1)).style.background="darkblue";
document.getElementById('b2'+(1)).style.color="white";
document.getElementById('Year2').value=parseInt(document.getElementById('Year1').value)+1;
}
run1();
run3();
}
function clileft()
{document.getElementById('Year1').value-=1;
document.getElementById('Year2').value-=1;
}
function cliright()
{document.getElementById('Year1').value=parseInt(document.getElementById('Year1').value)+1;
document.getElementById('Year2').value=parseInt(document.getElementById('Year2').value)+1;
}
function run1()
{var date1="";
var month1="";
for (var i=12; i >= 1;i--) {
if (document.getElementById('b'+i).style.background=="darkblue"){if (i<10){date1="0"+i+"/01/";} else {date1=i+"/01/";}}
}
date1+=document.getElementById('Year1').value;
//alert(date1);
document.getElementById('Date1').value=date1;
}
function run3()
{var date2="";
var month2="";
for (var i=12; i >= 1;i--) {
if (document.getElementById('b2'+i).style.background=="darkblue"){if (i<10){date2="0"+i+"/01/";} else {date2=i+"/01/";}}
}
date2+=document.getElementById('Year2').value;
//alert(date2);
document.getElementById('Date2').value=date2;
}
</script>
<script Language=Javascript>
<!--
function alternate3(){
var str1="";
var str2="";
var sel = document.getElementById('ss3');
for(j =0;j<sel.options.length; j++){
str1=str1+sel.options[j].text.replace(" ","%20")+";";
}
var sel2 = document.getElementById('ss1');
for(k =0;k<sel2.options.length; k++){
str2=str2+sel2.options[k].text.replace(" ","%20")+";";
}
var date5="";
var date6="";
date5=document.getElementById('Date1').value;
date6=document.getElementById('Date2').value;
document.location="http://gitguslbbo02.na.net.dana.com:8085/wijsp/scripts/openDocument.jsp?&sDocName=SuppPerf&sType=wid&iDocID=16438&sRepoType=Corporate&lsSSelect Internal External Supplier="+(str1.replace(" ","%20").substr(0,str1.replace(" ","%20").length-1))+"&lsSSelect Beginning Date="+date5+"&lsSSelect End Date="+date6+"&lsMSelect Location (Type ALL for all Locations)="+(str2.replace(" ","%20").substr(0,str2.replace(" ","%20").length-1));
}
//-->
</script>
<script Language=Javascript>
<!--
function remove(){
var sel = document.getElementById('ss');
for (var i=sel.options.length-1; i >= 0;i--) {sel.remove(i);}
//alert("removed");
var opt=document.createElement("Option");
opt.text="ALL";
sel.add(opt);
}
function alternate(){
remove()
var table1=document.getElementsByTagName("TABLE");
for(k = 0; k < table1.length; k++){
var rows = table1[k].getElementsByTagName("TR");
var val1 = table1[k].getElementsByTagName("SPAN");
var str1="Values: ";
var sel = document.getElementById('ss');
for(j =0; j < val1.length; j++){
if (val1[j].firstChild.nodeValue.substr(0,1)=="1"){
var opt=document.createElement("Option");
opt.value=val1[j].firstChild.nodeValue.substr(1);
opt.text=val1[j].firstChild.nodeValue.substr(1);
if (opt.text!==""){sel.add(opt);}}
}}}
function myfunction()
{
var selRef = document.getElementById('ss');
var sel = document.getElementById('ss1');
var str1="";
for (var i=selRef.options.length-1; i >= 0;i--) {
if (selRef.options[i].selected) {
var opt=document.createElement("Option");
opt.value=selRef.options[i].text;
opt.text=selRef.options[i].text;
sel.add(opt);
selRef.remove(i);
}}}
function myfunction1()
{
var selRef = document.getElementById('ss');
var sel = document.getElementById('ss1');
var str1="";
for (var i=sel.options.length-1; i >= 0;i--) {
if (sel.options[i].selected) {
var opt=document.createElement("Option");
opt.value=sel.options[i].text;
opt.text=sel.options[i].text;
selRef.add(opt);
sel.remove(i);
}}}
//-->
</script>
<script Language=Javascript>
<!--var table2=new Array();
function myfunction2()
{
var selRef = document.getElementById('ss2');
var sel = document.getElementById('ss3');
var str1="";
for (var i=selRef.options.length-1; i >= 0;i--) {
if (selRef.options[i].selected) {
var opt=document.createElement("Option");
opt.value=selRef.options[i].text;
opt.text=selRef.options[i].text;
sel.add(opt);
selRef.remove(i);
}}}
function myfunction3()
{
var selRef = document.getElementById('ss2');
var sel = document.getElementById('ss3');
var str1="";
for (var i=sel.options.length-1; i >= 0;i--) {
if (sel.options[i].selected) {
var opt=document.createElement("Option");
opt.value=sel.options[i].text;
opt.text=sel.options[i].text;
selRef.add(opt);
sel.remove(i);
}}}
//-->
</script>
<link rel="stylesheet" type="text/css" href="style/skin_default/Prompts.css">
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" >
<br><br>
<center>
<table border="0" cellspacing="0" cellpadding="1" class="P_Border">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="P_Background">
<tr align="left">
<td height="28">
<table border="0" cellpadding="3" width="100%" class="P_Header">
<tr>
<td class="P_General_Title">Prompts</td>
</tr>
</table>
</td>
</tr>
<tr align="left">
<td>
<table border="0" cellpadding="3">
<tr>
<td class="P_General_Message"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="5" class="P_Background">
<tr align="center" valign="bottom">
<td><font class="P_Prompt_Name"><label for="idPV1LOV">Select Internal External Supplier</label></font></td>
<td> </td>
<td>
<font class="P_Prompt_Message"><label for="idPV1"></label></font>
</td>
</tr>
<tr align="center">
<td>
<table border="0" cellspacing="0" cellpadding="1">
<tr>
<td>
<center>
<tbody>
<tr><td>
<SELECT ID='ss2' ondblclick="myfunction2()" MULTIPLE><OPTION Value="Internal">Internal</OPTION>
<OPTION Value="External">External</OPTION>
<OPTION Value="Both">Both</OPTION>
</SELECT>
</td><td>
<table><tr><td>
<Input type=button onclick="myfunction2()" value=">>" class="P_Button_Validation" />
</td></tr><tr><td>
<Input type=button onclick="myfunction3()" value="<<" class="P_Button_Validation" />
</td></tr></table>
</td><td>
<SELECT ID='ss3' MULTIPLE></SELECT>
</td></tr>
</tbody> </center>
</td>
</tr>
</table>
<hr class="P_Separation">
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="5" class="P_Background">
<tr align="center" valign="bottom">
<td>
<font class="P_Prompt_Name"><label for="idPV2Enter">Select Location (Select ALL for all Locations)</label></font>
</td>
<td> </td>
<td><font class="P_Prompt_Message"><label for="idPV2List"></label></font></td>
</tr>
<tr align="center" valign="top">
<td rowspan="4">
<table border="0" cellspacing="0" cellpadding="1">
<tr valign="middle">
<td> </td>
<td>
<img src="images/Blanc.gif" border="0" alt="" width="20" height="20">
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="1">
<tr>
<td>
<a href="javascript:alternate()">
<img src="images/skin_default/iconRefresh.gif" border="0" alt="Refresh List" title="Refresh List" width="18" height="18">
</a><br/>
<table border=0><tr><td>
<SELECT ID='ss' ondblclick="myfunction()" Size=7 MULTIPLE>
<OPTION Value="ALL">ALL</OPTION>
<option value=" San Luis Potosi, MX - CP-Mexico"> San Luis Potosi, MX - CP-Mexico</option>
<option value="0">0</option>
<option value="10,000 Auto Parts">10,000 Auto Parts</option>
<option value="2 in France, one in UK">2 in France, one in UK</option>
<option value="A.C. Neilsen">A.C. Neilsen</option>
<option value="AAG - Engine Controls">AAG - Engine Controls</option>
<option value="AC Delco, Worcester, MA">AC Delco, Worcester, MA</option>
<option value="ADSD - Toledo">ADSD - Toledo</option>
<option value="AEC, Elkhart, IN">AEC, Elkhart, IN</option>
<option value="APG, Stourbridge">APG, Stourbridge</option>
<option value="ASH - Cachoeirinha, RS, Brazil">ASH - Cachoeirinha, RS, Brazil</option>
<option value="ATH - CVJ - Porto Alegre, Braz">ATH - CVJ - Porto Alegre, Braz</option>
<option value="Corporate Headquarters">Corporate Headquarters</option>
<option value="Corporate Office">Corporate Office</option>
<option value="many">many</option>
</SELECT>
</td><td>
<table><tr><td>
<Input type=button onclick="myfunction()" value=">>" class="P_Button_Validation" />
</td></tr><tr><td>
<Input type=button onclick="myfunction1()" value="<<" class="P_Button_Validation" />
</td></tr></table>
</td><td>
<SELECT ID='ss1' Size=7 MULTIPLE></SELECT>
</td></tr>
</td>
</tr>
<tr>
<td valign="top">
</td></tr>
</table>
<hr class="P_Separation">
<center>
<font class="P_Prompt_Name">Select Date Range (Beginning Month Year)</font> <input type=text size=10 disabled value="" style='Border:0; background:RGB(220,233,251);' class="P_Background" id=Date1
/></br></br>
<table border=1 cellpadding=0 cellspacing=0>
<tr><td><input type=button value="<" onclick="clileft()" style="color:White; width:100;" align=left class="P_Button_Validation" /></td>
<td colspan=2 align=center><b><input type=text ID=Year1 value="2007" size=33 style="background-color:white; color:darkblue; text-align:center;
font-size:15;font-weight: bold; width:200;" align=center /></b></td>
<td align=right><input type=button value=">" onclick="cliright()" style=" color:White; width:100;" align=right class="P_Button_Validation" /></td>
</tr>
<tr><td width=45><input ID=b1 type=button value="Jan" style="background-color:white; color:darkblue; width:100;" onclick="cli(1)" /></td>
<td><input type=button ID=b2 value="Feb" style="background-color:white; color:darkblue; width:100;" onclick="cli(2)" /></td>
<td><input type=button ID=b3 value="Mar" style="background-color:white; color:darkblue; width:100;" onclick="cli(3)" /></td>
<td><input type=button ID=b4 value="Apr" style="background-color:white; color:darkblue; width:100;" onclick="cli(4)" /></td></tr>
<tr>
<td><input type=button ID=b5 value="May" style="background-color:white; color:darkblue; width:100;" onclick="cli(5)" /></td>
<td><input type=button ID=b6 value="Jun" style="background-color:white; color:darkblue; width:100;" onclick="cli(6)" /></td>
<td><input type=button ID=b7 value="Jul" style="background-color:white; color:darkblue; width:100;" onclick="cli(7)" /></td>
<td><input type=button ID=b8 value="Aug" style="background-color:white; color:darkblue; width:100;" onclick="cli(8)" /></td>
</tr>
<tr>
<td><input type=button ID=b9 value="Sep" style="background-color:white; color:darkblue; width:100;" onclick="cli(9)" /></td>
<td><input type=button ID=b10 value="Oct" style="background-color:white; color:darkblue; width:100;" onclick="cli(10)" /></td>
<td><input type=button ID=b11 value="Nov" style="background-color:white; color:darkblue; width:100;" onclick="cli(11)" /></td>
<td><input type=button ID=b12 value="Dec" style="background-color:white; color:darkblue; width:100;" onclick="cli(12)" /></td>
</tr>
</table>
</center>
</br>
<hr class="P_Separation">
<center>
<font class="P_Prompt_Name">To Date (End Month Year)</font> <input type=text size=10 disabled value="" style='Border:0; background:RGB(220,233,251); ' class="P_Background" id=Date2 /></br></br>
<table border=1 cellpadding=0 cellspacing=0>
<tr><td><input type=button value="<" onclick="clileft2()" style="color:White; width:100;" align=left class="P_Button_Validation" /></td>
<td colspan=2 align=center><b><input type=text ID=Year2 value="2007" size=33 style="background-color:white; color:darkblue; text-align:center;
font-size:15;font-weight: bold; width:200;" align=center /></b></td>
<td align=right><input type=button value=">" onclick="cliright2()" style=" color:White; width:100;" align=right class="P_Button_Validation" /></td>
</tr>
<tr><td width=45><input ID=b21 type=button value="Jan" style="background-color:white; color:darkblue; width:100;" onclick="cli2(1)" /></td>
<td><input type=button ID=b22 value="Feb" style="background-color:white; color:darkblue; width:100;" onclick="cli2(2)" /></td>
<td><input type=button ID=b23 value="Mar" style="background-color:white; color:darkblue; width:100;" onclick="cli2(3)" /></td>
<td><input type=button ID=b24 value="Apr" style="background-color:white; color:darkblue; width:100;" onclick="cli2(4)" /></td></tr>
<tr>
<td><input type=button ID=b25 value="May" style="background-color:white; color:darkblue; width:100;" onclick="cli2(5)" /></td>
<td><input type=button ID=b26 value="Jun" style="background-color:white; color:darkblue; width:100;" onclick="cli2(6)" /></td>
<td><input type=button ID=b27 value="Jul" style="background-color:white; color:darkblue; width:100;" onclick="cli2(7)" /></td>
<td><input type=button ID=b28 value="Aug" style="background-color:white; color:darkblue; width:100;" onclick="cli2(8)" /></td>
</tr>
<tr>
<td><input type=button ID=b29 value="Sep" style="background-color:white; color:darkblue; width:100;" onclick="cli2(9)" /></td>
<td><input type=button ID=b210 value="Oct" style="background-color:white; color:darkblue; width:100;" onclick="cli2(10)" /></td>
<td><input type=button ID=b211 value="Nov" style="background-color:white; color:darkblue; width:100;" onclick="cli2(11)" /></td>
<td><input type=button ID=b212 value="Dec" style="background-color:white; color:darkblue; width:100;" onclick="cli2(12)" /></td>
</tr>
</table>
</center>
</br>
<hr class="P_Separation">
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="5" cellspacing="0" width="100%" height="20" class="P_Background">
<tr>
<td align="right">
<input type="button" name="RunQuery" value="Run Query" onclick="alternate3()" class="P_Button_Validation" >
</td>
<td> </td>
<td align="left">
<input type="button" name="Cancel" value="Cancel" class="P_Button_Validation">
</td>
<td>
<input type="submit" name="SubButton" value="" style="width:0">
</td>
</tr> <tr align="center">
<td colspan="4">
<div id="idMessage" style="position:relative; visibility:hidden; background-color:transparent" class="P_Warning">
<img src="images/warning_icon.gif" alt="Warning" border="0" width="32" height="32">
You must enter or select a prompt value.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<div id="idNoSelValue" style="position:absolute; visibility:hidden; background-color:transparent; color:white; height:20px"
class="P_Warning">(No selected value)</div>
For:-
-
Make a similar kind of prompt using Webi, View its HTML source and copy-paste the Format to show Prompts its css and ther text/button/image formats. Use one Big cell (Page width and height) in webi, mark it to be read as HTML and paste that HTML you have created using this View Source.
-
Use a table Horizontal , very thin width and its Formula should be
="1 "+ [Object] (You shoud make its text color = background : to make this hidden)
One javascript will filter all values un a table where the value is preceding 1.
I have attached the code to do this.
- You can search the OpenDocument function Embedded into the above code
prabhat (BOB member since 2007-01-16)