CookBook

IM-BloomMaker リッチテーブルのデータ部分を横スクロールさせる方法

投稿日:

このCookBookでは、リッチテーブルのデータ部分を横スクロールさせる方法について紹介しています。
Accel Platform 2021 Summer より前のバージョンでは、リッチテーブルの横スクロールはできないためご注意ください。

インポートファイル

この CookBook で使用するサンプルのインポートファイルです。
IM-BloomMaker のインポート画面からインポートしてください。
このサンプルは、2021 Winter 版以降でインポートできます。

インポートファイル:cookbook_209014_im_bloommaker-data.zip

レシピ

  1. インポートしたコンテンツを開く
  2. リッチテーブルの横幅を指定する
  3. リッチテーブルのセルの横幅を指定する
  4. 動作確認

1. インポートしたコンテンツを開く

  • コンテンツ一覧画面を表示してください。
  • コンテンツツリーから「intra-mart CookBook」>「im_cookbook_209014」>「im_cookbook_209014」を選択してください。
  • 「デザイン編集」ボタンをクリックし、デザイナ画面を開いてください。

2. リッチテーブルの横幅を指定する

  • 「リッチテーブル」エレメントを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「幅・高さ」カテゴリ内の「横幅」プロパティに「800px」を指定してください。

3. リッチテーブルのセルの横幅を指定する

  • 「リッチテーブル」エレメントを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「エレメント固有」カテゴリ内の「columnWidth」プロパティに「300px,300px,400px」を指定してください。

4. 動作確認

  • 「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
  • リッチテーブルのデータ部分が横スクロールすることを確認してください。

リッチテーブルのデータ部分を縦スクロールさせたい場合は、リッチテーブルの縦幅を指定してください。
表示データが指定した縦幅を超える場合、データ部分が縦スクロールします。

-CookBook
-

執筆者:


comment

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

関連記事

標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する

このCookBookでは、標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する方法について紹介しています。 本稿では、表示する項目が多く縦長い画面で下へスクロールすると右下に「先頭へ戻る」ボタン …

no image

ラジオボタンの値やフォーカスによってアイテムの色を変更するには

このCookbookでは、カスタムスクリプトによるフィールドスタイルの変更方法を説明します。 アクション設定とカスタムスクリプトの組み合わせにより、入力値やフォーカスイベントに合わせてアイテムのスタイ …

no image

IM-BloomMaker Bulma で IM-Knowledge のコンテンツ一覧画面を作ってみよう

2020 Summer から IM-BloomMaker に新しくコンテンツ種別 Bulma が追加されました。 この CookBook では Bulma のエレメントを用いて、IM-Knowledg …

no image

IM-Notice Broker の設定方法

この CookBook では、分散環境での IM-Notice (デスクトップ版)の設定方法について紹介しています。 分散環境の構成として、以下のような 2 台構を考えます。 マシン IPアドレス A …

no image

IM-BloomMaker 「外部リソース埋め込みコンテナ」エレメントを使用してパブリックストレージ上のファイルを閲覧する画面を作成する方法

このCookBookでは、2021 Spring でリリースした「外部リソース埋め込みコンテナ」エレメントの利用方法について説明していきます。 「外部リソース埋め込みコンテナ」エレメントはファイルのド …