Designing an HTML Page for Report Display

In this section:

How to:

Use the Dialogue Manager command -HTMLFORM to design the HTML page on which a report displays. You can control page style and format, and imaginatively enhance a report. A custom HTML page can include HTML elements such as frames, tables, and graphic images. It must be a complete HTML page with all required HTML tags. It also contains a special HTML comment that indicates where to insert the WebFOCUS report output.

You can do one of the following:

You can display one or many reports on a page. A report can be dynamic or static.

The following image shows multiple reports displayed on a custom HTML page.

For more information on -HTMLFORM and its capabilities, see Enhancing an HTML Web Page With a Procedure.


Top of page

x
Procedure: How to Display a Dynamic Report on an Existing HTML Page
  1. Create the HTML page that will incorporate the report output. Use the following comment to indicate where the output will display
    !IBI.FIL.report;

    or

    <!--WEBFOCUS TABLE report--> 

    where:

    report

    Is the name of a virtual file that holds the report output. That file is generated in step 2.

    Note: The HTML comment line must be closed with a comment closing tag (-->) or a single angle bracket (>) and should not have any other HTML tags within it.

    The Reporting Server must be able to locate the page using APP PATH or EDAPATH. For details on search paths, see Storing and Searching for Application Files.

    When the page displays, the comment is replaced by report output.

  2. Create a procedure:
    1. Include the following command
      ON TABLE HOLD FORMAT HTMTABLE AS report

      where:

      report is the name of a virtual file that contains the report output. The name can be from 1 to 8 characters. Do not include an extension. This file is not saved to disk.

    2. At the end of the procedure, include the Dialogue Manager command
      -HTMLFORM filename

      where:

      filename is the name of the HTML page that will incorporate the report output. You create this page in step 1.

  3. Create a launch page from which a user can run the report. WebFOCUS incorporates the report output into the HTML page you designed, and returns a complete HTML file to the browser.


Example: Displaying a Dynamic Report on an Existing HTML Page

Note: For information on where to store the files created in this example, see Defining and Allocating WebFOCUS Files.

  1. Create an HTML page named RPTPG.HTM. The Reporting Server must be able to locate the page using APP PATH or EDAPATH. See WebFOCUS Application Logic for details on search paths.

    The letters on the left correspond to the notes explaining the code.

    HTML Page: RPTPG.HTM

        <HTML>
        <BODY BGCOLOR="#CCCCCC">
        <FONT FACE="Arial" COLOR="Black">
        <H2>Orders Summary</H2> 
    a.  !IBI.FIL.ORDERS;
        </BODY>
        </HTML>
    1. WebFOCUS reads the HTML comment and replaces it with the report output held in ORDERS (step 2).
  2. Create a procedure named ORDERS. The letters on the left correspond to the notes explaining the code.

    Procedure: ORDERS.FEX

       SET PAGE-NUM = OFF
       TABLE FILE GGORDER
       SUM QUANTITY AS 'Units Ordered'
       BY HIGHEST 1 ORDER_DATE AS 'Order Date'
       BY PRODUCT_DESCRIPTION 
    a. ON TABLE HOLD FORMAT HTMTABLE AS ORDERS
       END 
    b. -HTMLFORM RPTPG
    1. This command saves the report output to a virtual file in HTML format. The file is named ORDERS.
    2. This command sends the report output held in ORDERS to the HTML page named RPTPG.HTM (step 1).
  3. Create a launch page from which a user can run the report. The following simple launch page is named RUNRPT.HTM and it uses the Servlet.

    Launch Page: RUNRPT.HTM

    <HTML>
    <BODY>
    <A HREF="/ibi_apps/WFServlet?IBIF_ex=orders">Click here for the Orders 
    Summary report.</A>
    </BODY>
    </HTML>
  4. Run the launch page, and click the link. The dynamic report displays on the custom HTML page.


Top of page

x
Syntax: How to Display a Report on an Inline HTML Page
-HTMLFORM BEGIN 
html_code
html_code
html_code
.
.
.-HTMLFORM END

where:

html_code

Is a line of standard HTML code. It cannot exceed 80 characters.



Example: Displaying a Dynamic Report on an Inline HTML Page

