カテゴリー内の他の記事

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

作成日2017年06月27日 10:31
更新日2019年11月13日 01:26

Index

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

概要

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

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

前提条件と注意事項

このカスタマイズには、クラウド版 Garoon またはパッケージ版 Garoon 4.6 以降と、kintoneのスタンダードコースの契約が必要です。
カスタマイズ機能を実行するユーザーは、kintone を利用している必要があります。
ワークフロー JavaScriptカスタマイズは、JavaScriptを適用した後に申請されたワークフローが対象になります。
それ以前に申請されたワークフローには適用されません。
サンプルプログラムは、その動作を保証するものではありません。
サンプルプログラムの技術的なサポート等は行っていません。

できること

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

それぞれの項目は以下の通り設定してください。
ここでも項目コードは、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によるカスタマイズ」というリンクが表示されない場合
ワークフローのカスタマイズが許可されていない場合はリンクが表示されませんので、Garoon ヘルプ - ワークフローのカスタマイズを許可する　クラウド版・パッケージ版をご参照ください。
[カスタマイズ] 項目に「適用する」を選択してください。
[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カスタマイズが追加されて、できることが広がっています。
このサンプルをきっかけに是非、色々と試していただければと思います。

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

Grkin_sample_form.xml (20 KB)
grkin.css (2 KB)
grkin.js (30 KB)

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

利絵 2019年04月23日 05:38

お世話になっております。

申請者（検索用）⇒　行き先（検索用）に変更したいです。

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 2019年04月23日 07:26

利絵様

お世話になっております。cybozu development team です。

> [JavaScriptカスタマイズ] 項目にライブラリをこの参考のページにコピーするようにとなってますが、これらも全部カスタマイズしないといけないでしょうか？
「JavaScript/CSSファイルとして使用するファイルのおよびリンクの追加」の手順 3. の 1. で追加する Cybozu CDN ライブラリはカスタマイズ不要です。

ただし、「手動で「行き先」を入力する」を実現しようとすると grkn.js を修正が必要かと思われます。
このサンプルでは、申請フォームの行き先に関する項目は入力不可になっており、 grkin.js で入力不可に設定しています。

garkin_common.js は Garoon と kintone の項目の対応関係を設定しているスクリプトファイルです。
「使えない」が指す内容を把握しかねるのですが、動きを変更するには grkn.js の修正が必要です。

本記事で紹介している内容に、さらに手を加えることとなりますので、
プログラミング時のご相談は cybozu developer コミュニティの Garoon カスタマイズフォーラムのご活用をお願いいたします。

フォーラムに投稿すると、多くのディベロッパーの方々が目にすることとなるので、回答も付きやすくなるかと存じます。
（記事コメントは、記事をフォローしている方にしか通知が届きません。）

お手数おかけいたしますが、よろしくお願いいたします。

利絵 2019年04月24日 07:58