Focal Point
[SOLVED] jquery and webfocus

This topic can be found at:
http://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/1517052626

November 16, 2012, 10:49 AM
BI_Developer
[SOLVED] jquery and webfocus
Hi

Can anyone post a small example using jquery and webfocus may be on a CAR file graph etc?

Thank you..

This message has been edited. Last edited by: <Kathryn Henning>,


WF 8.2.01 APP STUDIO
PDF,HTML,EXL2K,Active
November 16, 2012, 11:06 AM
Tom Flynn
Search on jquery, 6 pages of threads?


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
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 






Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster
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?


WF 8.2.01 APP STUDIO
PDF,HTML,EXL2K,Active
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
or
 HOLD FORMAT XMLRAW 
which is bloated and convoluted.


WF 7.6.8, Windows
Any output format: HTML, Excel, PDF, XML, etc.
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.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
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.


WebFOCUS 7.6
Windows, All Outputs
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.


7.66 and 7.704
System: Windows / AIX / Linux
Output: Mostly HTML, with some PDF, Excel and Lotus(!)
April 22, 2013, 04:54 PM
cs_source
wow very impressive thread, i will also ask what bug has asked towards Hans


WebFocus 8.02, SQL Server 2008r2
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..


Webfocus 7.6
Excel, HTML, PDF
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


WebFOCUS 8.1.05
Windows, All Outputs
January 07, 2016, 10:19 AM
Ricardo Augusto
quote:
David

Good One


WebFOCUS 8.1.05 / APP Studio
January 07, 2016, 11:30 AM
David Briars
Thanks Ricardo!

Yep, this was a nice thread, and there were a couple of other similar one's as well, 'back in those days'. :-)

Yes, for sure, we've been able to meet some important user requirements, by integrating WebFOCUS and jQuery.

(As a side note... We were kicking the tires on Highcharts when we were on WF 7, and didn't have a sense for when WF 8 would be available.

We did end up holding off on visualizations, until we obtained WF 8. We have since standardized on WF HTML5 charts, and would only look at another tool if we had a requirement for a chart that wasn't available in WF 8.)
January 11, 2016, 02:08 AM
Rifaz
Where is the Like button? Thanks a lot David. Good One


-Rifaz

WebFOCUS 7.7.x and 8.x