Jedox Web Reports: Slider (jQuery UI)

Recently I faced a challenge where user requested to have a slider mechanism to change the report parameter/variable values, at the times when it’s not provided in the Jedox portal by default.

??So, how do I put a jQuery control changing values of report/worksheet cell??

Widgets came to the rescue and rather me playing with more words and lengthening my blog length is rather hit with the solution for you…

1. Create a new worksheet, and assign a cell location whose value would be changed by the slider control. In my case it’s ‘C3’

blog15_pic1
2. Add a widget control on the sheet, with the following settings

blog15_pic2

3. Add the following code to the widget:

<html>
<head>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<p>
  <label for="amount">Selected Value($50 increments):</label>
  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
  <div id="slider" style="width:350px;margin-left:50px;"></div>
</body>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<script>
	  //function __exec(params){
	  $( "#slider" ).slider({
		min: 0,
		max: 500,
		step: 50,
		slide: function( event, ui ) {
		  $( "#amount" ).val( "$" + ui.value );
		  setValue(ui.value);
		}
	  });
	  $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
	  __set(0);
	  //}
	  function setValue(sld_value){
	  	__set(sld_value);
	  }
  </script>
</html>

4. Voila… There you go, now if all goes well you should have a fully working slider control provided by the jQuery UI control changing the values on your worksheet which can source as your report parameter

blog15_pic3

Hope it helps you in your future projects!!!

Note: In the Jedox widgets using the jQuery/JavaScript standard ready mechanism to trigger widget on load code is not a good idea, as widgets are loaded by the portal and when they are loaded, the on ready event has already been kicked off as widget is only a contained in the bigger page. Hence to keep it simple jQuery on load/ready function doesn’t trigger of behave as expected, hence leaving the code out in open is the only way I was able to make it work as desired.

Downloads:
Download

Leave a Reply

Your email address will not be published. Required fields are marked *

*