PDF Pages
Feature Spotlight Video
Create PDF versions of each of your App Pages, which you and your app users can download/email/save on demand or on schedule from anywhere in your app via the -
Example Use Cases:
- Order Management App - Automatically send emails with attached PDFs of Invoices, Purchase Order, or Receipts each time a new order is added.
- HR App - Allow employees to access and download PDF documents with all of their employment information.
- Non Profit App - Allow donors to download PDF tax deductible receipts, and/or automatically email PDF tax deductible receipts to donors.
- Education App - Automatically generate printable PDF Report Cards for each student. You can allow students/parents teachers to download on demand or send them an email with the Report Card PDF attached.
Overview
To use a PDF page you'll follow this process:
- Create a Layout which will serve as the overall settings of the PDF
- Add a PDF page and assign it to the layout you created
- Add components to the PDF page
- Add access to this new PDF from within the Page Builder.
Creating PDF Pages
To create a PDF Page, navigate to the Automations section of your app, click on the PDF Pages section, and then click the 'Add New PDF Page' button. Enter a name and a description of the PDF Page. Then, choose the Data View Type. Select whether you would like to display multiple records (List) or a single record (Details).
Once you have already created a PDF Page, and you would like to create a new one, the 'Add New PDF Page' button will appear in the top-right corner.
List PDF vs. Detail PDF
A 'List' Type PDF can display all the records from a given table, where as a 'Detail' Type PDF will show a detail about one specific record, and any connected or related records that may be available when viewing a 'Details' page of any specific record.
If you select the 'Detail' Data View Type, you can add the PDF Page as a connected PDF in a table, use in Scheduled Tasks for individual records, and send it in a Form Email Notification, while 'List' PDF Pages can only be printed from the PDF Print button.
For example, if you have an 'Orders' page, and you want to add a PDF Print button to download a PDF of all the orders, you would select a 'List' PDF Page.
If you want to add a 'PDF Link' column to download a PDF of the order invoice to the 'Orders' Table on the same page, that would need to be a 'Details' PDF Page because the PDF will generate with the details of the individual record.
Customizing PDF Pages
You can customize a PDF Page by creating a Layout. Navigate to the Layout tab, and click 'Create New PDF Layout'. You can then customize the 'Page Settings' by choosing a theme, paper size and orientation, and setting the margins.
You can also customize the background, header, and footer.
In the example below, in the 'Page Settings' section of the new layout, we set the Theme to 'Tadabase Custom Theme - Fresh'. We also set the Header to display 3 columns - the 1st column with the company logo, the 2nd column displaying the page number, and the 3rd column with the company name.
Available Themes
Colorful:
Custom CSS
In PDF Pages 2.0 - all CSS classes were removed and replaced with PDF specific CSS classes. If you assign a custom CSS to any element on the page, you must define that CSS in the CSS tab of the PDF Page with the corresponding selector and all relevant properties and attributes.
When selecting the theme option of "Unformatted - I want to use custom CSS", the CSS classes listed below will load for elements on the page. Please use this list of PDF specific CSS selectors, and general CSS selectors, as reference for any custom themes.
PDF Elements |
CSS Selectors |
| Links | a |
| Field Labels | label |
| Table Component | .t-datatable_pdf_pages |
| Table Component Title |
.t-pdf-table-heading |
| Table Component Wrapper | .t-table |
| Table Component Header Row |
.t-table thead tr |
| Table Component Body Row |
.t-table tbody tr |
| Table Component Header Cell |
.t-table thead th |
| Table Component Body Cell |
|
| Table Component Images |
.t-table img |
| List Component Title |
.t-pdf-list-heading |
| List Component Cover Image Wrapper |
.t-pdf-list-cover-image |
| List Component Cover Image |
.t-pdf-list-cover-image img |
| List Component List Item |
.t-pdf-list-item |
| List Component List Item Body |
.t-pdf-list-body |
| List Component Field Group |
.t-pdf-list-field-group |
| List Component Field Value |
.t-pdf-list-value |
| Card Component |
.t-card_pdf_pages.af-card-component |
| Detail Component |
.t-detail_pdf_pages |
| Detail Component Title |
.t-detail-heading |
| Detail Component Field Group |
.t-pdf-details-field-group |
| Detail Component Images |
.t-detail_pdf_pages img |
| Image Component |
.t-pdf-image |
Adding Components to PDF Pages
PDF Compatible Components
- Tables
- Record Details
- Lists
- Cards
- HTML
- Image
- Page Break
Adding components works similarly to adding components on other pages. However, PDF components have fewer options and settings that can be added at this time.
Select a the component you would like to add to your PDF Page from the bar on the left. Customize accordingly.
PDF Limitations
At this time the following PDF limitations are in place:
1) A maximum of 1000 records can be displayed in a single table component.
2) A maximum of 100 records can be displayed in a single list component.
3) Page Breaks only work in columns that have a width of 12/12 (full width).
4) When working with logged-in user filters, the PDF must be accessed directly from the app. Going directly to the URL will not apply the filters and therefore return no records.
5) English is the only language supported.
6) Importing Custom Fonts is not supported.
Accessing PDFs
PDF Print Component
In the Page Builder, you can add the 'PDF Print' button to the page you wish to print/save as PDF. Select the PDF Page from the dropdown. You can also customize the text for the label.
Table and List Component Links
'Details' PDFs can also be accessed via the 'Connected PDF' option in the 'Links' section of Table and List Components in the Page Builder.
This option is only available for a 'Details' Type PDF and NOT for a 'List' Type PDF.
Scheduled Tasks
In the 'Action' tab of Scheduled Tasks, select the Action option 'Create PDF (New)'.
This option is only available for a 'Details' Type PDF and NOT for a 'List' Type PDF.
Next, select the PDF Page that you would like to be created, and choose the attachment field to save the generated PDF to.
You can then choose whether to Append the attachment field or overwrite the existing PDF.
In the example below, 4 records were processed and 4 PDFs were generated in the 'Orders' table.
This option is only available on select plans. See our pricing page for more details.
Form Email Notifications
'Details' PDFs can also be accessed via the 'Email' option in the 'Notifications' section of the Form Component in the Page Builder.
This option is only available for a 'Details' Type PDF and NOT for a 'List' Type PDF.
Select the 'Custom Email' option, then select the PDF from the dropdown that you would like to be attached to the email notification.
Delete a PDF Page
1. Click "Automation"
2. Click "PDF Pages"
3. Click on the PDF Page you wish to delete.
4. Click "Settings"
5. Click "Delete"
6. Click "Delete"
Additional Resources
We'd love to hear your feedback.