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:
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:
Access the WYSIWYG editor within the Document Management Plugin, found in the FlowX Designer → Plugins → Document templates section.
To confirm the installed languages on the platform, go to FLOWX.AI Designer → Content Management → Languages.
Begin by creating a header section for the document, including details such as the company logo and title.
Data specifications (process data):
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:
Create a dynamic table to showcase various details of the offer.
Data specifications:
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 are useful for displaying values from selected items in a checkbox as a bulleted list.
Data specifications:
Embed an image for the authorized signature at the end of the document.
Data Specifications:
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:
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.
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.
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:
The final result after generating the template without dynamic data:
Download PDF sample here.
The final result after generating the template with the following dummy process data:
Download a PDF sample here.
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:
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:
Access the WYSIWYG editor within the Document Management Plugin, found in the FlowX Designer → Plugins → Document templates section.
To confirm the installed languages on the platform, go to FLOWX.AI Designer → Content Management → Languages.
Begin by creating a header section for the document, including details such as the company logo and title.
Data specifications (process data):
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:
Create a dynamic table to showcase various details of the offer.
Data specifications:
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 are useful for displaying values from selected items in a checkbox as a bulleted list.
Data specifications:
Embed an image for the authorized signature at the end of the document.
Data Specifications:
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:
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.
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.
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:
The final result after generating the template without dynamic data:
Download PDF sample here.
The final result after generating the template with the following dummy process data:
Download a PDF sample here.