ワークフローのカスタマイズ

ワークフローのカスタマイズについて説明します。
カスタマイズが反映されるのは、カスタマイズ適用後に作成した申請データです。
カスタマイズ適用前に作成した申請データには反映されません。

ワークフローのカスタマイズを許可する

JavaScriptファイルやCSSファイルを使ったカスタマイズを許可するかどうかを設定します。
カスタマイズを許可すると、「申請フォームの詳細」画面に、JavaScriptファイルやCSSファイルを適用するための操作リンクや、JavaScriptカスタマイズ用項目を追加するための操作リンクが表示されます。
カスタマイズを許可している場合の画面
操作手順:
  1. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  2. [Garoonシステム管理]をクリックします。
  3. 「各アプリケーションの管理」タブを選択します。
  4. [ワークフロー]をクリックします。
  5. [一般設定]をクリックします。
  6. 「一般設定」画面の「JavaScript / CSSによるカスタマイズの許可」項目で、「許可する」を選択します。
    許可するラジオボタンが赤枠で囲まれた画像
  7. 設定内容を確認し、[適用する]をクリックします。
補足
  • カスタマイズを許可する設定から許可しない設定に変更すると、適用中のJavaScriptファイルやCSSファイルは無効になります。
    ただし、申請フォームに設定しているJavaScriptカスタマイズ用項目はそのまま残ります。

JavaScriptカスタマイズ用項目を設定する

JavaScriptカスタマイズ用項目の追加、変更、および削除の操作を説明します。
ワークフローのカスタマイズで、申請フォームのデザインを変更する目的で空白やスペースを配置する場合は、JavaScriptカスタマイズ用項目を使用します。JavaScriptカスタマイズ用項目を配置した場所に、JavaScriptやCSSで定義された項目が配置されます。
JavaScriptカスタマイズ用項目はカスタマイズに使用する項目です。カスタマイズしない申請フォームでは設定不要です。
カスタマイズに関する情報は、cybozu developer networkのページを参照してください。
注意
  • JavaScriptカスタマイズ用項目の操作中は、ユーザーが利用できないように、申請フォームを無効にすることを推奨します。
    詳細は、申請フォームを無効にする方法を参照してください。
  • JavaScriptカスタマイズ用項目にアクセス権は設定できません。
  • JavaScriptカスタマイズ用項目は、経路分岐に利用できません。

JavaScriptカスタマイズ用項目を追加する

申請フォームにJavaScriptカスタマイズ用項目を追加します。
JavaScriptカスタマイズ用項目を追加するには、ワークフローのカスタマイズが許可されている必要があります。
操作手順:
  1. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  2. [Garoonシステム管理]をクリックします。
  3. 「各アプリケーションの管理」タブを選択します。
  4. [ワークフロー]をクリックします。
  5. [申請フォームの一覧]をクリックします。
  6. 「申請フォームの一覧」画面で、カテゴリーを選択し、JavaScriptカスタマイズ用項目を追加する申請フォームの申請フォーム名をクリックします。
  7. 「申請フォームの詳細」画面で、「申請フォームの項目一覧」の[JavaScriptカスタマイズ用項目の追加]をクリックします。
    JavaScriptカスタマイズ用項目を追加する操作リンクが赤枠で囲まれた画像
  8. 「JavaScriptカスタマイズ用項目の追加」画面で、必要な項目を設定します。
    • 項目コード:
      JavaScriptカスタマイズ用項目を識別するための固有のコードです。100文字まで入力できます。
      半角英数字、「-」(ハイフン)、および「_」(アンダーバー)を使用できます。
      項目コードが1つの申請フォーム内で重複していると、エラーが発生します。
    • 右隣への配置:
      「直前の項目につづけて、右隣に配置する」のチェックボックスを選択すると、1つ前の項目の右に配置されます。
    JavaScriptカスタマイズ用項目の追加画面
  9. 設定内容を確認し、[追加する]をクリックします。
    追加した項目は、「申請フォームの項目一覧」の末尾に表示されます。

