|
| 1 | + |
| 2 | + |
| 3 | +# Enhancing Your Bubble App with pdfRest |
| 4 | + |
| 5 | +[Bubble.io](https://bubble.io/) is a powerful no-code/low-code platform that lets you build and launch fully functional web applications visually, without writing any traditional code. Using its built-in **API Connector** plugin, you can connect your app to external APIs like pdfRest to create powerful, automated document workflows. |
| 6 | + |
| 7 | +To get started, [sign up for a free Starter account](https://pdfrest.com/getstarted/) with pdfRest to generate your dedicated API Key. You’ll use this key to authenticate requests from Bubble.io. |
| 8 | + |
| 9 | +--- |
| 10 | + |
| 11 | +## Objective |
| 12 | + |
| 13 | +This tutorial will demonstrate how to: |
| 14 | + |
| 15 | +1. Install and configure the Bubble.io **API Connector** for pdfRest. |
| 16 | +2. Create Bubble visual elements for file upload and action buttons. |
| 17 | +3. Call pdfRest APIs for **Upload**, **Convert to PDF/A**, and **Merge PDFs**. |
| 18 | +4. Configure workflows to trigger the API calls and provide links to download your new files. |
| 19 | + |
| 20 | +--- |
| 21 | +## Step 1: Install and Configure the API Connector Plugin |
| 22 | + |
| 23 | +- In the Bubble **Editor**, open the **Plugins** tab, and select **Add plugins**. |
| 24 | +- Search for and install the **API Connector**. |
| 25 | +- Create a new API named `pdfRest`. |
| 26 | + |
| 27 | +In the API setup: |
| 28 | + |
| 29 | +- Add a **Shared header** for authentication: |
| 30 | + - **Key** = `Api-Key` |
| 31 | + - **Value** = your pdfRest API key |
| 32 | + - Check the box to mark this as **PRIVATE** |
| 33 | + |
| 34 | + |
| 35 | + |
| 36 | +- For each endpoint, add a new POST call: |
| 37 | + - **Upload API** → `POST https://api.pdfrest.com/upload` |
| 38 | + - **Convert to PDF/A API** → `POST https://api.pdfrest.com/pdfa` |
| 39 | + - **Merge PDFs API** → `POST https://api.pdfrest.com/merged-pdf` |
| 40 | +- Set the **Body type** as **Multipart/form-data** |
| 41 | +- Ensure responses are returned in JSON for easy parsing |
| 42 | + |
| 43 | +--- |
| 44 | +## Step 2: Define Your Desired API Endpoint Parameters |
| 45 | + |
| 46 | +Each endpoint requires specific parameters in its API call. Click the name of the APIs below for direct links to their documentation. |
| 47 | + |
| 48 | +- [**Upload API**](https://pdfrest.com/apitools/upload-files/) |
| 49 | + - Parameters |
| 50 | + - `file`: The file to be uploaded to the pdfRest server |
| 51 | + - `url`: The URL of a file publicly available on the internet to upload to the pdfRest server |
| 52 | + |
| 53 | + |
| 54 | + |
| 55 | +- [**Convert to PDF/A API**](https://pdfrest.com/apitools/convert-to-pdfa/) |
| 56 | + - Parameters: |
| 57 | + - One of: |
| 58 | + - `file`: The file to be sent in the request's form data (dynamic) |
| 59 | + - `id`: The `id` of the uploaded file on the pdfRest server (dynamic) |
| 60 | + - `output_type`: The desired PDF/A type for the output file (optional) |
| 61 | + - `rasterize_if_errors_encountered`: Whether a page should be rasterized in the event an error is encountered (optional) |
| 62 | + - `output`: The name of the output file (optional) |
| 63 | + |
| 64 | + |
| 65 | + |
| 66 | +- [**Merge PDFs API**](https://pdfrest.com/apitools/merge-pdfs/) |
| 67 | + - Parameters |
| 68 | + - `id`: The list of file id's uploaded to the pdfRest server |
| 69 | + - For `id`'s value, use `<idX>` where `X` is the number of the file, as shown in the image below. You may use as many `<idX>`'s as you like, but remember to include the same amount of values for the `type` and `pages` lists! |
| 70 | + - `type`: The list of input types for the given documents |
| 71 | + - Either `file` or `id`, but for the purposes of this example they will all be `id` |
| 72 | + - `pages`: What pages of each document should be in the final merged document (for this example, `1-last` uses all pages). |
| 73 | + |
| 74 | + |
| 75 | + |
| 76 | +If you'd like to use a tool that isn't explicitly shown here, most tools can be easily added simply by defining the parameters as shown in the [pdfRest API Toolkit Reference Guide](https://docs.pdfrest.com/pdfrest-api-toolkit-cloud/api-reference-guide/). |
| 77 | + |
| 78 | +--- |
| 79 | +## Step 3: Create Visual Elements in Bubble |
| 80 | + |
| 81 | +1. On your page, drag out a **Group**. This will contain the UI for the file action. |
| 82 | +2. Inside the **Group**, add a **File Uploader** element. This lets users select a PDF. For merging PDFs, use two or more **File Uploader** elements. |
| 83 | +3. Add a **Dropdown** if you want the user to select options (e.g., *PDF/A conformance level* via the `output_type` parameter). |
| 84 | +4. Add a **Button** (e.g. “Convert to PDF/A” or “Merge PDFs”). |
| 85 | + |
| 86 | +These elements will connect to workflows that call the pdfRest API. |
| 87 | + |
| 88 | +A simple visual implementation of Convert to PDF/A might look like the following: |
| 89 | + |
| 90 | + |
| 91 | + |
| 92 | +For defining the options in the drop down, make sure to match the values *exactly* as defined in the [Convert to PDF/A documentation](https://docs.pdfrest.com/pdfrest-api-toolkit-cloud/api-reference-guide/#/pdfa). |
| 93 | + |
| 94 | + |
| 95 | + |
| 96 | +A simple implementation of a Merge PDFs workflow might look like the following: |
| 97 | + |
| 98 | + |
| 99 | + |
| 100 | +Note that this uses *two* **File Uploader** components. You can customize this with as many as required for your particular implementation. |
| 101 | + |
| 102 | +--- |
| 103 | +## Step 4: Configure Workflows |
| 104 | + |
| 105 | +For each button, create a **Workflow** that connects the visual elements to the API calls: |
| 106 | + |
| 107 | +#### Convert to PDF/A Workflow |
| 108 | + |
| 109 | +A workflow for Convert to PDF/A might look like the following: |
| 110 | + |
| 111 | + |
| 112 | + |
| 113 | +To accomplish this, define the following: |
| 114 | +- Click the **+** button, hover over **Plugins**, and select `pdfRest - PDF/A` from the options. |
| 115 | +- Pass the `file` from the `FileUploader` for your `PDF/A` group. |
| 116 | +- Also pass the `output_type` value from the `Dropdown` element you created earlier |
| 117 | + - Include any other optional values, such as `rasterize_if_errors_encountered` if you'd like to dynamically change the value from its default. |
| 118 | + |
| 119 | + |
| 120 | + |
| 121 | +- Finally, click the **+** button again and choose **Navigation** -> **Open an external website** |
| 122 | + - Here, you can use the `Result of step 1 (pdfRest - PDF/A)'s outputUrl` |
| 123 | + - If configured in this way, it will open the processed PDF into a new tab |
| 124 | + |
| 125 | + |
| 126 | + |
| 127 | +#### Merge PDFs Workflow (Backend) |
| 128 | + |
| 129 | +A **Workflow** for Merge PDFs might look like the following: |
| 130 | + |
| 131 | + |
| 132 | + |
| 133 | +Before any other configuration, we'll define a new **Data type** called `OutputFile`. This will contain the `url` of the processed output file. |
| 134 | +- Choose the **Data** tab in the navigation on the left side of the screen |
| 135 | +- In the **New type** field, enter `OutputFile` |
| 136 | + |
| 137 | + |
| 138 | + |
| 139 | +- Add a **Field** on `OutputFile` called `url` |
| 140 | + |
| 141 | + |
| 142 | + |
| 143 | +Back in the **Workflow** tab, define the following: |
| 144 | +- Click the **+** button, then choose **Plugins** -> `pdfRest - Upload`. |
| 145 | +- Set either the `url` or `file` parameter to the user inputs (for the purposes of this example, `file` is used). |
| 146 | + - Repeat the above step for however many files the user is merging together. |
| 147 | + |
| 148 | + |
| 149 | + |
| 150 | +- Click the **+** button, then choose **Plugins** -> `pdfRest - Merge`. |
| 151 | +- Define the `id` for each uploaded file with `Result of step X (pdfRest - Upload)'s files: first item's id`. |
| 152 | + - Make sure you choose `first item's id`, as there will always only be one item in the `files` array from each Upload call. |
| 153 | + - Note that for the purposes of this example, there are only two files, but this can be expanded to your needs. |
| 154 | + |
| 155 | + |
| 156 | + |
| 157 | +- To use a **Download File** button, click the **+** button and choose, **Data (Things)** -> `Create a new thing...` |
| 158 | + - Choose the **Data type** `OutputFile` that was defined earlier |
| 159 | + - Set the `url` to be equal to `Result of step 3 (pdfRest - Merge)'s outputUrl` |
| 160 | +- Finally, click the **+** button and choose, **Element Actions** -> `Display data in a group/popup` |
| 161 | + - Set the **Element** to `Group OutputFile`, and **Data to Display** as `Result of Step 4 (Create a new OutputFile...)` |
| 162 | + |
| 163 | + |
| 164 | + |
| 165 | +When configured correctly, the **Download** button should then take you to the URL of the newly merged documents. |
| 166 | + |
| 167 | +--- |
| 168 | +### Conclusion |
| 169 | + |
| 170 | +By installing the API Connector, creating visual elements, and configuring workflows, you’ve now linked Bubble.io to the pdfRest API Toolkit's Upload, PDF/A, and Merge PDFs endpoints. The pdfRest API Toolkit includes many tools for Compression, Security, Digital Signatures, and so much more that can be connected in similar fashion. |
| 171 | + |
| 172 | +Once you’ve mastered this foundation, you can extend your Bubble.io app into a complete document automation platform! [Sign up for a free pdfRest Starter account](https://pdfrest.com/getstarted/) and start exploring the possibilities. |
0 commit comments