cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

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

作成日
更新日

Index

はじめに

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

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

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

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

概要

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

前提条件と注意事項

  • この機能は、現時点では、クラウド版 Garoon または パッケージ版 Garoon 4.6以降の環境が必要です。
  • ワークフロー 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内で利用する「項目コード」を設定する

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

  • 「出張申請(国内)」申請フォームの項目の設定内容
項目名 項目タイプ 項目コード 備考
標題 文字列（１行）(標準項目) title  
社員番号 文字列（１行） 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」
項目名 項目タイプ 項目コード 備考
標題 文字列（１行）(標準項目) title  
社員番号 文字列（１行） employee_number  
所属本部 ラジオボタン department  
出張申請情報 文字列（１行） 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 カスタマイズ サンプル第一弾はいかがだったでしょうか？
同じ内容を入力していた部分がボタンを押すだけでよくなりました！
運用に合わせて、コピーする項目を設定していただくことで、皆様の環境でもお使えいただけると思います。
是非いろいろとチャレンジしてみてください。

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

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

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

Avatar
阿久津

旅費申請が「承認」となった場合に、出張申請の詳細画面の【旅費申請の提出】ボタンは非表示には出来ないですか？

Avatar
cybozu Development team

阿久津 様

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

ワークフロー申請が承認されたときのイベントがございますので可能かと思います。

また、こちらのコメント欄は記事へのフィードバック用となります。

機能拡張のカスタマイズ方法等についてはぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics/200674863

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

Avatar
usa

とても便利で使用しているのですが，項目タイプが日付「日付のみ」であれば大丈夫なのですが，「日付と時刻」とするとエラー (GRN_CMMN_03009)が表示され，valueが不正ですとでてしまいます。何か良い方法はないでしょうか？

Avatar
cybozu Development team

usa 様

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

項目タイプ：日付（日付と時刻）の場合、
requestオブジェクトの形式が、項目タイプ：日付（日付のみ）の場合とは異なるため、コードの修正が必要になります。
ワークフローのrequestオブジェクト の「日付」項目のtype「DATE」「DATETIME」の形式をご確認ください。

以下の3か所を修正していただくと表示形式「日付と時刻」の場合もコピーされるかと思います。

※項目名「期間」を表示形式「日付と時刻」に変更した場合
■sample1.js

①21行目

sessionStorage.setItem('tripplan_start_date', request.items.start_date.value);

を

sessionStorage.setItem('tripplan_start_date', request.items.start_date.value.date);
sessionStorage.setItem('tripplan_start_time', request.items.start_date.value.time);

に変更する。

■sample2.js

②22行目

request.items.start_date.value = sessionStorage.getItem('tripplan_start_date');

を

request.items.start_date.value.date = sessionStorage.getItem('tripplan_start_date');
request.items.start_date.value.time = sessionStorage.getItem('tripplan_start_time');

に変更する。

③33行目

sessionStorage.removeItem('tripplan_start_date');

を

sessionStorage.removeItem('tripplan_start_date');
sessionStorage.removeItem('tripplan_start_time');

に変更する。

cybozu Development teamにより編集されました
Avatar
山秋

今日から始めたばかりの者です。

初歩的な質問過ぎて、ご質問させていただくのも憚るほどですが、恥を忍んでお問い合わせさせていただきます。

ぜひ利用させていただこうと思い、「sample_form.xml」をダウンロードし、指示通りに作業をしたつもりですが、ボタンが表示されません。。。　

 

例えば、2-4. JavaScriptのファイルを適用する：「出張申請（国内）」申請フォーム編の以下ですが、こちらは、「旅費／交通費申請」の申請フォームのIDとなりますでしょうか。。。。

※フォームIDは、ワークフローの申請の作成画面のURLにてご確認ください。
　例）https://{subdomain}.cybozu.com/g/send_form.csp?cid=12&fid=207 ←このIDです。

 

など、「予定の取得」などはできるのですが、、、何が問題なのかもわかりません。。。ど初心者が陥りやすいポイントなどございますでしょうか？

Avatar
cybozu Development team

山秋 様

お世話になっております。cybozu Development team 運営でございます。

大変申し訳ありませんが、こちらのコメント蘭は記事への直接のフィードバックを目的としています。
技術的なことで不明点がございましたら、コミュニティをご活用ください。

どうぞよろしくお願いいたします。

Avatar
nemo

とても便利そうな機能なので、さっそく手順通りに進めて設定しました。

“2-3. JavaScript内で利用する「項目コード」を設定する”までの時点で、
［JavaScriptカスタマイズ用項目］がプレビューで表示されているのでしょうか？

表示されていなければ、何か設定がおかしい、となると思うので、作業確認checkpointのようなものを挟んでいただけると
より説明が分かりやすいと思いました。ご検討宜しくお願い致します。

※自己レス

申請後、承認完了しないとボタンが表示されないのですね。

作成途中のプレビューで表示されるわけないですね。

その旨を注意書きしていただけると私を含めたビギナーには優しく感じると思います。

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

nemoにより編集されました
Avatar
cybozu Development team

nemo 様

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

