Custom Webi Prompt using VBScripts/Javascript

system · January 7, 2008, 9:24am

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?&amp;sDocName=SuppPerf&amp;sType=wid&amp;iDocID=16438&amp;sRepoType=Corporate&amp;lsSSelect Internal External Supplier="+(str1.replace(" ","%20").substr(0,str1.replace(" ","%20").length-1))+"&amp;lsSSelect Beginning Date="+date5+"&amp;lsSSelect End Date="+date6+"&amp;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)

system · March 14, 2008, 12:47am

Hi Prabhat,

Can we add the list box with values from the Universe objects?
This example has static values, can we get List of Values of Universe Objects?

Request you to help me in this regard.

Thanks
Suresh

sureshnist (BOB member since 2008-03-14)

system · March 25, 2008, 10:36am

In the above example, let me know how to use the universe objects rather than static values .Please guide me…
Thanks in advance

Ramy (BOB member since 2008-01-11)

system · May 14, 2008, 2:17pm

Sorry, but my question is a very Basic one…
How do I use this?
I found it to be very interesting, but have no idea how and where to use this. Can you provide a more detailed explanation, providing a case of use, please?

fjgirante (BOB member since 2004-09-24)

system · June 2, 2008, 4:30pm

Any updates how to get the List of Values in the combobox from Universe objects.

sureshnist (BOB member since 2008-03-14)

system · August 8, 2008, 10:04pm

You need to use the Report Engine SDK to do this.
You can only use the Report Engine SDK in a JSP page and not just using Java Script.
Therefore, with this Java Script innovation, you will not be able to retrieve the LOV values.

I think this was indicated by prabhat:

[Moderator Edit: Combined two posts which were made 3 minutes apart into a single post. ]

darcstorm (BOB member since 2008-07-22)

system · August 28, 2008, 7:49am

Hi there!

I’d like to ask a very very basic question…

I’m new to BO, and haven’t understood yet how to configurate the BO’s SDK, nor from where download or check if it had been installed in my system.

I’ve seen a lot of java/jsp samples, but I couldn’t understand how to configure them and make them run. I’ve been searching some useful information on BO’s developer’s site but havent’ found anything.

In my deep ignorance, I think that I should have a library to reference, for example, in my NetBeans environment before building a web application. But what library? Where could I find it?

Thanks in advance

lsmarinoni (BOB member since 2008-08-14)

system · August 28, 2008, 9:10am

Hi there!

I’ve just answered my question myself!

lsmarinoni (BOB member since 2008-08-14)

system · March 22, 2009, 4:11pm

Hi,

Please anybody help me,what would be the code to set the default value in prompts for 1-2 reports.

I have 2-3 reports where have prompts defined users want to have default value set for the prompts.

Can you please suggest if you have done something like this.

sapboguru (BOB member since 2006-07-13)

system · September 22, 2009, 2:14pm

Amitthawait, Did you get a solution for this?

Raul… (BOB member since 2007-07-31)

system · October 30, 2009, 2:16pm

For me… everything is fine !!
Good JOB !!

1000 thanks…

cheers kenny

kenny (BOB member since 2007-01-02)

system · January 11, 2015, 2:17pm

Hi Prabhat

This code of yours it’s amazing!!! Fantastic job!!! :):)

Look, I’m working now on a WEBI development (BO 4.1) with a requirement to have an option button on the WEBI document report (not on the Input Controls side).
I’ve managed to easily do this requirement with the below code (as example):

" A
B"

on "Read as HTML " cell.

However I’m not able to capture the option selected value by the user on the WEBI side.

Can you help me on this topic? Can I kindly ask for your help/expertise on this subject?

After reading this post, I truly think this should be possible if we use some JAVA script to fetch the option selected with some function like:
document.getElementById(‘RADIO’)

Is this possible? Is this the way? If yes, how do I include this code inside of the WEBI? In another HTML cell? How?
These are my doubts & questions.

Please contact me at the below email with your feedback or suggestions.
armando.j.a.santos@gmail.com

Thanks in advance

Regards
Armando Santos

armando.j.a.santos (BOB member since 2015-01-11)

system · January 11, 2015, 3:48pm

Moderator note @armando:
Please do not cross-post. It leads to fragmented discussions and is against our forum rules. You cross posted a total of three times

Andreas (BOB member since 2002-06-20)