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

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

関連記事

IM-BloomMaker Bulma を使用した参照系画面の作成

この CookBook では、 2020 Summer でリリースした Bulma のフレームワークを使用した参照系の画面を作成します。 ユーザをテーブル形式で一覧に表示し、列ごとに参照したり、ユーザ …

案件一覧「My検索条件」の活用例

このCookbookでは、intra-mart Accel Platform 2019 Springから利用可能な、案件一覧画面にある「My検索条件」機能を活用し、任意の条件別にブックマークを作成する …

no image

ViewCreatorの計算式で日付データを操作する例

ViewCreatorを利用するとデータベース等に格納されているデータを簡単に画面に表示することが出来ます。 ViewCreatorについて – intra-mart Accel Platform V …

no image

IFTTT と連携して LogcDesigner のフローを呼び出す方法

この CookBook では、IFTTT と連携して LogcDesigner のフローを呼び出す方法について紹介しています。 Twitter から「intra-mart」を含むつぶやきを検索し、IM …

no image

ViewCreatorでカレントの組織コードや会社コードを取得する動的パラメータの作り方

このCookBookでは、カレントの組織コードや会社コードを取得するViewCreatorの動的パラメータの作成方法についてご紹介します。 動的パラメータについての詳細は下記のドキュメントを参照してく …