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

Garoon開発Tips

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

固定リンクがコピーされました

更新日：2023年02月01日

概要

固定リンクがコピーされました

ワークフロー申請を承認したときのイベントと 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」ファイルを追加し、「設定する」をクリックします。