13
February
2020

Docmosis Integration with Bubble

Create documents right from your bubble website or app using Docmosis Cloud.

We have developed an example app to showcase Docmosis integration with Bubble apps. Follow our instructions to replicate for yourself or jump straight into the application editor to see how our example app works.

Docmosis Integration with Bubble

You can find our live bubble app right here:

https://metalegalfinance.bubbleapps.io/

Jump into the application editor here:

https://bubble.io/page?version=live&name=index&id=metalegalfinance

 

This bubble app makes use of the free bubble API Connector plugin to connect to the Docmosis Cloud and even stores the returned file in the app database. Follow the steps below to start rendering documents straight from bubble.

 

Step 1: Start a Docmosis Trial

If you don't already have a Docmosis account, you can sign up for a free trial here. After you have signed up for Docmosis you can access the Docmosis Cloud Console from this link. The Docmosis Cloud Console is where you will store your document templates. For more info on building templates please see our resources page.

 

Step 2: Configure the Docmosis API in your Bubble App

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

b) Install the free Bubble API Connector plugin by clicking on the Plugins tab in the left menu and searching for “api”:

Bubble Api Connector - Search

 

c) Click Add another api to start adding the Docmosis api to you app:

Bubble Api Connector - Add API

 

d) Add an API Name and a Name for the api call:

Bubble Api Connector - Api Name

 

e) Click expand and set the following fields:

   Bubble Api Connector - Call Parameters

Notes: If your default Docmosis region is EU or AU, change “us” in the api link to "eu" or "au".
The accesskey parameter refers to your unique Docmosis access key. This can be found in the Docmosis cloud console under Account.
The templateName parameter is the name of the template you are using (including what folder it is under). In our example app we used a template similar to the Example Letter Template.
The outputName parameter is the name and output format of the document (Change to docx to generate a word document).

 

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

Bubble Api Connector - Initialized

 

g) Now we can add the fields in the template as parameters. For each one, disable Private so that the parameter can be populated dynamically from an input field in your bubble app.

BubbleApiConnector Parameters

 

Step 3: Create a new Data Type to Store the generated File.

a) Click on the Data tab in the left menu. Under the Data Types tab, type a name for the new data type and click Create:

Bubble Data - New Thing

 

b) Now click on the Create a new field button and add a new field of type file:

Bubble Data - New Field

 

Step 4: Create a form to match our template’s fields

An input field is needed for each tag <<…>> within your Docmosis template. In our example we have used a modified version of the Example Letter Template, and our form has been developed to match this template:

Bubble Design - Form

 

Defaults can also be added to your form to make data entry easier, like in our live app.

A button has been added at the end of our form to trigger the document generation workflow.

 

Step 5: Create a workflow to call the Docmosis API

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

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

 

Under Type select the data type you created in step 3 (DocmosisFile). Click Set another field and select the file field of your thing (GeneratedFile) and set this to equal Get data from an external API:

Bubble Workflow - Create A Thing

 

Now select the API you created in step 2 (Docmosis - GeneratedLetter):

Bubble Workflow - Get From Api

 

Now you can set the value of each parameter to equal the matching input field you created in step 4.

Bubble Workflow - Letter Parameters BlankBubble Workflow - Letter Parameters Complete

 

Note: For checkbox input types you will need to format the value as text:

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

 

Note: For date/time input you can change how you want the data to be displayed in the generated document:

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

 

c) Step 2 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

 

Click Insert Dynamic Data and click result of Step X (Create a new…) and then ‘s GeneratedFile:

Bubble Workflow - Open A Website GeneratedFile

 

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

 

Step 6: That’s it!

Now you should be generating documents straight from your Bubble App!

Author : Michelle Rauert

Leave a comment

You are commenting as guest.