JavaScriptカスタマイズ用項目を変更する

JavaScriptカスタマイズ用項目の設定内容を変更します。
操作手順:
  1. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  2. [Garoonシステム管理]をクリックします。
  3. 「各アプリケーションの管理」タブを選択します。
  4. [ワークフロー]をクリックします。
  5. [申請フォームの一覧]をクリックします。
  6. 「申請フォームの一覧」画面で、カテゴリーを選択し、JavaScriptカスタマイズ用項目を変更する申請フォームの申請フォーム名をクリックします。
  7. 「申請フォームの詳細」画面の「申請フォームの項目一覧」で、変更するJavaScriptカスタマイズ用項目の項目名をクリックします。
  8. 「JavaScriptカスタマイズ用項目の詳細」画面で、[変更する]をクリックします。
    JavaScriptカスタマイズ用項目を変更する操作リンクが赤枠で囲まれた画像
  9. 「JavaScriptカスタマイズ用項目の変更」画面で、必要な項目を設定します。
  10. 設定内容を確認し、[変更する]をクリックします。
  11. 配置を変更した場合は、プレビュー画面で申請フォームの表示を確認します。
    詳細は、申請フォームのプレビューを参照してください。

JavaScriptカスタマイズ用項目を順番変更する

JavaScriptカスタマイズ用項目の順番を変更します。
操作手順は、項目や空行の順番を変更する場合と同じです。
操作手順:
  1. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  2. [Garoonシステム管理]をクリックします。
  3. 「各アプリケーションの管理」タブを選択します。
  4. [ワークフロー]をクリックします。
  5. [申請フォームの一覧]をクリックします。
  6. 「申請フォームの一覧」画面で、カテゴリーを選択し、JavaScriptカスタマイズ用項目の順番を変更する申請フォームの申請フォーム名をクリックします。
  7. 「申請フォームの詳細」画面で、「申請フォームの項目一覧」の[順番変更する]をクリックします。
    順番変更する操作リンクが赤枠で囲まれた画像
  8. 「項目の順番変更」画面で、JavaScriptカスタマイズ用項目の順番を変更します。
    項目の順番変更画面
  9. 設定内容を確認し、[変更する]をクリックします。
  10. プレビュー画面で申請フォームの表示を確認します。
    詳細は、申請フォームのプレビューを参照してください。

JavaScriptカスタマイズ用項目を削除する

JavaScriptカスタマイズ用項目を削除します。
カスタマイズが反映されるのは、カスタマイズ適用後に作成した申請データです。
このため、JavaScriptカスタマイズ用項目を削除しても、カスタマイズ適用前に作成した申請データには反映されません。
注意
  • 削除したJavaScriptカスタマイズ用項目は元に戻せません。

1件ずつJavaScriptカスタマイズ用項目を削除する

1件ずつJavaScriptカスタマイズ用項目を削除します。
操作手順:
  1. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  2. [Garoonシステム管理]をクリックします。
  3. 「各アプリケーションの管理」タブを選択します。
  4. [ワークフロー]をクリックします。
  5. [申請フォームの一覧]をクリックします。
  6. 「申請フォームの一覧」画面で、カテゴリーを選択し、JavaScriptカスタマイズ用項目を削除する申請フォームの申請フォーム名をクリックします。
  7. 「申請フォームの詳細」画面の「申請フォームの項目一覧」で、削除するJavaScriptカスタマイズ用項目の項目名をクリックします。
  8. 「JavaScriptカスタマイズ用項目の詳細」画面で、[削除する]をクリックします。
    削除する操作リンクが赤枠で囲まれた画像
  9. 「JavaScriptカスタマイズ用項目の削除」画面で、[はい]をクリックします。
  10. プレビュー画面で申請フォームの表示を確認します。
    詳細は、申請フォームのプレビューを参照してください。

複数のJavaScriptカスタマイズ用項目をまとめて削除する

