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

目次

はじめに

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

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

概要

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

前提条件と注意事項

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

できること

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

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

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

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

完成イメージ

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

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

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

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 ファイルをダウンロードしてください。

sample_form.xml

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

詳細設定

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

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

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

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

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

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

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

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

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

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

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

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

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

     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. 「旅費/交通費申請」の申請フォームの設定を変更する

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」にしてください。

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

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