カテゴリー内の他の記事

【Garoon JavaScript API】旅費申請で入力補助を行う（予定の取得）

作成日2017年06月05日 01:54
更新日2020年10月15日 06:39

Moment.js はメンテナンスモードになり、日付処理できる代替ライブラリへの移行が推奨されています。
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。

Index

概要

今回はガルーンのワークフローカスタマイズ第３弾として、スケジュールから外出の予定を取得して旅費申請を作成するサンプルをお届けいたします。

前提条件と注意事項

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

できること

月末に該当月の旅費を一括申請する会社が多いかと思います。営業部など外出の多い部署ですと、外出の日付と目的地などを一つずつ入力するのはとても大変です。いつもスケジュールには外出の予定を登録しているのに、そのデータを引き継ぐことができると大変便利になるのではないでしょうか。

今回は、その問題を解決できるカスタマイズサンプルをご紹介します。

ここでは「ワークフロー申請の作成画面が表示されたときのイベント」を利用します！

完成イメージ

例）スケジュールに登録されている予定（複数件）と、「旅費申請」というワークフローがあり、その項目の一部が同じ内容の場合

予定の一部項目の内容を「旅費申請」ワークフローに自動で入力するサンプルカスタマイズの完成イメージです。

旅費申請の編集画面を開くと、該当月が自動で入力され、 [予定を取得する] ボタンが表示されます。
該当月に月初5日までは先月の値が入力されます。例、6/４に旅費申請の編集画面を開くと、該当月に５月が入力されます
※下書きからの編集の場合はなにもしません。
[予定を取得する] ボタンをクリックすると、外出予定を選択できるダイアログが表示されます。
※以下の条件を満たす予定のみ取得して表示します。

　- 通常予定

　- 予定メニューが往訪/【履歴】往訪/フェアのいずれか

　- 公開予定
入力する予定をチェックして「取得する」ボタンをクリックすると、その下の行に予定の日付とタイトルが入力されます。
※チェックされている予定の数が行数を上回る場合は、ダイアログを表示してキャンセルします。
※予定のタイトルが文字数制限を超える場合は、制限文字数（20文字）までカットする
※予定がなかった行は、日付を対象月の1日目で初期化する
※月の予定がない場合は、全ての行の日付を対象月の1日目で初期化する

詳細設定

予定メニューの設定と予定の登録

予定メニューを設定する

予定メニューに往訪/【履歴】往訪/フェアのいずれかを指定する必要があるので、まずは予定メニューを登録しましょう。

[システム管理（各アプリケーション） > スケジュール > 予定メニューの設定]の画面を表示します。
[追加する]ボタンをクリックして往訪、【履歴】往訪、フェアを追加し、設定をクリックします。

予定を登録する

予定メニューの設定が完了しましたら、早速予定を登録しましょう。

