Hi Guys,
Finally i cracked How to make use of Javascripts and Javascript UI libraries in cognos .
Advantage of libraries is you have predefined function for almost everything for cognos developers who are not good with javascripts its a blessing.The function covers all scenarios.
Eg -If you have date prompt and you dont use libraries then you have to tell everything like what to do when you click on something how to pass that value to prompt and all those details.But since all this is covered in library be smart and just use library.
What you need
1) Javascript library
2)Javascript UI library
3)css file -- for how you want look and feel .
Now if you take this files from google directly they load into your browser like all site like facebook and will not be affected by cognos security.You can also place them in cognos server installation directory and use it .But again you need to ask cognos admin team.So load it from google everytime they are so fast and lite you wont know the difference .All major site are using these libraries so dont worry.
How to implement in Cognos
1) Go to prompt page
2)Take two HTML items and paste the code.
Note -Now you could create input prompt from cognos and use it rather then creating with HTML but the javascript UI library wont work properly .You need to specify what to do when you click on the prompt how to save that value to input prompt and all that .At end of this page i have included a link of blog which tells you that .Its a big script and difficult way to do it.In case you like the hard way :-)
First HTML item
</html>
<head>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
Second HTML Item
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<style type="text/css">
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script>
var bb = $.noConflict();
bb(document).ready(function(){
bb(function() {
bb( "#datepicker" ).datepicker();
});
alert("the function has run");
});
bb.noConflict();
</script>
Note - I have hidden wekends with help of CSS styles .Do go through below link for details on what javascript UI can do for you .
JQuery UI Official site
Prompts API for Cognos10
In cognos report studio guide for cognos 10.2 you have javascript function to access prompts these have been addition to cognos 10 earlier cognos did no have its own function for javascripts in 8.4
http://pic.dhe.ibm.com/infocenter/cbi/v10r2m0/index.jsp?topic=%2Fcom.ibm.swg.ba.cognos.ug_cr_rptstd.10.2.0.doc%2Fc_prmpt_api_overview.html
Below is a simple script to assign value to text prompt box using javascript
<script language="javascript" type="text/javascript">
//getFormWarpRequest()._textEditBoxABC.value = 'Golf Equipment';
var fw = getFormWarpRequest();
var bb =fw._textEditBoxABC;
ab.value = 'Golf'
alert ('this is trial');
</script>
Below is a thing to replace the First HTML item .It tells how to pass parameter value selected using Java UI to cognos parameter.
Apart from that create a text box prompt ABC and hide it.You cant pass the value selected in javascript UI to cognos so you pass it to textbox prompt which is a congos prompt and submit that textbox prompt
</html>
<head>
<script language="javascript" type="text/javascript">
function myFunction()
{
var jobValue = document.getElementById('datepicker').value;
// just like that you can remove both jobvalue and alert
alert(document.getElementById('datepicker').value)
//below 4 lines is your actual code
var fw = getFormWarpRequest();
var bb =fw._textEditBoxABC;
bb.value = document.getElementById('datepicker').value;
// if you dont want to autosubmit dont use the below line
promptButtonFinish();
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onchange =myFunction() /></p>
</body>
</html>
Finally i cracked How to make use of Javascripts and Javascript UI libraries in cognos .
Advantage of libraries is you have predefined function for almost everything for cognos developers who are not good with javascripts its a blessing.The function covers all scenarios.
Eg -If you have date prompt and you dont use libraries then you have to tell everything like what to do when you click on something how to pass that value to prompt and all those details.But since all this is covered in library be smart and just use library.
What you need
1) Javascript library
2)Javascript UI library
3)css file -- for how you want look and feel .
Now if you take this files from google directly they load into your browser like all site like facebook and will not be affected by cognos security.You can also place them in cognos server installation directory and use it .But again you need to ask cognos admin team.So load it from google everytime they are so fast and lite you wont know the difference .All major site are using these libraries so dont worry.
How to implement in Cognos
1) Go to prompt page
2)Take two HTML items and paste the code.
Note -Now you could create input prompt from cognos and use it rather then creating with HTML but the javascript UI library wont work properly .You need to specify what to do when you click on the prompt how to save that value to input prompt and all that .At end of this page i have included a link of blog which tells you that .Its a big script and difficult way to do it.In case you like the hard way :-)
First HTML item
</html>
<head>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
Second HTML Item
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<style type="text/css">
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script>
var bb = $.noConflict();
bb(document).ready(function(){
bb(function() {
bb( "#datepicker" ).datepicker();
});
alert("the function has run");
});
bb.noConflict();
</script>
Note - I have hidden wekends with help of CSS styles .Do go through below link for details on what javascript UI can do for you .
JQuery UI Official site
Prompts API for Cognos10
In cognos report studio guide for cognos 10.2 you have javascript function to access prompts these have been addition to cognos 10 earlier cognos did no have its own function for javascripts in 8.4
http://pic.dhe.ibm.com/infocenter/cbi/v10r2m0/index.jsp?topic=%2Fcom.ibm.swg.ba.cognos.ug_cr_rptstd.10.2.0.doc%2Fc_prmpt_api_overview.html
Below is a simple script to assign value to text prompt box using javascript
<script language="javascript" type="text/javascript">
//getFormWarpRequest()._textEditBoxABC.value = 'Golf Equipment';
var fw = getFormWarpRequest();
var bb =fw._textEditBoxABC;
ab.value = 'Golf'
alert ('this is trial');
</script>
Below is a thing to replace the First HTML item .It tells how to pass parameter value selected using Java UI to cognos parameter.
Apart from that create a text box prompt ABC and hide it.You cant pass the value selected in javascript UI to cognos so you pass it to textbox prompt which is a congos prompt and submit that textbox prompt
</html>
<head>
<script language="javascript" type="text/javascript">
function myFunction()
{
var jobValue = document.getElementById('datepicker').value;
// just like that you can remove both jobvalue and alert
alert(document.getElementById('datepicker').value)
//below 4 lines is your actual code
var fw = getFormWarpRequest();
var bb =fw._textEditBoxABC;
bb.value = document.getElementById('datepicker').value;
// if you dont want to autosubmit dont use the below line
promptButtonFinish();
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onchange =myFunction() /></p>
</body>
</html>
