Generate Documents By API

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. 🙂