「【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ヘルプ

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

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

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

PC用のJavaScriptファイル

• https://js.cybozu.com/jquery/3.1.1/jquery.min.js（jQueryライブラリ）
• sendDataToPayment.js（詳細後述）

PC用のCSSファイル

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

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

サンプルプログラム（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の設定に移っていきます。準備項目が多めですが、もう一息頑張っていきましょう。

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

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

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

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

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

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

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

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

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

申請フォームの作成が完了したので、あと一歩です。ここから作成した申請フォームに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のワークフロー連携の方法をお届けしました。面倒なコピー&ペースト作業もなくなりましたね。
運用に合わせて、コピーする項目を設定していただくことで、皆さんの環境でもお使いいただけると思います。
ぜひいろいろと作り変えてみてください。