[SOLVED]Freeze columns and headings in HTML format

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,

8.2.06
Windows, All Formats

Posts: 184 | Registered: December 27, 2013

BabakNYC

Virtuoso

posted

Hide Post

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

WebFOCUS 8206, Unix, Windows

Posts: 1853 | Location: New York City | Registered: December 30, 2015

Ignored post by BabakNYC posted

Show Post

WFDevConsultant

Platinum Member

posted

Hide Post

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.

8.2.06
Windows, All Formats

Posts: 184 | Registered: December 27, 2013

Ignored post by WFDevConsultant posted

Show Post

BabakNYC

Virtuoso

posted

Hide Post

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

WebFOCUS 8206, Unix, Windows

Posts: 1853 | Location: New York City | Registered: December 30, 2015

Ignored post by BabakNYC posted

Show Post

Hallway

Master

posted

Hide Post

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

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

Hallway

Master

posted

Hide Post

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

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

WFDevConsultant

Platinum Member

posted

Hide Post

Thanks Hallway.

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

8.2.06
Windows, All Formats

Posts: 184 | Registered: December 27, 2013

Ignored post by WFDevConsultant posted

Show Post

Hallway

Master

posted

Hide Post

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,