This guide explains how to Generate Documents By API
- Initial Setup:
- Drag and drop a “Rich Text Editor” field onto your form.
- Rename the field as needed.
- Drag and drop two “Select” and four “Text” fields onto your form.
- Rename the fields as needed.
Note: These fields are to manage the page settings (optional).
- Drag and drop a ”Collapsible Field Section”, a “JavaScript”, and a “Field Update Button” fields onto your form.
- Rename the fields as needed.
- Configuring The “” Field:
A1 A2 A3 A4 A5 Legal Letter Tabloid
- Configuring The “” Field:
- Configuring The “” Field:
- Configuring The “” Field:
// Initialize Lawnchair with IndexedDB adapter
var document_templates_db = new Lawnchair( { name: 'document_templates', adapter: 'indexed-db' }, function() {
// Log a message indicating Lawnchair has been initialized
console.log( 'Lawnchair initialized ' );
} );
window.formyoula.form_fields[ 'Generate PDF' ].on( 'generate_pdf', function( e ) {
require( [ 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js' ], function( axios ) {
$( document ).ready( function() {
// Retrieve the value from the 'page_size' form field
var page_size = window.formyoula.form_fields[ '8a1e-ba4f-423d' ].get( 'value' );
// Retrieve the value from the 'page_orientation' form field
var page_orientation = window.formyoula.form_fields[ 'c919-51cd-a868' ].get( 'value' );
// Retrieve the value from the 'margin_right' form field
var margin_right = window.formyoula.form_fields[ 'c5ea-ac27-37c9' ].get( 'value' );
// Retrieve the value from the 'margin_left' form field
var margin_left = window.formyoula.form_fields[ 'a31a-ea7e-4a62' ].get( 'value' );
// Retrieve the value from the 'margin_top' form field
var margin_top = window.formyoula.form_fields[ '1044-7c85-7a52' ].get( 'value' );
// Retrieve the value from the 'margin_buttom' form field
var margin_buttom = window.formyoula.form_fields[ '0875-93cc-cde0' ].get( 'value' );
// Retrieve the component ID from the 'field_id' form field
var field_id = window.formyoula.form_fields[ '83fb-325e-b6bd' ].get( 'component_id' );
// Retrieve the creation date from the user's attributes
var created_date = window.formyoula.user.attributes.CreatedDate;
// Retrieve the 'created_by' value from the form fields
var created_by = window.formyoula.form_fields.Formyoula_Created_By;
// Retrieve the user role from the form fields
var role = window.formyoula.form_fields.Formyoula_User_Role;
// Get the TinyMCE iframe element by its ID
var iframe = document.getElementById( 'mce_0_ifr' );
// Access the document object of the iframe
var iframeDocument = iframe.contentWindow.document;
// Retrieve the inner HTML content of the iframe's body element
var bodyContent = iframeDocument.body.innerHTML;
// Get JSON data from textarea using the formyoula field
var merge_data = window.formyoula.form_fields[ 'a517-7ce6-46f7' ].get( 'value' );
// Check if merge_data is available and valid
if ( merge_data ) {
// Parse merge_data to ensure it's an object
if ( typeof merge_data === 'string' ) {
try {
// Parse the merge_data string into a JSON object
merge_data = JSON.parse( merge_data );
} catch ( error ) {
console.error( 'Invalid JSON format in merge_data:', error );
// If parsing fails, set merge_data to null
merge_data = null;
}
}
}
// Save all parameters and body content to Lawnchair
var template_data = {
html: bodyContent,
merge_data: merge_data,
page_size: page_size,
page_orientation: page_orientation,
margin_right: margin_right,
margin_left: margin_left,
margin_top: margin_top,
margin_buttom: margin_buttom,
user_id: window.formyoula.user.id,
created_By: window.formyoula.form_fields.Formyoula_Created_By
};
// Generate a unique key using user_id and a timestamp
var unique_key = 'rich_template_' + template_data.user_id + '_' + new Date().getTime();
// Save template data offline after successful PDF generation
document_templates_db.save( { key: unique_key, data: template_data }, function() {
console.log( 'Rich template data saved successfully' );
} );
// Send the HTML content to the server via Axios
axios.post( 'https://formyoula-api-document-generat-b75544c7d054.herokuapp.com/api/pdf/download', {
html: bodyContent,
merge_data: merge_data ? JSON.stringify( merge_data ) : null, // Ensure merge_data is stringified if available
page_size: page_size,
page_orientation: page_orientation,
margin_right: margin_right,
margin_left: margin_left,
margin_top: margin_top,
margin_buttom: margin_buttom
}, { responseType: 'blob' } ).then( function( response ) {
// Create a URL for the blob object containing the PDF data from the response
var url = window.URL.createObjectURL( new Blob( [ response.data ] ) );
// Create a new anchor element
var link = document.createElement( 'a' );
// Set the href attribute of the anchor to the URL of the generated PDF blob
link.href = url;
// Set the download attribute of the anchor to specify the filename for the downloaded PDF
link.setAttribute( 'download', 'document.pdf' );
// Append the anchor element to the body of the document
document.body.appendChild( link );
// Programmatically click the anchor element to trigger the download
link.click();
} ).catch( function( error ) {
console.error( 'Error generating PDF:', error );
} );
} );
} );
} );
- Configuring The “” Field:
- Configuring The Form Setup:
Test Your Form:
For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