[SOLVED]Freeze columns and headings in HTML format

November 12, 2019, 08:56 AM

Hi,

I would like to FREEZE the heading and few columns on the report in HTML format.

I did search the forum and found few old posts but nothing works as expected. We are in 8.2.06 and would like to know the way to achieve this functionality.

Thanks

This message has been edited. Last edited by: WFDevConsultant,

November 12, 2019, 09:10 AM

BabakNYC

In InfoAssist, there's a Freeze button in the Format Tab.

November 12, 2019, 09:35 AM

WFDevConsultant

Problem is HFREEZE works only for Heading not for columns.

If you want to Freeze columns then we need to use FREEZE-COLUMNS but that is supported only in AHTML format.

November 13, 2019, 08:07 AM

BabakNYC

Not something you can do right now. You could call IB tech support and ask for a new feature.

November 13, 2019, 01:25 PM

Hallway

You can look into incorporating the datatables.net JavaScript library that has both of those features

November 13, 2019, 06:24 PM

Hallway

Here is a quick table I put together using GGSALES. It has the DataTables and the Bootstrap4 libraries included (which are both FREE libraries).

This is just a basic initialization, and check out all the features

Column sorting by clicking on the column titles
Title Row frozen
First two columns frozen
Numbers of rows to show on a page
Instant search
Row information
Paging Buttons
Row select on click

These are just the tip of the iceberg of the capabilities that DataTables has. We have been using this for a few years now, and I am still learn something new every time that I explore their documentation.

It is a lot more verbose than what you're used to, but once you start to understand it more, there is so much more that you can do with it than with just WebFOCUS alone.

  
TABLE FILE ggsales
SUM
BUDUNITS/D12
UNITS/D12
COMPUTE PCTUNITS/D12.2 = (UNITS-BUDUNITS)/BUDUNITS*100;
BUDDOLLARS/D12
DOLLARS/D12
COMPUTE PCTDOLLARS/D12.2 = (DOLLARS-BUDDOLLARS)/BUDDOLLARS*100;
BY SEQ_NO
BY CATEGORY
BY PCD
BY PRODUCT
BY REGION
BY ST
BY CITY
BY STCD
BY DATE/MDYY
ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS TABLEDATA FORMAT JSON
END
-RUN

-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</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.20/fc-3.3.0/fh-3.1.6/sl-1.3.1/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.20/fc-3.3.0/fh-3.1.6/sl-1.3.1/datatables.min.js"></script>
            <style>
        .alignRight {
            text-align: right;
        }
        .alignLeft {
            text-align: left;
        }
    </style>
</head>
<body>
    <div id="tableWrapper" style="width:800px;margin:20px;">
        <table id="myTable" class="table table-sm table-striped nowrap">
        </table>
    </div>
    <script>
        var data = !IBI.FIL.TABLEDATA;
        data = data.records;
        let myTable = $("#myTable").DataTable({
            fixedColumns: {
                leftColumns: 2,
            },
            select: true,
            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            pageLength: 50,
            scrollY: 400,
            scrollX: true,
            data: data,
            columns: [{
                data: "PCD",
                title: "ID",
                type: "string",
                render: $.fn.dataTable.render.text(),
                class: 'alignLeft',
            }, {
                data: "PRODUCT",
                title: "Product",
                type: "string",
                render: $.fn.dataTable.render.text(),
                class: 'alignLeft'
            }, {
                data: "REGION",
                title: "Region",
                type: "string",
                render: $.fn.dataTable.render.text(),
                class: 'alignLeft',
            }, {
                data: "ST",
                title: "State",
                type: "string",
                render: $.fn.dataTable.render.text(),
                class: 'alignLeft',
            }, {
                data: "CITY",
                title: "City",
                type: "string",
                render: $.fn.dataTable.render.text(),
                class: 'alignLeft',
            }, {
                data: "STCD",
                title: "Store<br>Code",
                type: "string",
                render: $.fn.dataTable.render.text(),
                class: 'alignLeft',
            }, {
                data: "DATE",
                title: "Date",
                type: "string",
                render: $.fn.dataTable.render.text(),
                class: 'alignLeft',
            }, {
                data: "BUDUNITS",
                title: "Budget<br>Units",
                type: "num-fmt",
                render: $.fn.dataTable.render.number(',', '.', 0, '', ''),
                class: 'alignRight',
            }, {
                data: "UNITS",
                title: "Sales<br>Units",
                type: "num-fmt",
                render: $.fn.dataTable.render.number(',', '.', 0, '', ''),
                class: 'alignRight',
            }, {
                data: "PCTUNITS",
                title: "Units<br>% +/-",
                type: "num-fmt",
                render: $.fn.dataTable.render.number(',', '.', 2, '', '%'),
                class: 'alignRight',
            }, {
                data: "BUDDOLLARS",
                title: "Budget<br>Dollars",
                type: "num-fmt",
                render: $.fn.dataTable.render.number(',', '.', 0, '$', ''),
                class: 'alignRight',
            }, {
                data: "DOLLARS",
                title: "Sales<br>Dollars",
                type: "num-fmt",
                render: $.fn.dataTable.render.number(',', '.', 0, '$', ''),
                class: 'alignRight',
            }, {
                data: "PCTDOLLARS",
                title: "Dollars<br>% +/-",
                type: "num-fmt",
                render: $.fn.dataTable.render.number(',', '.', 2, '', '%'),
                class: 'alignRight',
            }],
        })
    </script>
