[SOLVED] jquery and webfocus

November 17, 2012, 04:39 PM

David Briars

Simple example of using jQuery,within WebFOCUS..

-* Focexec: jQuery01.fex
APP PREPENDPATH IBISAMP
-RUN
DEFINE FILE GGSALES
 K1/A14 = '<OPTION VALUE=';
 K2/A1  = '>';
 PRODUCT_OPT/A200 = K1 | PRODUCT || K2 | PRODUCT;
END
TABLE FILE GGSALES
 SUM PRODUCT_OPT
 BY PRODUCT_OPT
 ON TABLE HOLD AS PRODOPT FORMAT ALPHA
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
 <title>Select Gotham Grinds Product</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
 </script>
 <script>
  $(document).ready(function(){
   $("#hide").click(function(){
    $("#product").hide();
   });
   $("#show").click(function(){
    $("#product").show();
   });
  });
 </script>
</head>
<body>
<p>Click 'Hide' to hide the product drop down list.  Click 'Show' to display the <br>
product drop down list. </p>
 <button id="hide" type="button">
  Hide
 </button>
 <button id="show" type="button">
  Show
 </button>
 <br><br>
 <SELECT id="product">
  !IBI.FIL.PRODOPT;
 </select>
</body>
</html>
-HTMLFORM END

November 18, 2012, 09:23 PM

David Briars

-* Focexec: jQuery02.fex
APP PREPENDPATH IBISAMP
-RUN
TABLE FILE GGPRODS
SUM PRODUCT                             NOPRINT 
COMPUTE COUNTER1/I2 = COUNTER + 1;      NOPRINT
COMPUTE COUNTER2/I2 = COUNTER - 1;      NOPRINT
COMPUTE JSPRODARRAY/A50 = 'availableTags[' |  EDIT(COUNTER2) | '] = "' |
                           PRODUCT         || '";';
BY PRODUCT                              NOPRINT
ON TABLE SET HOLDLIST PRINTONLY 
ON TABLE SAVE AS SVARRAY
END
-RUN
-SET &TTLPRODS = &LINES;
-*
-HTMLFORM BEGIN
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Select Gotham Grinds Products</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
 <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css" />
 <script>
   $(function() {
     var availableTags = new Array(!IBI.AMP.TTLPRODS;);
-INCLUDE svarray.ftm
     $( "#tags" ).autocomplete({
        source: availableTags
     });
   });
 </script>
</head>
<body>
 <div class="ui-widget">
  <label for="tags">Products: </label>
  <input id="tags" />
 </div>
</body>
</html>
-HTMLFORM END

This message has been edited. Last edited by: David Briars,

November 19, 2012, 12:07 PM

BI_Developer

Thanks David. I am able to play with these examples.
Can we use jquery to animate webfocus graphs or use webfocus data to create graphs in jquery?

November 20, 2012, 10:22 PM

David Briars

quote:
Thanks David. I am able to play with these examples.

That's great.

quote:
Can we use jquery to animate webfocus graphs or use webfocus data to create graphs in jquery?

At the moment, we are not using any of the jQuery graph/chart plugins.

I attended a Summit 2012 presentation called 'JQuery and WebFOCUS: Creating a Robust Interactive Web Reporting Environment' given by folks from Insperity. This presentation did cover creating interactive charts with WebFOCUS and a jQuery graph/chart plugin. The .pptx was available to conference attendees on the IB website. If you can't obtain a copy there, perhaps your tech rep can send you a copy.

November 20, 2012, 10:44 PM

JohnO

Another method of using jquery is to call WebFOCUS to return csv data and feed that into client side jquery graphs, grids, etc. probably after converting it to JSON.

Unfortunately WF does not have a

 HOLD FORMAT JSON

- and even if they did, it would probably look like

  HOLD FORMAT XML

 HOLD FORMAT XMLRAW

which is bloated and convoluted.

December 05, 2012, 09:00 PM

David Briars

Here is an example using WebFOCUS, jQuery, and Highcharts JS, running against an IB sample file.

Focexec 'getdollars' gets the chart data via an Ajax call from the webpage:

-* File getdollars.fex
-DEFAULTH &CATEGORY = 'Coffee'
TABLE FILE GGSALES
 SUM DOLLARS
     BUDDOLLARS
 BY CATEGORY
 BY PRODUCT
 IF CATEGORY EQ &CATEGORY
 ON TABLE PCHOLD FORMAT XML
END

Focexec HighCharts04 is the webpage rendered by the user.

-*
-* Focexec: HighCharts04.fex
-*
-* Create Product Category option tags.
-*
DEFINE FILE GGSALES
 K1/A14 = '<OPTION VALUE=';
 K2/A1  = '>';
 CATEGORY_OPT/A200 = K1 | CATEGORY || K2 | CATEGORY;
END
TABLE FILE GGSALES
 SUM CATEGORY_OPT
 BY  CATEGORY_OPT NOPRINT
 ON  TABLE SET HOLDLIST PRINTONLY
 ON TABLE HOLD AS CATOPT FORMAT ALPHA
