Introduction

The Google API Integration plugin includes Google Auth, Google Calendar, Google Drive, Google Sheets. Utilises OAuth2.0 where you can authorise using frontend and the authorization code will be passed through backend to get the bearer token. It uses REST API to communicate to Google.

Google Auth

• Form Element

• Securely enable users to sign in with their Google accounts via OAuth 2.0

• Authorise and retrieve bearer token from frontend to be saved into App Variable

Google Calendar

• Post Processing Tool

• Allow users to add calendar events

Google Drive

• File Upload Element and Datalist Binder

• Allow users to upload file to Google Drive

• Retrieves all files from Google Drive in datalist

Google Sheets

• Form Binder

• Perform CRUD on Google Sheets

Plugin Info

Plugins Available in the Bundle:

1. Google Auth

2. Google Calendar Add Event
3. Google Drive Datalist Binder
4. Google Drive File Upload
5. Google Sheets Form Binder

This plugin bundle is compatible with Joget DX 8 and onwards.

Expected Outcome

To be able to authorise to Google using Google Auth, and perform actions related to Google Calendar, Google Drive, and Google Sheets, such as adding Google Calendar events, uploading files to Google Drive, retrieving file lists, and performing CRUD operations on Google Sheets.

Get Started

Prerequisites

1. Google Cloud Console Setup

Setup an application and project in Google Cloud Console by referring to Google Documentation.

Figure 1: Google Cloud Console Create Project 

2. Google OAuth 2.0 Client ID

Create a Google OAuth 2.0 Client ID and remember to key in the redirect URIs following the format as in Table 1. You will need to note down the Client ID and Client secret to be used in the plugin configuration later.

Figure 2: Google Cloud Console Create Web Application

Table 1: Format for redirect URI

You will face this error if you did not key in the Redirect URI. You can also retrieve the redirect URI by this way, by clicking on the "error details".

Figure 3: Redirect URI Mismatch Error

3. Enable Necessary APIs

On the sidebar, search for APIs and Services > Library and enable necessary APIs such as Google Calendar API, Google Sheets API, Google Drive API.

Figure 4: Google Cloud Console API Library

4. Setup Test User

On the sidebar, navigate to OAuth consent screen > Test users, click on Add Users to add a new test user to be able to authenticate to the application.

Figure 5: Google Cloud Console Add Test User

Steps

Where to get the plugin

Refer to Source Code and Plugin Download.

How to install and use the plugin

1. You can choose to import the demo app. For demo app, go to Joget Home or All Apps and click on Import App to import the downloaded demo app (refer to another KB - Import Joget App for more details). Please add your Google Client ID and Google Client Secret to the App Variable to allow the plugin to run without any issues.

Figure 6: Add Google Client ID and Google Client Secret

2. Each plugin will be described separately in each section to ease readability.

Google Auth

1. Create a form and drag the Google Auth element into the form. Fill in the plugin configurations by referring to Google Auth Properties.

Figure 7: Google Auth Create Form

2. In the UI, you can see a button which is the Google Auth element. Once you click on it, a popup will appear to authorise your Google identity.

Figure 8: Google Auth Authentication

3. After successful authentication, a message will appear which shows that the popup window will close automatically in 10 seconds. You can check that the bearerToken in the app variable has been updated with the latest value. Now you will be able to communicate to the Google services such as Google Calendar, Google Drive and Google Sheets.

Figure 9: Google Auth Authentication Successful

Google Calendar

1. Create a form with two Text Fields for Calendar ID and Event Title, and two Date Picker fields for Start Date and End Date.

Figure 10: Google Calendar Create Form

2. On the right upper corner, click on Generate App > Generate CRUD.

Figure 11: Google Calendar Generate CRUD

3. Go to Settings > Post Form Submission Processing, and attach the Google Calendar Add Event post processing tool. 

Figure 12: Google Calendar Post Processing Tool

4. Fill in the plugin configurations. For more information, please refer to Google Calendar Add Event Properties.

Figure 13: Google Calendar Fill Plugin Configurations

5. Run the UI. Go to Manage Google Calendar and add a new record. Fill in the Calendar ID with your authorised email, the event title, start date and end date.

Figure 14: Google Calendar Add New Record

