ESign Example
Form.io allows an easy integration to send an eSign request after any action in the Form. ESign Actions are located in the Form Action section but as a requirement you must use a provider.
Form.io allows an integration with Box Sign as an eSign provider. The following is an example of how to set up an app in Box that will integrate with Form.io to allow the use of sending requests for eSignatures via Box Sign. Note that this feature is available as part of our premium components.
The Form.io Box Sign Integration will soon be deprecated
As a prerequisite, you will need to have an enterprise Box Account before beginning this step. After you have created an account with Box, go to developer.box.com and click the "Go to Dev Console" button
After logging in, you should be taken to your box files directory. You'll want to click the "Dev Console" button in the bottom left part of the page, which should take you to a screen that looks like this. Click either the button on the left or top right to Create a new App
On the next screen, you'll want to click "Custom App"
Then you'll want to make sure "Server Authentication (with JWT)" is selected on the modal that pops up, give your app a name, and then click "Create App." The Form.io API communicates to Box server-to-server via JWT which is why this option must be selected.
Upon the newly created app screen, you'll want to scroll down on the "Configuration" tab until you find "Application Scopes." Here, you'll want "Manage signature requests" and "Enable integrations" both checked. Click the "Save Changes" button in the top right part of the screen after this.
After that, scroll down to find the "Add and Manage Public Keys" section. Click the "Generate a Public/Private Keypair." This is necessary for the Form.io API to successfully authenticate with Box's servers as well as your app. NOTE: If you have two factor authentication set up for your Box Account, Box will prompt you for a code. After clicking this button, Box will download a JSON file containing your app's settings. Keep this file handy as we will need to input information from it into Box.
The next step involves submitting your app for authorization. This is required in order for the Box Sign integration to successfully complete. What you'll want to do is click on the Authorization tab and click the "Review and Submit" button.
This should open up a dialog box that allows you to provide a description for the app and then send the app for approval from your Box administrator. As soon as you click, your Box admin should receive an email that reviews the app requested for authorization.
If you are the admin, then simply click the "Review App Details" button in the email that was received from Box and then click the "Authorize" button that appears in Box on the top right part of the screen. That should conclude all the necessary changes needed in Box to prepare your app for authorization.
If Box Sign is not authorized properly, please ensure the Box Sign application has been successfully authorized from the application screen.
If not, you need to reauthorize the app from the admin console - apps tab - custom app manager.
After any Box Sign App settings change, resubmit the app from the Authorization tab and reauthorize it from the admin console.
If changes do not take effect, you may try to regenerate Public/Private Key pair
Once you have the app settings JSON file downloaded, you are ready to finally integrate with Form.io. Head over to your form.io portal, create a new project or click into an existing one, then navigate to Settings > Integration > eSign.
Using the JSON file Box downloaded, fill out the respective details here. All of these fields are needed for authentication and communication with Box. Click "Save Settings" once complete.
When setting up the Box Sign integration credentials inside the Form.io project, full Private key should be used. Copy directly from the JSON file provided by Box Sign
After saving your project settings, you are ready to create a new Form. Click on the Forms button and select "New Form" in the top right.
For this example, we will be creating a PDF Form. So select PDF Form. A test PDF form I will be using will be a 1040 tax form since that requires a signature and email address. Note that this feature works on both API and PDF forms.
The first step you'll want to complete is to add the eSign action. Go to the Actions tab in the Form Builder and select eSign (Premium). Click the "Add an action" button.
While the eSignature feature contains a lot of customizations, for this simple example, we will just click the "Save Action" button at the bottom of the page.
Once you have your action created, click on the "Edit" button of the Form Builder and drag and drop the "Signature" component from the left hand side to wherever you wish there to be an eSignature. For this example, I just re-sized the Signature field to be the length and width of the PDF's signature field
Click on the Signature component you just dragged and dropped onto the form. On the "Providers" tab, click on the drop-down and select "Box Sign." This will show two new fields - a Signer Email and a Signer Order. For this example, we will interpolate the value of another component to dynamically set the email address. So set the value of "Signer Email" to {{data.emailAddress}}
When setting up multiple Signatures with the Box Sign provider, ensure you configure the Signer Order setting for each Signature.
Click the "Save" button after to save the component
Next, drag and drop a Text Field component onto the form. In your component edit modal that appears, give the Label a value of "Email Address". Drag and re-size the component to wherever you see fit on your form.
Click the "Save Form" button. At this point, you are ready to Use the form and see the eSign action. Upon form submission, the email address that was entered in the textfield should have received an email from Box asking to sign. Go ahead and respond to that email by providing a signature.
Once you are done signing on Box's website, you will notice now that when you generate a PDF preview of your submitted form, that preview will now include your signature from Box.
Last modified 1mo ago