Note: For information on where to store the files created in this example, see Defining and Allocating WebFOCUS Files.

  1. Create a procedure named ORDERS2. The letters on the left correspond to the notes explaining the code.

    Procedure: ORDERS2

        SET PAGE-NUM = OFF
        TABLE FILE GGORDER
        SUM QUANTITY AS 'Units Ordered'
        BY HIGHEST 1 ORDER_DATE AS 'Order Date'
        BY PRODUCT_DESCRIPTION 
    a. ON TABLE HOLD FORMAT HTMTABLE AS ORDERS2
        END 
    b. -HTMLFORM BEGIN
       <HTML><HEAD><STYLE>TD {FONT-FAMILY: ARIAL; COLOR:
        BLUE;}</STYLE></HEAD>
        <BODY BGCOLOR="FAEBD7"><DIV align="left"> 
    c. !IBI.FIL.ORDERS2;
        </DIV></BODY></HTML> 
    b. -HTMLFORM END
    1. This command saves the report output to a virtual file in HTML format. The file is named ORDERS2.
    2. These commands delimit the inline HTML page that defines style and format. The lines in-between the commands are standard HTML code. Each line is less than 80 characters.
    3. WebFOCUS reads this HTML comment and replaces it with the report output held in ORDERS2.
  2. Create a launch page from which a user can run the report. The following simple launch page is named RUNRPT.HTM and it uses the Servlet.

    Launch Page: RUNRPT.HTM

    <HTML>
    <BODY>
    <A HREF="/ibi_apps/WFServlet?IBIF_ex=orders2">Click here for the 
    Orders Summary report.</A>
    </BODY>
    </HTML>
  3. Run the launch page, and click the link. The dynamic report displays on the custom inline HTML page.



Example: Displaying Two Dynamic Reports on an Existing HTML Page

Note: For information on where to store the files created in this example, see Defining and Allocating WebFOCUS Files.

  1. Create an HTML page named FIRST.HTM. The Reporting Server must be able to locate the page using APP PATH or EDAPATH. See Storing and Searching for Application Files for details on search paths.

    The letters on the left correspond to the notes explaining the code.

    HTML Page: FIRST.HTM

        <HTML>
        <BODY BGCOLOR="#CCCCCC"> 
    a. <H2>Report for Product Code B***</H2> 
    b. <!--WEBFOCUS TABLE UPPER-->
        <HR SIZE=5> 
    a. <H2>Report for Product Code F***</H2> 
    b. <!--WEBFOCUS TABLE LOWER-->
        </BODY>
        </HTML>
    1. This text identifies the two reports on the HTML page.
    2. WebFOCUS reads these HTML comments. UPPER and LOWER are the names assigned to the virtual files in step 2. On the HTML page, WebFOCUS replaces the comments with the designated report output.

      Note: The HTML comment line must be closed with a comment closing tag (-->) or a single angle bracket (>) and should not have any other HTML tags within it.

  2. Create a procedure named TWOSALES. The letters on the left correspond to the notes explaining the code.

    Procedure: TWOSALES.FEX

       SET PAGE-NUM = OFF
       TABLE FILE GGORDER
       SUM QUANTITY BY PCD
       IF PCD EQ 'B$$$'  
    a. ON TABLE HOLD FORMAT HTMTABLE AS UPPER
       END
       TABLE FILE GGORDER 
       SUM QUANTITY BY PCD
       IF PCD EQ 'F$$$'  
    a. ON TABLE HOLD FORMAT HTMTABLE AS LOWER
       END 
    b. -RUN 
    c. -HTMLFORM FIRST
    1. These commands generate and save the report output from each request to virtual files in HTML format. The files are named UPPER and LOWER.
    2. This command runs the report requests.
    3. This command sends the report output to the HTML page named FIRST.HTM. You create this page in step 1.
  3. Create a launch page from which a user runs the reports. The following simple launch page is called MULTIRPT.HTM and it uses the Servlet.

    Launch Page: MULTIRPT.HTM

    <HTML>
    <BODY>
    <A HREF="/ibi_apps/WFServlet?IBIF_ex=twosales">Click here for sales 
    reports for two product codes.</A>
    </BODY>
    </HTML>
  4. Run the launch page, and click the link. The two dynamic reports display on the custom HTML page.



Example: Displaying Two Dynamic Reports on an Inline HTML Page

