Managing templates
The Documents plugin provides the flexibility to define and manage HTML templates for document generation, enabling customization through various parameter types.
Additionally, the platform incorporates a What You See Is What You Get (WYSIWYG) editor, allowing users to have a real-time, visual representation of the document or content during the editing process. Furthermore, you have the capability to test and review your template by downloading it as a PDF.
A WYSIWYG editor, typically provides two main views:
-
Design View (Visual View): In this view, you can see a visual representation of their content as it would appear when rendered in a web browser or other output medium. It resembles the final output closely, allowing you to format text, add images, and apply styles directly within the visual interface. This view aims to provide a real-time preview of the document’s appearance.
-
HTML View (Source View): In this view, you can see and edit the underlying HTML code that corresponds to the content displayed in the Design View. It shows the raw HTML markup, providing a more detailed and technical representation of the document. You can manually edit the HTML code to make precise adjustments or to implement features not available in the visual interface.
Explore the different parameter types and their specifications:
Configuring HTML templates
In the following example, we will create an example of a template using the HTML View (Source View).
To create a document template, navigate to the Document Templates section in the Designer, select ”New document” from the menu in the top-right corner, name your template, and click Create.
Now follow the next steps to design a new template:
- Open the WYSIWYG editor:
Access the WYSIWYG editor within the Document Management Plugin, found in the FlowX Designer → Plugins → Document templates section.
- Language Configuration: Create a dedicated template for each language specified in your system.
To confirm the installed languages on the platform, go to FLOWX.AI Designer → Content Management → Languages.
- Design the document header:
Begin by creating a header section for the document, including details such as the company logo and title.
Data specifications (process data):
- Text Parameters for Client Information:
Include a section for client-specific information using text parameters.
Text parameters enable the inclusion of dynamic text in templates, allowing for personalized content.
Data specifications:
- Dynamic table for offer details:
Create a dynamic table to showcase various details of the offer.
Data specifications:
- Dynamic sections for certain conditions:
Dynamic sections allow displaying specific content based on certain conditions. For example, you can display a paragraph only when a certain condition is met.
Data specifications:
- Lists:
Lists are useful for displaying values from selected items in a checkbox as a bulleted list.
Data specifications:
- Include Image for Authorized Signature:
Embed an image for the authorized signature at the end of the document.
Data Specifications:
- Barcodes:
Set the includeBarcode
parameter to true if you want to include a barcode. For information on how to use barcodes and OCR plugin, check the following section:
OCR plugin
- Checkboxes for Consent:
Consent checkboxes in HTML templates are commonly used to obtain explicit agreement or permission from users before proceeding with certain actions or processing personal data.
- Data Model:
In the documents template we have the Data Model tab. Here you define parameters, which are dynamic data fields that will be replaced with the values you define in the payload, like first name, or company name.
Styling
HTML template styling plays a crucial role in enhancing the visual appeal, readability, and user experience of generated documents.
We will apply the following styling to the previously created HTML template using Source view of the editor.
In the end the template will look like this:
Samples
Without dynamic data
The final result after generating the template without dynamic data:
Download PDF sample here.
With dynamic data
The final result after generating the template with the following dummy process data:
Download a PDF sample here.
Was this page helpful?