【Garoon JavaScript API】kintoneの事前費用申請アプリから内容を引き継いでガルーンの支払申請を作成する

目次

概要

「【Garoon JavaScript API】出張申請から内容を引き継いで旅費申請を作成する」に続いて、Garoonのワークフローカスタマイズ第2弾をお届けします。
今回はGaroonとkintoneを連携して、kintoneの事前費用申請アプリから内容を引き継いでGaroonの支払申請を作成するサンプルの紹介です。
第1弾はGaroonのワークフロー同士の処理でしたが、今回はkintoneとGaroonでの内容引き継ぎ処理になります。

前提条件と注意事項

  • このカスタマイズには、クラウド版Garoonまたはパッケージ版Garoon 4.6以降とkintoneスタンダードコース以上の契約が必要です。
  • ワークフローJavaScriptカスタマイズは、JavaScriptを適用した後に申請されたワークフローが対象となります。
    それ以前に申請されたワークフローには適用されません。

できること

何かしら予算を使う際、使う用途と金額などが分かった時点で事前に費用申請を提出して、実際に支払った後にまた支払申請を提出するというルールがある会社も多いと思います。
用途・金額・申請者情報など、ほとんと同じ内容を記載するのに毎回コピー&ペーストはたいへんですよね。

今回は、kintoneで事前費用申請を、Garoonで支払申請を管理しているケースを想定して、以下のカスタマイズサンプルを紹介します。

  • kintoneの事前費用申請アプリからボタンクリックで内容を引き継いでGaroonの支払申請を作成する。

ここではkintoneの「 レコード詳細画面を表示した後のイベント」とGaroonの「 ワークフロー申請の作成画面を表示したときのイベント」を利用します。

完成イメージ

例)kintoneの「事前費用申請」アプリとGaroonの「支払申請」ワークフローがあり、その項目の一部が同じ内容の場合。

kintoneの「事前費用申請」アプリにある、一部項目の内容のコピーと、申請した「事前費用申請」の該当レコードのURLを、Garoonの「支払申請」ワークフローに自動で入力するサンプルカスタマイズの完成イメージです。

  1. kintoneの「事前費用申請」アプリのレコード詳細画面に[支払申請を提出する]ボタンが表示されます。
  2. [支払申請を提出する]ボタンをクリックすると、別タブでGaroonの「支払申請」ワークフローの作成画面が表示されます。
  3. 自動的に、標題・申請者・所属本部・事前費用申請番号・予算番号・内容・金額・「事前費用申請」の該当レコードのURLが入力されます。

今回はkintoneのアプリとGaroonのワークフロー両方にJavaScriptファイルを充てカスタマイズしていきます。まずはkintone側で必要になる準備について順を追って説明していきます。

kintoneアプリの設定手順

①事前費用申請アプリを作成する

最初はkintoneの事前費用申請アプリの準備から始めます アプリストア (External link) に事前費用申請アプリがないので、今回は以下のフィールドを配置してアプリを作成します。

アプリの具体的な作成方法は、以下のヘルプを参照してください。
アプリをはじめから作成する | kintoneヘルプ (External link)

フィールドは以下のとおり設定してください。フィールドコードは、JavaScriptコード内でそれぞれのフィールドを指定するための一意の文字列なので、間違えないように設定してくださいね。
必要に応じてプロセス管理も設定してください。

フィールド名 フィールドコード フィールドタイプ 備考
所属本部 所属本部 ドロップダウン 必須項目に設定
事前費用申請番号 事前費用申請番号 文字列(一行) 必須項目に設定
予算番号 予算番号 文字列(一行) 必須項目に設定
費用標題 費用標題 文字列(一行) 必須項目に設定
費用内訳 費用内訳 文字列(一行)
申請金額(税抜き) 申請金額 数値 必須項目に設定
作成者 作成者 作成者
作成日時 作成日時 作成日時
send_button_space スペース 「send_button_space」は要素IDのところに設定
ボタンを設置する場所になります。

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

アプリが完成したら、そこにカスタマイズを適用します。
ここでは以下の画像のように、Garoonの支払申請ワークフローに提出するボタンを配置し、レコードのデータをセッションストレージに保存します。
Garoonに引き継ぐ一時的なデータの保存のために、 第1弾と同様にセッションストレージに保存します。

事前費用申請アプリの「アプリの設定 > JavaScript/CSSでカスタマイズ」に以下のサンプルコードを設定します。
具体的なファイルの適用方法については JavaScriptやCSSでアプリをカスタマイズする | kintoneヘルプ (External link) を参照してください。

