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

更新日時
フォローする

このサンプルは公開予定のAPIを使っています。それ以前は動作しませんのでご注意ください。
（2017/6/09 追記）6月11日に予定しておりましたAPI更新は延期になりました。
（2017/5/12 追記）5月14日に予定しておりましたGaroon JavaScript APIの搭載は延期になりました。
詳細はこちらをご確認ください。

Index

概要

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

前提条件と注意事項

  • このカスタマイズには、現時点では「Garoon on cybozu.com」のクラウド版の契約が必要です。（2017年6月時点）
  • ワークフロー JavaScriptカスタマイズは、JavaScriptを適用した後に申請されたWFが対象になります。
    それ以前に申請されたワークフローには適用されません。
  • サンプルプログラムは、その動作を保証するものではありません。
  • サンプルプログラムの技術的なサポート等は行っていません 。

できること

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

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

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

完成イメージ

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

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

  1. 旅費申請の編集画面を開くと、該当月が自動で入力され、 [予定を取得する] ボタンが表示されます。
    該当月に月初5日までは先月の値が入力されます。例、6/４に旅費申請の編集画面を開くと、該当月に５月が入力されます
    ※下書きからの編集の場合はなにもしません。
  2.  [予定を取得する] ボタンをクリックすると、外出予定を選択できるダイアログが表示されます。
    ※以下の条件を満たす予定のみ取得して表示します。
    　- 通常予定
    　- 予定メニューが 往訪/【履歴】往訪/フェア のいずれか
    　- 公開予定
  3. 入力する予定をチェックして「取得する」ボタンをクリックすると、その下の行に予定の日付とタイトルが入力されます。
    ※チェックされている予定の数が行数を上回る場合は、ダイアログを表示してキャンセルします。
    ※予定のタイトルが文字数制限を超える場合は、制限文字数（20文字）までカットする
    ※予定がなかった行は、日付を対象月の1日目で初期化する
    ※月の予定がない場合は、全ての行の日付を対象月の1日目で初期化する

WF-expense-10.gif

詳細設定

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

予定メニューを設定する

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

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

予定を登録する

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

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

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

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

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

  3. 設定変更後、「適用する」をクリックします。

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

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

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

WF-expense-1.JPG

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

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

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

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

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

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

sample_form.xml

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

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

JavaScriptのファイルを適用する

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

  1. 下記のサンプルコードをエディタにコピーして、ファイル名を「workflow-expense.js」、文字コードを「UTF-8」で保存します。ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
  2. 以下のサンプルコードをエディタにコピーして、ファイル名を「workflow-expense.css」で保存します。
    ※ファイル名は任意ですが、ファイルの拡張子は「css」にしてください。
  3. 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。
    WF-expense-2.JPG

  4. 「カスタマイズ」項目に「適用する」を選択し、[JavaScriptカスタマイズ]と[CSSカスタマイズ]に、1.と2. で保存した「workflow-expense.js」、「workflow-expense.css」及び以下のライブラリーを指定して「設定する」をクリックします。
    このカスタマイズでは、Cybozu CDNの次のライブラリーを使用します。

    WF-expense-3.JPG

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

jQuery利用時の注意事項

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

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

おわりに

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

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

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk