Header widget area left
Header widget area right

In this section we are going to go through creating a MS Word / DOCX Invoices generation process in Report Builder wpDataTables addon.

First, let’s see an example. Try to filter the table below (e.g. choose only one client, or a date range), and click “Download invoice” to get a MS Word / DOCX invoice generated by WordPress with the filtered data.

You can use the “Invoice number” input to change the number of generated invoice, and add some extra notes to the invoice using the “Additional notes” input.

Purchases Table

1 Joshua Hamilton 04/04/2016 Wireless Headphone 44,00 10 440,00 79,20
2 Connor John 04/04/2016 Gaming Keyboard 38,00 8 304,00 54,72
3 Ewan Griffiths 06/04/2016 LCD HD Monitor 120,00 5 600,00 108,00
4 Ewan Griffiths 07/04/2016 LCD HD Monitor 120,00 6 720,00 129,60
5 Larry Lowery 08/04/2016 Wireless Headphone 44,00 7 308,00 55,44
6 Joshua Hamilton 08/04/2016 Gaming Keyboard 38,00 8 304,00 54,72
7 Joshua Hamilton 09/04/2016 Mini Wireless Keyboard 33,00 2 66,00 11,88
8 Marc Kline 09/04/2016 USB HD Webcam 15,00 4 60,00 10,80
9 Ewan Griffiths 10/04/2016 Gaming Keyboard 38,00 2 76,00 13,68
10 Larry Lowery 10/04/2016 USB HD Webcam 15,00 9 135,00 24,30

Now let’s go through the steps necessary to create this kind of report.

  1. Prepare a wpDataTable with data

First of all, we need to prepare the data source. As Report Builder is an add-on for wpDataTables, it users wpDataTables as the data source. In our case we created a table via Table constructor with fields “Client”, “Date”, “Product”, “Price ” and “Quantity”. Additionally we created 2 formula columns which calculate the Total (price * quantity) and the tax (total * 0.18%).

See here how to create tables like this in Table Constructor.

See here how to create formula columns.

2. Prepare the DOCX template for the report.

Prepare a DOCX file, with the layout that you need for the report. We used:

  • Predefined variables: ${generatorname}, ${today}
  • Additional variables: ${notes}, ${invoicenumber}
  • Cell values from wpDataTable: ${quantity.all}, ${price.all}, ${formula_1.all}
  • Totals: ${formula_1.total}, ${formula_2.total}

To download the template click here.

See here the full list of rules how to prepare templates.

3. Create a report in WordPress admin page through Report Builder Wizard.

  • Go to WP-admin, open ReportBuilder -> Create a new report
Create New Report in WordPress Report Builder
  • On the first step choose the source wpDataTable:
Choose a wpDataTable for WordPress Report Builder
  • On the next step provide the report name, choose ‘Single file’ generation logic (which means we’ll create a single file for whole table, not a separate file for each row), tick “Follow table filtering”, and define 2 additional variables (“invoicenumber” and “notes”):
Define settings for the generated report
  • Then upload the template that you have prepared (click “upload”, drag&drop the file, click “Use template”):
Upload Word DOCX Template for WordPress ReportBuilder
  • On the next step you can download the preview for X first rows of the table:
Download Preview of the DOCX Word File Generated by WordPress Report Builder

If you are satisfied, you can click “Save” to store the result, if something is wrong, you can go back in the wizard and change the settings or upload a different template.

  • Once you click “save”, you will see the shortcodes for this report:
Shortcodes To Download DOCX Generated By WordPress Report Builder

The shortcodes contain buttons for downloading report, saving report to WP Media Library, and for inputs for additional variables.

You can copy these shortcodes directly from this page, but this isn’t necessary as you can always generate these in standard WordPress post/page editor, or in Visual composer.
Once you close the wizard you will be redirected to the Browse page. You can always quickly download the report (for the whole table) from there by clicking the “Download” button, or quickly get the list of available shortcodes.

Browse Reports in WordPress Admin

The last thing to do is to insert the Report controls to the post or page where you need them, so the users would be able to use it.

  • See here how to insert the report builder controls to the post or page using standard WordPress Visual editor.
  • See here how to insert the report builder controls to the post or page using Visual Composer.