【Garoon JavaScript API】出張申請から内容を引き継いで旅費申請を作成する

フォローする

Index

はじめに

ガルーンでワークフローを利用している方は必見です!
2017年5月にリリースする、Garoon on cybozu.comでワークフローにJavaScript/CSSでカスタマイズできるGaroon JavaScript APIが新規追加されます!

新しく追加されたAPIについての詳細は下記の記事でご確認ください。

このカスタマイズは、申請フォームごとに設定可能なので、各フォームにあったカスタマイズが可能となります。
どんな使い方ができるか、ご紹介させていただきますので、是非参考にしてみてください。

それでは、ガルーン ワークフロー JavaScript カスタマイズ サンプル第一弾をどうぞ!!

概要

出張申請から必要な項目内容を引き継いで旅費申請を作成するサンプルです。

前提条件と注意事項

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

できること

さぁ出張!というとき、内容の違うワークフローを複数申請している場合ありませんか?

例えば...

  1. 出張前に、目的などを書いて出張申請を提出
  2. 出張後に、出張費用精算のための旅費申請を、出張申請と紐付けた内容で提出

この2種類のワークフロー、実は一部の項目が同じの場合があると思います。

例えば、出張日程や目的、出張先、どの出張の旅費申請なのかわかるように出張申請のURL記載など、出張申請の内容を旅費申請にも記載する場合は、同じ内容を書くのでコピペ、コピペ、コピペ....
コピペたくさんしてませんか?その作業、面倒ですよね?

そんな問題を解決できるサンプルを今回は「ワークフロー申請の詳細画面が表示されたときのイベント」を利用してご紹介したいと思います!

完成イメージ

例)「出張申請(国内)」と「旅費/交通費申請」というワークフローがあり、その項目の一部が同じ内容の場合

「出張申請(国内)」にある、一部項目の内容のコピーと、申請した「出張申請(国内)」の申請番号とURLを、「旅費/交通費申請」に自動で入力するサンプルを作成した場合のイメージです。

  1. 「出張申請(国内)」の詳細画面に [旅費申請を提出] ボタンが表示されます。
  2.  [旅費申請を提出] ボタンをクリックすると、別タブで「旅費/交通費申請」の作成画面が表示され、自動で、標題、社員番号、所属本部、期間、出張先、目的の項目内容と、申請した「出張申請(国内)」の申請番号とURLが入力されます。
    Garoon_WFjs.gif

JavaScriptカスタマイズ設定手順

運用中のワークフローを変更する流れ

ワークフローの項目の内容は、企業様によって異なります。

そのため、このサンプルの説明では、完成イメージで利用した「出張申請(国内)」と「旅費/交通費申請」の申請フォームにJavaScriptカスタマイズを設定した流れについて記載します。

  1. ワークフローのJavaScript / CSSによるカスタマイズを許可に変更する
  2. 「出張申請(国内)」申請フォームの設定を変更する(コピー元の申請フォーム)
    2-1. 「JavaScriptカスタマイズ用項目の追加」項目を追加する
    2-2. 「JavaScriptカスタマイズ用項目の追加」項目の順番を変更する
    2-3. JavaScript内で利用する「項目コード」を設定する
    2-4. JavaScriptのファイルを適用する
  3. 「旅費/交通費申請」の申請フォームの設定を変更する(コピー先の申請フォーム)
    3-1. JavaScript内で利用する「項目コード」を設定する
    3-2. JavaScriptのファイルを適用する

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

まずは動作をみたいからもっと簡単に試せない?と思った皆様。
完成イメージのGIFで利用している、「出張申請(国内)」と「旅費/交通費申請」のXMLをご用意しました。

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

sample_form.xml

このXMLファイルを、「申請フォーム一覧」から読み込んでいただくと、「【サンプル】出張申請(国内)」と「【サンプル】旅費/交通費申請」申請フォームの2種類が追加されます。
「JavaScriptカスタマイズ用項目の追加」と「項目コード」の設定済みの状態となります。
あとは、それらの申請フォームに、設定手順の 2-4. と 3-2. のJavaScriptファイルを適用と経路設定をしていただくだけで動作確認していただけます。