PC用のJavaScriptファイル
PC用のCSSファイル
  • 51-modern-default.css
    kintone標準パーツに似せたボタン作成のためのCSSです。
    GitHubで公開しているコード (External link) をコピー&ペーストして左記の名前で保存してアップロードください。

設定画面は以下のようになっていると思います。

サンプルプログラム(sendDataToPayment.js)

kintoneの「 レコード詳細画面を表示した後のイベント」を利用して記述しています。

次のサンプルコードをエディタにコピーして、ファイル名を「sendDataToPayment.js」、文字コードを「UTF-8」で保存します。
ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
適用する際は、26行目の「cid=XXX&fid=XXX」のXXX部分は各フォームIDに書き換えてください。
フォームIDは、Garoonのワークフローの申請の作成画面のURLにて確認してください。
例)https://sample.cybozu.com/g/send_form.csp?cid=12&fid=345←この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
/**
 * kintone JavaScript APIを使ったサンプルプログラム
 * Copyright (c) 2017 Cybozu
 *
 * Licensed under the MIT License
 */
(function() {
  'use strict';

  // 申請ボタンを押したときの挙動
  function onclickSendButton(event) {
    const record = event.record;
    const appId = kintone.app.getId();
    const recordId = kintone.app.record.getId();

    // セッションストレージにデータを保存
    sessionStorage.setItem('pre_cost_title', record.費用標題.value);
    sessionStorage.setItem('pre_cost_department', record.所属本部.value);
    sessionStorage.setItem('pre_cost_number', record.事前費用申請番号.value);
    sessionStorage.setItem('pre_cost_budget_number', record.予算番号.value);
    sessionStorage.setItem('pre_cost_amount', record.申請金額.value);
    sessionStorage.setItem('pre_cost_app_id', appId); // アプリIDを保存
    sessionStorage.setItem('pre_cost_record_id', recordId); // レコード番号を保存

    // 支払申請を開く
    window.open('/g/workflow/send_form.csp?cid=×××&fid=×××'); // 「cid=XXX&fid=XXX」のXXX部分は書き換えてください

  }

  // 値を送信するボタンを追加する
  function addSendButton(event) {
    const space = kintone.app.record.getSpaceElement('send_button_space');
    const button = document.createElement('input');
    button.setAttribute('type', 'button');
    button.setAttribute('id', 'send_data_button');
    button.setAttribute('value', '支払申請を提出する');
    button.setAttribute('class', 'kintoneplugin-button-normal');
    button.setAttribute('class', 'kintoneplugin-button-normal');
    button.setAttribute('style', 'background-color: #FFCC00');
    space.appendChild(button);
    const sendButton = document.getElementById('send_data_button');

    sendButton.onclick = function() {
      onclickSendButton(event);
    };

  }

  // レコード詳細画面表示時のイベント
  kintone.events.on('app.record.detail.show', (event) => {
    addSendButton(event);
    return event;
  });
})();

これでkintoneアプリの設定は完了です!ボタンクリックで別タブが開きましたでしょうか?ここからはGaroonの設定に移っていきます。準備項目が多めですが、もう一息頑張っていきましょう。

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

ワークフローの項目の内容は、会社さんによって異なります。
ここでは、完成イメージの支払申請の申請フォームにJavaScriptカスタマイズを適用する方法を説明します。

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

まずはkintoneでアプリを準備したのと同じく、Garoonで以下の項目を配置して、支払申請ワークフローの申請フォームを作成していきます。
申請フォームの作成方法については、Garoonヘルプ - 申請フォームの作成の流れ クラウド版 (External link) パッケージ版 (External link) を参照してください。
フォーム作成は少し手間がかかるので、今回はそのまま読み込んで使えるサンプルフォームもご用意しています。(後述)

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

項目名 項目タイプ 項目コード 備考
標題 文字列(1行)(標準項目) title 必須項目に設定
所属本部 メニュー department 必須項目に設定
事前費用申請番号 文字列(1行) number 必須項目に設定
事前費用申請URL 文字列(複数行) pre_cost_url 必須項目に設定
(空白行) (空白行) 「空白行を追加する」で設定
予算番号 文字列(1行) budget_number 必須項目に設定
内容 文字列(複数行) item 必須項目に設定
金額 数値 amount 必須項目に設定
消費税 数値 tax
合計金額 自動計算 total 計算内容欄は以下を設定
合計(選択項目の値の総和を計算します)
金額 消費税

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

