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

intra-mart WebPlatform 7.2 の Docker を作成する

この CookBook では、intra-mart WebPlatform 7.2 の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 intra-mart WebPl …

no image

intra-martのアプリケーションをセットアップする

このCookBookでは、intra-mart Accel Collaborationをセットアップしてアプリケーションを使える状態にする方法を紹介します。レシピの最後では、実際にintra-mart …

IM-Workflowで案件の参照権限を付与する方法

IM-Workflowで申請者や承認者以外で、案件を参照する方法をご紹介いたします。 申請者や承認者以外で、案件を参照する方法は、下記の2つの方法があります。設定方法や参照するための仕様が異なるため、 …

特定フローの特定ノードで、処理中の案件に対し、任意の処理対象者を追加する方法

このCookBookでは、LogicDesignerを利用して、特定フローの特定ノードで、処理中の案件に対し、任意の処理対象者を追加する方法について紹介しています。 人事異動で担当者が追加となり、複数 …

no image

Forma標準アプリとIM-LogicDesignerを利用してBISワークフローを一括申請する方法

このCookBookでは、Forma標準アプリとLogicDesignerを利用して、BISワークフローを一括申請する方法を説明します。 完成イメージ ① グリッドテーブルの各行を、それぞれ案件として …