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

後処理プログラムで画面アイテム「ファイルアップロード」にバリデーションを実行する方法

このCookbookでは、画面アイテム「ファイルアップロード」に添付されたファイルをバリデーションする方法を紹介します。 後処理プログラムを使用してバリデーションを実行することで、画面に表示するエラー …

no image

PostgreSQL の Docker を作成する。

この CookBook では、PostgreSQL 検証用の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 PostgreSQL の Docker イメージを作成しま …

no image

ラジオボタンの値やフォーカスによってアイテムの色を変更するには

このCookbookでは、カスタムスクリプトによるフィールドスタイルの変更方法を説明します。 アクション設定とカスタムスクリプトの組み合わせにより、入力値やフォーカスイベントに合わせてアイテムのスタイ …

no image

Cassandra の Docker を作成する。

この CookBook では、Cassandra の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 Cassandra の Docker イメージを作成します 実行し …

no image

ワークスペースとスケジュール機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のスケジュー …

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

RSSRSSRSSRSS