Overview

This article introduces how to send emails from Kintone records using Zapier and Gmail. 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)

Sample image

The overall solution will operate as follows.

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.

Prepare the Purchase Order Management App

This tutorial uses 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.
This section describes how to prepare the Purchase Order Management App.

Create the Form

Create an App with the following field and settings. Save the form when finished.

Set the following fields and settings for the Table field.

The form should look like the following:

Note

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.

Set the Process Management Settings

Open the App Settings tab and navigate to Process Management under General Settings.

Check the Enable process management check box to enable the process management feature.
Set Process Management settings with the following. Note that the status names will be used in the code, and they are case-sensitive.

• Status
  Order received, Order confirmed, Confirmation email sent, Shipped, Arrived, Suspended

Under Process Flow Settings, set up the flow like the following.

• Process list

  Status	Assignee	Action	Next Status
  Order received	Set to anybody	Confirm order Suspend	Order confirmed Suspended
  Order confirmed	-	Set confirmation email	Confirmation email sent
  Confirmation email sent	-	Product shipped	Shipped
  Shipped	-	Product arrived	Arrived
  Suspended	-	Prepare order	Order confirmed

Generate an API Token

Open the App Settings tab and click API Token under Customization and Integration.
Click the Generate button and check Edit records. Then save the settings.
Make a note of the generated API token, as it will be necessary later for the customization code. Also make a note the App ID (in the following sample application, the App ID is 7).

Prepare the Email Sent Log App

Create an App with the following field and settings. Save the form when finished.

Sample Code

In the Purchase Order Management App, prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings .
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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

(function() {
  'use strict';
  kintone.events.on('app.record.detail.process.proceed', function(event) {
    if (event.nextStatus.value === 'Order confirmed') {
      var record = event.record;
      var trackingNumber = record.tracking_no.value;
      var poRecordNumber = record.$id.value;
      var emailAddress = record.email_address.value;
      var customerName = record.customer_name.value;
      var items = record.items.value;
      var itemsTable = '';
      items.forEach(function(item) {
        var itemName = item.value.item_name.value;
        var unitPrice = '$ ' + Number(item.value.unit_price.value).toFixed(2);
        var quantity = item.value.quantity.value;
        var subtotal = '$ ' + Number(item.value.subtotal.value).toFixed(2);
        var itemTableRow = '<tr><td style="padding: 5px; border: 1px solid #000;">' + itemName + '</td>' +
        '<td style="padding: 5px; border: 1px solid #000;">' + unitPrice + '</td>' +
        '<td style="padding: 5px; border: 1px solid #000;">' + quantity + '</td>' +
        '<td style="padding: 5px; border: 1px solid #000;">' + subtotal + '</td></tr>';
        itemsTable += itemTableRow;
      });
      var total = '$' + Number(record.total.value).toFixed(2);
      var emailBody = '<div>Hi ' + customerName + ',</div><br>' +
      '<div>Thanks for your purchase. Here are the items that you ordered.</div><br>' +
      '<table style="border-collapse: collapse; border: 1px solid #000;">' +
        '<thead style="text-align: center;"><tr>' +
          '<th style="padding: 5px; border: 1px solid #000;">Item name</th>' +
          '<th style="padding: 5px; border: 1px solid #000;">Unit price</th>' +
          '<th style="padding: 5px; border: 1px solid #000;">Quantity</th>' +
          '<th style="padding: 5px; border: 1px solid #000;">Subtotal</th>' +
        '</tr></thead>' +
        '<tbody>' + itemsTable + '</tbody>' +
        '<tfoot style="text-align: center;"><tr>' +
          '<td style="padding: 5px; border: 1px solid #000;">--</td>' +
          '<td style="padding: 5px; border: 1px solid #000;">--</td>' +
          '<td style="padding: 5px; border: 1px solid #000;">Total:</td>' +
          '<td style="padding: 5px; border: 1px solid #000;">' + total + '</td>' +
        '</tr></tfoot>' +
      '</table><br>' +
      '<div>Your items will be shipped as soon as possible. Your tracking number is ' + trackingNumber + '.</div><br>' +
      '<div>Best,</div><div>The Kintone Team</div>';
      var postBody = {
        'app': EMAIL_SENT_LOG_APP_ID,
        'record': {
          'tracking_no': {
            'value': trackingNumber
          },
          'po_record_no': {
            'value': poRecordNumber
          },
          'email_address': {
            'value': emailAddress
          },
          'email_subject': {
            'value': 'Hi ' + customerName + ', here are your order details! (Order #' + trackingNumber + ')'
          },
          'email_body': {
            'value': emailBody
          }
        }
      };

      kintone.api(kintone.api.url('/k/v1/record.json', true), 'POST', postBody, function(resp) {
        console.log(resp);
      }, function(error) {
        console.log(error);
      });
    }
  });
})();

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:

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

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.

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

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

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 click on Webhooks. Click the [+] button to create a new Webhook setting. Under Description, give the Webhook setting an appropriate title. 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.