END
-RUN
-*
-* Display web page to user.
-*
-HTMLFORM BEGIN
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Product Sales v. Budget Chart</title>
-* Bring in jQuery JS library.
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
-* Bring in Highcharts JS charting library.
 <script src="/approot/mypubs/highcharts.js"></script>
 <script src="/approot/mypubs/gray.js"></script>
 <script type="text/javascript">
   //
   // Bar Chart Settings.
   //
   function chartset() {
	 $(function () {
	 var chart;
     $(document).ready(function() {
       options = {
          chart: {
            renderTo: 'container',
            type: 'bar'
          },
          title: {
            text: 'Product Sales v. Budget'
          },
          xAxis: {
		    categories: []
          },
          series: [{
            name: 'Dollar Sales',
            data: []
          }, {
            name: 'Budget Dollars',
            data: []
          }]
        }
	   });
	  });
   }
</script>
<script type="text/javascript">
 //
 // Retrieve products from reporting server, and render chart.  
 //
 function getproducts() {
  selectedcat = $('#category').val();
  var url = "/ibi_apps/WFServlet" + "?" + "IBIF_ex=MyPubs/getdollars.fex";
  // Ajax call for products.  
  $.get(url,{ CATEGORY: selectedcat },
   function(data, status, xhr) {
    var xmlx = xhr.responseText;
	allproducts = [];
	options.series[0].data = [];
	options.series[1].data = [];
    // Iterate through XML to obtain products, dollars, and budget dollars.  
    $(xmlx).find('td').each(function(){
     tagvalue = $(this).text();
     $.each(this.attributes, function(i, attrib) {
	  var value = attrib.value;
      // Column 1 is PRODUCT.
	  if (value == "c1") {
	   allproducts.push([ tagvalue ]);
	  }
      // Column 2 is DOLLARS.
      if (value == "c2") {
	   xtagvalue = parseInt(tagvalue,10);
	   options.series[0].data.push( xtagvalue );
	  }
      // Column 3 is BUDDOLLARS.  
      if (value == "c3") {
	   xtagvalue = parseInt(tagvalue,10);
	   options.series[1].data.push( xtagvalue );
	  }
	 });
   });
   options.xAxis.categories = allproducts;
   // Create bar chart.
   chart = new Highcharts.Chart(options);
  });
 }
</script>
</head>
<body onLoad="chartset(); getproducts();">
 Category
 <SELECT id="category" onChange="getproducts();">
  !IBI.FIL.CATOPT;
 </select>
 <br><br>
 <div id="container" style="width: 100%; height: 400px"></div>
</body>
</html>
-HTMLFORM END

Screen shot upon rendering page:

Screen shot upon clicking 'Gifts':

Highcharts JS URL: http://www.highcharts.com/

December 06, 2012, 10:38 AM

Francis Mariani

David,

Thanks for sharing your knowledge of Highcharts with us - quite amazing stuff.

April 22, 2013, 12:50 AM

Hans

I do presentations about Enhancing your WebFOCUS Dashboards With jQuery nationwide. I've presented at the Summit 2012 and will present this year again in Orlando. This year I will be handing out open source code examples. If anyone is planning on going this year, look for me... Hans Lim.

April 22, 2013, 09:40 AM

David Briars

Thanks Hans. I will be at Summit 2013 and am looking forward to attending your presentation.

April 22, 2013, 02:09 PM

bug

quote:
Originally posted by Hans:
I do presentations about Enhancing your WebFOCUS Dashboards With jQuery nationwide. I've presented at the Summit 2012 and will present this year again in Orlando. This year I will be handing out open source code examples. If anyone is planning on going this year, look for me... Hans Lim.

Hans, are you from IBI? If not, do you have a website I can check what you have to offer?

Thanks.

April 22, 2013, 04:54 PM

cs_source

wow very impressive thread, i will also ask what bug has asked towards Hans

June 20, 2013, 03:20 AM

Sivakumaran Elangovan

Hi , Am using jquery like this in my dev code.
This jquery is used to populate values on to UI controls like, listbox, comboboxes based on certain flow of events.

I have included the code of jquery latest.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
<script type="text/javascript">
var _url = "/ibi_apps/WFServlet?IBIF_ex=";
var _ibiapp = "prr_dev/";
var _procedure_for_div = "per_division_generate";
var _procedure_for_dept = "per_department_generate";
var _procedure_for_class = "per_class_load_multi";
var _procedure_for_subclass= "per_subcl_load_multi";
var _procedure_for_dpci= "per_dpci_load_multi";
var _procedure_for_dpci_for_class= "per_dpci_load_for_class";
var _procedure_for_year="per_year_load";
var _procedure_for_startdate="per_start_date_load";
var _procedure_for_enddate="per_end_date_load";

