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」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のファイルラ …

no image

IM-FormaDesignerで作成したフォーム画面からIMBoxに投稿する方法

このCookBookでは、IM-BISを含む環境において、IM-FormaDesignerで作成したアプリからIMBoxに投稿する方法について紹介しています。 IM-LogicDesignerとの外部 …

no image

Lombok のご紹介

この CookBook では、Lombok について紹介しています。 intra-mart 開発本部では Lombok を利用しています。 Lombok を簡単に説明すると、「アノテーションを書くだけ …

no image

申請時の注意事項を添付ファイルとして配置する方法

このCookBookでは、申請時の注意事項を記載したファイルを、申請画面の添付ファイルとして配置する方法について紹介しています。 FormaDesignerの前処理プログラムで任意の添付ファイルを設定 …

no image

IM-Workflowの一覧を業務別に使い分けるには

この記事では、”もっと効率的に” IM-Workflowを利用した業務ができるように、一覧画面に表示するフローや案件を絞り込んで表示するための手順をご紹介します。 「フローグループ」機能を利用し、一覧 …