Generate a document from a Bubble web application

With Bubble (https://bubble.io) you can build and host a web application without writing any code!

This article explains how to generate a document from a Bubble application using Docmosis.

Overview

In this example we create a simple webform, using Bubble, to collect data and initiate the document generation.  We will use the Docmosis Cloud service to generate a PDF letter.  The letter will be based on a Microsoft Word template stored in your Docmosis Cloud account.

When the form is submitted the data from the form will be sent to Docmosis and merged with the template to create the PDF.

The generated PDF letter will be saved in the Bubble application database and also downloaded. 

You can view the sample Bubble app we have created and the resulting PDF, here:

This example could be extended to generate complex documents in PDF/Docx/ODT/TXT formats.  You could also use any data stored in your Bubble application and use any action to trigger the generation of the document.

 

You will need

Bubble Account

Obviously, there is a lot to learn about Bubble.  Follow their signup process and interactive lessons to get you started.

Create a new Bubble app or start work with an existing one.

If you are already familiar with Bubble you can view a read-only version of the back-end of our sample Bubble web application here: https://bubble.io/page?version=live&name=index&id=metalegalfinance

Start with the Workflow to see the Steps, and in the Plugins > Api Connector > Docmosis you can see the GenerateLetter call details.  The generated documents will be stored in the Data > App data > All DocmosisFiles

 

Docmosis Cloud Account

If you don't already have a Docmosis Cloud account, you can sign up for a free trial here.

Once you have an account you should login to the Docmosis Cloud Console.

Note: In this example we are using the US region for storing templates and generating the document, but you could choose EU or AU as needed.

 

Let's Get Started

Step 1: Upload the Template to your Docmosis Cloud Account

1.A) In this example, in your Docmosis Cloud account, create a top-level folder called "Bubble".

 

1.B) Next, download the sample Microsoft Word template using the link below.

Note: If you open the template in Microsoft Word you will see the fields that Docmosis will replace with data.  They look like this: <<firstName>>.

 

Download the Template

1.C) Upload the template to the Bubble folder in your Docmosis Cloud account.  Your account should then look like this:

 

Step 2: Locate your Docmosis Cloud access key and URL

Navigate to the Account page in your Docmosis Cloud account.  You will need the access key and URL when setting up the call to Docmosis in your Bubble application.

Note: If your Docmosis processing location is EU or AU, use the corresponding region's URL.
 

 

 

Step 3: Configure your Bubble app to send data to the Docmosis Cloud API

This sample Bubble app makes use of the free Bubble API Connector plugin to send data to the Docmosis Cloud service.

3.A) Install the "API Connector" plugin by clicking on the "Plugins" tab in the left menu and searching for “api”.

Bubble Api Connector - Search

 

3.B) Click "Add another API" to start configuring the call to the Docmosis Cloud service.

Bubble Api Connector - Add API

 

3.C) Choose an "API Name",  we used "Docmosis", and a "Name" for the API call, we used "GenerateLetter".  Leave Authentication set to "None or self-handled".

Bubble Api Connector - Api Name

 

3.D) Click "expand" and: Set "Data type" to "File";  Set "Method" to "POST";  Set "URL" to the URL from Step 2 above and then append "renderForm";  Set "Body type" to "Form-data".

Note: The image below is using the "US" endpoint.  You can find more information about the Docmosis processing locations and endpoints like "/renderForm" in the Web Services Guide available in our Cloud documentation.

 

Bubble Api Connector - URL Setup

 

 

3.E) Use the "Add parameter" button to add three new parameters.

Note: the parameters are case sensitive.  So "accessKey" needs a captial "K".

The accessKey should be your access key from Step 2 above.  The "templateName" includes the name of the folder where you uploaded the sample template.  If you followed Step 1.C it should be "Bubble/LetterTemplate.docx".

In this example we have set the "outputName" to "OutputLetter.pdf".  The "pdf" file extension is how Docmosis knows what format to generate.  You could change this to "docx" or "txt" to generate a different output format.

   Bubble Api Connector - Call Parameters
 

