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.
| wdt_ID | Client | Date | Product | Price | Qty | Total | Tax |
|---|---|---|---|---|---|---|---|
| 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 |
| wdt_ID | Client | Date | Product | Price | Qty |
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 fully integrated with wpDataTables, it uses 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
On the first step choose the source wpDataTable:
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”):
Then upload the template that you have prepared (click “Browse…“, drag&drop the file, click “Use template”):
On the next step you can download the preview for X first rows of the table:
If you are satisfied, you can click “Save Report” 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 Report”, you will see the shortcodes for this report:
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 by clicking on shortcode button, 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.
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: