CookBook

imuiListTableでセルに配置したアイコンから別画面に遷移する方法

投稿日:

このCookBookでは、imuiListTableでセルに配置したアイコンから別画面に遷移する方法について紹介しています。

im_cookbook_113323_01

imuiListTableについての詳細はAPIドキュメントを参照してください。

完成イメージ


1. 「Information」アイコンをクリックしてください。
2. 別画面が表示されます。

完成サンプル

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

e builder プロジェクト : im_cookbook_113323_listtable_icon.zip

imm ファイル : im_cookbook_113323_listtable_icon.imm

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

レシピ

  1. アイコンを入れる行を含めた imuiListTable タグを作成してください。
  2. データ取得用のファイルを用意してください。
  3. 別の画面に遷移するfunctionを作成してください。

1. アイコンを入れる行を含めたimuiListTableタグを作成してください。

以下のように プレゼンテーションページにimuiListTableタグを定義してください。
今回はinformationカラムに別ページへ遷移する情報アイコンを表示します。
informationカラムにはcallFunctionタグを含めてください。

callFunctionタグにはカラムのセルクリック時に実行する関数を定義することができます。
callFunctionタグのname属性に実行する関数名を指定してください。

src/main/jssp/src/im_cookbook_113323/views/list.html

2. データ取得用のファイルを用意してください。

以下のように、サーバサイドでリストテーブルに表示するデータを取得するファイルを作成してください。

返却するリストのinformationには 情報アイコンを表すhtmlの'<div class="im-smart-icon-common-16-information" />'を指定しています。

src/main/jssp/src/im_cookbook_113323/ajax/getList.js

3. 別の画面に遷移するfunctionを作成してください。

「1. アイコンを入れる行を含めた imuiListTable タグを作成してください。」のcallFunctionに定義したfunctionを作成してください。

callFunctionによって呼ばれたfunctionはrowId(行のキー)を受け取る事ができます。
rowIdはcolタグのkey属性にtrueを指定したものです。
今回は'productId'をキーに指定しています。
また、rowIdをフォームのパラメータに含めています。

subimitするformは以下のように定義してください。

遷移先である imart/im_cookbook/113323/info では、受け取ったプロダクトIDを表示しています。

im_cookbook_113323_01

これでimuiListTable表示時に別画面へ遷移するアイコンをセルに表示することができました。

-CookBook
-

執筆者:


comment

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

関連記事

no image

テナント環境セットアップ時にテーブルが作成されるよう設定する

e Builderを利用して作成したアプリケーションにおいて、テナント環境セットアップ時に自動でテーブルが作成されるように設定する手順を紹介します。 今回は例として、CookBook:フォームに入力し …

no image

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

このCookBookでは、セレクトボックスの選択結果によって、他のセレクトボックスの選択肢を絞り込む方法を説明します。 この方法は、IM-BIS導入環境で利用することができます。IM-FormaDes …

スプレッドシートでSpreadJSライブラリを利用してFormaの画面に対して入力チェックを実行する方法

このCookBookでは、スプレッドシートでSpreadJSライブラリを利用して入力チェックを実行する方法について紹介しています。 SpreadJSライブラリはクライアントサイドで動作するため、サーバ …

no image

Forma標準アプリとIM-LogicDesignerを利用してBISワークフローの一括承認画面を作成する

このCookBookでは、Forma標準アプリとLogicDesignerを利用して、BISワークフローの一括承認画面を作成する方法を紹介します。 完成イメージ ① 承認を実施するフローとノードを設定 …

no image

画面UI部品(imuiValidate)のバリデーションメッセージを任意の場所に表示する方法

このCookBookでは、画面UI部品のバリデーションメッセージを任意の場所に表示する方法について紹介しています。 intra-mart Accel Platform では、画面上に配置したUI部品の …

まだデータがありません。

RSSRSSRSSRSS