CookBook

IM-BloomMaker リッチテーブルの行の詳細画面を別タブで開く方法

投稿日:

このCookBookでは、リッチテーブルの行をクリックした時に別タブで詳細画面を開く方法について紹介しています。

リッチテーブルから詳細画面を開く方法は複数ありますが、このCookBookではそのうちの一つをサンプルを使って紹介します。

完成サンプル

このCookBookで紹介に使用するサンプルです。
リッチテーブルの行をクリックすると、クリックした行の詳細情報が別タブで表示されます。

以下のサンプル資材をダウンロードし、BloomMaker のインポート画面からインポートしてください。

サンプル資材 : cookbook_181250_im_bloommaker.zip

レシピ

事前に完成サンプルのサンプル資材をインポートしてください。

  1. 「リッチテーブル」エレメントの設定
  2. 「フォーム」エレメントの設定
  3. アクションの設定
  4. 詳細画面側の設定

「リッチテーブル」エレメントの設定

  1. コンテンツ一覧画面を表示し、コンテンツツリーの「im_cookbook」>「im_cookbook_181250」カテゴリを開いてください。

  2. 「im_cookbook_181250_list」コンテンツを選択し、「デザイン編集」ボタンをクリックしてください。

  3. 「リッチテーブル」エレメントを選択してください。

  4. 右ペインのプロパティタブを開き、「エレメント固有」カテゴリの「selected」プロパティを表示してください。
    $variable.selectedが設定されています。

  5. 「エレメント固有」カテゴリの「tableDataClickEvent」プロパティを表示してください。
    Show detailsアクションが設定されています。

リッチテーブルで行を選択すると、選択された行のインデックスが「selected」プロパティに格納されます。
詳細画面を開く時に「selected」が示すインデックスのデータをパラメータとして渡しています。

「tableDataClickEvent」は、テーブルの行をクリックした時に実行するアクションを指定するプロパティです。
このサンプルでは、詳細画面を開くアクションを設定しています。

「フォーム」エレメントの設定

  1. 「フォーム」エレメントを選択してください。

  2. 右ペインのプロパティタブを開き、「共通」カテゴリの「ID」プロパティを表示してください。
    show-detailsが設定されています。

  3. 「エレメント固有」カテゴリの「action」プロパティを表示してください。
    $constant.TARGET_URLが設定されています。

  4. 「エレメント固有」カテゴリの「target」プロパティを表示してください。
    _blankが設定されています。

「ID」プロパティは、アクションアイテム「フォーム○を送信する」で指定する ID です。
「action」プロパティには、詳細画面の URL を設定しています。
「target」プロパティに「_blank」を設定することで、詳細画面が別のタブで開きます。
  1. 「隠しパラメータ」エレメントを選択してください。

  2. 右ペインのプロパティタブを開き、「エレメント固有」カテゴリの「name」プロパティを表示してください。
    user_cdが設定されています。

  3. 「エレメント固有」カテゴリの「value」プロパティを表示してください。
    =$variable.data[$variable.selected].userCdが設定されています。

詳細画面にパラメータとして「user_cd」を渡します。
値は、リッチテーブルでクリックした行の「userCd」の値です。

アクションの設定

  1. 右ペインのアクションタブを開き、「Show details」アクションの「編集」アイコンをクリックしてください。

  2. 「Show details」アクションには、「フォームshow-detailsを送信する」が配置されています。

詳細画面側の設定

  1. コンテンツ一覧画面で「im_cookbook_181250_details」コンテンツを選択し、「デザイン編集」ボタンをクリックしてください。

  2. 右ペインの変数タブを開き、プルダウンから「入力」を選択してください。
    user_cdが宣言されています。

  3. プルダウンから「変数」を選択してください。

  4. 「$variable.requestData.userBizKey」の配下の「usseCd」の「編集」アイコンをクリックしてください。
    $input.user_cdが設定されています。

  5. 右ペインのアクションタブを開き、「Get user information」アクションの「編集」アイコンをクリックしてください。

  6. 上から2番目に配置されている「URL○にリクエストを送信する」アクションを開いてください。

パラメータとして受け取った「user_cd」は「$input.user_cd」に格納されます。
それを「$variable.requestData.userBizKey.usseCd」に移し、ユーザ情報取得 API にリクエストデータとして渡しています。

