Friday 29 March 2013

Datepicker using javascript UI

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>



5 comments:

  1. Read all the information that i've given in above article. It'll give u the whole idea about it.
    Best Devops Training in pune
    Microsoft azure training in Bangalore
    Power bi training in Chennai

    ReplyDelete

  2. It seems you are so busy in last month. The detail you shared about your work and it is really impressive that's why i am waiting for your post because i get the new ideas over here and you really write so well.

    Selenium training in Chennai
    Selenium training in Bangalore
    Selenium training in Pune
    Selenium Online training
    Selenium training in bangalore

    ReplyDelete
  3. I really enjoy the blog article.Much thanks again.
    core java online training

    ReplyDelete