サンプルフォームのダウンロードについて

まずは動きを見てみたいという方向けに、そのまま読み込んで使っていただけるサンプルの申請フォームをXML形式でご用意しました。
完成イメージにある支払申請の申請フォームです。

以下のリンクを右クリックして、ファイルを保存してください。
sample_form.xml

このXMLファイルを、「申請フォーム一覧」から読み込んでいただくと、「【サンプル】支払申請」という申請フォームが追加されます。項目コードも設定済みの状態です。
サンプルフォームを追加する方法については、次のページを参照してください。
ワークフローのサンプルフォームを利用するにはどうしたらよいですか? (External link)

経路情報は各環境で異なり、存在しない経路を読み込むことはできないので、上記のXMLでは経路情報を省いています。
申請フォームを有効化するには、経路情報の設定が必要になりますので、そちらも忘れず設定してください。

②JavaScriptファイルを適用する

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

ワークフローのJavaScript / CSSによるカスタマイズは初期値では「許可しない」設定になっています。
そのため、まずはその設定を「許可する」に変更します。

  1. [システム管理(各アプリケーション)> ワークフロー > 一般設定]の画面を表示します。
  2. [一般設定]の「JavaScript / CSSによるカスタマイズの許可」項目を「許可する」を選択します。

  3. 設定変更後、「適用する」をクリックします。

許可設定が完了したらいよいよJavaScriptファイルを申請フォームに適用していきます。
以下の画像のように、セッションストレージに保存されているkintoneの事前費用申請アプリのデータを取得して、ワークフローの作成画面に値をセットするというカスタマイズになります。

サンプルプログラム(receiveDataFromPreCost.js)と適用方法

Garoonの「 ワークフロー申請の作成画面を表示したときのイベント」を利用しています。

  1. 次のサンプルコードをエディタにコピーして、ファイル名を「receiveDataFromPreCost.js」、文字コードを「UTF-8」で保存します。
    ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
    適用する際は、25行目の「https://sample.cybozu.com/k/」のsampleの部分はご自身のkintone環境のドメイン名に書き換えてください。

     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
    
    /**
     * Garoon JavaScript APIを使ったサンプルプログラム
    * Copyright (c) 2017 Cybozu
    *
    * Licensed under the MIT License
    */
    (function() {
      'use strict';
    
      garoon.events.on('workflow.request.create.show', (event) => {
        // セッションストレージに値がない場合は抜ける
        if (!sessionStorage.getItem('pre_cost_title')) {
          return event;
        }
    
        const request = event.request;
    
        // セッションストレージからデータを取得
        request.items.title.value = sessionStorage.getItem('pre_cost_title');
        request.items.department.value = sessionStorage.getItem('pre_cost_department');
        request.items.number.value = sessionStorage.getItem('pre_cost_number');
        request.items.budget_number.value = sessionStorage.getItem('pre_cost_budget_number');
        request.items.item.value = sessionStorage.getItem('pre_cost_title');
        request.items.amount.value = sessionStorage.getItem('pre_cost_amount');
        request.items.pre_cost_url.value = 'https://sample.cybozu.com/k/' // 「sample.cybozu.com」のsampleの部分は書き換えてください。
                + encodeURIComponent(sessionStorage.getItem('pre_cost_app_id')) + '/show#record='
                + encodeURIComponent(sessionStorage.getItem('pre_cost_record_id'));
    
        // セッションストレージからデータを削除
        sessionStorage.removeItem('pre_cost_title');
        sessionStorage.removeItem('pre_cost_budget_number');
        sessionStorage.removeItem('pre_cost_department');
        sessionStorage.removeItem('pre_cost_amount');
        sessionStorage.removeItem('pre_cost_app_id');
        sessionStorage.removeItem('pre_cost_record_id');
    
        return event;
      });
    })();
  2. 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。

  3. 「カスタマイズ」項目を「適用する」を選択し、1. で保存した「receiveDataFromPreCost.js」ファイルを追加し、「設定する」をクリックします。

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

おわりに

Garoon JavaScript APIのカスタマイズサンプル第二弾、kintoneとGaroonのワークフロー連携の方法をお届けしました。面倒なコピー&ペースト作業もなくなりましたね。
運用に合わせて、コピーする項目を設定していただくことで、皆さんの環境でもお使いいただけると思います。
ぜひいろいろと作り変えてみてください。