[CLOSED] Infinite Scolling using WebFOCUS/Ajax

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: 289 | Location: Houston,TX | Registered: June 11, 2004

Waz

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.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!

Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006

Ignored post by Waz posted

Show Post

Hallway

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, 2015

Ignored post by Hallway posted

Show Post

Waz

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.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!

Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006

Ignored post by Waz posted

Show Post

vaayu

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: 289 | Location: Houston,TX | Registered: June 11, 2004

Ignored post by vaayu posted

Show Post

Please Wait. Your request is being processed...

Read-Only Topic

Focal Point

Focal Point Forums

WebFOCUS/FOCUS Forum on Focal Point

[CLOSED] Infinite Scolling using WebFOCUS/Ajax

Focal Point | Privacy Statement | Terms of Service