【Garoon JavaScript API】ワークフロー申請画面からkintoneのレコードを検索してデータをセットする – cybozu developer network

Index

概要
前提条件と注意事項
できること
完成イメージ
kintone アプリの設定手順
ガルーンワークフローの設定手順
おわりに

概要

「【Garoon JavaScript API】kintoneの事前費用申請アプリから内容を引き継いでガルーンの支払申請を作成する」でご紹介した、ガルーンとkintoneの連携Tipsに続き、ワークフロー連携をご紹介します。

今回は、kintoneを開かずに、ガルーンのワークフロー画面からkintoneのデータを検索して、そのデータをセットするという内容です。
前回よりも、もう一歩踏み込んだ連携をご紹介します！

前提条件と注意事項

このカスタマイズには、現時点では「Garoon on cybozu.com」のクラウド版と「kintone」のスタンダードコースの契約が必要です。（2017年6月時点）
ワークフロー 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形式でご用意しました。
完成イメージにある支払申請の申請フォームになります。

以下からサンプルフォームをダウンロードして下さい。

Grkin_sample_form.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カスタマイズ] 項目に下記を設定します。
1. 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
2. 「適用ファイルの準備」で用意した「grkin_common.js」と「grkin.js」のファイルを追加してください。
  ※設定するファイルおよびリンクの順番には意味がありますので、下記の点をご注意下さい。
  ・「grkin.js」のファイル内で、各ライブラリや「grkin_common.js」ファイルの内容を参照している為、
  　各ライブラリや「grkin_common.js」ファイルを先に読み込まなければいけません。
  　そのため、JavaScriptカスタマイズの適用するファイルおよびリンクの順番は下記のようにお願いします。
  　- 設定する順番：
  　　1. 各ライブラリ
  　　2. grkin_common.js
  　　3. grkin.js
[CSSカスタマイズ]項目には、下記を設定します。
1. 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
2. 「適用ファイルの準備」で用意した「grkin.css」のファイルを追加してください。
  ※こちらも設定する順番にはご注意下さい。
上記設定完了後の完成イメージはこちらです。
同じように設定ができましたら、「設定」をクリックしてください。

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

おわりに

今回のサンプルはいかがだったでしょうか？

「grkin.js」というファイルは、変更しないことを前提にサンプルを作成しており、そのファイルの内容は上級者向けです。
そのため、今までのサンプルにはない内容となっております。
エンジニアの方なら、こちらのファイルも修正してみようかな？と思う方もいらっしゃるかもしれません。

GaroonにJavaScriptカスタマイズが追加されて、できることが広がっています。
このサンプルをきっかけに是非、色々と試していただければと思います。

今後もこのようなサンプルをご紹介させていただきますので、また見に来て下さい♪