Report Formatting

From FiFormsWiki

Jump to: navigation, search

Each dataset must be formatted separately, and nested datasets can be formatted in nested layouts. There are three layout styles: tabular, columnar, and positioned. Tabular layout is the default, and prints data in rows and columns. Columnar layout is useful for datasets with many columns, and lays out data in two columns containing the field caption and value.

(Note: None of this is implemented in FiForms version 1.1. As of version 1.2, many formatting options are experimental, and columnar layout does not work properly.)


Simple Example

The following report is similar to our original books report, but with a fixed price ($19.00) for each book, and formatting options included:

<reportdef xmlns="" version="1.2">
 <title>List Books by Category</title>
 <summary>A Demonstration of the Capabilities of FiForms</summary>
 <copyright>Copyright (C) 2008-2009 by FiForms Solutions</copyright>
 <connect db="fiforms_sample" type="MySQL" server="localhost" />
 <param name="title_filter" value="%" caption="Filter Titles" />
 <query resultname="Books">

     FROM books 
     WHERE BOOK_TITLE LIKE "%title_filter%"

 <format dataset="Books" layout="tabular">
   <field caption="Title" summary="count">BOOK_TITLE</field>
   <field caption="ISBN #">BOOK_ISBN</field>
   <field caption="Copyright Date">BOOK_COPYRIGHT</field>
   <field caption="Price Each" format="number" 
          formatopts="$#,##0.00" summary="sum">BOOK_PRICE</field>

CSS Stylesheets

Simple HTML-style CSS can be applied to report elements either by embedding CSS in the elements using the style attribute, or by linking to a CSS stylesheet. Linked stylesheet appear to the user as additional output options in the parameter selection screen for the report. You can link to a CSS stylesheet using the stylesheet element, similar to the following examples:

For HTML output:

  <stylesheet href="my_stylesheet.css" caption="CSS Formatted HTML"
              type="text/css" mode="link" />

For PDF output:

  <stylesheet href="my_stylesheet.css" caption="CSS Formatted PDF"
              type="text/css" mode="pdf" />

Supported Elements

As of version 1.2, the FiForms report formatting engine supports a limited set of options of the following CSS elements in PDF output. HTML output and PDF output using the same stylesheet should be reasonably close if formatting is limited to these elements and css formatting options. Otherwise, results in PDF format may be unpredictable. HTML support of CSS options is limited only by the browser.


Can contain any of the following elements, as well as other format elements. <format /> takes three attribues: dataset, layout, and class.

The dataset attribute must exactly match the resultname attribute of a <query /> element in the report definition. The top-level <format/> should match a top-level <query/>, and <format/> elements nested inside it should match corresponding nested <query/> elements. Any other arrangement could lead to unpredictable results.

The layout attribute must be one of "tabular", "columnar", or "positioned". These layouts are described in the next section of this article under Layout Types

The class attribute enables the element (which becomes a div in html) to be styled with CSS.


Contents should be the exact name of a field as output from the SQL query.


Contents are printed directly in the report output, formatted as a
element in HTML. Can contain


Analogous to HTML div. Container element for formatting <field /> and <label />. Can also contain br.


Analogous to HTML img. Allowed attribues include src, class, and style. Images must be stored in the report directory, and the src element should contain just the image filename, with no path. Supports JPEG (.jpg or .jpeg) and PNG (.png) images.


Analogous to HTML br.

Layout Types

Tabular Formatting

Tabular layout is the simplest, and is the default layout for reports. Tables are simply dumped as HTML tables. Sub-datasets are inserted as nested tables inside the outer table, and headings on sub-datasets are repeated for each parent record. Tabular output can be styled using CSS and classes, but the default format is typically acceptable for quick reports. Currently, the summary options are only implemented in tabular format (to create quick totals, etc. at the end of a table).

Columnar Formatting

Not yet implemented. The concept is to create a table with two columns, the first containing the field name and the second containing the field value.

Positioned Formatting

Positioned format is the most flexible layout style. In positioned layout, you must use CSS to position each field within a fixed-size record. This is useful, for example, in creating formatted invoices, checks, and other precisely formatted layouts. Each record is output in a fixed-size block, and fields and labels are positioned precisely within that block.

Page Setup

When a report is output in PDF mode, page size can be controlled using the new CSS Page attributes, like this:

   size: 8.5in 11in;
   margin: 0.5in;

Record Setup

The <format /> element needs to be linked to a css class, so that we can set the fixed record size. For example, in the xml we could write:

<format dataset="Invoice" class="top_record" layout="positioned">



In the CSS file, we can size the record like this. Since this is an invoice, we will output only one record per page, so we set the record size to just fit inside the 0.5in page margins.

   /* The important information: record box size */

   width: 7.4in;
   height: 9.5in;

   /* The following items don't affect PDF output,
      but it will encourage browsers to format the invoice
      nicely if we output it in HTML mode. */

   page-break-inside: avoid;
   page-break-after: always;
   position: relative;

Positioning Fields and Labels

Suppose we want to format a shipping address on the report. We can place labels, boxes, and fields in the report, and link them to CSS classes:

   <label class="shipping_address_title">Ship To:</label>
   <div class="shipping_address">

Format each of these as an absolutely positioned div in CSS:

   position: absolute;
   left: 0.3in;
   top: 1.5in;
   width: 2.5in;
   height: 1in;
   font-size: 13pt;
   font-weight: bold;

   position: absolute;
   left: 0.5in;
   top: 1.8in;
   width: 2.5in;
   height: 1in;

Graphics, Boxes, and Lines

Images are positioned in css the same way as labels and fields. To create boxes, simply create a div and apply a solid border style, border width, and a border color in css, i.e.

   position: absolute;
   top: 1in;
   left: 1in;
   width: 3in;
   height: 3in;
   border-width: 1pt;
   border-style: solid;
   border-color: #000000;

Horizontal and vertical lines? just make a box and sets its width or height to zero. ;)

We're working on implementing more CSS in the PDF report generator, focusing especially on providing the ability to format professional looking reports from structured data.

Personal tools
This is a cached copy of the requested page, and may not be up to date.

Sorry! This site is experiencing technical difficulties.
Try waiting a few minutes and reloading.

(Can't contact the database server: The server requested authentication method unknown to the client (localhost))

You can try searching via Google in the meantime.
Note that their indexes of our content may be out of date.