概要
「【Garoon JavaScript API】kintoneの事前費用申請アプリから内容を引き継いでガルーンの支払申請を作成する」でご紹介した、ガルーンとkintoneの連携Tipsに続き、ワークフロー連携をご紹介します。
今回は、kintoneを開かずに、ガルーンのワークフロー画面からkintoneのデータを検索して、そのデータをセットするという内容です。
前回よりも、もう一歩踏み込んだ連携をご紹介します！
前提条件と注意事項
- このカスタマイズには、現時点では、クラウド版 Garoon または パッケージ版 Garoon 4.6以降 と kintoneのスタンダードコース の契約が必要です。
- ワークフロー JavaScriptカスタマイズは、JavaScriptを適用した後に申請されたWFが対象になります。
それ以前に申請されたワークフローには適用されません。 - サンプルプログラムは、その動作を保証するものではありません。
- サンプルプログラムの技術的なサポート等は行っていません 。
できること
パッケージ版だとできる外部DB連携をクラウド版でも実現できるようになりました！
今回は、そんな外部DB連携をkintoneにして、一歩踏み込んだ設定でご紹介したいと思います。
kintoneのアプリに日々利用した交通費を登録し、ガルーンでワークフロー申請するという場合、kintoneにあるデータをガルーンに持ってこなくてはいけません。
その際に、kintoneを開かなくてもガルーンのワークフロー申請画面から、kintoneのデータが検索できて、該当のデータをセットできるようになります。
完成イメージ
例）kintoneの「交通費申請」アプリに日々の交通費を登録し、月末にガルーンの「交通費申請」ワークフローで申請する場合
「申請者(検索用)」項目で名前を入力して、「kintone検索」をクリックすると、kintoneのレコードが検索され、そのデータがガルーンに設定されるという流れになります。
今回はkintoneのアプリにはJavaScript/CSSファイルの設定は不要です。
ガルーンのワークフローの設定にのみ、JavaScript/CSSファイルを設定しカスタマイズしていきます。
kintoneアプリのフィールドコードは利用するため、まずはkintoneアプリの設定からはじめます。
kintone アプリの設定手順
交通費申請アプリを作成する
最初はkintoneの交通費申請アプリを作成します。
完成すると、作成画面は下記のようになります。
※アプリストアの「交通費申請」アプリを修正していただくと、簡単につくれます。
※アプリの具体的な作成方法は、以下のヘルプをご参照ください。
アプリをはじめから作成する ～FAQアプリを作ってみよう～
フィールドは以下の通り設定してください。
フィールドコードは、ガルーン側に設定するJavaScriptコード内でそれぞれのフィールドを指定するための一意の文字列となります。
間違えないように設定してください。
| フィールド名 | フィールドコード | フィールドタイプ | 備考 |
|---|---|---|---|
| 申請者 | Author | 文字列（一行） | |
| 申請月 | ApplicationMonth | 文字列（一行） | |
| 社員番号 | EmployeeNumber | 数値 | |
| 所属部署 | Department | ドロップダウン | |
| 承認者 | Authorizer | ユーザー選択 | |
| タイトル | Title | 文字列（一行） | |
| 日付（テーブル） |
Date |
日付 |
「日付」から「金額」まではテーブルとして設定します。 |
| 訪問先（テーブル） | Destination | 文字列（一行） | |
| 交通手段（テーブル） | Transportation | ドロップダウン | |
| 適用（テーブル） | Application | ラジオボタン | |
| 金額（テーブル） | Amount | 数値 | |
| （テーブルの設定） | LineItem | ||
| 合計金額 | Total | 計算 | |
| 備考 | Remarks | 文字列（複数行） |
これでkintoneアプリの設定は完了です！
ガルーン側に設定するJavaScriptファイルの中にkintoneのアプリIDを入力しますので、アプリIDは覚えておいて下さい。
例）https://xxxxx.cybozu.com/k/xxx/ ←アプリIDはこの赤文字の部分に書いてある数字です。
ガルーン ワークフローの設定手順
ワークフローの項目の内容は、会社さんによって異なります。
ここでは、サンプルということで完成イメージで利用した支払申請の申請フォームにJavaScript/CSSカスタマイズを設定する流れをご説明します。
①ガルーン ワークフローの申請フォームを作成する
まずはkintoneでアプリを準備したのと同じく、ガルーンで以下の項目を配置して、支払申請ワークフローの申請フォームを作成していきます。
申請フォームの作成方法についてはこちらをご参照ください。
フォーム作成は少し手間がかかるので、今回はそのまま読み込んで使えるサンプルフォームもご用意しています。（後述）
それぞれの項目は以下の通り設定してください。
ここでも項目コードは、JavaScriptコード内でそれぞれの項目を指定するための一意の文字列になります。
項目数が多いですが、こちらも間違えないように設定してください。
| 項目名 | 項目タイプ | 項目コード | 備考 |
| 標題 | 文字列（１行）(標準項目) | Title | 必須項目に設定 |
| 申請者(検索用) | 文字列（１行） | ApplicantForSearch | |
| （JavaScriptカスタマイズ用項目） | JavaScriptカスタマイズ用 | AddButton | |
| 所属組織 | メニュー | ||
| （空白行） | （空白行） | － | 「空白行を追加する」で設定 |
| １． | 日付 | SUB1_ITEM1_1 | |
| 行き先 | 文字列（１行） | SUB1_ITEM1_2 | |
| 詳細 | メニュー | SUB1_ITEM1_3 | |
| 適用 | ラジオボタン | SUB1_ITEM1_4 | |
| 金額 | 数値 | SUB1_ITEM1_5 | |
| （空白行） | （空白行） | － | 「空白行を追加する」で設定 |
| ２． | 日付 | SUB1_ITEM2_1 | |
| 行き先 | 文字列（１行） | SUB1_ITEM2_2 | |
| 詳細 | メニュー | SUB1_ITEM2_3 | |
| 適用 | ラジオボタン | SUB1_ITEM2_4 | |
| 金額 | 数値 | SUB1_ITEM2_5 | |
| （空白行） | （空白行） | － | 「空白行を追加する」で設定 |
| ３． | 日付 | SUB1_ITEM3_1 | |
| 行き先 | 文字列（１行） | SUB1_ITEM3_2 | |
| 詳細 | メニュー | SUB1_ITEM3_3 | |
| 適用 | ラジオボタン | SUB1_ITEM3_4 | |
| 金額 | 数値 | SUB1_ITEM3_5 | |
| （空白行） | （空白行） | － | 「空白行を追加する」で設定 |
| ４． | 日付 | SUB1_ITEM4_1 | |
| 行き先 | 文字列（１行） | SUB1_ITEM4_2 | |
| 詳細 | メニュー | SUB1_ITEM4_3 | |
| 適用 | ラジオボタン | SUB1_ITEM4_4 | |
| 金額 | 数値 | SUB1_ITEM4_5 | |
| （空白行） | （空白行） | － | 「空白行を追加する」で設定 |
| ５． | 日付 | SUB1_ITEM5_1 | |
| 行き先 | 文字列（１行） | SUB1_ITEM5_2 | |
| 詳細 | メニュー | SUB1_ITEM5_3 | |
| 適用 | ラジオボタン | SUB1_ITEM5_4 | |
| 金額 | 数値 | SUB1_ITEM5_5 | |
| （空白行） | （空白行） | － | 「空白行を追加する」で設定 |
| 合計金額 | 自動計算 | ||
| （空白行） | （空白行） | － | 「空白行を追加する」で設定 |
| 備考 | 文字列（複数行） | Remarks |
上記の通り設定が完了したら、土台となる申請フォームの作成は完了です。
サンプルフォームのダウンロードについて
申請フォームを作成するのに少し時間がかかるので、まずは動きを見てみたいという方向けに、そのまま環境に読み込んで使っていただけるサンプルの申請フォームをXML形式でご用意しました。
完成イメージにある支払申請の申請フォームになります。
以下からサンプルフォームをダウンロードして下さい。
このXMLファイルを、「申請フォーム一覧」から読み込んでいただくと、「【サンプル】交通費申請」という申請フォームが追加されます。
項目コードも設定済みの状態です。
サンプルフォームを追加する方法については、こちらをご参照ください。
※経路情報は各環境で異なり、存在しない経路を読み込むことはできないので、上記のXMLでは経路情報を省いています。
申請フォームを有効化するには、経路情報の設定が必要になりますので、そちらも忘れず設定してください。
②JavaScript/CSSファイルを適用する
申請フォームの作成が完了したので、あと一歩です。
ここから作成した申請フォームにJavaScriptファイルを適用していきます。
設定するJavaScript/CSSファイルが少し多いですが、頑張ってください！
適用ファイルの準備
下記のサンプルコードをエディタにコピーして、ファイル名を「grkin_common.js」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
※こちらのJavaScriptファイルには、kintoneアプリのIDを設定したり、テーブル数の設定などお客様の環境に合わせて修正していただく箇所がございます。
次に、下記のJavaScriptファイルとCSSファイルもダウンロードしてください。
※文字化けする可能性があるため、右クリックし、直接ダウンロードしてください。
※こちらのファイルは修正せず、そのまま適用して利用いただくファイルとなります。
・grkin.jsファイル
grkin.js
・girkin.cssファイル
grkin.css
JavaScript/CSSファイルとして使用するファイルのおよびリンクの追加
- 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。
※申請フォームの詳細画面に「JavaScript/CSSによるカスタマイズ」というリンクが表示されない場合
ワークフローのカスタマイズが許可されていない場合はリンクが表示されませんので、こちらをご参照下さい。
- [カスタマイズ] 項目に「適用する」を選択してください。
- [JavaScriptカスタマイズ] 項目に下記を設定します。
- Cybozu CDNの次のライブラリを使用しますので、下記のリンクを追加してください。
- jQuery
https://js.cybozu.com/jquery/3.1.1/jquery.min.js
- JQuery UI
https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js
- Moment.js
https://js.cybozu.com/momentjs/2.17.1/moment.min.js
- Spin.js
https://js.cybozu.com/spinjs/2.3.2/spin.min.js
- SweetAlert
https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.min.js - 「適用ファイルの準備」で用意した「grkin_common.js」と「grkin.js」のファイルを追加してください。
※設定するファイルおよびリンクの順番には意味がありますので、下記の点をご注意下さい。
・「grkin.js」のファイル内で、各ライブラリや「grkin_common.js」ファイルの内容を参照している為、
各ライブラリや「grkin_common.js」ファイルを先に読み込まなければいけません。
そのため、JavaScriptカスタマイズの適用するファイルおよびリンクの順番は下記のようにお願いします。
- 設定する順番：
1. 各ライブラリ
2. grkin_common.js
3. grkin.js
- Cybozu CDNの次のライブラリを使用しますので、下記のリンクを追加してください。
- [CSSカスタマイズ]項目には、下記を設定します。
- Cybozu CDNの次のライブラリを使用しますので、下記のリンクを追加してください。
- jQuery UI
https://js.cybozu.com/jqueryui/1.12.1/themes/smoothness/jquery-ui.css
- SweetAlert
https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.css - 「適用ファイルの準備」で用意した「grkin.css」のファイルを追加してください。
※こちらも設定する順番にはご注意下さい。
- Cybozu CDNの次のライブラリを使用しますので、下記のリンクを追加してください。
- 上記設定完了後の完成イメージはこちらです。
同じように設定ができましたら、「設定」をクリックしてください。
以上ですべての設定は完了です！
最初にお見せした完成イメージの通り、動けば成功です。
お疲れ様でした！
おわりに
今回のサンプルはいかがだったでしょうか？
「grkin.js」というファイルは、変更しないことを前提にサンプルを作成しており、そのファイルの内容は上級者向けです。
そのため、今までのサンプルにはない内容となっております。
エンジニアの方なら、こちらのファイルも修正してみようかな？と思う方もいらっしゃるかもしれません。
GaroonにJavaScriptカスタマイズが追加されて、できることが広がっています。
このサンプルをきっかけに是非、色々と試していただければと思います。
今後もこのようなサンプルをご紹介させていただきますので、また見に来て下さい♪
お世話になっております。
申請者（検索用）⇒ 行き先（検索用）に変更したいです。
kintoneでは「顧客情報アプリ」を作っております。
ユーザー側が入力時：
①「行き先」が「顧客情報アプリ」の顧客名に登録していれば、「kintone検索」ボタンで「顧客情報アプリ」の該当の顧客名を検索し、選択する事で「行き先」が登録できる。
②もし「行き先」が「顧客情報アプリ」の顧客名に登録していなげれば、「kintone検索」ボタンを使わずに手動で「行き先」を入力する。
grkin_common.jsを以下のように修正しましたが、使えなくて、 [JavaScriptカスタマイズ] 項目にライブラリをこの参考のページにコピーするようにとなってますが、これらも全部カスタマイズしないといけないでしょうか？
/**
* Garoon JavaScript APIを使ったサンプルプログラム
*
* 「grkin_common.js」ファイル
*
* Copyright (c) 2017 Cybozu
*
* Licensed under the MIT License
*/
jQuery.noConflict();
(function($) {
'use strict';
window.garoonWFkintone = {
appId: {
// xxx部分にkintoneのアプリIDを入力する
kintone: 123
},
fieldCode: {
search: {
// Garoonワークフローの「行き先(検索用)」項目の項目コード
garoon: 'SUB1_ITEM1_2',
// kintoneアプリの「顧客名」項目のフィールドコード
kintone: '顧客名'
},
selectItems: {
// Garoonワークフロー申請画面で、行き先(検索用)項目に表示している [kintone検索]
// をクリックした時に表示される、「kintone検索結果画面」に表示する項目
// 例）顧客コード、顧客名
kintone: ['顧客コード', '顧客名']
}
},
};
})(jQuery);
なにか、アドバイス頂けたら幸いです。どうぞよろしくお願い致します。
利絵 様
お世話になっております。cybozu development team です。
> [JavaScriptカスタマイズ] 項目にライブラリをこの参考のページにコピーするようにとなってますが、これらも全部カスタマイズしないといけないでしょうか？
「JavaScript/CSSファイルとして使用するファイルのおよびリンクの追加」の手順 3. の 1. で追加する Cybozu CDN ライブラリはカスタマイズ不要です。
ただし、「手動で「行き先」を入力する」を実現しようとすると grkn.js を修正が必要かと思われます。
このサンプルでは、申請フォームの行き先に関する項目は入力不可になっており、 grkin.js で入力不可に設定しています。
garkin_common.js は Garoon と kintone の項目の対応関係を設定しているスクリプトファイルです。
「使えない」が指す内容を把握しかねるのですが、動きを変更するには grkn.js の修正が必要です。
本記事で紹介している内容に、さらに手を加えることとなりますので、
プログラミング時のご相談は cybozu developer コミュニティの Garoon カスタマイズフォーラム のご活用をお願いいたします。
フォーラムに投稿すると、多くのディベロッパーの方々が目にすることとなるので、回答も付きやすくなるかと存じます。
（記事コメントは、記事をフォローしている方にしか通知が届きません。）
お手数おかけいたしますが、よろしくお願いいたします。
お世話になっております。
ご指導ありがとうございました。