Focal Point Banner
Community Center Education Summit Technical Support User Groups
Let's Get Social!

Facebook Twitter LinkedIn YouTube
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] jquery and webfocus
Go
New
Search
Notify
Tools
Reply
  
[SOLVED] jquery and webfocus
 Login/Join
 
Platinum Member
posted
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
 
Posts: 129 | Registered: July 21, 2011Reply With QuoteReport This Post
Expert
posted Hide Post
Search on jquery, 6 pages of threads?


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1956 | Location: Centennial, CO | Registered: January 31, 2006Reply With QuoteReport This Post
Master
posted Hide Post
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 





Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2012/Tomcat Standalone Workstation: Windows 7/IE 11 Database: Oracle 12c/Netezza Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer, & ReportCaster

 
Posts: 771 | Registered: April 23, 2003Reply With QuoteReport This Post
Master
posted Hide Post
-* 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,
 
Posts: 771 | Registered: April 23, 2003Reply With QuoteReport This Post
Platinum Member
posted Hide Post
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
 
Posts: 129 | Registered: July 21, 2011Reply With QuoteReport This Post
Master
posted Hide Post
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.
 
Posts: 771 | Registered: April 23, 2003Reply With QuoteReport This Post
Member
posted Hide Post
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.
 
Posts: 7 | Registered: July 14, 2009Reply With QuoteReport This Post
Master
posted Hide Post
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/
 
Posts: 771 | Registered: April 23, 2003Reply With QuoteReport This Post
Expert
posted Hide Post
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
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Reply With QuoteReport This Post
Member
posted Hide Post
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
 
Posts: 12 | Registered: March 06, 2012Reply With QuoteReport This Post
Master
posted Hide Post
Thanks Hans. I will be at Summit 2013 and am looking forward to attending your presentation.
 
Posts: 771 | Registered: April 23, 2003Reply With QuoteReport This Post
Platinum Member
posted Hide Post
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(!)
 
Posts: 147 | Location: Toronto (GTA) | Registered: May 25, 2005Reply With QuoteReport This Post
Gold member
posted Hide Post
wow very impressive thread, i will also ask what bug has asked towards Hans


WebFocus 8.02, SQL Server 2008r2
 
Posts: 51 | Registered: November 30, 2012Reply With QuoteReport This Post
Member
posted Hide Post
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
 
Posts: 13 | Registered: May 23, 2013Reply With QuoteReport This Post
Gold member
posted Hide Post
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
 
Posts: 58 | Registered: November 19, 2014Reply With QuoteReport This Post
Guru
posted Hide Post
quote:
David

Good One


WebFOCUS 8.1.05 / APP Studio
 
Posts: 272 | Location: Brazil | Registered: October 31, 2006Reply With QuoteReport This Post
Master
posted Hide Post
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.)
 
Posts: 771 | Registered: April 23, 2003Reply With QuoteReport This Post
Guru
posted Hide Post
Where is the Like button? Thanks a lot David. Good One


-Rifaz

WebFOCUS 7.7.x and 8.x
 
Posts: 405 | Location: India | Registered: June 13, 2013Reply With QuoteReport This Post
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] jquery and webfocus

Copyright © 1996-2018 Information Builders, leaders in enterprise business intelligence.