3.F) Click initialize call, if everything is entered correctly you should get the following:

Bubble Api Connector - Initialized

Note: By initializing the call you are actually generating a sample document.  The "preview" link will download the document, but it will be called "api_initialize_file".  If you rename the file to "something.pdf" (ie. with a ".pdf" extension) and open it - you will be able to view the file.

 

3.G) Now you should add more parameters to the call - one for each field in the template.

For example, for the <<firstName>> field in the LetterTemplate.docx there should be a matching "firstName" parameter as part of the call to Docmosis.

For each one, leave the "Value" as blank and disable "Private" so that the value of the parameter can be populated dynamically from an input field in your Bubble app.

BubbleApiConnector Parameters

 

Step 4: Create a new Data Type to store the generated File.

4.A) Click on the "Data" tab in the left menu. Under the "Data types" tab, type a name for the "New type" and click Create:

Bubble Data - New Thing

 

4.B) Now click on the "Create a new field" button:

4.C) And add a new field of type "file", we used the name "GeneratedFile".  Click on Create.  This data type will be used to store the response from the call to the Docmosis Cloud API in Step 3.

Bubble Data - New Field

 

Step 5: Create a web form to collect the data

5.A) Using the Design tab, add an "Input" field to collect data.

Note: Please refer to the Bubble "help" documentation for comprehensive instructions on building a web application.

 

 

5.B) An input field is needed for each field <<…>> within the Docmosis template.  Once finished our form looks like this.

Note: the button added at the end of the form will be used to trigger the document generation workflow.

 

Bubble Design - Form

 

 

Step 6: Create a workflow to call the Docmosis API

6.A) Select the button you wish to use to trigger the document generation and click Start/Edit Workflow.

 

6.B) Step 1 of the workflow is to create the new Data Object (thing). Click on "Click here to add an action"… and select the Data (Things) tab and then click "Create a new thing...".

Bubble Workflow - Add An Action

 

6.C) For the "Type" select the data type you created in step 4.B (DocmosisFile). Click "Set another field" and select the file field of your thing (GeneratedFile) from step 4.C and set this to "Get data from an external API".

Note: It is this step that is ensuring the file generated by Docmosis will be stored by Bubble.

Bubble Workflow - Create A Thing

 

6.D) Now select the API you created in step 3.C "Docmosis - GenerateLetter".

Bubble Workflow - Get From Api

 

6.E) Now you can link the value of each parameter to an input field from the form you created in step 5.

Bubble Workflow - Letter Parameters Complete

 

Note: For "checkbox" input types you will need to use "formatted as text".  Set "Formatting for yes" to "true" and "no" to "false".

Bubble Workflow - Checkbox - Format As TextBubble Workflow - Checkbox - Boolean Formatting 

Note: For date/time input you can choose how you want the Date to be displayed in the generated document.

Bubble Workflow - Date Time - Format AsBubble Workflow - Date Time - Date Formatting

 

6.F) Step 3 of the workflow is to download the file that was just generated. Click on "Click here to add an action…" and select the "Navigation" tab and then click "Open an external website".

Bubble Workflow - Open A Website

 

6.G) Click "Insert Dynamic Data" and set the Destination to "Result of Step 2 (Create a new…)" and then " ‘s GeneratedFile"

Note: In our example app we have an additional step that deletes files more than 5 minutes old. This is optional and is used to keep our example app from filling up with files.

 

Bubble Workflow - Open A Website GeneratedFile

 

 

That’s it - you're Finished!

Now if you "preview" your app, and select the "Generate Document" button - you should receive a completed PDF.

Preview the app and generate a document

 

If you followed our guide and get stuck at all, please email This email address is being protected from spambots. You need JavaScript enabled to view it. for help.

Key Resources

 

Feedback

Invalid Input

Sorry, this field will only accept letters and numbers, and not special characters, to limit spam.

Sorry, this field will only accept letters and numbers, and not special characters, to limit spam.

Invalid Input

Applies To

Docmosis-Java Tornado Cloud
Version(s) - - DWS3