Note: For information on where to store the files created in this example, see Defining and Allocating WebFOCUS Files.

  1. Create a procedure named SALES2. The letters on the left correspond to the notes explaining the code.

    Procedure: SALES2.FEX

        SET PAGE-NUM = OFF
        TABLE FILE GGORDER
        SUM QUANTITY BY PCD
        IF PCD EQ 'B$$$'  
    a.  ON TABLE HOLD FORMAT HTMTABLE AS UPPER
        END
        TABLE FILE GGORDER 
        SUM QUANTITY BY PCD
        IF PCD EQ 'F$$$'  
    a.  ON TABLE HOLD FORMAT HTMTABLE AS LOWER
        END 
    b. -RUN 
    c. -HTMLFORM BEGIN
       <HTML><HEAD><STYLE>TD {FONT-FAMILY: ARIAL; COLOR:
        BLUE;}</STYLE></HEAD>
       <BODY BGCOLOR="FAEBD7"><DIV align="left">
       <H2>Report for Product Code B***</H2> 
    d. <!--WEBFOCUS TABLE UPPER-->
       <HR SIZE=5>
       <H2>Report for Product Code F***</H2> 
    d. <!--WEBFOCUS TABLE LOWER-->
       </DIV></BODY></HTML> 
    c. -HTMLFORM END
    1. These commands generate and save the report output from each request to virtual files in HTML format. The files are named UPPER and LOWER.
    2. This command runs the report requests.
    3. These commands delimit the inline HTML page that defines style and format. The lines in-between the commands are standard HTML code. Each line is less than 80 characters.
    4. WebFOCUS reads these HTML comments. UPPER and LOWER are the names assigned to the virtual files. On the HTML page, WebFOCUS replaces the comments with the designated report output.

      Note: The HTML comment line must be closed with a comment closing tag (-->) or a single angle bracket (>) and should not have any other HTML tags within it.

  2. Create a launch page from which a user can run the reports. The following simple launch page is called MULTIRPT.HTM and it uses the Servlet.

    Launch Page: MULTIRPT.HTM

    <HTML>
    <BODY>
    <A HREF="/ibi_apps/WFServlet?IBIF_ex=sales2">Click here for sales 
    reports for two product codes.</A>
    </BODY>
    </HTML>
  3. Run the launch page, and click the link. The two dynamic reports display on the custom inline HTML page.


Top of page

x
Procedure: How to Display a Static Report on an Existing HTML Page

To create a procedure:

  1. Allocate the HTML file that will combine the report output and the custom HTML page.

    For example, on Windows, the command is

    FILEDEF htmlpage DISK app\htmlpage.HTM

    where:

    htmlpage

    Is the name of the combined report output and custom HTML page file. The file name can be from 1 to 8 characters.

    app\

    Is the application directory in which to save the file.

    For other platform-specific commands, see Defining and Allocating WebFOCUS Files.

  2. Include the following command
    ON TABLE HOLD FORMAT HTMTABLE AS report

    where:

    report

    Is the name of a virtual file that contains the report output. The name can be from 1 to 8 characters. Do not include an extension. This file is not saved to disk.

  3. At the end of the procedure, include the Dialogue Manager command
    -HTMLFORM filename SAVE AS htmlpage

    where:

    filename

    Is the name of the custom HTML page that will incorporate the report output. You create this page in step 2. The Reporting Server must be able to locate the page using APP PATH or EDAPATH. See Storing and Searching for Application Files for details on search paths.

    htmlpage

    Is the name of the HTML file that will combine the report output and the custom HTML page. The Web server must be able to locate this file.

  4. Create the custom HTML page. Add the following comment to indicate where the output will display
    !IBI.FIL.report;

    or

    <!--WEBFOCUS TABLE report-->

    where:

    report

    Is the name of the virtual file that holds the report output. That file was created in step 1.

    Note: The HTML comment line must be closed with a comment closing tag (-->) or a single angle bracket (>) and should not have any other HTML tags within it.

    The Reporting Server must be able to locate the page using APP PATH or EDAPATH. See Storing and Searching for Application Files for details on search paths.

    On the HTML page, WebFOCUS replaces the comment with the report output.

  5. Run the procedure from step 1 to create the static report on the custom HTML page.
  6. Create a launch page with a hyperlink that links to the report.


