Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


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

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[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: 184 | Registered: December 27, 2013Report This Post
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, 2015Report 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: 184 | Registered: December 27, 2013Report 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: 1853 | Location: New York City | Registered: December 30, 2015Report This Post
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, 2015Report 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

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report 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: 184 | Registered: December 27, 2013Report 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

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Platinum Member
posted Hide Post
Worked like charm. Thanks a lot.


8.2.06
Windows, All Formats
 
Posts: 184 | Registered: December 27, 2013Report This Post
Expert
posted Hide Post
A lot of scripting... But: NICE Solution...
Nice Thread
 
Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 2005Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

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-2020 Information Builders