Focal Point
[SOLVED] Add HTML button in fex

This topic can be found at:
http://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/5677015196

August 22, 2019, 12:11 PM
Shingles
[SOLVED] Add HTML button in fex
Hi Folks,

I'm sure this isn't new but I've searched the forums with no success.

I'm trying to add some links (or buttons) to an AHTML report. One of the buttons would be called "Open in Excel" and as you might expect it will display the current HTML page (a fex TABLE report) in Excel. The way I would like to do this is to call the same URL with "&REPORT_FORMAT=EXL2K" appended to the end. This ensures the right parameters are sent and of course the fex will use &REPORT_FORMAT to use the Excel output format.

I've got some javascript that should do this, but I'm having trouble using it.

I think I should be able to use -HTMLFORM BEGIN to do what I want, but I'm not getting the desired results. For example (the js function is NOT complete, but im sure you get it)...

-DEFAULTH &REPORT_FORMAT ='FORMAT AHTML';
TABLE CAR
...
ON TABLE PCHOLD &REPORT_FORMAT
...
END
-HTMLFORM BEGIN
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.URL;
  document.getElementById("demo").innerHTML = x;
}
</script>
-HTMLFORM END


The contents between HTMLFORM are being displayed for a split second before the TABLE is displayed, then the TABLE is displayed and the button is gone.

I would like the button to be displayed with the TABLE.

This message has been edited. Last edited by: FP Mod Chuck,


WebFOCUS 8201, SP 0.1, Windows 7, HTML
August 22, 2019, 01:33 PM
MartinY
And what about this

-DEFAULTH &WFFMT ='AHTML';
TABLE FILE CAR
PRINT MODEL
BY CAR
ON TABLE PCHOLD FORMAT &WFMT

HEADING
"To Excel"

ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
     INCLUDE = IBFS:/EDA/EDASERVE/_EDAHOME/ETC/endeflt.sty,
$
TYPE=HEADING,
     LINE=1,
     OBJECT=TEXT,
     JUSTIFY=LEFT,
     ITEM=1,
     FOCEXEC=IBFS:/WFC/Repository/fld/FexToCall.fex      ( \
       WFFMT='XLSX'),
     TARGET='_blank',
$
ENDSTYLE
END
-RUN



WF versions : Prod 8.2.04M gen 33, Dev 8.2.04M gen 33, OS : Windows, DB : MSSQL, Outputs : HTML, Excel, PDF
In Focus since 2007
August 22, 2019, 02:04 PM
Shingles
Thank you for the reply.

I see what that does. I could use it but I was hoping to use a variation of my solution. The fex in question uses many parameters. If I could use the current URL, I won't have to worry about sending all the parameters again, know what I mean (they are already in the URL).

My issue (I think) is with HTMLFORM. I've used it before but for some reason I'm getting unexpected results. I thought HTMLFORM BEGIN puts HTML markup into the report output.


WebFOCUS 8201, SP 0.1, Windows 7, HTML
August 23, 2019, 05:32 AM
Tony A
quote:
FORMAT AHTML

quote:
I thought HTMLFORM BEGIN puts HTML markup into the report output.

It can, but when you use AHTML format the internal JavaScript for Active Reports takes over and rewrites the content - well, something like that but suffice to say that you will lose your carefully(?!) crafted code.

I would suggest following what Martin(i?) has posted, the only suitable alternative that I can think of would be to embed the control within the footing of the report - the heading gets overwritten I think.

For an example you could code the following but you would still have to supply all the variables in the URL that you need to call.

-DEFAULTH &WFFMT ='AHTML';
DEFINE FILE CAR
  MYFOOTING/A200 WITH COUNTRY = IF &WFFMT.QUOTEDSTRING EQ 'XLSX' THEN ''
                 ELSE '<button onclick="document.location=''&FOCEXURL.IBIF_ex=&FOCFEXNAME&|WFFMT=XLSX'';">Try it</button>';
END
TABLE FILE CAR
SUM RCOST DCOST BY COUNTRY BY CAR BY MODEL
FOOTING
"<MYFOOTING"
ON TABLE PCHOLD FORMAT &WFFMT
ON TABLE SET PAGE NOLEAD
ON TABLE SET STYLE *
grid=off, $
ENDSTYLE
END


T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
August 23, 2019, 09:21 AM
Shingles
Ya... I gave up on my copying the URL approach.

I think I already mentioned this, but I was reluctant to go with Martin's solution because of all the parameters I would have to send. Its just a pain to locate them all and I would be concerned with getting all of them... so I created a autohotkey script that did it for me.