画面右上の[アプリ一覧]からスケジュールをクリックして、スケジュール画面を表示します。
[予定を登録する」ボタンから[予定の登録]画面を表示します。
「通常予定」タブで、次の項目を必ず指定してください。他の設定は任意です。
- 日付：該当月の日付を指定します
- タイトル：ドロップダウンから先ほど登録した予定メニューのいずれかを選択します
- 公開方法：公開
[登録する]をクリックします。

ワークフローのJavaScript / CSSによるカスタマイズを許可する設定

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

[システム管理（各アプリケーション） > ワークフロー > 一般設定]の画面を表示します。
[一般設定]の「JavaScript / CSSによるカスタマイズの許可」項目を「許可する」を選択します。
設定変更後、「適用する」をクリックします。

ガルーンワークフローの申請フォームを作成する

ワークフローの項目の内容は、企業様によって異なります。
そのため、このサンプルの説明では、完成イメージで利用した旅費申請の申請フォームにJavaScriptカスタマイズを充てていく流れをご説明します。

まずはkintoneでアプリを準備したのと同じく、ガルーンで以下の項目を配置して、旅費申請ワークフローの申請フォームを作成していきます。申請フォームの作成方法についてはこちらをご参照ください。フォーム作成は少し手間がかかるので、今回はそのまま読み込んで使えるサンプルフォームもご用意しています。（後述）

赤枠の中の項目は必ず設定してください。
「対象月」の下にある１行目～10行目は同じ項目を設定して、各行の項目コードの最後の数値を０から1ずつ順番に増やします。
例、日付項目の項目コードの場合、1行目はdate_0、2行目はdate_1とします。
ここでも項目コードは、JavaScriptコード内でそれぞれの項目を指定するための一意の文字列なので、間違えないように設定してくださいね。

項目名	項目タイプ	項目コード	備考
対象月	メニュー	taisho_tsuki	メニュー項目に１月～12月を入力してください。
（JavaScriptカスタマイズ用項目）	－	schedule_picker_space	「右隣への配置」をチェックする。
1.	日付	date_0
（JavaScriptカスタマイズ用項目）	－	row_controller_0	「右隣への配置」をチェックする。
1.	文字列（1行）	detail_0	「右隣への配置」をチェックする。
1.	メニュー	method_0	「右隣への配置」をチェックする。メニュー項目に交通手段や宿泊などの項目を任意に入力する。
路線ナビ連携	路線ナビ連携	navi_0	「右隣への配置」をチェックする。

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

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

申請フォームを作成するのに少し時間がかかるので、まずは動きを見てみたいという方向けに、そのまま環境に読み込んで使っていただけるサンプルの申請フォームをXML形式でご用意しました。完成イメージにある旅費申請の申請フォームになります。

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

sample_form.xml

このXMLファイルを、「申請フォーム一覧」から読み込んでいただくと、「【サンプル】旅費申請（10行）」という申請フォームが追加されます。項目コードも設定済みの状態です。サンプルフォームを追加する方法については、こちらをご参照ください。

※サンプルフォームを利用する場合、専用経路として経路が読み込まれます。必要に応じて経路を変更してください。

JavaScriptのファイルを適用する

許可設定が完了したらいよいよJavaScriptファイルを申請フォームに適用していきます。

JavaScript ファイルを保存します。下記のサンプルコードをエディタにコピーして、文字コードを「UTF-8」にし、任意のファイル名で保存します。拡張子は「js」です。この記事では「workflow-expense.js」としています。
css ファイルを保存します。下記のサンプルコードをエディタにコピーして、文字コードを「UTF-8」にし、任意のファイル名で保存します。拡張子は「css」です。この記事では「workflow-expense.css」としています。
「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。
「カスタマイズ」項目に「適用する」を選択し、[JavaScriptカスタマイズ]と[CSSカスタマイズ]に、1. 2.で保存した JavaScript ファイル、cssファイル、および以下のライブラリーを指定して「設定する」をクリックします。
このカスタマイズでは、Cybozu CDNの次のライブラリーを使用します。

- jQuery
https://js.cybozu.com/jquery/3.1.1/jquery.min.js

- ES6-Promise
https://js.cybozu.com/es6-promise/v4.0.5/es6-promise.auto.min.js

- JSRender
https://js.cybozu.com/jsrender/0.9.82/jsrender.min.js

- Moment.js
https://js.cybozu.com/momentjs/2.17.1/moment.min.js

- SweetAlert2
https://js.cybozu.com/sweetalert2/v8.18.6/sweetalert2.min.js
https://js.cybozu.com/sweetalert2/v8.18.6/sweetalert2.min.css
- Font Awesome
https://js.cybozu.com/font-awesome/v4.7.0/css/font-awesome.min.css

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

jQuery利用時の注意事項

jQueryを使った書き方をする際には、製品内で使っているjQueryと競合しないように次の書き方をお勧めします。

(function($){
    console.log($().jquery);    // バージョン確認
})(jQuery.noConflict(true));

おわりに

Garoon JavaScript APIのカスタマイズサンプル第三弾、スケジュールとワークフローとの連携方法をご紹介しました。面倒なコピー&ペースト作業がなくなり、月末の旅費申請はより楽になると思います。
ぜひ試してみてください。

他にも便利な使い方がありますので、その紹介はまた次の機会に。
お楽しみに！

変更履歴

2019/11/12
SweetAlert2 のバージョンを v6.4.2 → v8.18.6 に変更し、ソースコードの修正を行いました。
その他ボタンのレイアウト崩れ対策のため、workflow-expense.css を追加しました。

sample_form.xml (50 KB)

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

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

Eriko 2018年02月01日 07:37

いつも大変お世話になっております。

こちらのサンプルを使用して試作しているところなのですが、

予定を取得すると、Garoonに予定を登録した日時が表示されてしまいます。

予定そのものの日付を表示させることはできますでしょうか？

cybozu Development team 2018年02月02日 08:58

Eriko 様

お世話になっております。
cybozu developer network 事務局です。

こちらの記事にあるサンプルコードをそのまま適用していただいた場合、
ご希望の「予定そのものの日付」が表示されるかと思います。

ちなみに、コードの内容を修正されたりしていますしょうか？
お手数ですが、ご確認のほどよろしくお願いします。

Eriko 2018年02月06日 07:27

cybozu Development team様

お世話になります、Erikoです。

全く何も変えていない状態でサンプルを作成しているところです。

確認いたしましたところ、「予定を登録した日付」ではなく「本日」の日付が表示されてしまう状態です。

コード修正など一切おこなっておりません。

cybozu Development team 2018年02月08日 06:39

Eriko様

ご確認いただきありがとうございます。

ワークフローを申請する際、新規作成画面を開いたときは、日付部分には「本日」が表示されている状態になります。
こちらの記事では、「予定を取得する」→「取得する」をクリックした後に、予定の日付がワークフロー部分に反映されるという内容になります。

「予定を取得する」をクリック後に、「本日」の日付が反映されてしまうという状況でしょうか？
お手数ですが、ご確認よろしくお願いします。

Eriko 2018年02月08日 06:56

cybozu Development team様

お世話になります、Erikoです。

「予定を取得する」をクリック後に、予定の入力と同時に「本日」の日付が反映されてしまう状況です。

よろしくお願いします。

cybozu Development team 2018年02月08日 07:21

Eriko様

ご確認いただきありがとうございます。

新規作成時に [本日の日付] が入っている状態だと思うので、「予定を取得する」をしても何も変わらないということですね。
日付以外の予定タイトルなどは正常に入っている状況でしょうか？

Eriko 2018年02月08日 09:36

cybozu Development team様

日付以外の予定タイトルなどは入っております。

また、予定を取得したあと、入力のない行の日付をその月の１日に戻す、という部分も正常に作動しております。

cybozu Development team 2018年02月09日 05:29

Eriko様

ご確認いただきありがとうございます。
こちらの環境でも、この記事の内容とまったく同じように作成してみたのですが、正常に動作し、取得した予定の日程が反映されました。

JSファイルは書き換えていないということでしたので、ガルーンのワークフローの設定時に入力している、「項目コード」が間違っている
という場合に、日付が正常に入らない場合があります。

たびたび申し訳ないのですが、2点伺いたいです。

1. サンプルフォームをダウンロードして試されていますか？
2. 取得してこようとしている予定は何件ですか？

よろしくお願い致します。

Rei 2019年01月18日 02:47

こちらのTipsをそのまま適用すると、モーダルのボタンのデザインがちょっと崩れてしまいます。

以下のCSSをコピーしてCSSファイルとして保存し、

申請フォーム情報の「JavaScript / CSSによるカスタマイズ」からアップロードすることで、

問題なく表示されました。

div.swal2-modal button.swal2-styled{

height: auto;

}

.swal2-modal .swal2-styled+.swal2-styled{

margin-top:auto;

}

Akira Y 2022年02月08日 09:04

Eriko様

もう４年前の投稿のようですが、私の環境でも同じ状況が出ました。

解決しましたので、ご参考になればと存じます。

サンプルコードの２０９行目の以下の部分のdatetime を date に変更しました。

オリジナル：

data.events.push({
	date: moment($event.find('datetime').attr('start')),
	detail: $event.attr('detail')
	});

変更後：

data.events.push({
	date: moment($event.find('date').attr('start')),
	detail: $event.attr('detail')
	});

cybozu Development team 2022年03月17日 00:21

Eriko 様
Akira.Y 様

お世話になっております。cybozu developer network 運営チームです。

時刻が指定されていないスケジュールを取得する場合、
予定は登録された日の日付で取得される現象を確認したため、
次のように、サンプルコードの一部を修正しました。

変更前：

data.events.push({
    date: moment($event.find('datetime').attr('start')),
    detail: $event.attr('detail')
});

変更後：

// 予定の日時データを抽出する。時刻が登録されていない予定の場合、日付データのみを抽出する
var eventDate;
if ($event.find('datetime').attr('start') !== undefined) {
  eventDate = $event.find('datetime').attr('start');
} else {
  eventDate = $event.find('date').attr('start');
}

data.events.push({
  date: moment(eventDate),
  detail: $event.attr('detail')
});

サインインしてコメントを残してください。

Index

概要

前提条件と注意事項

できること

完成イメージ

詳細設定

予定メニューの設定と予定の登録

予定メニューを設定する

予定を登録する

ワークフローのJavaScript / CSSによるカスタマイズを許可する設定

ガルーン ワークフローの申請フォームを作成する

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

JavaScriptのファイルを適用する

jQuery利用時の注意事項

おわりに

変更履歴

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

オリジナル：

変更後：

ガルーンワークフローの申請フォームを作成する