Send Purchase Order Confirmation Emails from Records

Contents

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 (External link) page for details)

Sample image

The overall solution will operate as follows.

Image: The overall solution between Kintone, Zapier and Gmail.

  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 (External link) with the following field and settings. Save the form when finished.

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 See the table below for the fields to place inside.
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 - - Used to position the Total field

Set the following fields and settings for the Table field.

Field Type Field Name Field Code Notes
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
Number Quantity quantity Use thousands separators: Checked
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

The form should look like the following:

Screenshot: The fields placed into the form.

tips
Note

Item name, Unit price, Quantity, and Subtotal are within a Table field called Items. Refer to the Adding Tables into Forms (External link) 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 (External link) 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

Screenshot: The process management status settings.

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

Screenshot: The process management Process Flow settings.

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).

Screenshot: The API Token settings.

Prepare the Email Sent Log App

Create an App (External link) with the following field and settings. Save the form when finished.

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 - - Used to break up form details, optional

Screenshot: The fields placed into the form.

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 (External link).
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', true), 'POST', postBody, function(resp) {
        console.log(resp);
      }, function(error) {
        console.log(error);
      });
    }
  });
})();

Screenshot: The necessary files have been uploaded on the JavaScript and CSS Customization page.

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:

Screenshot: A sample screenshot of Purchase Order Management App

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

Screenshot: A sample screenshot of Email Sent Log App

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.

Screenshot: User searchs Webhook in Zapier.

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

Screenshot: User selects Choose App and Choose Trigger Event in Zapier.

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

Screenshot: User copies Custom Webhook URL in Zapier.

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.

Screenshot: User adds New Webhook in Zapier.

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.

Screenshot: User tests to see if Zapier catches the request.

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.

Screenshot: User searchs Gmail in Zapier.

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

Screenshot: User selects Choose App and Choose Trigger Event in Zapier.

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.

Screenshot: User selects Kintone's fields in Zapier.

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.

Screenshot: User clicks plus button in Zapier.

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.

Screenshot: User searches Kintone in Zapier.

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.

Screenshot: User selects Choose App and Choose Trigger Event in Zapier.

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.

Screenshot: User fills in the authentication details in Zapier.

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.

Screenshot: User sets up the Record Po Record No Value in Zapier.

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.

Screenshot: User sets up the Kintone Status Update settings in Zapier.

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.

Screenshot: A sample email sent through the Zapier integration.

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

Screenshot: The record status is 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 Proceed Process 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', true), 'POST', postBody, function(resp) {
  console.log(resp);
}, function(error) {
  console.log(error);
});

Reference

tips
Note

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