I'm curious if anyone attempted to try any of these plugins with WebFOCUS html reports. https://www.sitepoint.com/jque...ite-scrolling-demos/ We try and restrict most html reports to bring limited amount of data to the browser but some customers would still like to see the entire report, almost like a data feed.
Any thoughts?This message has been edited. Last edited by: FP Mod Chuck,
You need to be very wary of this, as if its an extremely large report, it will chew up resources, the more they scroll. Browsers these days will protect themselves and "reset".
I would always suggest, if its a large report, to not use HTML, but something else like PDF or Excel.
Waz...
Prod:
WebFOCUS 7.6.10/8.1.04
Upgrade:
WebFOCUS 8.2.07
OS:
Linux
Outputs:
HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!
January 03, 2020, 10:02 PM
Hallway
Personally, we use the datatables.net JS library. It brings back the data paginated with the option to show different amounts of lines, column sorting, and has a great search function on the basic configuration. It also has more configuration options than you can imagine. And best of all it's free.
Here's a small example (*Disclaimer: the code below will probably break in IE):
SET BYDISPLAY = ON
SET CENT-ZERO = ON
SET PAGE-NUM = OFF
SET HOLDMISS = ON
SET HOLDLIST = PRINTONLY
SET NODATA = ''
SET TITLES = OFF
SET ASNAMES = MIXED
SET HTMLCSS = OFF
-*Main table request held as JSON
TABLE FILE ggsales
SUM UNITS/I11C AS 'Units'
BUDUNITS/I11C AS 'Budget Units'
DOLLARS/I11MC AS 'Dollars'
BUDDOLLARS/I11MC AS 'Budget Dollars'
BY CATEGORY AS 'Category'
BY PCD AS 'Product ID'
BY PRODUCT AS 'Product'
BY ST AS 'State'
BY CITY AS 'City'
BY STCD AS 'Store ID'
BY DATE/MDYY AS 'Date'
ON TABLE HOLD AS jsonData FORMAT JSON
END
-* Get the field names and formats and hold as JSON
CHECK FILE jsonData HOLD AS INFO
TABLE FILE INFO
LIST
SUFFIX
FIELDNAME
FORMAT
WHERE KINDB13 EQ 'Y';
ON TABLE HOLD AS fieldNameFmt FORMAT JSON
END
-HTMLFORM BEGIN NOEVAL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DataTables Example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/datatables.min.js"></script>
<style>
h1 {
width: 100%;
text-align: center;
}
.num-fmt {
text-align: right;
}
.string {
text-align: left;
}
.date {
text-align: right;
}
</style>
</head>
<body>
<h1><a href="https://datatables.net/" target="_blank">DataTables</a> Example</h1>
<table id="myTable" class="compact hover stripe"></table>
<script>
const jsonData = !IBI.FIL.jsonData; ;
const data = jsonData.records;
const columns = JSONprepare( !IBI.FIL.fieldNameFmt; );
const table = $('#myTable').DataTable({
data: data,
columns: columns,
});
// Function to format the data based on the IBI formatting in the report
function JSONprepare(ibiJSON) {
var myJSON = ibiJSON.records,
colCnt = myJSON.length,
ibiNums = [`D`, `P`, `I`],
columns = [],
i;
for (i = 0; i < colCnt; i++) {
let objJSON = myJSON[i];
let objData = objJSON.FIELDNAME;
let objTitle = objData;
let ibiFmt = objJSON.FORMAT;
let objType = ibiFmt.match(/(?![AI][68][YMD])([DPI]+\d+)/gi) ? `num-fmt` : ibiFmt.match(/[HYMDISQJUL]/gi) ? `date` : `string`;
let objClass = objType;
if (objType === `num-fmt`) {
$thousands = ibiFmt.indexOf(`C`) !== -1 || ibiFmt.indexOf(`D`) !== -1 ? `,` : ``;
$decimal = ibiFmt.indexOf(`.`) !== -1 ? `.` : ``;
$precision = ibiFmt.indexOf(`.`) !== -1 ? ibiFmt.substring(ibiFmt.indexOf(`.`) + 1).replace(/[^\d]/g, ``).valueOf() : 0;
$prefix = ibiFmt.indexOf(`M`) !== -1 ? `$` : ``;
$postfix = ibiFmt.indexOf(`%`) > 0 ? `%` : ``;
$args = [$thousands, $decimal, $precision, $prefix, $postfix];
columns.push({
data: objData,
title: objTitle,
type: objType,
class: objClass,
defaultContent: 0,
render: $.fn.dataTable.render.number.apply(null, $args)
});
} else {
columns.push({
data: objData,
title: objTitle,
type: objType,
class: objClass,
defaultContent: ` `,
});
}
}
return columns;
}
</script>
</body>
</html>
-HTMLFORM END
This message has been edited. Last edited by: Hallway,
Hallway
Prod: 8202M1
Test: 8202M4
Repository:
OS:
Outputs:
January 05, 2020, 01:49 PM
Waz
We also use Datatables, and I think later versions of WebFOCUS has it as well.
But be aware of large volumes and impacts on browsers. In particular mobile devices.
Waz...
Prod:
WebFOCUS 7.6.10/8.1.04
Upgrade:
WebFOCUS 8.2.07
OS:
Linux
Outputs:
HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!
January 06, 2020, 04:25 PM
vaayu
Yes, we use datatables as well, 8205 has it as an D3 extension now but this would be different. Just a thought I had to see if anyone messed with this type of requirement. Understand the browser acts up with large datasets. Thanks for all the input though, you guys Rock!!
