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     [CLOSED] Infinite Scolling using WebFOCUS/Ajax
Go
New
Search
Notify
Tools
Reply
  
[CLOSED] Infinite Scolling using WebFOCUS/Ajax
 Login/Join
 
Guru
posted
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,


-********************
Sandbox: 8206.10
Dev: 8201M
Prod:8009
-********************
 
Posts: 283 | Location: Houston,TX | Registered: June 11, 2004Reply With QuoteReport This Post
Expert
posted Hide Post
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.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

 
Posts: 6291 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Reply With QuoteReport This Post
Master
posted Hide Post
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:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Reply With QuoteReport This Post
Expert
posted Hide Post
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.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

 
Posts: 6291 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Reply With QuoteReport This Post
Guru
posted Hide Post
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!!


-********************
Sandbox: 8206.10
Dev: 8201M
Prod:8009
-********************
 
Posts: 283 | Location: Houston,TX | Registered: June 11, 2004Reply With QuoteReport This Post
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED] Infinite Scolling using WebFOCUS/Ajax

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