Example: Displaying Static Reports on an Existing HTML Page

This example runs on WebFOCUS for Windows. If you are using another platform, substitute the appropriate platform-specific command for the FILEDEF command. For more information, see Defining and Allocating WebFOCUS Files.

Note: For information on where to store the files created in this example, see Defining and Allocating WebFOCUS Files.



Example: Displaying One Static Report on an Existing HTML Web Page
  1. Create a procedure named CONTACTS. The letters on the left correspond to the notes explaining the code.

    Procedure: CONTACTS.FEX

    a. FILEDEF WEBPAGE DISK
           APPDIR\WEBPAGE.HTM
       SET PAGE-NUM = OFF
       TABLE FILE GGSTORES
       PRINT STORE_NAME ADDRESS1
       BY CITY 
    b. ON TABLE HOLD FORMAT HTMTABLE AS AREPORT
       END 
    c. -HTMLFORM DATAOUT SAVE AS WEBPAGE
    1. This command allocates the file WEBPAGE.HTM and saves it to a directory accessible to the Web server. It will combine the report output and the custom HTML page.
    2. This command saves the report output to a virtual file in HTML format. The file is named AREPORT. It is not saved on disk.
    3. This command merges the report output with the custom HTML page named DATAOUT, which you create in step 2. It also specifies a second HTML file, WEBPAGE, in which the combined HTML from the report output and the custom page are saved.
  2. Create a custom HTML page named DATAOUT.HTM. The Reporting Server must be able to locate the page using APP PATH or EDAPATH. For details on search paths, see Storing and Searching for Application Files.

    HTML Page: DATAOUT.HTM

        <HTML>
        <BODY BGCOLOR="#CCCCCC"> 
    a.  <H2>Store Contacts</H2> 
    b.  <!--WEBFOCUS TABLE AREPORT-->
        </BODY>
        </HTML>
    1. This text identifies the report.
    2. WebFOCUS reads the HTML comment and replaces it with the report output held in AREPORT.

      Note: The HTML comment line must be closed with a comment closing tag (-->) or a single angle bracket (>) and should not have any other HTML tags within it.

  3. Run the procedure CONTACTS to create the static report on the custom HTML page. One way to do this is to call the WebFOCUS Client:
    <HTML>
    <BODY>
    <A HREF="/ibi_apps/WFServlet?IBIF_ex=contacts">Click here
    to run CONTACTS and create a static report.</A>
    </BODY>
    </HTML>

    The message Done in your browser indicates that file was created.

  4. Create a launch page from which a user can run the report. This simple launch page is named ONESTAT.HTM:

    Launch Page: ONESTAT.HTM

    <HTML>
    <BODY>
    <A HREF="WEBPAGE.HTM">Click here to view store contacts.</A>
    </BODY>
    </HTML>
  5. Run the launch page, and click the link. The static report displays on the custom HTML page.



