【Garoon JavaScript API】ワークフロー承認時にkintoneにレコード登録する

目次

概要

ワークフロー申請を承認したときのイベント kintone連携用トークンを取得するAPIを使い、Garoonのワークフローのデータをkintoneのアプリに登録します。

前提条件と注意事項

  • このカスタマイズには、クラウド版Garoonとkintoneのスタンダードコース以上の契約が必要です。
  • ワークフローJavaScriptカスタマイズは、JavaScriptを適用してから申請されたワークフローが対象になります。
    それ以前に申請されたワークフローには適用されません。
  • 代理承認時にカスタマイズが動作しない不具合を確認しています。(2019/2/21追記)

できること

Garoonのカスタマイズを使って、備品購入のワークフローの申請が承認されたときに、kintoneのアプリに申請内容を登録します。
「申請業務はGaroonで行い、承認後に発生するタスク管理はkintoneアプリで行いたい」といったシーンに活用できます。

完成イメージ

例)Garoonのワークフローにて最終承認すると、あらかじめ指定したkintoneのアプリにデータが登録されるという流れになります。

  • ワークフローが最終承認されると、ワークフロー内の赤枠のデータがkintoneのアプリにコピーされます。
  • kintoneのアプリの「ワークフローリンク」には承認されたGaroonのワークフローのURLが追加されます。
    申請者や申請経路の処理者以外のユーザーがワークフローのURLにアクセスするには、 申請データの公開設定 (External link) が必要です。

今回はkintoneのアプリにはJavaScript / CSSファイルの設定は不要です。
Garoonのワークフローの設定にのみ、JavaScript / CSSファイルを設定しカスタマイズしていきます。
kintoneアプリのフィールドコードは利用するため、まずはkintoneアプリの設定からはじめます。

kintoneアプリの設定手順

備品タスクアプリを作成する

最初はkintoneの備品タスクアプリを作成します。
完成すると、作成画面は次のようになります。
アプリの具体的な作成方法は、kintoneヘルプ「 アプリをはじめから作成する (External link) 」を参照してください。

フィールドは以下のとおり設定してください。
フィールドコードは、Garoon側に設定するJavaScriptコード内でそれぞれのフィールドを指定するための一意の文字列となります。
間違えないように設定してください。

フィールド名 フィールドコード フィールドタイプ 備考
標題 Title 文字列(一行)
備品名1 Name1 文字列(一行)
備品価格1 Price1 数値 「桁区切りを表示する」にチェック
備品名2 Name2 文字列(一行)
備品価格2 Price2 数値 「桁区切りを表示する」にチェック
合計価格 Total 数値
「桁区切りを表示する」にチェック
依頼内容 Order 文字列(複数行)
ワークフローリンク Link リンク(Webサイトのアドレス)

これでkintoneアプリの設定は完了です!
Garoon側で設定するJavaScriptファイルの中にkintoneのアプリIDを入力しますので、アプリIDは覚えておいてください。

例)https://xxxxx.cybozu.com/k/xxx/ ←アプリIDはこの太字部分に書いてある数字です。

Garoonワークフローの設定手順

ワークフローの項目の内容は、会社によって異なります。
ここでは、サンプルとして完成イメージで利用した支払申請の申請フォームにJavaScript / CSSカスタマイズを設定する流れを説明します。

① Garoonワークフローの申請フォームを作成する

まずはkintoneでアプリを準備したものと同じく、Garoonで以下の項目を配置して、支払申請ワークフローの申請フォームを作成していきます。
申請フォームの作成方法については、 Garoonヘルプ - 申請フォームの作成の流れ (External link) を参照してください。

それぞれの項目は以下のとおり設定してください。
ここでも項目コードは、JavaScriptコード内でそれぞれの項目を指定するための一意の文字列になります。

項目名 項目タイプ 項目コード 備考
標題 文字列(1行)(標準項目) Title 必須項目に設定
備品名1 文字列(1行) Name1
備品価格1 数値 Price1 「桁区切りを表示する」にチェック
備品名2 文字列(1行) Name2
備品価格2 数値 Price2 「桁区切りを表示する」にチェック
合計価格 自動計算 Total 計算内容の「合計」にチェックを入れ、「備品価格1」と「備品価格2」を追加
「桁区切りを表示する」にチェック
依頼内容 文字列(複数行) Order

上記のとおり設定が完了したら、土台となる申請フォームの作成は完了です。

② JavaScript / CSSファイルを適用する

申請フォームの作成が完了したので、ここから作成した申請フォームにJavaScriptファイルを適用していきます。

適用ファイルの準備

次のサンプルコードをエディタにコピーして、ファイル名を「grwf_to_kinapp.js」、文字コードを「UTF-8」で保存します。
ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
こちらのJavaScriptファイルには、kintoneアプリのIDを設定したり、テーブル数の設定などお客様の環境に合わせて修正していただく箇所がございます。

 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
/**
 * Garoon JavaScript APIを使ったサンプルプログラム
 *
 * 「grwf_to_kinapp.js」ファイル
 *
 * Copyright (c) 2021 Cybozu
 *
 * Licensed under the MIT License
 */
(() => {
  'use strict';
  // xxx部分にkintoneのアプリIDを入力する
  const kintoneAppId = xxx;
  const domain = window.document.location.origin;

  // kintoneにワークフローのデータを登録
  const addKintoneTask = async (token, request) => {
    const body = {
      app: kintoneAppId,
      record: {
        Title: {value: request.items.Title.value},
        Name1: {value: request.items.Name1.value},
        Price1: {value: request.items.Price1.value},
        Name2: {value: request.items.Name2.value},
        Price2: {value: request.items.Price2.value},
        Total: {value: request.items.Total.value},
        Order: {value: request.items.Order.value},
        Link: {value: `${domain}/g/workflow/view.csp?fid=-3&pid=${request.id}`},
      },
    };
    const response = await fetch(`/k/v1/record.json?__REQUEST_TOKEN__=${token}`, {
      method: 'POST',
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    });
    if (!response.ok) {
      throw new Error('kintoneレコードの登録時にエラーが発生しました');
    }
    return response;
  };

  garoon.events.on('workflow.request.approve.submit.success', async (event) => {
    const request = event.request;
    const status = request.status.type;
    // 最終承認時のみ実行
    if (status !== 'APPROVED' && status !== 'COMPLETED') {
      return event;
    }
    try {
      // 承認後にkintoneのCSRFトークンを取得する
      const token = await garoon.connect.kintone.getRequestToken();
      await addKintoneTask(token, request);
    } catch (error) {
      window.alert(error);
    }
    return event;
  });

})();
JavaScript / CSSファイルとして使用するファイルおよびリンクの追加
  1. 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。

    ワークフローのカスタマイズが許可されていない場合、申請フォームの詳細画面に「JavaScript / CSSによるカスタマイズ」というリンクが表示されません。
    詳細は、 ワークフローのカスタマイズを許可する (External link) を参照してください。
  2. [カスタマイズ]項目に「適用する」を選択し、作成した「grwf_to_kinapp.js」ファイルを追加し、「設定する」をクリックします。

以上ですべての設定は完了です。最初にお見せした完成イメージのとおり、動けば成功です。

おわりに

Garoon JavaScript APIのカスタマイズサンプル ワークフローとkintoneとの連携方法を紹介しました。

2017年11月のアップデートで追加されたAPIを使用することで、ワークフローの承認実行のタイミングで
kintoneのアプリにデータを登録することが簡単にできます。

今後もGaroonとkintoneの連携方法を公開していきますのでお楽しみに!

information

このTipsは、2023年5月版のGaroonとkintoneで動作を確認しています。