Back to all How-tos

Custom footer with subtotal at the end

While the default Dynamic Table Wizard options of adding subtotals and header lines works well in most situations, sometimes you want a little more power over how the table overflow behaves. Here, we’ll show you how to make your own footer with text, while leaving the grand total at the end of the table along with a subtitle and taxes.

The structure of a Table

The main principle in understanding how the dynamic tables work is to look at how a table is built.

Dynamic Table Structure: Header, Body, FooterIn this table:

  • The Header is created by adding tr (row) elements within a thead.
  • The body rows are contained within the tbody element.
  • The footer is a row within a tfoot element.

In the Dynamic Table wizard, then, the transportline refers to the Header while the footer obviously refers to the Footer.

Changing the footer to add a custom message

The first step to achieve the goal of this how-to is to modify the footer so that it shows a custom message, Continued on the next page... on all the pages where the table appears – except the last one where we’ll keep subtotals.

In order to do this, we’ll need two different rows in the existing footer, along the existing subtotals box. Here’s how:

  • Right-click anywhere in the footer (such as, in the @SubTotal@ box) and select Row -> Insert Above from the contextual menu.
  • Unfortunately there is no way, currently, to merge cells in the Designer module. We’ll have to do it in the source.
  • Go to the Source view
  • You’ll see something like <tfoot><tr data-showin="break, footer"> followed by a few lines of <td><br></td>.
  • Remove all the <td> entries and replace them with a single line: <td colspan="5">Continued on the next page...</td>, where “5” is the number of rows in your table.
  • Go back to the Design view.

Now that we have the new row, we need to control when it, and the existing subtotal row, appear. The property that controls appearance is at the ROW level, not the cell, so we need to select the <tr> element to see it. This one is simple: click in the cell where we have the text then, in the breadcrumbs at the top, click the tr > element. Then, in the Attributes pane, we can use the Show Row drop-down to select where it appears (see the documentation for more details).

Specifically for this new row, we want it to appear everywhere except the last page. The Show Row option, in this case, is Before page break. As for the subtotals row, it should only be shown At End of Table.

Adding taxes and totals

Taxes and totals can bed added to the last footer row, along with the calculated subtotal from the dynamic table wizard. The easiest way to do this is to simply create new lines within the same cell where the existing subtotal is located:

  • Make sure you’re in Design mode to see the placeholder
  • Click at the end of the @subtotal@ placeholder and do CTRL+Enter to create a line return.
  • Drag your Taxes field on the new line.
  • Repeat for the Total.

While Connect Designer can, in theory, “calculate” subtotals, taxes and totals, these calculations are done in JavaScript, which has a maximum of 2 decimal points in numerical values and is generally considered imprecise. Thus, we highly recommend using values from your financial systems instead of doing any sort of calculation in Designer.

Addendum: Adding headers and footers

Adding headers and footers won’t create the scripts required for subtotals. We suggest creating your dynamic table with the Subtotal footer already activated.

If you have an existing table, you create easily create the header and footer for this table through the contextual menu:

  • Right-click in the table
  • Go to Table
  • Click Insert thead for a header, Insert tfoot for the footer.

When adding a header or footer, a row is automatically added within it.

Leave a Reply

Your email address will not be published. Required fields are marked *