Could be useful to someone else so I'll post it below. It uses input.txt and output.txt files that exist in the same directory. You would have to copy your fex into input.txt, run the ahk (or exe if you compile) and the results will be in the output.txt file (with some focus code that can be used in a focexec).

 
#NoEnv  ; Recommended for performance and compatibility with future AutoHotkey releases.
; #Warn  ; Enable warnings to assist with detecting common errors.
SendMode Input  ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir%  ; Ensures a consistent starting directory.



;Extract all the variable names
;----------------------------------------------------------
F21=%A_ScriptDir%\input.txt         ;- combine all txt files here
F31=%A_ScriptDir%\output.txt   ;- result

ifexist,%f31%
    Filedelete,%F31%

FileRead, allx, %f21%

;Reg expression is anything that starts with a space, new line, =, ', ", <, or ( followed by & then at least one character
while pos := RegExMatch(allx, "(\s|\n|\(|=|'|""|<)&\w{1,}" , m, A_Index=1?1:pos+StrLen(m))
	res .= m "`n"
FileAppend, %res%, %f31%



;Remove any variables that have a ( or a space in front
;----------------------------------------------------------
Output2 = 

loop, read, %f31%
{
	If InStr(A_LoopReadLine, "(&") > 0
        Output2 .= SubStr(A_LoopReadLine, 2) . "`n"
    Else if InStr(A_LoopReadLine, " ") > 0   
        Output2 .= SubStr(A_LoopReadLine, 2) . "`n"
    Else if InStr(A_LoopReadLine, "=&") > 0   
        Output2 .= SubStr(A_LoopReadLine, 2) . "`n"            
    Else if InStr(A_LoopReadLine, "'&") > 0   
        Output2 .= SubStr(A_LoopReadLine, 2) . "`n"   
    Else if InStr(A_LoopReadLine, """&") > 0   
        Output2 .= SubStr(A_LoopReadLine, 2) . "`n"    
    Else if InStr(A_LoopReadLine, "<&") > 0   
        Output2 .= SubStr(A_LoopReadLine, 2) . "`n"                          
    Else    
        Output2 .= A_LoopReadLine . "`n"
}

FileDelete, %f31%
FileAppend, %Output2%, %f31%



;Remove duplicate variable names
;----------------------------------------------------------
Output = 

loop, read, %f31%
{
	If Output not contains %A_LoopReadLine%`n
		Output .= A_LoopReadLine . "`n"
}

FileDelete, %f31%
FileAppend, %Output%, %f31%



;Wrap the variables with other text, like WebFOCUS code
;----------------------------------------------------------
Output3 = 

loop, read, %f31%
{
	Output3 .= SubStr(A_LoopReadLine, 2) . "=" . A_LoopReadLine . " \" . "`n"
}

FileDelete, %f31%
FileAppend, %Output3%, %f31%



;Send the results to the screen
;----------------------------------------------------------
; run,%f21%
run,%f31%
exitapp
 



WebFOCUS 8201, SP 0.1, Windows 7, HTML
August 23, 2019, 02:25 PM
Shingles
Ok, so here's a question about formatting the HEADING.

I've got the following code:

TABLE ...
...
HEADING
"This is the title" "To Excel"
...
END

Is is possible to get the "To Excel" text to appear on the far right, while "This is the title" show up on the far left (of course I would also like to use different formatting for the text).

Thank you,


WebFOCUS 8201, SP 0.1, Windows 7, HTML
August 23, 2019, 02:54 PM
MartinY
TABLE FILE CAR
SUM RETAIL_COST
BY CAR
BY MODEL
WHERE COUNTRY EQ 'ENGLAND';

HEADING
"<COUNTRY<+0>To Excel"

ON TABLE PCHOLD FORMAT HTML
ON TABLE SET BYDISPLAY ON
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET HTMLEMBEDIMG ON
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
     INCLUDE = IBFS:/EDA/EDASERVE/_EDAHOME/ETC/endeflt.sty,
$
     UNITS=IN,
     LEFTMARGIN=0.000,
     RIGHTMARGIN=0.5000,
     TOPMARGIN=0.000,
     BOTTOMMARGIN=0.000,
     SQUEEZE=ON,
     PAGECOLOR='WHITE',
     PAGESIZE='Letter',
     ORIENTATION=PORTRAIT,
$
TYPE=REPORT, BORDER=OFF, SIZE=10,
$
TYPE=HEADING, LINE=1, OBJECT=FIELD, ITEM=1, WIDTH=4.0, STYLE=NORMAL, SIZE=7,  JUSTIFY=LEFT,
$
TYPE=HEADING, LINE=1, OBJECT=TEXT,  ITEM=1, WIDTH=4.0, STYLE=BOLD,   SIZE=14, JUSTIFY=RIGHT, COLOR=GREEN,
$
ENDSTYLE
END
-RUN



WF versions : Prod 8.2.04M gen 33, Dev 8.2.04M gen 33, OS : Windows, DB : MSSQL, Outputs : HTML, Excel, PDF
In Focus since 2007
August 24, 2019, 05:04 PM
Tony A
Martin,

The important point is the format - AHTML

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
August 26, 2019, 09:20 PM
Hallway
Does the report need to be in AHTML? Have you ever used the datatables.net js library? It is a lot smoother and you can add buttons to export the data to Excel.

Here is a quick basic initialization that adds Copy, CSV, Excel, PDF and Print export buttons:
  
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

TABLE FILE CAR
SUM RETAIL_COST/D12M
    DEALER_COST/D12M
    SALES/D12M
BY COUNTRY
BY CAR
BY MODEL
ON TABLE HOLD AS CARHOLD FORMAT HTMTABLE
ON TABLE SET STYLE *
TYPE=REPORT, LINES-PER-PAGE=UNLIMITED, $
TYPE=TITLE, CLASS='tblHead', $
TYPE=DATA, CLASS='tblData', $
ENDSTYLE

END

-HTMLFORM BEGIN NOEVAL
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/datatables.min.js"></script>
</head>
<body>
    <div id="tableWrapper">
        !IBI.FIL.CARHOLD;
    </div>
    <script>
        var $table = $(`#tableWrapper > table`).attr(`id`, `table1`).addClass(`hover stripe`);
        //Create a <thead> element and move any titles to the header. 
        $table
            .prepend(`<thead/>`)
            .find(`.tblHead`).closest(`tr`).prependTo($table.find(`thead`));

        //Change <td> elements in <thead> to <th> and give the new th all the td attributes
        $(`td.tblHead`).each(function () {
            $td = $(this);
            $td.wrapInner(`<th/>`);
            $th = $td.find(`th`);
            $th.addClass($td.attr(`class`));
            $cl = $td.attr(`align`) === `RIGHT` ? $th.css(`text-align`,`right`) : ``;
            $th.unwrap();
        });

        $('#table1').DataTable( {
            dom: 'Blfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        } );

    </script>
</body
-HTMLFORM END


There are a TON of different ways to customize datatables. Note the instant search feature and the ability to sort on a column on a click. You can even add in custom buttons that run a JS function when clicked. We have a button set up that switches between a light and dark theme.

Any who...for what its worth.

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


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
August 27, 2019, 11:19 AM
Shingles
quote:
Originally posted by Tony A:
Martin,

The important point is the format - AHTML

T


Yes... understood.


WebFOCUS 8201, SP 0.1, Windows 7, HTML
August 27, 2019, 01:27 PM
Shingles
quote:
Originally posted by Hallway:
Does the report need to be in AHTML? Have you ever used the datatables.net js library? It is a lot smoother and you can add buttons to export the data to Excel.

Here is a quick basic initialization that adds Copy, CSV, Excel, PDF and Print export buttons:
  
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

TABLE FILE CAR
SUM RETAIL_COST/D12M
    DEALER_COST/D12M
    SALES/D12M
BY COUNTRY
BY CAR
BY MODEL
ON TABLE HOLD AS CARHOLD FORMAT HTMTABLE
ON TABLE SET STYLE *
TYPE=REPORT, LINES-PER-PAGE=UNLIMITED, $
TYPE=TITLE, CLASS='tblHead', $
TYPE=DATA, CLASS='tblData', $
ENDSTYLE

END

-HTMLFORM BEGIN NOEVAL
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/datatables.min.js"></script>
</head>
<body>
    <div id="tableWrapper">
        !IBI.FIL.CARHOLD;
    </div>
    <script>
        var $table = $(`#tableWrapper > table`).attr(`id`, `table1`).addClass(`hover stripe`);
        //Create a <thead> element and move any titles to the header. 
        $table
            .prepend(`<thead/>`)
            .find(`.tblHead`).closest(`tr`).prependTo($table.find(`thead`));

        //Change <td> elements in <thead> to <th> and give the new th all the td attributes
        $(`td.tblHead`).each(function () {
            $td = $(this);
            $td.wrapInner(`<th/>`);
            $th = $td.find(`th`);
            $th.addClass($td.attr(`class`));
            $cl = $td.attr(`align`) === `RIGHT` ? $th.css(`text-align`,`right`) : ``;
            $th.unwrap();
        });

        $('#table1').DataTable( {
            dom: 'Blfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        } );

    </script>
</body
-HTMLFORM END


There are a TON of different ways to customize datatables. Note the instant search feature and the ability to sort on a column on a click. You can even add in custom buttons that run a JS function when clicked. We have a button set up that switches between a light and dark theme.

Any who...for what its worth.


Thanks the for reply Hallway...

Yes I've used datatables (a bit) before. I've created two or three reports using it. But that was in another life; in a different job that had nothing to do with webfocus. I hear what you're saying about the searching functionality, I remember that being powerful.

I tried your code but I'm not having success. I just see a default webfocus table. Do I need to add DataTables as an extension to webFocus? I would really like to explore using this.

As an aside, I've been at WebFOCUS for about two years now, but I keep seeing different ways to do stuff. And with each new avenue there are stumbling blocks. What is your experience with DataTables? Any major issues with it? What do you lose by going with DataTabels?

Thank you very much...

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


WebFOCUS 8201, SP 0.1, Windows 7, HTML
August 27, 2019, 02:00 PM
Hallway
quote:
I tried your code but I'm not having success. I just see a default webfocus table. Do I need to add DataTables as an extension to webFocus? I would really like to explore using this.


No extension is needed. You just need to make sure that the css and js files get loaded from the script and link tags.

What browser are you using? If it is IE, then you will have to change all of the back ticks in the javascript to single quotes (since IE is deprecated and does not have the ES2018 spec that allows you to use template literals).


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
August 27, 2019, 02:06 PM
Hallway
quote:
What is your experience with DataTables? Any major issues with it? What do you lose by going with DataTabels?


Most of our dashboards use it. And the dashboards that aren't, as we update them, we are converting the reports to the datatables format. We have gotten out tables pretty customized and have created our own JavaScript libraries for the customization. We have felt like we have lost nothing by using it, and gained a ton. So far no major issues at all. As I recall, it can get tricky when putting it into a portal with the IBI inception of divs that are created.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
August 27, 2019, 02:09 PM
Shingles
That was it... thank you very much.

Is there anything you can't do with this approach? How would you create a drill from this list to another fex file?


WebFOCUS 8201, SP 0.1, Windows 7, HTML
August 27, 2019, 02:23 PM
Hallway
quote:
How would you create a drill from this list to another fex file?

You can build normally it with WebFOCUS syntax in the STYLE section, or build out an anchor tag using a COMPUTE or DEFINE. Because you are holding as an HTMTABLE, the links are built into the hold.

  
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

TABLE FILE CAR
SUM RETAIL_COST/D12M
    DEALER_COST/D12M
    SALES/D12M
BY COUNTRY
BY CAR
BY MODEL
ON TABLE HOLD AS CARHOLD FORMAT HTMTABLE
ON TABLE SET STYLE *
TYPE=REPORT, LINES-PER-PAGE=UNLIMITED, $
TYPE=TITLE, CLASS='tblHead', $
TYPE=DATA, CLASS='tblData', $
TYPE=DATA, COLUMN=CAR, TARGET='_blank', URL=https://www.google.com/search?(q=CAR.COMP.CAR), CLASS='tblData', $
ENDSTYLE

END

-HTMLFORM BEGIN NOEVAL
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/datatables.min.js"></script>
</head>
<body>
    <div id="tableWrapper">
        !IBI.FIL.CARHOLD;
    </div>
    <script>
        var $table = $('#tableWrapper > table').attr('id', 'table1').addClass('hover stripe');
        //Create a <thead> element and move any titles to the header. 
        $table
            .prepend('<thead/>')
            .find('.tblHead').closest('tr').prependTo($table.find('thead'));

        //Change <td> elements in <thead> to <th> and give the new th all the td attributes
        $('td.tblHead').each(function () {
            $td = $(this);
            $td.wrapInner('<th/>');
            $th = $td.find('th');
            $th.addClass($td.attr('class'));
            $cl = $td.attr('align') === 'RIGHT' ? $th.css('text-align','right') : '';
            $th.unwrap();
        });

        $('#table1').DataTable( {
            dom: 'Blfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        } );

    </script>
</body>
-HTMLFORM END


The multi-drill gets tricky and pretty involved. But we have been able to get it to work as well.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
August 27, 2019, 02:28 PM
Hallway
quote:
Is there anything you can't do with this approach?


The one limitation that we have found is that on large data sets, that it will give (if I remember corrrectly) a jQuery overflow error. We have corrected this by changing the output to FORMAT JSON. Building the datatables from JSON is quite more involved, but it can be done.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
August 27, 2019, 02:35 PM
Shingles
This is great... and if I were drilling to another fex file I would replace the "URL=https..." bit to "FOCEXEC=IBFS:/WFC/Repos...something.fex(param1=...)" right?


WebFOCUS 8201, SP 0.1, Windows 7, HTML
August 27, 2019, 03:08 PM
Hallway
quote:
Originally posted by Shingles:
This is great... and if I were drilling to another fex file I would replace the "URL=https..." bit to "FOCEXEC=IBFS:/WFC/Repos...something.fex(param1=...)" right?


Correct


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs: