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では「intra-mart Accel Collaboration」ワークスペース機能におけるイベントカレンダーの利用例について紹介しています。 intra-mart Accel …

no image

Docker Compose で Accel Platform 環境を構築する。

この CookBook では、Docker Compose を利用して Accel Platform 環境を構築する手順について紹介しています。 この CookBook では、以下の記事で作成した D …

IM-FormaDesignerでアップロードしたExcelファイルの内容を画面上に出力する方法

このCookBookでは、IM-FormaDesignerでBISフローの申請画面にてアップロードしたExcelファイルの内容を承認画面にて出力する方法を紹介します。 完成イメージ 完成サンプル 以下 …

Formaでスクリプトアイテムを使い、ボタン・見出し等の色やサイズを変更する方法

このCookBookでは、Formaでスクリプトアイテムを使い、デザインを変更する方法をご紹介します。 サンプルでは、「ボタンアイテム」の背景色の変更・「見出し」の背景色の変更・「ラジオボタン」のボタ …

申請画面の入力データをExcelファイルにダウンロードする

このCookbookでは、IM-BIS 2017 Winterから新たに追加された「 外部連携のレスポンスとして、ファイルデータを受け取る 」機能を利用する方法を紹介いたします。 BISで作成した申請 …

RSSRSSRSSRSS