Web Connection
Web Connection Templates + XFRX HTML reports
Gravatar is a globally recognized avatar based on your email address. Web Connection Templates + XFRX HTML reports
  Kathy
  All
  Jun 4, 2018 @ 08:53am

Hello,
I'm still new to Webconnect 6.0+ and the web templates.
Is it possible to show our XFRX HTML reports within the Web Connection Templates (e.g. within "MainView"!) to have the header, footer, menu, etc. around?
Thank you,
Kathy

Gravatar is a globally recognized avatar based on your email address. re: Web Connection Templates + XFRX HTML reports
  Carl Chambers
  Kathy
  Jun 4, 2018 @ 10:59am

Hi Kathy,
I have only used XFRX for PDF output but I suspect that if you are producing HTML from your FRX reports, you can save the HTML to a temporary file and then render the HTML partial into your template with something like...

<%= RenderPartial("../temp/myreport.htm") %>

...and delete the temporary file afterward.

See also DeleteFiles() in wwUtils.prg for deleting the temp file after a specified delay.

OR

FileToStr() the temp HTML file into a private memvar and put the private memvar in your template <%= pcHTML %>. With this method, you can delete the temp file before writing out the response.

Gravatar is a globally recognized avatar based on your email address. re: Web Connection Templates + XFRX HTML reports
  Rick Strahl
  Kathy
  Jun 4, 2018 @ 12:06pm

As Carl points out you can certainly generate the report to disk and then embed it into the page. There are a couple of thing you need to do this:

  • Strip off the HTML headers (just get the inside of <body>)
  • Make sure all the depedent resources are available

The latter can be tricky depending on how XFRX generates its HTML output and where it stores styles and any embedded resources like images etc. You'll have to make sure that the Web server can find any relative links which most likely means you'll have to fix up the HTML and rebase the links.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Web Connection Templates + XFRX HTML reports
  Kathy
  Carl Chambers
  Jun 5, 2018 @ 10:19am

Thanks to both of you. If this works that would be a great help for showing tons of reports without re-designing them.
I tried your suggestions but I'm not sure if I'm on the right track.

I have 3 files: test.html which is the xfrx report, layoutpage.wcs and repcontentpage.twc which refers to layoutpage.wcs as its layout and is supposed to do the RenderPartial(), something like this:

<% 	
	* VS Addin Comment: SourceFile="~\..\deploy\YOUR_PROCESS_CLASS.PRG"
	pcPageTitle = "HarRepContentPageTest" 	
%>
<% Layout="~/views/layoutpageharrep.wcs" %>
<div class="container">
    <div class="page-header-text">
        <i class="fa fa-list-alt"></i> 
        HarRepContentPageTest
    </div>

    <%= RenderPartial("~/test.html") %>
</div>            

test.html had all styles included plus some styles in the Header tag like this:

<head>
<meta name="generator"   content="XFRX">
<meta http-equiv="content-type" content="text/html; charset=windows-1252">

<title>TASKS_8649</title>
<base href="/KJDevDemo/HarRep/">

<style type="text/css">
<!--
a:active     { font-family: Tahoma; font-size: 8pt; text-decoration:none }
a:visited    { font-family: Tahoma; font-size: 8pt; text-decoration:none }
a:link       { font-family: Tahoma; font-size: 8pt; text-decoration:none }
-->
div {position:absolute;overflow:hidden;}
div.page {position:relative;overflow:visible;}
div.font1 {position:absolute;overflow:hidden;font-family:Tahoma;font-style:normal;font-size:12pt;font-weight:bold;text-decoration:none;text-align:left;}
div.font2 {position:absolute;overflow:hidden;font-family:Tahoma;font-style:normal;font-size:10pt;font-weight:bold;text-decoration:none;text-align:left;}
div.font3 {position:absolute;overflow:hidden;font-family:Courier New;font-style:normal;font-size:10pt;font-weight:normal;text-decoration:none;text-align:left;}
div.font4 {position:absolute;overflow:hidden;font-family:Tahoma;font-style:normal;font-size:8pt;font-weight:normal;text-decoration:none;text-align:left;}
div.font5 {position:absolute;overflow:hidden;font-family:Tahoma;font-style:normal;font-size:8pt;font-weight:bold;text-decoration:none;text-align:left;}
</style>
<style type="text/css" media="screen">
div {position:absolute;overflow:hidden;}
.basenotprint {position:absolute;overflow:hidden;border-width:1px;border-style:solid;border-color:RGB(192,192,192);background-color:RGB(192,192,192);}
</style>
<style type="text/css" media="print">
div {position:absolute;overflow:hidden;}
.basenotprint {position:absolute;visiblity:hidden;}
</style>
</head>

So I removed the above header and consolidated it with the header in the layoutpage.wcs in order to make a template for all similar reports.
Now, when I run the content page; repcontentpage.twc** all of the positions are messed up.
Not sure if I'm doing all wrong but is there any way to make everything relative to the template page?
I'd appreciate if you could correct/guide me.

Thank you in advance,
Kathy

Gravatar is a globally recognized avatar based on your email address. re: Web Connection Templates + XFRX HTML reports
  Carl Chambers
  Kathy
  Jun 5, 2018 @ 11:39am

Hi Kathy,

Again, I'm not familiar with how XFRX produces HTML reports but, if it is consistent with its styles, you can add the applicable CSS to your repcontentpage.twc template in a "css" section (or name it whatever you want).
In this example, hard coded CSS along with additional CSS built in the Process method and assigned to pcDemoCSS which can be handy for occasional overrides...

<% section="css" %>
    <style>
      .st-sort-ascent:before{
        content: '\25B2';
      }
      .st-sort-descent:before{
        content: '\25BC';
      }
      @media (min-width: 375px) {
        .epvpart .xofyen:before {
          content: "Part ";
        }
        .epvpart .keydata:before {
          content: "#";
        }
      }
    </style>
    <%= pcDemoCSS %>
<% endsection %>

In this example, referencing a CSS file...

<% section="css" %>
     <link href="css/xfrx.css" rel="stylesheet" />
<% endsection %>

Then add <%= RenderSection("css") %> in the <head> section of your layoutpage.wcs.

No matter how you do it, you should verify that the styles created by XFRX are consistent if you intend to centralize the styles. That, I assume, would be somewhat dependent upon your FRX layouts. If there is CSS variation between reports, you can make as many report templates as you need to handle the different variations while using only one layout page.

Gravatar is a globally recognized avatar based on your email address. re: Web Connection Templates + XFRX HTML reports
  Rick Strahl
  Kathy
  Jun 5, 2018 @ 03:56pm

In addition to what Carl said about using Sections, you can also create a custom layout page and reference that. Copy your existing layout page and make the appropriate changes so it pulls in the right resources directly. That way the functionality becomes reusable if you fire off different reports with different headers and so on.

The options are all there, but consolidating CSS between application specific styles and styles that XFRX might be producing can potentially cause conflicts - depending on how well XFRX isolates the CSS it generates. +++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Web Connection Templates + XFRX HTML reports
  Kathy
  Rick Strahl
  Jun 7, 2018 @ 07:44am

I'll try the ideas.
Thank you so very much for the great help.
Kathy

© 1996-2024