記事に対するフィードバックをいただきありがとうございます。

　 > “2-3. JavaScript内で利用する「項目コード」を設定する”までの時点で、
 　> JavaScriptカスタマイズ用項目］がプレビューで表示されているのでしょうか？

　　「2-1. 『JavaScriptカスタマイズ用項目の追加』項目を追加する」で「追加」ボタンを押した時点では、プレビューで表示されません。　
　　JavaScript ファイルを適応後、出張申請ワークフローの「詳細画面」にボタンが表示されるカスタマイズとなっております。
　　また、本カスタマイズはプレビューには表示されませので、申請の詳細画面からご確認ください。

　> ブラウザも、ie、chrome、firefoxと変えてみましたが、ボタンが表示されません。
    > 何か手掛かりはないでしょうか。。

　　本記事に沿って Chrome にて検証したところ、正しくボタンが表示されることを確認いたしました。
　　お手数ですが、設定項目の確認などをもう一度記事に沿ってお試しいただけますでしょうか。
　　また、「sample1.js」にも、環境ごとに変更していただく箇所がございますので併せてご確認ください。

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

cybozu Development teamにより編集されました
Avatar
monaca

出張申請で利用させていただきました。
別でワークフロー→ワークフローのコピペがしたくて同じように作っ見たのですがワークフローは起動するもののデータはコピーされてません。
もちろんの話ですけど、どんなワークフローでも応用出来るのですよね?
なぜなんでしょう‥

Avatar
cybozu Development team

中島 様

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

＞どんなワークフローでも応用出来るのですよね?
ソースコード中の、フィールドコードやURLなどを申請フォームに応じて変更すれば、出来るはずです。

動かない原因はデバッグによりご確認いただけます。
次の記事はご参考になるかと思います。

動かない？そんな時はデバッグをしてみよう！入門編

kintoneカスタマイズの基本的なデバッグの流れを身につけよう

 

また、こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。

コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います

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

 

Avatar
n

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

サンプル通り試したのですが

《旅費申請を提出》ボタンを押しても

《ガルーン　404 - ファイルまたはディレクトリが見つかりません。 検索中のリソースは削除された可能性があります。または、名前が変更されたか、一時的に使用不可能になっています。》

となってしまいまいます。

原因を教えて頂けると助かります。

Avatar
cybozu Development team

n 様

cybozu developer network 運営局です。

おそらくですが、「sample1.js」の29行目で指定する「旅費／交通費申請」の申請フォームのパスが正しくないのではと思われます。

2-4. JavaScriptのファイルを適用する：「出張申請（国内）」申請フォーム編　にある通り、
n 様の環境における「旅費／交通費申請」の申請フォームのURLと適用している「sample1.js」の29行目の g/workflow/send_form.csp?cid=XXX&fid=XXX の太文字部分とあっているか、ご確認ください。
あっていなければ修正して動作するかをご確認いただけないでしょうか。

Avatar
n

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

パスを書換上書きして再度試したのですがやはり同じ現象となってします。

Avatar
cybozu Development team

n 様

cybozu developer network 運営局です。

n 様がご利用されている Garoon はパッケージ版でしょうか？
パッケージ版の場合、ワークフローのURLが異なる可能性があります。

以下の2つのURLを見比べてください。

  1. 通常のワークフローを申請する手順で、「旅費／交通費申請」の「申請の作成（内容の入力）」画面のURL
  2. 「旅費申請を提出」ボタンを押したときに開かれる「申請の作成（内容の入力）」画面のURL」

もし異なっていたら、「sample1.js」の29行目を 通常のワークフローを申請する手順で、1. の通常のワークフローの手順で開いた方のURLに合わせていただきたいです。

例えば、https://onlinedemo2.cybozu.info/scripts/garoon/grn.exe/workflow/send_form?cid=2&fid=25 という URL だった場合、
ホスト名以降の部分（太文字）を29行目に指定します。

window.open('/scripts/garoon/grn.exe/workflow/send_form?cid=2&fid=25');

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

Avatar
n

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

無事に解決しました。

ご丁寧にありがとうございました。

Avatar
c-miya

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

こちらは他の申請者が申請したワークフローからの内容引継ぎはできないのでしょうか。

公開一覧から上記の機能を利用すると、申請者が自分の場合はデータが引き継がれますが、

他者が申請したワークフローの場合は空欄になってしまいます。

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

Avatar
cybozu Development team

c-miya 様

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

確認いたしましたところ、同様の状態を再現することができませんでした。
検証にて、公開一覧から本記事のカスタマイズを利用して別の申請者から旅費申請を行った場合、
データが引き継がれることを確認いたしました。

恐れ入りますが、こちらのコメント欄は記事へのフィードバックを目的としているため、
万が一サンプルコードをもとにカスタマイズを行うなど、
記事から派生した質問の場合はコミュニティの Garoon カスタマイズフォーラムをご活用ください。

Avatar
c-miya

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

サンプルコードを元に再度書き直してみたところ、

無事に他者のデータであってもデータ引継ぎができました。

お手数をおかけして申し訳ございませんでした。

ありがとうございます。

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