Google Drive

Google Drive allows for external applications to create and update files within the Google platform. Currently <form.io> provides form actions to create and update fields within Google Sheets. In order to use the Google Sheet integration, you will need to get an OAuth token for Google Drive and get a spreadsheet ID of the Google Sheet.

OAuth Client

To get your OAuth token, log in with you google credentials on Google Developers Console

Select Use Google API. Then click on Drive API and ensure that it is enabled.

If you already have a project in the console, click on it in the console. Otherwise, click Create Project and fill out the required fields.

A popup will appear which ask you for project name. Add the project name and click the Create button.

Once the project is created it will appear in the ‘Dashboard’ as well as in the ‘Header’. To go to API Manager page click on User Google APIs. It will lead you to API Manager page.

Find Credentials Tab inside API Manager to create new credential. While creating new credential please make sure to select OAuth client ID.

Once done, you will be redirected to Create Client ID page. If you get message like To create an OAuth client ID, you must set a product name on the consent screen click on Configure Consent Screen button. Otherwise this step can be skipped.

Enter the name of your app in the Name field and then Save. The rest of the fields may be skipped.

It will now ask you to set Application Type having multiple options like “Web Applications”, “Android” etc. Select Web Application.

In the Authorized Redirect URIs section add “https://developers.google.com/oauthplayground” if it is not already there.

Once done, click on the Create button and it will create Client ID and Secret Key for you.

Refresh Token

To create a Refresh Token go to https://developers.google.com/oauthplayground/ and sign in using your Google Credentials.

Click the gear icon in the upper right corner and check the box labeled Use your own OAuth credentials if it isn’t already checked, then:

  • Make sure that:
    • OAuth flow is set to Server-side.
    • Access type is set to Offline (this will ensure you get a refresh token and an access token instead of just an access token).
  • For the OAuth Client ID, enter the Client ID obtained above.
  • For the OAuth Client secret, enter the Client secret obtained above.

Under Step 1 on the left hand side of the page, expand the Drive API v3 and select the indicated services and click Authorize APIs.

Click Allow to authorize the app.

The above step will generate an Authorization Code for you. Be sure that ‘Auto-refresh the token before it expires’ is checked and then click on Exchange authorization code for token button.

Your Refresh Token should be generated. You will need the refresh token for the next step.

{
  "access_token": "ya29.fwKue996sM2tUwlgASySADFjlsdSDFCcCbHd4gaaEKDUjdJD237o-pF7hhrXvm6MQNbYZq",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "1/GowydzqSDFjdjJjhgoi6kjJSE69mcnO6zK6XiATCKT"
}

Settings

Go to your project settings on form.io and go to the Google Drive tab. Enter the Client ID and Client Secret Key from the first step above. Then enter the Refresh Token from the second step. Save the settings. This will provide access to your files in Google Drive to your form.io application.

Google Sheets

In order to set up integration between a form and a Google Sheet, you will need to add an action to the form. Either create a new form or select an existing form and add a Google Sheet action to it.

On the Actions tab, select “Google Sheets” from the list of the Action.

Get the Spreadsheet ID and Sheet Name from the Google Sheet. You can find the Sheet ID in Sheet URL.

Provide Sheet ID and Sheet Name. Next you will need to map the fields on your form to columns in the Sheet. You can find Spreasheet keys at the top of Spreadsheet columns. For each field, specify the column key e.g. ‘A’ in ‘Column [First Name]. It will add First Name data in column ‘A’.

Now it’s time to test our settings. Go to the view tab of your form and try to submit it with relevent data in the fields.

You should see the field titles are automatically created in the Google Spredsheet and the correct form data is added to the columns configured in the action form fields. Any additional form submissions will add data to the subsequent rows.