Generate dynamic PDFs with a single action.
Here's how:
----Getting Started----
1. Install the plugin
2. Add the PDF-Report element onto your page
3. In your Workflow, simply add a Generate Report action
This will download the desired report PDF.
Refer to the example setup via on this Editor:
https://bubble.io/page?type=page&name=pdf-report&id=blur-apps-playground----Inputs to the Element----
1. Provide the Report Title
2. Provide the Report Subtitle
3. Provide the desired filename (alphanumeric only)
4. Provide configuration for the report layout
5. Provide the content
----Configuration----
This is where you can customize the layout of the table in the report.
This will be a JSON object containing a field 'tableConfig' that holds a JSON array that defines each column of the table.
We've set up a Configuration builder to easily generate this configuration JSON visually:
https://blur-apps-playground.bubbleapps.io/version-test/pdf-reportHere is an example of this configuration object where we define a table with 3 columns (Name, Email and Unique ID):
{
"tableConfig": [
{
"id": "column1",
"title": "Name",
"visible": true,
"align": "left",
"width": 45
},
{
"id": "column2",
"title": "Email",
"visible": true,
"align": "left",
"width": 45
},
{
"id": "column3",
"title": "Unique ID",
"visible": true,
"align": "left"
}
]
}
Here we have defined the following information regarding the table layout:
- 3 columns
- Each column has a column title that is rendered on the report and an id for internal reference
- Each column has an optional 'width' property as well. This will make the column width fixed if defined and will stretch to available space if not defined
- Each column can be made visible or invisible with the 'visible' property
- Each column can be set to align to 'left', 'center', or 'right'.
----Report Content----
This is where we define the actual content of the report.
It will depend on your table configuration above and will expect references to each column based on the column IDs defined in the configuration above.
The best approach to setting this content is to build a JSON using the :formatted as text operator.
Here's an example with the layout configuration mentioned above:
[Search for Users :formatted as text]
Properties of 'formatted as text' operator:
- Content to show per list item:
{
"column1":This User's Name :formatted as JSON-safe,
"column2":This User's email :formatted as JSON-safe,
"column3":This User's unique id :formatted as JSON-safe
}
- Delimiter:
,
This content definition results in a JSON array with a dynamic number of items, each containing fields "column1", "column2" and "column3", along with their respective values.
The report generated is a table with these column titles and all the corresponding values for each row as defined in the Content JSON.