高度なレイアウト

機能概要

オリジナルで作成したHTMLファイルを使用して、タスク処理画面のレイアウトをカスタマイズします。
ルールに沿ってHTMLを記載することで、プロセスデータ項目を任意の場所に配置することができます。
また、ExcelやWordで作成した帳票を使用して入力フォームを作成することも可能です(Webページ形式で保存し、生成されたHTMLファイルを使用)。

すべてのHTML構文が有効ではありません。
使用する場合は、必ず本番環境と同条件のテスト環境であらかじめ動作確認を行ってください。

本機能は、HTMLを作成・編集できるユーザを対象とした高度な機能です。

ExcelやWordで生成したHTMLでは、URLリンクなどの編集が必要な場合があります。

機能一覧

プロセスデータ項目	プロセスデータ項目を設定し、プロセスを通じてやりとりされるデータ項目を定義します。プロセスデータ項目ごとに、[名称]・[データタイプ]・[入力条件]などを設定します。
データタイプ詳細	プロセスデータ項目の各データタイプに関するプロパティを説明します。
JavaScriptを使用したプロセスデータ項目の操作	JavaScriptを使用して、タスク処理時にプロセスデータ項目のデータを取得・編集・設定を行う方法を紹介します。 JavaScriptは、プロセスデータ項目設定画面の[デザイン]または[高度なレイアウト]にて記述することができます。
高度なレイアウト	オリジナルで作成したHTMLファイルを使用して、タスク処理画面のレイアウトをカスタマイズします。

項目説明

高度なレイアウト機能を使用して作成したタスク処理画面の表示例

項目名	必須	説明
タスクの選択	-	プレビューしたいタスクを選択します。選択後、[フォームプレビュー]ボタンを押下することで、指定したタスク画面のプレビュー画面が表示されます。
HTML入力フィールド	-	タスク処理画面として表示する画面レイアウトをHTMLで入力します。 HTMLの記載ルールに関する詳細は、こちらを参照してください。

操作メニュー説明

表示	操作メニュー	説明
	[フォームプレビュー]ボタン	選択したタスクのタスク処理画面に表示されるデータ項目やレイアウトをプレビュー画面で確認することができます。タスクの選択リストから確認したいタスクを選択し、[タスク処理画面/フォームプレビュー]ボタンを押下します。プレビューする際には、「データ編集許可」の設定が完了していることを確認してください。
	[デフォルトレイアウトを取得]ボタン	設定されているプロセスデータ項目を読み込み、シンプルなHTMLレイアウトを出力します。
	[高度なレイアウトを削除]ボタン	入力したレイアウトをすべて削除します。
	[戻る]ボタン	プロセスデータ項目画面に戻ります。

HTMLの記載ルール

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

操作手順

タスク処理画面のレイアウトとして使用したいHTMLファイルをあらかじめ準備します。

プロセスモデラーのプロセスデータ項目画面で、[高度なレイアウトを編集]ボタンを押下します。

準備したHTMLファイルのソースコードをコピーし、高度なレイアウト画面の入力フィールドにペーストします。
標準のレイアウトをもとに編集を行う場合は、[デフォルトレイアウトを取得]ボタンを押下してください。

プロセスデータ項目を挿入したい箇所に、上記のHTMLの記載ルールに従って「<div id="data-XX"></div>」を挿入します。
プロセスデータ項目の挿入方法に関する詳細は、こちらを参照してください。

レイアウトを確認したいタスクを選択し、[フォームプレビュー]ボタンを押下します。

プレビュー画面が表示され、画面レイアウトを確認します。

レイアウトに問題がなければ、[戻る]ボタンを押下して、プロセスデータ項目画面に戻ります。

プロセスデータ項目挿入の例

高度なレイアウト画面

タスク処理時の表示例

挿入前

<html>
  <head>
  </head>
  <body>
    <table class="form" style="width: 100%;">
    <tbody>
      <tr class="form-row"><th class="vertical-header">開催テーマ</th><td colspan="2">環境にやさしい街づくり</td></tr>
      <tr class="form-row"><th class="vertical-header">費用総額</th><td colspan="2">$ 23,000</td></tr>
      <tr class="form-row"><th class="vertical-header">開催国</th><td colspan="2">□ USA  □ UK  □ China  □ Japan  □ France  □ Germany  </td></tr>
      <tr class="form-row"><th class="vertical-header">開催日</th><td colspan="2">2012-06-01</td></tr>
      <tr class="form-row"><th>開催年/参加数</th><td>1日目</td><td>2日目</td></tr>
      <tr class="form-row"><th>2011</th><td>100</td><td>86</td></tr>
      <tr class="form-row"><th>2010</th><td>82</td><td>53</td></tr>
    </tbody>
    </table>
  </body>
</html>

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

HTML/CSSを貼り付けて[保存]すると、タスク処理画面のプレビューはこのような形になります。
入力フィールドがないため、このままではタスク処理時に入力をすることができません。

挿入後

<html>
  <head>
  </head>
  <body>
    <table class="form" style="width: 100%;">
    <tbody>
      <tr class="form-row"><th class="vertical-header">開催テーマ</th><td colspan="2"><div id="data-0"></div></td></tr>
      <tr class="form-row"><th class="vertical-header">費用総額</th><td colspan="2"><div id="data-1"></div></td></tr>
      <tr class="form-row"><th class="vertical-header">開催国</th><td colspan="2"><div id="data-2"></div></td></tr>
      <tr class="form-row"><th class="vertical-header">開催日</th><td colspan="2"><div id="data-3"></div></td></tr>
      <tr class="form-row"><td colspan="3"><div id="data-4"></div></td></tr>
    </tbody>
    </table>
  </body>
</html>

挿入後のHTMLソースの例です。

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

項目名	プロセスデータ定義番号	データタイプ
開催テーマ	0	文字型(単一行)
費用総額	1	数値型
開催国	2	選択型(ラジオボタン)
開催日	3	日付型(年月日)
参加数推移	4	テーブル型

各フィールドは、「プロセスデータ定義番号」と紐付いており、紐付いたプロセスデータ項目の型および定義に合わせてフィールドの表示が異なります(左表を参照してください)。
サンプル画像のテーブル型のプロセスデータでは、挿入された入力フィールドに値を入力しています。

仕様制限

HTML内には、CDATAセクションを定義することができません(例: <![CDATA[xxxx]]>)。
CDATAセクションを含んだプロセスアーカイブをインポートした場合、インポートエラーとなりプロセスモデルが新規作成できなくなります。
スマートフォンおよびタブレット端末では、高度なレイアウト機能に対応しておりません。
高度なレイアウト機能を適用したタスクを実行した場合、モバイル版標準の画面レイアウトで表示します。