削除するJavaScriptカスタマイズ用項目を選択して、まとめて削除します。
操作手順:
  1. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  2. [Garoonシステム管理]をクリックします。
  3. 「各アプリケーションの管理」タブを選択します。
  4. [ワークフロー]をクリックします。
  5. [申請フォームの一覧]をクリックします。
  6. 「申請フォームの一覧」画面で、カテゴリーを選択し、JavaScriptカスタマイズ用項目を削除する申請フォームの申請フォーム名をクリックします。
  7. 「申請フォームの詳細」画面の「申請フォームの項目一覧」で、削除するJavaScriptカスタマイズ用項目のチェックボックスを選択し、[削除する]をクリックします。
    削除するボタンが赤枠で囲まれた画像
  8. 「項目の一括削除」画面で、[はい]をクリックします。
  9. プレビュー画面で申請フォームの表示を確認します。
    詳細は、申請フォームのプレビューを参照してください。

JavaScript / CSSファイルを適用する

申請フォームにJavaScriptファイルやCSSファイルを適用します。
注意
  • カスタマイズ後の動作や表示の確認が完了するまで、ユーザーが利用できないように、申請フォームを無効にすることを推奨します。
    詳細は、申請フォームを無効にする方法を参照してください。
  • JavaScriptファイルやCSSファイルは、URLで指定することを推奨します。
    ファイル形式で指定すると、Garoonのデータにアクセスした際、ファイルを保存しているデータにもアクセスします。サーバーに対する同時アクセス数が増加し、サーバーのパフォーマンスが低下する場合があります。
操作手順:
  1. お客様自身で、JavaScriptファイルやCSSファイルを準備します。
  2. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  3. [Garoonシステム管理]をクリックします。
  4. 「各アプリケーションの管理」タブを選択します。
  5. [ワークフロー]をクリックします。
  6. [申請フォームの一覧]をクリックします。
  7. 「申請フォームの一覧」画面で、カテゴリーを選択し、JavaScriptファイルやCSSファイルを適用する申請フォームの申請フォーム名をクリックします。
  8. 「申請フォームの詳細」画面で、「申請フォーム情報」の[JavaScript / CSSによるカスタマイズ]をクリックします。
    JavaScript / CSSによるカスタマイズの操作リンクが赤枠で囲まれた画像
  9. 「JavaScript / CSSによるカスタマイズ」画面の「JavaScriptカスタマイズ」項目で、適用するJavaScriptファイルを設定します。
    ファイルとリンクを合わせて、30個まで追加できます。
    • ファイル:
      拡張子が「.js」のファイルのみ追加できます。
      5MBまでのファイルをアップロードできます。
    • リンク:
      「https://」で始まる512文字以下のURLを指定します。
    JavaScriptファイルを追加する操作リンクが赤枠で囲まれた画像
  10. 「CSSカスタマイズ」項目で、適用するCSSファイルを設定します。
    ファイルとリンクを合わせて、30個まで追加できます。
    • ファイル:
      拡張子が「.css」のファイルのみ追加できます。
      5MBまでのファイルをアップロードできます。
    • リンク:
      「https://」で始まる512文字以下のURLを指定します。
    CSSファイルを追加する操作リンクが赤枠で囲まれた画像
  11. 必要に応じて、ファイルやリンクの順番を変更します。
    JavaScriptファイルは、上から順に実行されます。
    順番を変更するファイルやリンクのチェックボックスを選択し、[上へ]または[下へ]をクリックします。
    順番を変更する操作リンクが赤枠で囲まれた画像
  12. 「カスタマイズ」項目で、[適用する]を選択します。
    適用するラジオボタンが赤枠で囲まれた画像
  13. 設定内容を確認し、[設定する]をクリックします。
  14. カスタマイズが適用される画面で、デザインや項目の機能などに問題がないことを確認します。
  15. 申請フォームを有効にします。
    詳細は、申請フォームの有効化を参照してください。