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.

Google Sheets Project

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

Select your project you would like to use at the top of the page. If you do not have a project, you can usse this modal to create a new project by clicking New Project and fill out the required fields.

Once you have created a new project, you will now click on Library and then select the Google Sheets API

Now, click Enable button to enable the sheets API.

Once, the API is enabled, you will now click on the Credentials section on the right sidebar.

Next, you will click on the Create Credentials button drop-down and then select OAuth client ID

Now, you will provide the Web Application information with the Redirect URL setup as https://developers.google.com/oauthplayground and click Create

Save your Client ID and Client Secret

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 Google Sheets API v4 and select https://www.googleapis.com/auth/spreadsheets scope and then 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.