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:
- A Gmail account to act as the email sender
- 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.
- 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.
- Creating a record in the Email Sent Log App triggers a Zapier Zap that sends an email with the order details.
- 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.
| Field Type | Field Name | Field Code | Notes |
|---|---|---|---|
| Text | Tracking No. | tracking_no | - |
| Text | Customer name | customer_name | - |
| Link | Customer email address | email_address |
|
| Table | Items | items |
|
| Text | Item name | item_name |
|
| Number | Unit price | unit_price |
|
| Number | Quantity | quantity |
|
| Calculated | Subtotal | subtotal |
|
| Calculated | Total | total |
|
| Record number | Record number | Record_number | - |
| Created datetime | Created datetime | Created_datetime | - |
| Blank space | N/A | N/A |
|
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.
Next, under Process Flow Settings, set up the flow like so.
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.
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.
| 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 |
|
| Text | Email subject | email_subject | - |
| Rich text | Email body | email_body | - |
| Border | N/A | N/A |
|
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.
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 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.
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.
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.
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:
| 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.
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 in the Create the Purchase Order Management App section of this article. 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 Purchase Order Management App record status 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 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.