CookBook

スクリプト開発モデルで作成した1つのページソースを複数の画面で利用する

投稿日:2017-04-05 更新日:

このCookBookでは、任意のスクリプト開発モデルプログラムをコールして部分ページソース挿入を行う方法を紹介します。
部分ページソース挿入は<imart type="include">タグを利用することで実装することが出来ます。
これを用いることで、スクリプト開発モデルで作成した1つのページソースを複数の画面で利用することが出来ます。

完成イメージ

  1. Create Form をクリックしてください。
  2. 新規作成画面が表示されます。
  3. 画面左上の「←」ボタンをクリックしてください。
  4. Edit Form をクリックしてください。
  5. 編集画面が表示されます。
    新規作成画面と編集画面のフォームには、同一のソースが挿入されています。

 

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

e builder プロジェクト : im_cookbook_113577_include.zip
imm ファイル : im_cookbook_113577_include-1.0.0.imm

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/113577/include/menu
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. 挿入するページソースを作成してください。
  2. 新規作成画面を作成してください。
  3. 編集画面を作成してください。

1. 挿入するページソースを作成してください。

1. 挿入するページのプレゼンテーションページを作成してください。

e Builder のモジュールプロジェクト内に以下のhtmlファイルを作成してください。
src/main/jssp/src/im_cookbook_113577_include/table.html

これは新規作成画面と編集画面の<form>タグの中で利用するページソースです。
<table>タグ内のテキストボックスに表示する文字列といった属性値はファンクションコンテナから受け取ります。

2. 挿入するページのファンクションコンテナを作成してください。

e Builder のモジュールプロジェクト内に以下のjsファイルを作成してください。
src/main/jssp/src/im_cookbook_113577_include/table.js

このファンクションコンテナで、プレゼンテーションページに渡す値を設定してください。
今回は挿入先から渡ってきた値をそのまま設定しています。
引数 argV には、挿入先の<imart type="include">タグで指定した属性名がプロパティ名、属性値がプロパティ値であるオブジェクトが渡ってきます。

2. 新規作成画面を作成してください。

e Builder のモジュールプロジェクト内に以下のhtmlファイルを作成してください。
src/main/jssp/src/im_cookbook_113577_include/create.html

これは新規作成画面のプレゼンテーションページです。
<form>要素の中で<imart type="include">タグを利用し、「1. 挿入するページソースを作成してください。」にて作成したページソースを挿入しています。
<imart type="include">タグのpage属性には、表示させたいプログラムのパスを WEB-INF/jssp/src からの相対パス形式で指定してください。拡張子は必要ありません。

<imart type="include">タグの詳細は以下のドキュメントを参照してください。
スクリプト開発向けタグライブラリ / include

このCookBookではsubmit後の処理は作成していません。
DBへの登録処理については以下のCookBookを参照してください。
CookBook:フォームに入力した内容をデータベースに登録する

3. 編集画面を作成してください。

1. 編集画面のプレゼンテーションページを作成してください。

e Builder のモジュールプロジェクト内に以下のhtmlファイルを作成してください。
src/main/jssp/src/im_cookbook_113577_include/edit.html

この編集画面でも「2. 新規作成画面を作成してください。」で作成した画面と同様に、<form>要素の中で<imart type="include">タグを利用して「1. 挿入するページソースを作成してください。」にて作成したページソースを挿入しています。
編集画面では<imart type="include">タグの属性を利用して、呼び出すプログラムに引数を渡しています。
「1. 挿入するページソースを作成してください。」にて前述した通り、ここで指定した属性名称が呼び出すプログラムの引数に渡されるオブジェクトのプロパティ名となり、属性値がそのプロパティの値として格納されます。

2. 編集画面のファンクションコンテナを作成してください。

e Builder のモジュールプロジェクト内に以下のjsファイルを作成してください。
src/main/jssp/src/im_cookbook_113577_include/edit.js

必要な情報をプレゼンテーションページに渡すよう実装を行います。
IDのテキストボックスが無効になるように、変数 $disable_flg には true を格納しています。
また、Admin Authority のチェックボックスが選択された状態になるように、変数 $admin に 'checked' を格納しています。

ルーティング設定ファイルやメニュー画面については完成サンプルをダウンロードしてご参照ください。

-CookBook

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

結合処理で「多数決」承認機能を実現する

このCookBookでは、「多数決」承認機能を実現する方法について紹介しています。 完成イメージ 以下の完成サンプルをダウンロードしてご活用ください。 im_logicdesigner-data-14 …

ワークフローの一覧を使い分けるには(スマートフォン版)

このCookbookでは、以前に公開した「ワークフローの一覧を使い分けるには(改訂版)」に関して、お問い合わせいただいた内容を追加してスマートフォン画面でワークフローの一覧の検索条件を付与する方法をご …

no image

IMBox の「Like!」を別のキャプションにする方法

この Cookbook では、IMBox の「Like!」を別のキャプションにする方法を紹介します。 具体的には、「Like!」を「確認」に変更する方法を紹介します。 この Cookbook では、日 …

no image

テナント環境セットアップでテナント固有の属性を登録する。

この CookBook では以下の方法を紹介します。 テナント環境セットアップでテナント固有の属性を登録する方法。 システム管理者のテナント管理画面で、テナント固有の属性を編集する方法。 今回は「外部 …

no image

IM-FormaDesignerで複数のセレクトボックスを連動させて利用する方法

このCookbookでは、セレクトボックスの選択結果によって、他のセレクトボックスの選択肢を絞り込む方法を説明します。 この方法は、IM-FormaDesignerのみ導入環境での方法です。 IM-B …

RSSRSSRSSRSS