6. You can go to Google Calendar and check the calendar. You can see that the record added in Joget has been added to the calendar.

Figure 15: Google Calendar Check Added Calendar

Google Drive File Upload

1. Create a form and drag the Google Drive File Upload element into the form. No complicated configurations needed, just label and ID of the field.

Figure 16: Google Drive Create New Form

2. On the right upper corner, click on Generate App > Generate CRUD.

Figure 17: Google Drive Generate CRUD

3. Go to the UI. Click on Manage Google Drive and add a new record.

Figure 18: Google Drive Add New Record

4. Go to Google Drive. You can see that your file has been added.

Figure 19: File created in Google Drive

Google Drive Datalist Binder

1. Create a new list, select the Google Drive Datalist Binder at the Select Source of Data. No configurations will be needed.

Figure 20: Google Drive Create New List

2. Drag the columns into the table. Save and add this list into the UI.

Figure 21: Google Drive Drag Column into List

3. Run the UI. You can now see the list of files you have in Google Drive, including the files shared to you, and the files which are still in the Trash.

Figure 22: Google Drive Datalist Binder UI

Google Sheets Form Binder

1. Create a form to add new Google Sheets and add a text field which will hold the spreadsheet name data.

Figure 23: Google Sheets Create New Form to Add New Spreadsheet

2. Go to Settings > Save Data To and attach the Google Sheets Form Binder.

Figure 24: Google Sheets Attach Form Binder

3. Fill in the plugin configurations. For more information, you can refer to Google Sheets Form Binder Properties. Attach this form to the UI without CRUD.

Figure 25: Google Sheets Plugin Configurations for New

4. Create another form to modify the data of existing Google Sheets. Add two text fields, a select box (two options: Vertical, Horizontal) and a form grid to hold the spreadsheet data (Refer to 5.)

Figure 26: Google Sheets Create New Form to Modify Data

5. Create a form to hold the values of the form grid in 4. for Spreadsheet Data.

Figure 27: Google Sheets Create New Form for Modify Data Form Grid

6. Go to Settings > Save Data To and attach the Google Sheets Form Binder.

Figure 28: Google Sheets Attach Form Binder

7. Fill in the plugin configurations. For more information, you can refer to Google Sheets Form Binder Properties. Attach this form to the UI without CRUD.

Figure 29: Google Sheets Plugin Configurations for Modify

8. Create a new list. Attach the Google Drive Datalist Binder to retrieve all the Google Drive files, and add a button to easily filter out the Google Sheets files to modify it. Add hyperlink value of modify_google_sheets (the name of the form to modify Google Sheets added to the UI) to the button, and add hyperlink parameters to link to the correct record. To filter out the Google Sheets files, add Visibility Control to the button when field mimeType equals to the value of application/vnd.google-apps.spreadsheet. Add the list into the UI.

Figure 30: Google Sheets Create New List

9. Run the UI. Click on the Create New Google Sheet to create a new Google Sheet.

Figure 31: Google Sheets Create New Spreadsheet

10. Click on Manage Google Sheets. You can see that the spreadsheet files has the modify button. The newly created spreadsheet file is now in the list. Click on the modify button.

Figure 32: Google Sheets List from Google Drive

In Google Drive it is also there. The file has no data yet. 

Figure 33: Google Drive with New Spreadsheet

11. Modify the data by adding values in the Spreadsheet Data.

Figure 34: Google Sheets Modify Data

12. You can see that the values has been added to the Google Sheet.

Figure 35: Google Sheets Data Modified

Google Auth Properties

Configure Google Auth

Figure 36: Plugin Configurations for Google Auth

Google Calendar Add Event Properties

Configure Google Calendar Add Event

Figure 37: Plugin Configurations for Google Calendar Add Event

Google Sheets Form Binder Properties

Configure Google Sheets Form Binder

Figure 38: Plugin Configurations for Google Sheets Form Binder - Action Type New

Figure 39: Plugin Configurations for Google Sheets Form Binder - Action Type Modify Data

Source Code and Plugin Download

1. You can find the latest release at https://github.com/jogetoss/google-api-integration/releases.
2. Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.

Demo App Download

You can find the demo app at https://github.com/jogetoss/google-api-integration (.jwa file).