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

Garoon 開発 Tips

【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 にアクセスするには、申請データの公開設定が必要です。

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

kintone アプリの設定手順

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

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

フィールドは以下のとおり設定してください。
フィールドコードは、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 ヘルプ - 申請フォームの作成の流れを参照してください。

それぞれの項目は以下のとおり設定してください。
ここでも項目コードは、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 ファイルとして使用するファイルおよびリンクの追加

「申請フォーム情報」部分の右端にある「JavaScript / CSS によるカスタマイズ」をクリックします。

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

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

おわりに

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

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

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

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

Garoon 開発 Tips