Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 
 
OutSystems

Pagination

Pagination UIパターンを使用すると、ユーザーが長いリストで特定のアイテムを見つけやすくなります。このパターンは通常、Eコマースのカテゴリページ、検索エンジン、記事アーカイブなどのリストで使用します。

Pagination UIパターンの使用方法

  1. Service StudioのツールボックスでPaginationを検索します。

    Paginationウィジェットが表示されます。

  2. ツールボックスから、Paginationウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

    この例では、Applicationデータの表の下にPaginationウィジェットをドラッグしています。

    デフォルトで、Paginationウィジェットには[Previous]プレースホルダと[Next]プレースホルダ(それぞれアイコンを含む)が含まれています。

  3. ローカル変数を2つ追加します。開始インデックス値を保存するための変数とページあたりの最大レコード数を保存するための変数です。この例では、StartIndex変数とMaxRecords変数を追加しています。いずれもInteger型で、MaxRecordsのデフォルト値を「50」に設定しています。つまり、各ページには50件のレコードが表示されます。

  4. Paginationウィジェットを選択し、[Properties]タブでStartIndexプロパティとMaxRecordsプロパティを先ほど作成したローカル変数にそれぞれ設定します。

  5. 引き続き[Properties]タブで、TotalCountをテーブルのソースとなるAggregateで取得されるレコード数に設定します。 この例では、「GetApplications.Count」に設定しています。

  6. エンドユーザーがページを別のページに切り替えたときの動作を定義するため、[Handler]ドロップダウンで[New Client Action]を選択します。デフォルトで、New Client ActionにはNewStartIndex入力が含まれています。

  7. ページネーションの開始インデックスを設定するため、StartIndexをクライアントアクションにドラッグし、値を「NewStartIndex」に設定します。ユーザーがページを切り替えると、それに応じて開始インデックスが変更されます。

  8. Aggregateを再実行してデータを更新し、新しいページのデータがテーブルに表示されるようにします。

    この例では、ユーザーがページを切り替えると更新アクションが実行されます。このアクションでは、現在のStartIndexMaxRecordsを考慮してNewStartIndexが決定されます(ここでは、新しいページの値は50になります)。

  9. 各ページで必要なデータのみを取得するため、Aggregateを選択し、Start IndexプロパティとMax. Recordsプロパティを先ほど作成したStartIndex変数とMaxRecords変数に設定します。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
StartIndex(Integer型): 必須 ページネーションを開始する初期インデックスを設定します。
MaxRecords(Integer型): 必須 各ページに表示するレコードの数。
TotalCount(Integer型): 必須 リストのレコードの合計数。
ShowGoToPage(Boolean型): オプション Trueの場合、ユーザーがページ数を入力すると特定のページにジャンプできる入力ボックスが表示されます。Falseの場合、特定のページへのジャンプ機能は提供されません。これがデフォルトです。
ExtendedClass(Text型): オプション Pagination UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるPagination UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるPagination UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?