サンプルフォームを追加する方法の詳細は、こちらをご覧ください。
【手順】の「1. サンプルフォームをダウンロードする」は、「sample_form.xml」のダウンロードで完了しておりますので、手順 2. 以降の設定を行って下さい。

詳細設定

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

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

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

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

2. 「出張申請(国内)」の申請フォームの設定を変更する

コピー元となる申請フォーム(=ボタンを表示する申請フォーム)の[申請フォームの詳細]画面から設定をします。
[システム管理(各アプリケーション) > ワークフロー > 申請フォームの一覧 > 申請フォームの詳細]の順番でクリックすると表示できます。

2-1. 「JavaScriptカスタマイズ用項目の追加」項目を追加する

この「JavaScriptカスタマイズ用項目の追加」を設定するのは、[旅費申請を提出]ボタンを表示させる項目を追加するためです。
この項目を追加することで、空白の項目を設置され、ボタンなどを表示させることが可能となります。

  1. 「申請フォームの項目一覧」部分にある「JavaScriptカスタマイズ用項目の追加」をクリックします。
    GaroonWF_4.png

  2. 「項目コード」に「send_button_space」と入力し、「右隣への配置」にチェックを入れます。
    ※この項目コードはJavaScript内で利用します。
    ※今回は、期間項目の右隣に[旅費申請を提出]ボタンを表示したいので、「右隣への配置」にチェックを入れています。
    GaroonWF_5.png

2-2. 「JavaScriptカスタマイズ用項目の追加」項目の順番を変更する

項目追加後は、(JavaScriptカスタマイズ用項目)が一番下にあるため、期間項目の下に移動します。
※JavaScriptカスタマイズ項目の位置はボタンを表示させたい場所に変更可能です。
※今回は、期間項目の右隣にボタンを表示するため、期間項目の下に移動しています。
GaroonWF_6.png

2-3. JavaScript内で利用する「項目コード」を設定する

「出張申請(国内)」の項目で、「旅費/交通費申請」にコピーしたい項目の「項目コード」を設定します。
今回は下記の項目の内容をコピーしたいので、これらの項目に項目コードを設定してください。

  • 「出張申請(国内)」申請フォームの項目の設定内容
項目名 項目タイプ 項目コード 備考
標題 文字列(1行)(標準項目) title  
社員番号 文字列(1行) employee_number  
所属本部 ラジオボタン department  
期間 日付 start_date 期間の開始日
期間 日付 end_date 期間の終了日
(JavaScriptカスタマイズ用項目) JavaScriptカスタマイズ用 send_button_space ボタンを表示するためのカスタマイズ項目
出張先 文字列(複数行) destination  
目的 文字列(複数行) purpose  


変更方法は下記です。

  1. 項目名をクリックします。
  2. [項目の詳細]画面の「変更する」をクリックします。
  3. [項目の変更]画面で「項目コード」に上記表の項目コードを入力します。

2-4. JavaScriptのファイルを適用する:「出張申請(国内)」申請フォーム編

「旅費申請を提出」ボタンをクリックしたときに別タブで「旅費/交通費申請」の作成画面が表示されるように設定するJavaScriptファイルを「出張申請(国内)」申請フォームに適用します。

このサンプルコードでは、「ワークフロー申請の詳細画面が表示されたときのイベント」を使って、申請した「出張申請(国内)」の詳細画面が表示されたときに、[旅費申請を提出]というボタンを表示し、項目のデータを保存するという部分を書いています。

  1. 下記のサンプルコードをエディタにコピーして、ファイル名を「sample1.js」、文字コードを「UTF-8」で保存します。
    ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
    ※適用する際は、29行目の「cid=XXX&fid=XXX」のXXX部分は各フォームIDに書き換えてください。
    ※フォームIDは、ワークフローの申請の作成画面のURLにてご確認ください。
     例)https://{subdomain}.cybozu.com/g/send_form.csp?cid=12&fid=207 ←このIDです。
  2. 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。
    GaroonWF_7.png

  3. 「カスタマイズ」項目を「適用する」を選択し、1. で保存した「sample1.js」ファイルを追加し、「設定する」をクリックします。
    GaroonWF_8.png

