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     [SOLVED]Freeze columns and headings in HTML format
Go
New
Search
Notify
Tools
Reply
  
[SOLVED]Freeze columns and headings in HTML format
 Login/Join
 
Platinum Member
posted
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: 165 | Registered: December 27, 2013Reply With QuoteReport This Post
Virtuoso
posted Hide Post
In InfoAssist, there's a Freeze button in the Format Tab.


WebFOCUS 8206, Unix, Windows
 
Posts: 1720 | Location: New York City | Registered: December 30, 2015Reply With QuoteReport This Post
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: 165 | Registered: December 27, 2013Reply With QuoteReport This Post
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: 1720 | Location: New York City | Registered: December 30, 2015Reply With QuoteReport This Post
Master
posted Hide Post
You can look into incorporating the datatables.net JavaScript library that has both of those features


Hallway
WF(Prod):8202M
WF(Test):8202M
OS/Platform:Win 10
Outputs:All
 
Posts: 497 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Reply With QuoteReport This Post
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
WF(Prod):8202M
WF(Test):8202M
OS/Platform:Win 10
Outputs:All
 
Posts: 497 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Reply With QuoteReport This Post
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: 165 | Registered: December 27, 2013Reply With QuoteReport This Post
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,


Hallway
WF(Prod):8202M
WF(Test):8202M
OS/Platform:Win 10
Outputs:All
 
Posts: 497 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Reply With QuoteReport This Post
Platinum Member
posted Hide Post
Worked like charm. Thanks a lot.


8.2.06
Windows, All Formats
 
Posts: 165 | Registered: December 27, 2013Reply With QuoteReport This Post
Expert
posted Hide Post
A lot of scripting... But: NICE Solution...
Nice Thread
 
Posts: 3045 | Location: Middle Tennessee [8204M Gen48 in Test&Prod] | Registered: February 23, 2005Reply With QuoteReport This Post
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED]Freeze columns and headings in HTML format

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