1. ユースケース
カスタムページ上でデータをページ分けして表示したい場合に、ページネーションコンポーネントを使用します。
コンポーネントの属性、使用方法、例については、プレビューをクリックしてください。
3. 手順
3.1 通常フォームを作成する
一行テキストコンポーネントをフォームにドラッグし、「保存」をクリックします。アプリのホームに戻り、このフォームにデータをいくつか追加します。3.2 カスタムページを作成する
コンテナコンポーネントをカスタムページにドラッグし、その中にテキストコンポーネントとページネーションコンポーネントを追加します。アウトラインツリーで、コンポーネントのネスト構造を確認できます。 カスタムページ3.3 リモートデータソースを作成する
カスタムページで左側の「データソース」をクリックし、「追加」を選択してリモートAPIを作成します。必要に応じて名前を変更できます。 カスタムページのデータソース 「リクエストURL」をクリックし、必要なAPIエンドポイントに変更します: ’/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json’ 詳細はAPIドキュメントをご参照ください:YiDAプラットフォーム API(ページのデータソースから直接呼び出し可能) リクエストパラメータを修正するか、「追加」をクリックして新しいパラメータを追加します。ドキュメントに記載のとおり、パラメータ名は formUuid です。
3.4 コンテナコンポーネントにループデータを設定する





3.5 変数をバインドする
カスタムページ上のテキストコンポーネントをクリックし、右側で「コンテンツ」の「変数バインド」を見つけます。this.item.formData. の後に、通常フォーム内の一行テキストコンポーネントの固定値識別子を入力します。 formData の確認方法:編集ページで「プレビュー」をクリックし、右クリックで「検証」を選択、コンソールを開いて formData を確認します。
3.6 変数データソースを作成する


3.7 アクションを作成する
ページネーションコンポーネントをクリックし、右下の「アクション設定」を見つけます。「アクションを作成」をクリックして、2つのアクション(本例ではページ番号変更とページサイズ変更)を作成します。アクション作成後、左側にJSパネルが自動的に開きます。そこにコードを記述して、データソースを再読み込みします。3.8 変数をバインドする(総レコード数と現在のページ番号)
(1) ページネーションコンポーネント右側の「総レコード数」の「変数バインド」をクリックし、state.searchFormDatas.totalCount(totalCount はレコードの総数)を入力します。「確認」をクリックします。
3.9 pageSize 変数をバインドする
pageSize の「変数バインド」をクリックし、JSコードで三項演算子を使用します:state.pageSizeA?state.pageSize:5。これにより、現在のページに表示するデータ量を決定します。