function getyear()
{
$.ajax({
type : "GET",
url : _url+_ibiapp +_procedure_for_year ,
data : "SEL=" + $("#combobox_for_startweekyear").val(),
dataType: "html",
success : function(_data)
{
$('#combobox_for_startweekyear').empty();
$(_data).find('tr').each(function()
{
var value1 = $(this).children('td[colnum="c3"]').text();
var display = $(this).children('td[colnum="c4"]').text();
$('#combobox_for_startweekyear').append('\n");
$('#combobox_for_endweekyear').append('\n");
}
);
}
}
);

This is working fine when I use this code and run the fex file from webfocus dev studio.. but at times, when opening the link from external browser, the url is throwing "Object Expected Error".. I am pretty sure this is with jquery code.. What has to be done to resolve..? Is that we have to deploy the jquery lib files to our local environment? I am completely new to jquery and even webfocus.. please help me..

January 19, 2015, 08:38 AM

Gaurav

quote:

Originally posted by David Briars:
Here is an example using WebFOCUS, jQuery, and Highcharts JS, running against an IB sample file.

Focexec 'getdollars' gets the chart data via an Ajax call from the webpage:

-* File getdollars.fex
-DEFAULTH &CATEGORY = 'Coffee'
TABLE FILE GGSALES
 SUM DOLLARS
     BUDDOLLARS
 BY CATEGORY
 BY PRODUCT
 IF CATEGORY EQ &CATEGORY
 ON TABLE PCHOLD FORMAT XML
END

Focexec HighCharts04 is the webpage rendered by the user.

-*
-* Focexec: HighCharts04.fex
-*
-* Create Product Category option tags.
-*
DEFINE FILE GGSALES
 K1/A14 = '<OPTION VALUE=';
 K2/A1  = '>';
 CATEGORY_OPT/A200 = K1 | CATEGORY || K2 | CATEGORY;
END
TABLE FILE GGSALES
 SUM CATEGORY_OPT
 BY  CATEGORY_OPT NOPRINT
 ON  TABLE SET HOLDLIST PRINTONLY
 ON TABLE HOLD AS CATOPT FORMAT ALPHA
END
-RUN
-*
-* Display web page to user.
-*
-HTMLFORM BEGIN
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Product Sales v. Budget Chart</title>
-* Bring in jQuery JS library.
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
-* Bring in Highcharts JS charting library.
 <script src="/approot/mypubs/highcharts.js"></script>
 <script src="/approot/mypubs/gray.js"></script>
 <script type="text/javascript">
   //
   // Bar Chart Settings.
   //
   function chartset() {
	 $(function () {
	 var chart;
     $(document).ready(function() {
       options = {
          chart: {
            renderTo: 'container',
            type: 'bar'
          },
          title: {
            text: 'Product Sales v. Budget'
          },
          xAxis: {
		    categories: []
          },
          series: [{
            name: 'Dollar Sales',
            data: []
          }, {
            name: 'Budget Dollars',
            data: []
          }]
        }
	   });
	  });
   }
</script>
<script type="text/javascript">
 //
 // Retrieve products from reporting server, and render chart.  
 //
 function getproducts() {
  selectedcat = $('#category').val();
  var url = "/ibi_apps/WFServlet" + "?" + "IBIF_ex=MyPubs/getdollars.fex";
  // Ajax call for products.  
  $.get(url,{ CATEGORY: selectedcat },
   function(data, status, xhr) {
    var xmlx = xhr.responseText;
	allproducts = [];
	options.series[0].data = [];
	options.series[1].data = [];
    // Iterate through XML to obtain products, dollars, and budget dollars.  
    $(xmlx).find('td').each(function(){
     tagvalue = $(this).text();
     $.each(this.attributes, function(i, attrib) {
	  var value = attrib.value;
      // Column 1 is PRODUCT.
	  if (value == "c1") {
	   allproducts.push([ tagvalue ]);
	  }
      // Column 2 is DOLLARS.
      if (value == "c2") {
	   xtagvalue = parseInt(tagvalue,10);
	   options.series[0].data.push( xtagvalue );
	  }
      // Column 3 is BUDDOLLARS.  
      if (value == "c3") {
	   xtagvalue = parseInt(tagvalue,10);
	   options.series[1].data.push( xtagvalue );
	  }
	 });
   });
   options.xAxis.categories = allproducts;
   // Create bar chart.
   chart = new Highcharts.Chart(options);
  });
 }
</script>
</head>
<body onLoad="chartset(); getproducts();">
 Category
 <SELECT id="category" onChange="getproducts();">
  !IBI.FIL.CATOPT;
 </select>
 <br><br>
 <div id="container" style="width: 100%; height: 400px"></div>
</body>
</html>
-HTMLFORM END

Screen shot upon rendering page:

Screen shot upon clicking 'Gifts':

Highcharts JS URL: http://www.highcharts.com/

Good Morning David,

I hope you are doing well.

I am fascinated by all the work you are doing in the jQuery.

I have one query. My admin told me I'm working in MRE and cannot make two fex as I can't give url in MRE (Thats what I have been told). Can you update above query by writing everything in one file. i.e. writing the code of XML feeder file in the same fex and then show me how and where to execute it.

Thanks in advance.

Best Regards,
Gaurav Tyagi