【Garoon JavaScript API】旅費申請で入力補助を行う（行の編集）

概要

今回は「【Garoon JavaScript API】旅費申請で入力補助を行う（予定の取得）」の続きとして、旅費の入力行を追加/削除/複製するサンプルをご紹介します。
「【Garoon JavaScript API】旅費申請で入力補助を行う（予定の取得）」を元に「行の編集」機能を追加するので、本Tipsを読む前に、必ず「【Garoon JavaScript API】旅費申請で入力補助を行う（予定の取得）」を読んでください。

前提条件と注意事項

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

できること

今回は、そのような便利な機能が揃うカスタマイズサンプルをお届けいたします。

完成イメージ

• 追加ボタン
  追加ボタンをクリックすると、ボタンをクリックした行の下の行に値が空白の行が追加されます。
  日付は「該当月」の1日で入力されます（例：該当月が1月の場合、日付は1月1日）。
  ※最終行のボタンが押された場合は何もしません。
  ※対象月が空白の場合、空白の日付（----/--/--）で登録されます。
  
  
•  削除ボタン
  削除ボタンをクリックすると、ボタンをクリックした行が削除されます。
  ※削除されてできる空白の最終行の日付は該当月の1日になります。
  ※対象月が空白の場合、空白の日付（----/--/--）で登録されます。
  
  
• 複製ボタン
  複製ボタンをクリックすると、ボタンをクリックした行の下にボタンをクリックした行の値が入った行が追加されます。
  ※最終行のボタンが押された場合は何もしません。

 今回紹介するサンプルソースコードでは、行数に10を指定した為、行を追加・削除・複製しても、表示される行数は変わりません。

サンプルソースコード

JavaScript/CSSカスタマイズの適用

ワークフローの申請フォームやJavaScript/CSSカスタマイズの適用設定など、「【Garoon JavaScript API】旅費申請で入力補助を行う（予定の取得）」で用意した環境を利用します。
以下の手順に従って、「workflow-expense.js」を修正しアップし直して、CSSファイルを追加してください。

1. [システム管理（各アプリケーション） > ワークフロー > 申請フォームの一覧 > 申請フォームの詳細 > JavaScript/CSSによるカスタマイズ画面]を表示します
2. 「【Garoon JavaScript API】旅費申請で入力補助を行う（予定の取得）」で添付した「workflow-expense.js」をクリックしてダウンロードします。
3. 「workflow-expense.js」の491行目のコメントアウトを外します。
4. 上記のサンプルソースをコピーして、「workflow-expense.js」の420行目に貼り付けます。
5. 手順4.のファイルをアップし直します。
6. 以下のサンプルコードをエディタにコピーして、ファイル名を「workflow-expense.css」で保存します。
   ※ファイル名は任意ですが、ファイルの拡張子は「css」にしてください。
7. [JavaScript/CSSによるカスタマイズ画面]の［CSSカスタマイズ］に「workflow-expense.css」をアップしてください。
   
8. ［設定する］ボタンをクリックします。

おわりに

「【Garoon JavaScript API】旅費申請で入力補助を行う」の第二弾として、「行の編集」編をご紹介しました。
予定の取得と組み合わせてお使いいただければ、月末申請はもう怖くない！
ぜひ試してみてください。

Garoon JavaScript APIを使ってのカスタマイズは、他にも色々な事ができるかと思います。ぜひご自分でトライしてみてください＾＾