検索
Close
カテゴリー内の他の記事

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

作成日
更新日
Moment.js はメンテナンスモードになり、日付処理できる代替ライブラリへの移行が推奨されています。
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。

Index

概要

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

前提条件と注意事項

  • このカスタマイズには、クラウド版 Garoon または パッケージ版 Garoon 4.6以降の環境が必要です。
  • ワークフロー JavaScriptカスタマイズは、JavaScriptを適用した後に申請されたWFが対象になります。
    それ以前に申請されたワークフローには適用されません。
  • サンプルプログラムは、その動作を保証するものではありません。
  • サンプルプログラムの技術的なサポート等は行っていません 。

できること

過去の申請をそのまま再利用した場合や入力間違い等があった場合、入力行を追加・削除できると便利ですね。
また、同じ外出先への往訪が複数回あったり、行きと帰りで利用交通機関が異なり２行分入力したいという場合には、行を複製して一部分だけを変更することができるととても楽になりますよね。

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

完成イメージ

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

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

WF-expense-16.gif

サンプルソースコード

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

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

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

おわりに

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

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

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

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

Avatar
naoki_nakagawa

この記事の内容で、
サンプルコード”【Garoon JavaScript API】旅費申請で入力補助を行う（予定の取得）”の「workflow-expense.js」へ
”【Garoon JavaScript API】旅費申請で入力補助を行う（行の編集）” サンプルコードを貼り付けようとしたのですが、
下記の486行にコメントアウトが見つかりませんがこちらはどう考えるのでしょうか？

３．2. で保存した「workflow-expense.js」の486行目のコメントアウトを外します。

Avatar
cybozu Development team

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

下記の486行にコメントアウトが見つかりませんが

ご指摘いただきありがとうございます。該当記述を修正いたしました。
コメントアウトされているのは、次の行になります。

494行    // addControlRowButton(event);

お手数をおかけしますが、ご確認のほどよろしくお願いいたします。

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