CookBook

IM-BloomMaker ページネーションの利用方法

投稿日:2020-12-24 更新日:

この CookBook では、2020 summer でリリースした コンテンツ種別「Bulma」 の 「ページネーション」エレメントについて紹介しています。
「ページネーション」エレメントとは、表示されているデータをページ分割して表示することができるエレメントです。

完成イメージ

一覧画面

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

IM-BloomMaker インポートデータ : cookbook_185243_bloommaker_data
以下の定義が含まれています。

種別 ID 名称
コンテンツ im_cookbook_185243_pagination ページネーション 一覧
ルーティング im_cookbook_185243_pagination ページネーション 一覧

IM-BloomMaker のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/185243
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

この Cookbook では 「ページネーション」エレメントを利用します。

  1. 一覧画面の作成
  2. アプリケーション画面を公開

1. 一覧画面の作成

それではコンテンツを作成していきましょう。
デザイナを開くまでの手順については、以下のドキュメントを参考にしてください。

なお、完成サンプルではコンテンツの ID を im_cookbook_185243_pagination としています。

まずは、変数を作成してください。
右ペインにある変数タブを開き、変数タブ上のプルダウンにて「変数」が選択されていることを確認し、「JSON形式で編集」アイコンをクリックして「JSONエディタ」を開き、以下の JSON を入力してください。

JSONエディタのOKボタンをクリックすると、以下の画像のように作成された変数を確認することができます。

次に、使用するエレメントの配置と作成した変数の紐づけを行っていきます。

「繰り返し」カテゴリ内の「リスト(繰り返し)」エレメントをコンテナページ上に配置してください。

「リスト(繰り返し)」エレメントの固有プロパティ「type」のプルダウンから none を選択します。

「リスト(繰り返し)」エレメント配下にある「繰り返しアイテム」エレメントの固有プロパティ「list」に $variable.list[$variable.current] を設定してください。

「汎用」カテゴリ内の「ラベル」エレメントを「カラムアイテム(繰り返し)」エレメント配下に配置してください。

「ラベル」エレメントの固有プロパティ「textContent」に変数値指定で $variable.list[$variable.current][$index] を設定してください。

「コンポーネント(bulma)」カテゴリ内の「ページネーション」エレメントをコンテナページ上に配置してください。

「ページネーション」エレメント配下にある「ページネーションリスト」エレメントの固有プロパティ「current」に $variable.current を設定してください。

「ページネーションリスト」エレメントにおける下記プロパティを設定します。

  • itemPerPage
    • 固定値で 1
  • total
    • 固定値で 10
  • stepSize
    • 固定値で 2

作成したフロー保存してください。

以上で一覧画面の作成は完了です。

なお、 Bulma の「ページネーション」エレメントについては、本家サイトである下記URLも参考にしてみてください。
https://bulma.io/documentation/components/pagination/

2. アプリケーション画面を公開

当該 Cookbook で作成したコンテンツは IM-BloomMaker のルーティング定義と紐づけることによって、アプリケーションとして公開することができます。
ルーティング定義の作成や設定方法については、以下のドキュメントを参照してください。

ルーティング定義作成後は、ルーティングにURLにアクセスするための認可を付与してください。
動作確認が目的であれば、認証済みユーザに認可を付与すれば問題ありません。

なお、完成サンプルでは ルーティングID を im_cookbook_185243_pagination で登録しています。

-CookBook
-

執筆者:


comment

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

関連記事

no image

物理マシン 1 台で Resin のクラスタリング環境を構築する

この CookBook では、物理マシン 1 台で Resin のクラスタリング環境を構築する手順について紹介しています。 Resin のクラスタリングを構築するには通常複数台のマシンが必要ですが、D …

no image

ワークフローの一覧を使い分けるには(改訂版)

このCookbookでは、以前に公開した「IM-Workflowの一覧を業務別に使い分けるには」に関して、お問い合わせいただいた内容を追加してワークフローの一覧の検索条件を付与する方法をご紹介いたしま …

REST API 経由でジョブネットを起動する方法

この CookBook では、REST API とを経由してジョブネットを実行する方法について紹介しています。 完成サンプル 以下の完成サンプルをダウンロードしてご活用ください。 LogicDesig …

スプレッドシートでシートの保護を利用して、ノード毎に入力セルを制御する

このCookBookでは、スプレッドシートでシートの保護を利用して、ノード毎に入力セルを制御する方法について紹介しています。 Excelでは、シートの保護を利用して、特定のセルのみ入力できるように制御 …

no image

IM-BloomMaker 「マルチファイルアップロード」エレメントの利用方法

このCookBookでは、 2021 Spring でリリースした「マルチファイルアップロード」エレメントの利用方法について説明していきます。 登録画面でアップロードしたファイルを別画面でダウンロード …