Garoonでワークフローを利用している方は必見です！
2017年5月の定期メンテナンスで、クラウド版GaroonワークフローにJavaScript/CSSでカスタマイズできるGaroon JavaScript APIが新規追加されました！
新しく追加されたAPIについての詳細は次の記事で確認してください。

• 2017/05/14の定期メンテナンスにおけるGaroon JavaScript API更新情報(2017/04/11)

このカスタマイズは、申請フォームごとに設定可能なので、各フォームにあったカスタマイズが可能となります。
どんな使い方ができるか、紹介しますので、ぜひ参考にしてみてください。
それでは、GaroonワークフローJavaScriptカスタマイズ サンプル第一弾をどうぞ！

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

• この機能は、現時点では、クラウド版Garoonまたはパッケージ版Garoon 4.6以降の環境が必要です。
• ワークフローJavaScriptカスタマイズは、JavaScriptを適用してから申請されたWFが対象になります。
  それ以前に申請されたワークフローには適用されません。

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

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

この2種類のワークフロー、一部の項目が同じの場合もあると思います。
たとえば、出張日程や目的、出張先、どの出張の旅費申請なのかわかるように出張申請のURL記載など、出張申請の内容を旅費申請にも記載します。
同じ内容を書くので、何度もコピペするという面倒な手作業が発生します。

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

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

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

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

ワークフローの項目の内容は、企業様によって異なります。
そのため、このサンプルの説明では、完成イメージで利用した「出張申請（国内）」と「旅費／交通費申請」の申請フォームに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ファイルをダウンロードしてください。

sample_form.xml

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

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

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

   

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

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

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

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

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

   

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

   

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

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

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

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

• 「出張申請（国内）」申請フォームの項目の設定内容

変更方法は下記です。

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です。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

   /** * Garoon JavaScript APIを使ったサンプルプログラム * Copyright (c) 2017 Cybozu * * Licensed under the MIT License */ (function() { 'use strict'; /** * 送信ボタンを押したときの挙動 * @param {object} event */ function onclickSendButton(event) { const request = event.request; // セッションストレージにデータを保存 sessionStorage.setItem('tripplan_title', request.items.title.value); sessionStorage.setItem('tripplan_employee_number', request.items.employee_number.value); sessionStorage.setItem('tripplan_department', request.items.department.value); sessionStorage.setItem('tripplan_start_date', request.items.start_date.value); sessionStorage.setItem('tripplan_end_date', request.items.end_date.value); sessionStorage.setItem('tripplan_destination', request.items.destination.value); sessionStorage.setItem('tripplan_purpose', request.items.purpose.value); sessionStorage.setItem('tripplan_number', request.number); // ワークフローの申請番号を保存 sessionStorage.setItem('tripplan_url', location.href); // ワークフローのURLを保存 // 旅費申請を開く window.open('/g/workflow/send_form.csp?cid=XXX&fid=XXX'); // 「cid=XXX&fid=XXX」のXXX部分は書き換えてください } /** * 値を送信するボタンを追加する * @param {object} event */ function addSendButton(event) { const space = garoon.workflow.request.getSpaceElement('send_button_space'); // 「（JavaScriptカスタマイズ用項目）」がない、過去の申請の場合は抜ける if (!space) { return; } const button = document.createElement('input'); button.setAttribute('type', 'button'); button.setAttribute('id', 'send_data_button'); button.setAttribute('value', '旅費申請を提出'); button.style.margin = '0px 30px 0px'; space.appendChild(button); const sendButton = document.getElementById('send_data_button'); sendButton.onclick = function() { onclickSendButton(event); }; } // 詳細画面表示イベント garoon.events.on('workflow.request.detail.show', (event) => { // 確認画面、下書き、プレビューの場合は何もしない if (event.confirm || event.draft || event.preview) { return; } addSendButton(event); }); })();

2. 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。
   

   

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

   

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

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

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

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

「出張申請（国内）」の申請フォームの設定でも行った、「項目コード」を設定します。
「出張申請（国内）」の「旅費申請を提出」ボタンをクリックしたとき、出張申請のデータを「旅費／交通費申請」の項目に自動で入力させます。
「旅費／交通費申請」に自動入力してほしい内容をマッピングしていくイメージです。
「旅費／交通費申請」の「目的」項目に、「出張申請（国内）」のどの項目のデータを反映したいか。
という設定をコピーしたい項目すべてに設定していきます。

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

• 「旅費／交通費申請」申請フォームの項目の設定内容
  「出張申請情報」と「出張申請URL」の項目コードについてはJavaScriptの中で、次のように指定しているため、ここの設定でも、同じ項目コードを設定しています。
  申請番号は「trip_plan_number」、申請URLは「trip_plan_url」

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

別タブで旅費／交通費申請の作成画面が表示されたときに、自動で項目に値が入力されるように、「旅費／交通費申請」申請フォームに適用します。
このサンプルコードでは、保存した「出張申請（国内）」項目のデータを取得し、「旅費／交通費申請」の項目に設定、保存していたデータを削除するという部分を書いています。

1. 次のサンプルコードエディタにコピーして、ファイル名を「sample2.js」、文字コードを「UTF-8」で保存します。
   ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

   /** * Garoon JavaScript APIを使ったサンプルプログラム * Copyright （c） 2017 Cybozu * * Licensed under the MIT License */ (function() { 'use strict'; garoon.events.on('workflow.request.create.show', (event) => { // セッションストレージに値がない場合は抜ける if (!sessionStorage.getItem('tripplan_title')) { return; } const request = event.request; // セッションストレージからデータを取得 request.items.title.value = sessionStorage.getItem('tripplan_title'); request.items.employee_number.value = sessionStorage.getItem('tripplan_employee_number'); request.items.department.value = sessionStorage.getItem('tripplan_department'); request.items.start_date.value = sessionStorage.getItem('tripplan_start_date'); request.items.end_date.value = sessionStorage.getItem('tripplan_end_date'); request.items.destination.value = sessionStorage.getItem('tripplan_destination'); request.items.purpose.value = sessionStorage.getItem('tripplan_purpose'); request.items.trip_plan_number.value = sessionStorage.getItem('tripplan_number'); // ワークフローの申請番号 request.items.trip_plan_url.value = sessionStorage.getItem('tripplan_url'); // ワークフローのURL // セッションストレージからデータを削除 sessionStorage.removeItem('tripplan_title'); sessionStorage.removeItem('tripplan_employee_number'); sessionStorage.removeItem('tripplan_department'); sessionStorage.removeItem('tripplan_start_date'); sessionStorage.removeItem('tripplan_end_date'); sessionStorage.removeItem('tripplan_destination'); sessionStorage.removeItem('tripplan_purpose'); sessionStorage.removeItem('tripplan_number'); sessionStorage.removeItem('tripplan_url'); return event; }); })();

2. 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。

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

   

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

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

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