Example: Displaying Two Static Reports on an Existing HTML Web Page
  1. Create a procedure named DEMOG. The letters on the left correspond to the notes explaining the code.

    Procedure: DEMOG.FEX

     
    a. FILEDEF RPTPAGE DISK
          APPDIR\RPTPAGE.HTM
       SET PAGE-NUM = OFF
       TABLE FILE GGDEMOG
       SUM HH AS 'Number of,Households' AVGHHSZ98 AS 'Avg.,Size'
       MEDHHI98 AS 'Avg.,Income'
       BY ST
       WHERE ST EQ 'CA' 
    b. ON TABLE HOLD FORMAT HTMTABLE AS UPPER
       END
       TABLE FILE GGDEMOG
       SUM HH AS 'Number of,Households' AVGHHSZ98 AS 'Avg.,Size'
       MEDHHI98 AS 'Avg.,Income'
       BY ST
       WHERE ST EQ 'NY' 
    c. ON TABLE HOLD FORMAT HTMTABLE AS LOWER
       END
       -RUN 
    d. -HTMLFORM RPTOUT SAVE AS RPTPAGE
    1. This command allocates the file RPTPAGE.HTM and saves it to a directory accessible to the Web server. It will combine the report output and the custom HTML page.
    2. This command saves the output from the first request to a virtual file named UPPER.
    3. This command saves the output from the second request to a virtual file named LOWER.
    4. This command merges the report output with the custom HTML page named RPTOUT, which you create in step 2. It also specifies a second HTML file, RPTPAGE, in which the combined HTML from the report output and the custom page are saved.
  2. Create a custom HTML page named RPTOUT.HTM. The Reporting Server must be able to locate the page using APP PATH or EDAPATH. For details on search paths, see Storing and Searching for Application Files.

    HTML Page: RPTOUT.HTM

        <HTML>
        <BODY BGCOLOR="#CCCCCC"> 
    a.  <H3>Demographic Report for California</H3> 
    b.  <!--WEBFOCUS TABLE UPPER-->
        <HR SIZE=5> 
    a.  <H3>Demographic Report for New York</H3> 
    b.  <!--WEBFOCUS TABLE LOWER-->
        </BODY>
        </HTML>
    1. This text identifies the two reports.
    2. WebFOCUS reads these HTML comments and replaces UPPER and LOWER with the report output.

      Note: The HTML comment line must be closed with a comment closing tag (-->) or a single angle bracket (>) and should not have any other HTML tags within it.

  3. Run the procedure DEMOG to create the static reports on the custom HTML page. One way to do this is to call the WebFOCUS Client:
    <HTML>
    <BODY>
    <A HREF="/ibi_apps/WFServlet?IBIF_ex=demog">Click here
    to run DEMOG and create two static reports.</A>
    </BODY>
    </HTML>
  4. Create a launch page from which a user can run the reports. This simple launch page is called TWOSTATS.HTM:

    Launch Page: TWOSTATS.HTM

    <HTML>
    <BODY>
    <A HREF="RPTPAGE.HTM">Click here to view the demographic reports.</A>
    </BODY>
    </HTML>
  5. Run the launch page, and click the link. The static reports display on the custom HTML page:


Top of page

x
Using HOLD FORMAT XML and -HTMLFORM

Running a report which creates a HOLD FORMAT XML that is called by -HTMLFORM requires additional code to avoid generating an empty HOLD file and an error condition. Add two lines of FILEDEF code, shown in boldface type in the following example:

TABLE FILE GGORDER
SUM QUANTITY
ON TABLE HOLD FORMAT XML
END
-RUN 
FILEDEF HOLD CLEAR
FILEDEF HOLD DISK HOLD.XML   
-HTMLFORM BEGIN
!IBI.FILE.HOLD;
-HTMLFORM END

Top of page

x
Using HOLD FORMAT AHTMLTAB and -HTMLFORM

You can display one or many HTML active reports on a custom HTML page using HOLD FORMAT AHTMLTAB and the Dialogue Manager command –HTMLFORM, and then running a report.

Include the following command in the procedure:

ON TABLE HOLD FORMAT AHTMLTAB AS report

where:

report

Is the name of a virtual file that contains the report output. The name can be from 1 to 8 characters.

Running this report creates an output file that contains only data and parameters used in the HTML active report. In order to display the output as a complete HTML active report, active report JavaScript code must be included in the HTML BODY by using the following syntax:

<BODY>
!IBI.OBJ.ACTIVEREPORTJS;


Example: Displaying HTML Active Technologies Reports on an HTML Web Page

The HTML code to include active report JavaScript is shown in boldface type in the following example:

TABLE FILE GGSALES
SUM
  DOLLARS
  UNITS
BY REGION
BY ST
BY CITY
HEADING
"Regional Sales Summary"
ON TABLE HOLD AS REPORT1 FORMAT AHTMLTAB
END
-*
TABLE FILE GGSALES
SUM
  DOLLARS
  UNITS
BY CATEGORY
BY PRODUCT
HEADING
"Production Order Summary"
ON TABLE HOLD AS REPORT2 FORMAT AHTMLTAB
END
-*
-HTMLFORM BEGIN
<HTML>
<HEAD>
<TITLE>Displaying HTML Active Technologies Reports on an HTML Web Page</TITLE>
</HEAD>
<BODY> 
!IBI.OBJ.ACTIVEREPORTJS;
<TABLE BORDER='1'>
 <TR>
  <TD valign=top>
!IBI.FIL.REPORT1;
  </TD>
  <TD valign=top>
!IBI.FIL.REPORT2;
  </TD>
 </TR>
</TABLE>
</BODY>
</HTML>
-HTMLFORM END

WebFOCUS