動作確認

  1. ルーティング一覧画面を表示し、ルーティングツリーの「im_cookbook」>「im_cookbook_181250」カテゴリを開いてください。

  2. 「im_cookbook_181250_list」を選択し、「認可設定」アイコンをクリックしてください。

  3. 認可設定画面で、「認証済みユーザ」に権限を付与してください。

  4. 同様に「im_cookbook_181250_details」の認可設定を行ってください。

  5. 「im_cookbook_181250_list」を選択し、「URLをコピー」アイコンをクリックしてください。

  6. コピーしたURLをブラウザのアドレスバーに貼り付け、画面を表示してください。
    ユーザの一覧画面が表示されます。

  7. リッチテーブルの任意の行をクリックしてください。

  8. 新しいタブでユーザの詳細画面が表示されます。

「im_cookbook/181250/details/XXX」のようなURLに遷移する

上記の例では、詳細画面のURLは「im_cookbook/181250/details?user_cd=XXX」となりますが、「im_cookbook/181250/details/XXX」のようなURLに遷移することも可能です。

  1. コンテンツ一覧画面で「im_cookbook_181250_list」コンテンツを選択し、「デザイン編集」ボタンをクリックしてください。

  2. 「フォーム」エレメントを選択してください。

  3. 右ペインのプロパティタブを開き、「エレメント固有」カテゴリの「action」プロパティを表示してください。

  4. 「action」プロパティに以下の通り設定してください。
    =$constant.TARGET_URL + "/" + $variable.data[$variable.selected].userCd

  5. 「隠しパラメータ」エレメントを選択してください。

  6. 「削除」アイコンをクリックして「隠しパラメータ」エレメントを削除してください。

  7. 「上書き保存」アイコンをクリックしてコンテンツを保存してください。

  8. ルーティング一覧画面を表示し、ルーティングツリーの「im_cookbook」>「im_cookbook_181250」カテゴリを開いてください。

  9. 「im_cookbook_181250」カテゴリを選択した状態で「ルーティング新規作成」をクリックしてください。

  10. ルーティング新規作成画面で、以下の通り入力してください。

項目 入力内容
ルーティングID im_cookbook_181250_details_2
コンテンツ im_cookbook_181250_details
コンテンツバージョン番号 最新バージョンを利用する
メソッド GET
URL im_cookbook/181250/details/{user_cd}
ルーティング名 im_cookbook_181250_details_2
  1. 「登録」ボタンをクリックしてルーティングを登録してください。

  2. 登録したルーティングの「認可設定」アイコンをクリックし、認可設定を行ってください。

  3. 「im_cookbook_181250_list」を選択し、「URLをコピー」アイコンをクリックしてください。

  4. コピーしたURLをブラウザのアドレスバーに貼り付け、画面を表示してください。
    ユーザの一覧画面が表示されます。

  5. リッチテーブルの任意の行をクリックしてください。

  6. 新しいタブでユーザの詳細画面が表示されます。

最後に

リッチテーブルから別タブで詳細画面を開く一例を紹介しました。
他にも、別タブでページを開くアクションアイテムを作る方法があります。
アクションアイテムの作成方法は、プログラミングガイドを参照してください。
intra-mart Accel Platform IM-BloomMaker プログラミングガイド

アクションアイテム「カスタムスクリプトを実行する」では、DOM の操作や window の一部オブジェクトへのアクセスができないといった制限がありますが、自作のアクションであればそういった制限が無いため、「別ウインドウや別タブでページを開く」といったアクションアイテムの作成が可能です。

-CookBook
-

執筆者:


comment

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

関連記事

no image

WebServer へのリクエスト情報から動的に BaseURL を決定する方法(Apache 編)

ここでは、WebServer(Apache)へのリクエスト情報から BaseURL を動的に決定する方法を BaseUrlProvider のサンプル実装、Apache との連携例と共に紹介します。 …

no image

IM-BloomMaker 「リッチテーブル」エレメントのサンプル集

この CookBook では、intra-mart Accel Platform 2020 Spring から利用可能になった IM-BloomMaker のリッチテーブルエレメントの活用方法について …

no image

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

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

no image

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

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

ワークフローの一覧を使い分けるには(スマートフォン版)

このCookbookでは、以前に公開した「ワークフローの一覧を使い分けるには(改訂版)」に関して、お問い合わせいただいた内容を追加してスマートフォン画面でワークフローの一覧の検索条件を付与する方法をご …

RSSRSSRSSRSS