佐藤さんは、以下の手順でタスク処理画面のデザインを編集していきます。
(説明)
表示されたHTMLは、現在のデータ項目に対応したデータ項目番号で表示画面を生成しています。
このデータを参考にデータ項目を当てはめると新しい稟議画面を作成しやすくなります。
Excel2010以降では、対象シートのみを選択範囲としてWebページ(HTMLファイル)を発行します。また、ソフトウェアおよびバージョンによりHTMLファイルの出力方法が異なる場合があります。
(説明)
「$DSBPM_HOME¥sample¥稟議(物品購入).htm」は本チュートリアル用に用意されたHTMLサンプルです。
このHTMLサンプルは、「$DSBPM_HOME¥sample¥稟議(物品購入).xls」にあるExcel文書をWebフォームで出力したものを使用しています。
(説明)
ここまで手順どおりに作業している場合は、以下のように置き換えることで挿入できます。
| 項目名 | 挿入箇所 | 挿入タグ | |
|---|---|---|---|
| 申請日(年-月-日) | (1)○○○○○○○○○○○○○○○○○ | → | <div id="data-11"></div> |
| 部署 | (2)○○○○○○○○○○○○○○○○○ | → | <div id="data-12"></div> |
| 氏名 | (3)○○○○○○○○○○○○○○○○○ | → | <div id="data-13"></div> |
| 件名 | (4)○○○○○○○○○○○○○ | → | <div id="data-title"></div> |
| 稟議要約 | (5)○○○○○○○○○○○○○ | → | <div id="data-0"></div> |
| 稟議 | (6)○○○○○○○○○○○○○ | → | <div id="data-1"></div> |
| 明細 | 手順3-6を参照。 | → | |
| 添付書類 | (7)○○○○○○○○○○○○○ | → | <div id="data-3"></div> |
| 承認(部長) | (8)○○○○○○○○○○○○○ | → | <div id="data-4"></div> |
| 承認コメント(部長) | (9)○○○○○○○○○○○○○ | → | <div id="data-8"></div> |
| 追加詳細 | (10)○○○○○○○○○○○○○ | → | <div id="data-5"></div> |
| チェック | (11)○○○○○○○○○○○○○ | → | <div id="data-6"></div> |
| 承認(社長) | (12)○○○○○○○○○○○○○ | → | <div id="data-7"></div> |
| 承認コメント(社長) | (13)○○○○○○○○○○○○○ | → | <div id="data-9"></div> |
| 確認コメント | (14)○○○○○○○○○○○○○ | → | <div id="data-10"></div> |
- 明細については、テーブルとの置き換えを行います。
- 左の図のように明細のカラムを「<div id="data-14"></div>」に置き換えます。(明細カラムは1149行目周辺です。)
| 削除する箇所 | 明 細 |
|---|---|
| ↓ | |
| 置き換えるタグ | <div id="data-14"></div> |
- 明細カラムの下部にある詳細部分は削除します。(1154行目から1264行目周辺です。)
(説明)
テーブル型データ項目は、手順2で取得したデフォルトレイアウトの最後のデータとして出力されます。
(手順どおりに作業を行った場合は、「<div id="data-14"></div>」)
レイアウトによっては、プレビュー画面では正常に表示されない場合があります。
[保存]ボタンを押下すると
「アプリを保存しました。」
と表示されます。
「編集を終了してよろしいですか？」
と表示されますので、[はい]を押下してください。