Search this site

Workflow Sample

Workflow Sample
Workflow Sample

Contact

MD-01-E : HTMLテンプレート編集

オリジナルで作成したHTMLファイルを利用して、タスク実行画面のデザインをカスタマイズできます。
ルールに沿ってHTMLを記載することで、プロセスデータ項目を任意の場所に配置することができます。
また、ExcelやWordで作成した帳票を利用して入力フォームを作成することも可能です。

この機能を使用するには、[プロセスモデル管理権限]が必要です。
本機能は、HTMLを作成・編集できるユーザを対象とした高度な機能です。



1. 機能の概要

  • HTMLを利用して、オリジナルのタスク実行画面を作成することができます。
  • HTML/CSSを利用して、表示内容・スタイルを自由に設計することができます。
  • プロセスデータ項目の入力フィールドを任意の場所に配置することができます。
  • タスク実行画面に表示されるプロセスデータ項目の表示・入力は、読み書き設定に依存します。

2. HTMLの記載ルールと入力フィールド設定

タスク実行画面に挿入されるHTML要素、及びプロセスデータ項目の挿入方法について説明します。

  HTMLタグ
 説明 
1  <body>...</body>
  • タスク実行画面のコンテンツ(メインエリアの表示内容)として挿入されます。
    • <head>タグに記載されたソースは挿入対象となりません。
  • <body>...</body>内には、任意の要素を記述できます。
2 <div id="data-XX"></div>
  • 左記のフォーマットの<div>タグで囲まれた場所に、プロセスデータ項目が挿入されます。
  • id要素の値は、[data-<プロセスデータ定義番号>]の形式で入力してください。
    • プロセスデータ定義番号は、[プロセスデータ項目]の設定画面(プロセスモデラー)にて確認することができます。
  • 挿入したプロセスデータ項目について、タスク実行画面での入力・表示は、[読み書き権限]の設定内容に従います。
    • [読み書き]: データタイプに対応した入力フィールドが挿入されます。
    • [読み込み]: 入力されているプロセスデータが表示されます。
    • [なし]: 入力フィールド、プロセスデータともに表示されません。
3 <style>...</style>
  • スタイルの設定にスタイルシートを利用することができます。
  • ただし、アプリケーション既定のスタイルも有効ですので、スタイルの適用優先順位によっては、意図するスタイルが反映されない場合がありますのでご注意下さい。
  • type属性が"text/css"の場合も挿入の対象となります (<style type="text/css">)


3. 操作手順

  操作
 説明 
0  
準備
  • タスク実行画面のテンプレートとして利用したい、HTMLファイルをあらかじめ準備してください。
1  編集開始 
  • プロセスモデル詳細画面で、[HTMLテンプレート編集]ボタンを押下します。
2  コピー&ペースト 
  • 準備したHTMLファイルのソースコードをコピーし、HTMLテンプレート編集画面の入力欄にペーストします。
  • 標準のテンプレートをもとに編集を行う場合は、最下部にある[デフォルトテンプレートを取得]を押下して下さい。
    • 「3.プロセスデータ項目の挿入」が行われているテンプレートを取得することができます。これをもとに、レイアウトやデザイン変更を行うことも可能です。
3 プロセスデータ項目の挿入 
  • プロセスデータ項目を挿入したい箇所に、プロセスデータ項目の挿入方法にしたがって<div id="data-XX"></div>を挿入します。
    • 挿入方法の詳細については、4. プロセスデータ項目挿入のサンプルを参照してください。
4 保存 
  • 下部の[保存]ボタンを押下して、編集内容を保存します。
5
 プレビューの確認
  • [詳細へ戻る]ボタンを押下して、プロセスモデル詳細画面を表示させます。
  • プロセス図にて、タスクのプロパティを開きます。
  • [タスク実行画面プレビュー]ボタンを押下して、各タスクのプレビュー画面を確認します。

    4. プロセスデータ項目挿入のサンプル

      HTML編集画面  実行画面の画像 
    挿入前

    HTMLテンプレート編集画面

    <html> <head> </head> <body> <table class="form" style="width: 100%;"> <tbody> <tr class="form-row"><th class="vertical-header">AA</th><td colspan="4">Theme</td></tr> <tr class="form-row"><th class="vertical-header">BB</th><td colspan="4">$ xxx</td></tr> <tr class="form-row"><th class="vertical-header">CC</th><td colspan="4">□ USA □ UK □ China □ Japan □ France □ Germany □ Canada □ Russia □ South Korea □ India </td></tr> <tr class="form-row"><th class="vertical-header">DD</th><td colspan="4">2010.6.1.</td></tr> <tr class="form-row"><th>ZZ</th><td>YY</td><td>XX</td><td>WW</td><td>VV</td></tr> <tr class="form-row"><th>2009</th><td>7</td><td>6</td><td>8</td><td>8</td></tr> <tr class="form-row"><th>2008</th><td>8</td><td>6</td><td>5</td><td>9</td></tr> </tbody> </table> </body> </html>

    • プロセスデータ項目の挿入前のHTMLソースです。
    • 「挿入後」との比較のため、本サンプルでは、「入力値」をHTMLソース内に記述しています。

    • HTML/CSSを貼り付けて[保存]すると、タスク実行画面のプレビューはこのような形になります。
    • プロセスデータ項目を挿入していないため、入力フィールドが表示されません。
    挿入後

    HTMLテンプレート編集画面

    <html> <head> </head> <body> <table class="form" style="width: 100%;"> <tbody> <tr class="form-row"><th class="vertical-header">AA</th><td colspan="4"><div id="data-0"></div></td></tr> <tr class="form-row"><th class="vertical-header">BB</th><td colspan="4"><div id="data-1"></div></td></tr> <tr class="form-row"><th class="vertical-header">CC</th><td colspan="4"><div id="data-2"></div></td></tr> <tr class="form-row"><th class="vertical-header">DD</th><td colspan="4"><div id="data-3"></div></td></tr> <tr class="form-row"><td colspan="5"><div id="data-4"></div></td></tr> </tbody> </table> </body> </html>

    • 以下の、プロセスデータ項目を挿入して、タスク実行画面に入力フィールドを定義します

      プロセスデータ定義番号  データタイプ
       0 文字型-単一行 
       1  数値型
       2  選択型-ラジオボタン
       3  日付型-年月日
       4  テーブル型

    • プロセスデータ項目を挿入した箇所に、データ項目に応じた入力フィールドが表示されています。
    • サンプル画像では、挿入された入力フィールドに値を入力しています。