ここまでの設定で、下記までできるようになりました。

  1. 出張申請ワークフローの詳細画面に「旅費申請を提出」ボタンが表示される
  2. 「旅費申請を提出」ボタンをクリックすると、別タブで旅費/交通費申請の作成画面が表示される

ボタンをクリックして、別タブでワークフローの作成画面が表示されましたか?
今度は、別タブで旅費/交通費申請の作成画面が表示されたときに、自動で項目に値が入力される部分の設定をしていきます。

3. 「旅費/交通費申請」の申請フォームの設定を変更する

3-1. JavaScript内で利用する「項目コード」を設定する

「出張申請(国内)」の申請フォームの設定でも行った、「項目コード」を設定します。

「出張申請(国内)」の「旅費申請を提出」ボタンをクリックしたときに保存しているデータを「旅費/交通費申請」の項目に自動で入力できるようにします。

「旅費/交通費申請」に自動入力してほしい内容をマッピングしていくイメージです。
「旅費/交通費申請」の「目的」項目に、「出張申請(国内)」のどの項目のデータを反映したいか...
という設定をコピーしたい項目すべてに設定していきます。

例)
「出張申請(国内)」申請フォームの「目的」項目の項目コードは「purpose」です。
そのため、「旅費/交通費申請」申請フォームの「目的」項目の項目コードも「purpose」となります。

  • 「旅費/交通費申請」申請フォームの項目の設定内容
    ※「出張申請情報」と「出張申請URL」の項目コードについてはJavaScriptの中で、下記のように指定しているため、ここの設定でも、同じ項目コードを設定しています。
     申請番号は「trip_plan_number」、申請URLは「trip_plan_url」
項目名 項目タイプ 項目コード 備考
標題 文字列(1行)(標準項目) title  
社員番号 文字列(1行) employee_number  
所属本部 ラジオボタン department  
出張申請情報 文字列(1行) trip_plan_number 出張申請の申請番号を入力する項目
出張申請URL 文字列(複数行) trip_plan_url 出張申請のURLを入力する項目
期間 日付 start_date 期間の開始日
期間 日付 end_date 期間の終了日
出張先 文字列(複数行) destination  
目的 文字列(複数行) purpose  

3-2. JavaScriptのファイルを適用する:「旅費/交通費申請」申請フォーム編

別タブで旅費/交通費申請の作成画面が表示されたときに、自動で項目に値が入力されるように、「旅費/交通費申請」申請フォームに適用します。

このサンプルコードでは、保存した「出張申請(国内)」項目のデータを取得し、「旅費/交通費申請」の項目に設定、保存していたデータを削除するという部分を書いています。

  1. 下記のサンプルコードエディタにコピーして、ファイル名を「sample2.js」、文字コードを「UTF-8」で保存します。
    ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
  2. 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。
  3. 「カスタマイズ」項目を「適用する」を選択し、1. で保存した「sample2.js」ファイルを追加し、「設定する」をクリックします。
    GaroonWF_9.png

以上ですべての設定が完了しました!お疲れ様でした!

おわりに

ガルーン ワークフロー JavaScript カスタマイズ サンプル第一弾はいかがだったでしょうか?
同じ内容を入力していた部分がボタンを押すだけでよくなりました!
運用に合わせて、コピーする項目を設定していただくことで、皆様の環境でもお使えいただけると思います。
是非いろいろとチャレンジしてみてください。

他にも便利な使い方がありますので、その紹介はまた次の機会に。
今後もサンプルをご紹介させていただきますので、また見に来てください!

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

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

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