Send emails from Kintone records with Gmail and Zapier

 

Introduction

This tutorial will explain how to set up a simple order confirmation email solution using Kintone as the data source and management tool, Gmail as the mailing service, and Zapier as the connection between the two. Therefore, in addition to a Kintone environment, the following will also need to be prepared:

  1. A Gmail account to act as the email sender
  2. A Zapier account that allows multi-step and premium Apps (refer to Zapier's Plans & Pricing page for details)

 The overall solution will operate as follows.

 usdocs-330.png

  1. When the process management status of a record in a Purchase Order Management App proceeds to Order confirmed, a record is created in an Email Sent Log App with the format for the order details that will be sent by email.
  2. Creating a record in the Email Sent Log App triggers a Zapier Zap that sends an email with the order details.
  3. After the email is sent, the next step in the Zap updates the process management status of the Purchase Order Management App record to Confirmation email sent.

Set Up the Apps

This tutorial will use two Kintone Apps: a Purchase Order Management App to manage orders from customers, and an Email Sent Log App to keep a record of confirmation emails sent. 

Create the Purchase Order Management App

Create a new App from scratch. Refer to the Creating an App from Scratch article from the Kintone Help Center for information on how to create Apps from scratch. Add the following fields in like so, and be sure to change the field codes as well.

 

purchase_order_management.png

 

Field Type Field Name Field Code Notes
Text Tracking No.  tracking_no  -
Text Customer name  customer_name
Link  Customer email address  email_address
  • Set to E-mail address
Table Items items
  • Contains the Item name, Unit price, Quantity, and Subtotal fields
Text  Item name  item_name
  • Part of the Items table 
Number  Unit price  unit_price
  • Number of Decimal Places to Display: 2
  • Unit of measure: $, Prefix
  • Part of the Items table 
Number  Quantity  quantity
  • Use thousands separators: Checked
  • Part of the Items table
Calculated  Subtotal  subtotal
  • Formula: unit_price * quantity
  • Number with thousands separator (1,000): Checked
  • Number of Decimal Places to Display: 2
  • Unit of measure: $, Prefix
  • Part of the Items table
Calculated  Total  total
  • Formula: SUM(subtotal)
  • Number with thousands separator (1,000): Checked
  • Number of Decimal Places to Display: 2
  • Unit of measure: $, Prefix
Record number  Record number  Record_number -
Created datetime  Created datetime  Created_datetime  -
Blank space  N/A  N/A
  •  Used to position the Total field

 

Note that Item name, Unit price, Quantity, and Subtotal are within a Table field called Items. Refer to the Adding Tables into Forms article from the Kintone Help Center for details on creating Table fields. 

 

Save the form and continue to the App Settings tab. Navigate to Process Management under General Settings

 

First, check the Enable process management checkbox to enable the process management feature. Then, under Status Settings, create the following status list. Note that the status names will be used in the code, and they are case-sensitive.

 

process_management_statuses.png 

 

Next, under Process Flow Settings, set up the flow like so.


process_management_settings.png

 

After completing the flow preparation, return to the App Settings tab, and navigate to API Token under Customization and Integration. Generate an API Token and check the View Records and Edit Records permissions as shown below.

 

api_token.png

 

Take note of the API token as it will be used in the later steps, save the settings and activate the App.

Create the Email Sent Log App

Create another App from scratch. This time, add the following fields into the App form.

 

email_sent_log.png

 

Field Type Field Name Field Code Notes
Text  Tracking No.  tracking_no  -
Number  Purchase Order Record No.  po_record_no  -
Created datetime  Email sent time  email_sent_time
Link  Customer email address  email_address
  • Set to E-mail address
Text  Email subject  email_subject
Rich text  Email body  email_body
Border  N/A  N/A
  •  Used to break up form details, optional

 

When completed, save the form and activate the App.

Add the Sample Code to the Purchase Order Management App

Save the following sample code as a JavaScript file. On line 44, replace { EMAIL SENT LOG APP ID } with the App ID of the created Email Sent Log App. The App ID is the number that appears after the /k/ in the URL of the App. For example, in the case of https://example.kintone.com/k/35, the App ID is 35.

 

 

After saving the JavaScript sample code, navigate to the Purchase Order Management App and click the gear icon to access the App Settings. Navigate to the App Settings tab and then to the JavaScript and CSS Customization settings under Customization and Integration. Click Add File under Upload JavaScript for PC and upload the saved JavaScript file as shown below.

 

js_settings.png

 

Save the settings and update the App. Test out the customization by creating a new record in the Purchase Order Management App and proceeding the process management status to Order confirmed. This test record will be used later on in the Zapier set up so make sure that the Customer email address field is either a personally accessible email address or a dummy address. Check the Email Sent Log App to confirm that a new record has been created with details from the record in the Purchase Order Management App.

 

Below is a sample screenshot of the Purchase Order Management App record

 

po_record.png

 

 

Below is a sample screenshot of the Email Sent Log App record

 

email_sent_record.png

Set Up the Zapier Zap

Log in to Zapier and click the Make A Zap button to start the Zap set up. Give the Zap a name.

Set Up the Add Record Trigger

In the search box under Choose App & Event, type in Webhook and select Webhooks by Zapier. As a side note, while a Kintone app for Zapier exists, the Add Record trigger cannot retrieve Rich text field data. Therefore, in order to retrieve the email body content held within the Rich text field, it is necessary to use a webhook as the Zap trigger instead.

 

webhook.png

 

The App and Trigger Event will be displayed. Select Webhooks by Zapier for the App, and Catch Hook for the Trigger Event. Click Continue.

 

catch_hook.png

 

The Customize Request settings will display a Webhook URL. Copy this URL. Other settings may be left as is.

 

customize_request.png

 

Navigate back to Kintone on a different browser tab and access the settings of the Email Sent Log App. Click on the App Settings tab and under Customization and Integration, click on Webhooks. Click the [+] button to create a new Webhook setting. Under Description, give the Webhook setting an appropriate title. Then, paste the copied URL from Zapier into the URL field. Under Events, select Record is added. When complete, click Save to save the settings and then update the App.

 

Webhook.png

 

 

Back in Zapier, click Continue. The next setting will test to see if the webhook from the Kintone record will be caught by Zapier. Create a new record in the Purchase Order Management App and proceed the process management to Order confirmed. This should create a new record in the Email Sent Log App, which will send a webhook to Zapier. If the test was successful, the data of the created record in the Email Sent Log App should be retrieved and shown in Zapier.


retrieved.png

 

Click Continue.

Set Up the Send Email Action

Next, set up the action that will be executed after the trigger. In this case, Gmail will be used to send the email data. 

 

In the Choose App & Event field, enter in Gmail and select the Gmail icon.

 

gmail_widget.png

 

Select Send Email as the action event from the drop down box. 

 

send_email.png

 

Click Continue. In the Choose Account settings, if the appropriate Gmail account is already linked, select that account from the drop down. If not, click Add a New Account, and link the necessary Gmail account. Once added and selected, click Continue.

 

The next step is to map the Kintone data from the retrieved record to the data needed to send the email. Fields can be filled with either manually inserted text or with a variable from the Kintone form. The drop down will show field types as well as field values, so be careful to select the appropriate value. Also note that the field value shown is just to aid in setup to see what the actual value will look like, and is only used to template the form.

 

For example, the To field should contain the email address of the customer. From the drop down menu, both the email address field type and the value can be selected, so it's necessary to make sure that the value is selected as shown below.

 

selecting_value.png

 

All the Zapier field mappings and field settings are as follows:

 

Field Name Field Value
 To  Record Email Address Value
 From  Linked Gmail Account
 From Name (optional)  Optional
 Subject  Record Email Subject Value
 Body Type  HTML
 Body   Record Email Body Value

 

Click Continue and test the action. An email with the mapped values will be sent to the email address set in the To field.

Set Up the Edit Record Action

Click the [+] button below the completed step to add a new step to the Zap.

 

plus_button.png

 

This will add an additional step to the Zap that will be activated when the Gmail email is successfully sent. In the search box, enter Kintone. Select the Kintone App when it appears.

 

kintone_search.png

 

In the next settings, select Update Status from the dropdown menu as the action event. This action event will be used to update the status of the Purchase Order Management App record from Order confirmed to Confirmation email sent. Click Continue.

 

update_status.png

 

From the Kintone account dropdown, select Add a new account. A pop-up will appear asking for details of the Kintone account and the App ID and API token of the App whose records will be edited. Fill in the details and be careful to read the explanations of each field carefully. The API token is the token that was generated in the Create the Purchase Order Management App section of this article. An example of the form is shown below.

 

login.png

 

Click Yes, Continue in the pop up to save the settings, and then click Continue in the main Zapier setup page to continue. 

 

The next settings will set up the status update settings. Set the Record ID field as the Record ID of the Purchase Order Management App record to update. Since the Email Sent Log App contains the Record ID of the original Purchase Order Management App record, it is accessible through the data that was obtained with the webhook. From the drop down menu, select Catch Hook, and then Record Po Record No Value. Be careful to select the Record ID that corresponds to the Purchase Order Management App record, and not the Record ID of the Email Sent Log App record.

 

status_update.png

 

Since there is no assignee in the process management settings, the Log in Name of Assignee field can be omitted. For Action Name, manually add in Sent confirmation email. The completed setup is shown below.

 

status_setting.png

 

Click Continue and test the action. If the action is successful, then the Zap is complete. Turn on the Zap and test the entire solution with a personal email and dummy data. A sample of the sent email is shown below.

 

email_sample.png

 

The Purchase Order Management App record status should also be automatically updated to Confirmation email sent.

 

confirmation_email_sent.png

Code Explanation

This section will explain the sample code used in the Purchase Order Management App.

 

Since the code should run only when the status of a record reaches the Order confirmed status, the Proceed Process Event is set up to run the main code in the handler if the next status is Order confirmed.

 

 

This section of the sample code declare the values necessary for the email template. The string itemsTable is declared to hold the HTML table element that contains the items from the Items table of the record. A forEach loop is used to iterate over each item in the record table and insert the generated table row element into the itemsTable string.

 

 

The string emailBody is then declared to contain the HTML template of the email. The values declared in the previous section are inserted into the template.

 

 

Finally, the post body for a Kintone REST API Request is created, containing the values necessary to create an Email Sent Log App record. The Kintone API method is then declared and the REST API is executed to create a new record in the Email Sent Log App with the details from the Purchase Order Management App record.

 

Finally

Zapier is a cloud service that can help connect Kintone and other services together to achieve seamless workflows. This tutorial explained a simple confirmation email solution using Gmail, but there are hundreds of other services available on Zapier that can also be integrated with Kintone. Try experimenting with other familiar services to create more workflow solutions using Kintone and Zapier.

 

Note that Kintone is not affiliated with Zapier and technical support for Zapier integrations with Kintone cannot be provided.

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!