Back in Zapier, click Continue. The next setting will test to see if the webhook from the Kintone record will be caught by Zapier. Navigate back to Kintone, and create a new record in the Purchase Order Management App. 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.

Click Continue.

Set Up the Send Email Action

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.

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

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.

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

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.

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.

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.

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 when creating the Purchase Order Management App. An example of the form is shown below.

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.

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.

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.

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

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 Update Status Event is set up to run the main code in the handler if the next status is Order confirmed.

1
2
3
4
5

kintone.events.on('app.record.detail.process.proceed', function(event) {
  if (event.nextStatus.value === '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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

var record = event.record;
var trackingNumber = record.tracking_no.value;
var poRecordNumber = record.$id.value;
var emailAddress = record.email_address.value;
var customerName = record.customer_name.value;
var items = record.items.value;
var itemsTable = '';
items.forEach(function(item) {
  var itemName = item.value.item_name.value;
  var unitPrice = '$ ' + Number(item.value.unit_price.value).toFixed(2);
  var quantity = item.value.quantity.value;
  var subtotal = '$ ' + Number(item.value.subtotal.value).toFixed(2);
  var itemTableRow = '<tr><td style="padding: 5px; border: 1px solid #000;">' + itemName + '</td>' +
  '<td style="padding: 5px; border: 1px solid #000;">' + unitPrice + '</td>' +
  '<td style="padding: 5px; border: 1px solid #000;">' + quantity + '</td>' +
  '<td style="padding: 5px; border: 1px solid #000;">' + subtotal + '</td></tr>';
  itemsTable += itemTableRow;
});
var total = '$' + Number(record.total.value).toFixed(2);

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

var emailBody = '<div>Hi ' + customerName + ',</div><br>' +
  '<div>Thanks for your purchase. Here are the items that you ordered.</div><br>' +
  '<table style="border-collapse: collapse; border: 1px solid #000;">' +
    '<thead style="text-align: center;"><tr>' +
      '<th style="padding: 5px; border: 1px solid #000;">Item name</th>' +
      '<th style="padding: 5px; border: 1px solid #000;">Unit price</th>' +
      '<th style="padding: 5px; border: 1px solid #000;">Quantity</th>' +
      '<th style="padding: 5px; border: 1px solid #000;">Subtotal</th>' +
    '</tr></thead>' +
    '<tbody>' + itemsTable + '</tbody>' +
    '<tfoot style="text-align: center;"><tr>' +
      '<td style="padding: 5px; border: 1px solid #000;">--</td>' +
      '<td style="padding: 5px; border: 1px solid #000;">--</td>' +
      '<td style="padding: 5px; border: 1px solid #000;">Total:</td>' +
      '<td style="padding: 5px; border: 1px solid #000;">' + total + '</td>' +
    '</tr></tfoot>' +
  '</table><br>' +
  '<div>Your items will be shipped as soon as possible. Your tracking number is ' + trackingNumber + '.</div><br>' +
  '<div>Best,</div><div>The Kintone Team</div>';

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var postBody = {
  'app': EMAIL_SENT_LOG_APP_ID,
  'record': {
    'tracking_no': {
      'value': trackingNumber
    },
    'po_record_no': {
      'value': poRecordNumber
    },
    'email_address': {
      'value': emailAddress
    },
    'email_subject': {
      'value': 'Hi ' + customerName + ', here are your order details! (Order #' + trackingNumber + ')'
    },
    'email_body': {
      'value': emailBody
    }
  }
};

kintone.api(kintone.api.url('/k/v1/record.json', true), 'POST', postBody, function(resp) {
  console.log(resp);
}, function(error) {
  console.log(error);
});

Reference

• Supported Zapier triggers and actions for Kintone

Note

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