ワークフロー申請を承認したときのイベントと 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ヘルプ「 アプリをはじめから作成する 」を参照してください。

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

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

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

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

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

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

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

申請フォームの作成が完了したので、ここから作成した申請フォームに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によるカスタマイズ」というリンクが表示されません。
   詳細は、 ワークフローのカスタマイズを許可する を参照してください。
2. [カスタマイズ]項目に「適用する」を選択し、作成した「grwf_to_kinapp.js」ファイルを追加し、「設定する」をクリックします。
   

   

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

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

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

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

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