</body>
</html>
-HTMLFORM END

November 19, 2019, 03:28 PM

WFDevConsultant

Thanks Hallway.

It is working well with BY Statements but not with ACROSS statements.

November 19, 2019, 09:49 PM

Hallway

quote:
Originally posted by WFDevConsultant:
Thanks Hallway.

It is working well with BY Statements but not with ACROSS statements.

You can use an across statement. You have to hold the table as an HTMTABLE, add classes to different areas of the report, then manipulate the held data to create <thead> and <tfoot> elements for it to work.

This works good on small datasets. I have ran into issues on large datasets of it being too big and get a jQuery overflow error.

TABLE FILE ggsales
SUM
BUDUNITS/D12
UNITS/D12
BUDDOLLARS/D12M
DOLLARS/D12M
BY PCD
BY CATEGORY
BY PRODUCT
BY DATE/MDYY
ACROSS REGION
ON TABLE SET ACROSSTITLE SIDE
ON TABLE SET BYDISPLAY ON
ON TABLE SET PAGE-NUM OFF
ON TABLE RECOMPUTE
ON TABLE HOLD AS TABLEDATA FORMAT HTMTABLE
ON TABLE SET STYLE *
TYPE=REPORT, LINES-PER-PAGE=UNLIMITED, $
TYPE=ACROSSTITLE, CLASS='tblHead acrossTitle', $
TYPE=ACROSSVALUE, CLASS='tblHead acrossValue', $
TYPE=TITLE, CLASS='tblHead', $
TYPE=DATA, CLASS='tblBody', $
TYPE=GRANDTOTAL, CLASS='tblFoot', $
ENDSTYLE
END
-RUN

-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</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.20/fc-3.3.0/fh-3.1.6/sl-1.3.1/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.20/fc-3.3.0/fh-3.1.6/sl-1.3.1/datatables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.20/dataRender/datetime.js"></script>
    <style>
        .alignRight {
            text-align: right;
        }
        table {
            border-collapse: collapse;
        }
        tfoot {
            font-weight:700;
        }
        .acrossValue{
            text-align: center;
        }
        .acrossValue:nth-child(even){
            background: #dee2e6;
        }
    </style>
</head>
<body>
    <div id="tableWrapper" style="width:1000px;margin:20px;">
        !IBI.FIL.TABLEDATA;
    </div>
    <script>
        let tbl = $('#tableWrapper>table');
        tbl.addClass('table table-sm table-striped nowrap').attr('id', 'myTable');
        tbl.prepend('<thead/>').append('<tfoot/>');
        tbl.find('.tblHead').closest('tr').prependTo(tbl.find('thead'));
        tbl.find('.tblFoot').closest('tr').prependTo(tbl.find('tfoot'));
        $('td.tblHead').each(function () {
            $td = $(this);
            $td.wrapInner('<th/>');
            $th = ($(this).find('th'));
            $th.addClass($(this).attr('class'));
            $cl = $(this).attr('align') === 'RIGHT' ? $th.addClass('alignRight') : '';
            $cs = $(this).attr('colspan') !== undefined ? $th.attr('colspan', $(this).attr('colspan') ) : '';
            $th.unwrap();
        });
        let myTable = $("#myTable").DataTable({
            fixedColumns: {
                leftColumns: 4,
            },
            select: true,
            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            pageLength: 50,
            scrollY: 400,
            scrollX: true,
        })
        $('table').removeAttr('border');
    </script>
</body>

</html>
-HTMLFORM END

This message has been edited. Last edited by: Hallway,

November 20, 2019, 08:59 PM

WFDevConsultant

Worked like charm. Thanks a lot.

November 20, 2019, 09:20 PM

Doug

A lot of scripting... But: NICE Solution...