Merge pull request #233 from IgniteUI/vNext

Promote to prod

en/using-data-in-your-app/grid-remote-paging.md

@@ -23,7 +23,9 @@ Users use a Configurator to set up everything required for remote paging to work
 
 **User flow:**
 
-<img class="box-shadow" src="../images/using-data-in-your-app/remote-paging-configurator-flow.png" />
+<a href="https://www.appbuilder.dev/help/images/using-data-in-your-app/remote-paging-configurator-flow.png" target="_blank">
+    <img class="box-shadow" src="../images/using-data-in-your-app/remote-paging-configurator-flow.png" style="cursor: pointer;" />
+</a>
 <p style="text-align:center;">Configurator user flow</p>
 
 ## User Configuration

jp/change-log.md

@@ -7,7 +7,21 @@ _language: ja
 # App Builder - 変更ログ
 
 > [!NOTE]
-> 最新の更新は 2024 年 8 月 26 日に行われました。
+> 最新の更新は 2024 年 9 月 27 日に行われました。
+
+## 2024 年 9 月リリース
+### 機能
+- 関連するデータ ソースの変更が検出されたときに**互換性のないバインディングをグローバルに修正する**ためのガイド付きアプローチ。
+- グリッド コンポーネントで**リモート ページング**を構成して、サーバーからデータをチャンク単位で取得します。
+- CSS グリッド レイアウトの親の変更のサポート。CSS Flexbox とともにテンプレートの行と列を含む **CSS グリッドを使用して**レイアウトを作成します。
+
+### メンテナンス更新
+- Angular アプリは [Ignite UI for Angular `18.1.0`](https://github.com/IgniteUI/igniteui-angular/releases/tag/18.1.0) を使用して生成されるようにしました。
+- React アプリは、[Ignite UI for React `18.6.1`](https://github.com/IgniteUI/igniteui-react) を使用して生成されるようにしました。
+- Web Component アプリは、[Ignite UI for Web Components `4.11.1`](https://github.com/IgniteUI/igniteui-webcomponents/) を使用して生成されるようにしました。
+- Blazor アプリは [Ignite UI for Blazor `23.2.257`](https://jp.infragistics.com/products/ignite-ui-blazor/blazor/components/general-changelog-dv-blazor) を使用して生成されるようにしました。
+- 不具合修正
+
 ## 2024 年 8 月リリース
 ### 機能
 - App Builder AI 駆動型画像およびデータ ソース生成。
@@ -22,7 +36,6 @@ _language: ja
 
 ## 2024 年 6 月リリース
 ### 機能
-### 機能
 - **React** 用のアプリをデザインおよび生成します。
 - 初めてアクセスするユーザーが **ゲスト アクセス モード**で App Builder を使用できるようにします。訪問者はアカウントでサインインすることで、いつでも進行状況を保存できます。
 

jp/sidebar-toc/toc.yml

@@ -32,29 +32,29 @@
   new: false
 - name: マスター/詳細スタイルのアプリ
   href: ../master-detail/master-detail.md
-  new: true
+  new: false
   updated: false
   items:
     - name: ステップバイステップのアプリ作成例
       href: ../master-detail/step-by-step-examples.md
-      new: true
+      new: false
 - name: App Builder での変数管理のガイド
   href: ../guide-to-variables-in-app-builder/variables-management.md
-  new: true
+  new: false
   updated: false
   items:
     - name: コンポーネント プロパティのバインド
       href: ../guide-to-variables-in-app-builder/component-properties-binding.md
-      new: true
+      new: false
     - name: URL パラメーターのバインド
       href: ../guide-to-variables-in-app-builder/url-parameters-binding.md
-      new: true
+      new: false
     - name: ベントとアクションを操作する
       href: ../guide-to-variables-in-app-builder/working-with-events-and-actions.md
-      new: true
+      new: false
     - name: ルート パラメーターを使用したアプリのナビゲーション
       href: ../guide-to-variables-in-app-builder/route-parameters-navigation.md
-      new: true
+      new: false
 - name: レスポンシブ Fluid レイアウト
   href: ../how-to/responsive-fluid-layout.md
   new: false
@@ -93,6 +93,9 @@
     - name: Grid CRUD 操作
       href: ../using-data-in-your-app/crud-operations.md
       new: false
+    - name: Grid リモート ページング
+      href: ../using-data-in-your-app/grid-remote-paging.md
+      new: true
 - name: テーマ
   href: ../app-themes/app-themes.md
   # items:

jp/using-data-in-your-app/grid-remote-paging.md

@@ -0,0 +1,115 @@
+---
+title: グリッド リモート ページング
+_description: リモート ページングは、必要に応じてサーバーからデータの一部のみを取得して、グリッドがデータを動的に読み込んで表示する機能です。
+_keywords: App builder, リモート ページング, インフラジスティックス, データ ソース
+_language: ja
+---
+
+# グリッド リモート ページング
+リモート ページングは、必要に応じてサーバーからデータの一部のみを取得して、グリッドがデータを動的に読み込んで表示する機能です。これにより、すべてのレコードを一度に取得する必要がなくなるため、特に大規模なデータセットのパフォーマンスが向上します。
+
+## リモートページングの主な利点
+- **パフォーマンスの改善:** 必要なデータのみ読み込むため、読み込み時間を削減します。
+- **スケール可能:** 大規模なデータセットを効率的に処理します。
+- **ユーザーコントロール:** 開発者とユーザーにデータの表示方法に柔軟性を提供します。
+
+## リモートページングの仕組み
+
+リモート ページングは、データをリモート サーバーから個別に要求される「ページ」に分割します。これにより、一度に必要なデータ スライスのみが読み込まれるようになります。ツールに組み込まれているプロパティを使用して、**グリッド** コンポーネントと**ツリー グリッド** コンポーネントの両方に対して構成できます。
+
+ユーザーはコンフィギュレータを使用して、リモート ページングが機能するために必要なすべてのものを設定します。必要なもの
+- `pageIndex` - データが取得されるページのインデックス。このパラメーターが指定されていない場合、ページのインデックスはデフォルトで 0 になり、データの最初のページが取得されます。
+- `pageSize` - ページごとに取得して表示するレコードの最大数。このパラメーターが指定されていない場合、すべてのレコードが取得され、ページの合計数は 1 になります。
+- `totalRecords` - サーバーで利用可能なレコードの合計数を返します。この数値は、ページネーターがページの合計数を計算するために必要です。
+
+**ユーザー フロー:**
+
+<a href="https://www.appbuilder.dev/help/images/using-data-in-your-app/remote-paging-configurator-flow.png" target="_blank">
+    <img class="box-shadow" src="../images/using-data-in-your-app/remote-paging-configurator-flow.png" style="cursor: pointer;" />
+</a>
+<p style="text-align:center;">ユーザー フローのコンフィギュレーター</p>
+
+## ユーザー設定
+
+リモート ページングは、API がデータと合計レコード数を処理する方法に応じて、2 つのアプローチに従って実装できます。
+
+1. **データと合計レコード数の複合エンドポイントを使用する方法**  
+この場合、API はページングされたデータとレコードの合計数の両方を 1 回の応答で返します。
+
+2. **データと合計レコード数に別々のエンドポイントを使用する方法**  
+この設定では、ページングされたデータを取得するための API 呼び出しと、合計レコード数を取得するための API 呼び出しの 2 つが行われます。
+
+### 単一のエンドポイント
+サポートされているデータ構造の例は次のとおりです。
+
+```
+{
+  "items": [
+    {
+      "categoryId": 0,
+      "description": "string",
+      "name": "string"
+    }
+  ],
+  "totalRecordsCount": 0,
+  "pageSize": 0,
+  "pageNumber": 0,
+  "totalPages": 0
+}
+
+```
+**手順:**
+1. グリッドを、Items (項目) コレクションと Total Records Count (合計レコード数) フィールドを持つ Object (オブジェクト)を返すエンドポイントにフックします。このオブジェクトは、項目のコレクションと合計レコード数を提供します。
+2. リモート ページング機能を追加し、**リモート** ページング モードを選択して構成ダイアログを読み込みます。
+3. ページング構成ダイアログで、合計レコード数に対応するフィールド プロパティを選択します。上記の例では、「totalRecordsCount」 になります。
+4. **ページング構成ダイアログ**で、**ページ インデックス**に使用するクエリ パラメーターと**ページ サイズ**に使用するクエリ パラメーターを指定します。
+5. [保存] をクリックします。
+
+**結果:**
+- **ページ インデックス**と**ページ サイズ**の両方の値を格納するための、数値型の 2 つの変数が作成されます。
+- **グリッド データ コンテキスト**を格納するための 3 番目の変数が作成されます。データ リクエストから初期化される **Object type** (オブジェクト タイプ)。リクエスト クエリ パラメーターは、ページ インデックスとページ サイズ変数にバインドされます。
+- グリッドは、3 番目の変数データ コンテキスト result -> _result.items_ コレクションにバインドされます。
+- 合計レコード数は _result.totalRecordsCount_ フィールドにバインドされます。
+- **PerPageChanged** と **PageChange** の 2 つのインタラクションが自動的に作成されます。
+   - **PerPageChange** の **Source** (値) は、igx-paginator によって提供されるイベント コンテキストからのページ サイズに設定されます。**ターゲット**変数は**ページ サイズ**になります。
+   - **PageChange** の Source (値) は、igx-paginator によって提供されるイベント コンテキストからのページ インデックス (現在のページ) に設定されます。  **ターゲット**変数は**ページ インデックス**になります。
+
+**動作:**
+プレビューでは、初期ロードは 1 つのリクエストのみ実行されます。ページが変更されるか、ページごとに値が変更されると、新しいページとサイズの値に基づいてデータを取得するための新しいリクエストが行われます。
+
+### 2つの異なるエンドポイント
+
+**手順:**
+1. グリッドの `Data` プロパティを、Page および Size クエリ パラメーターを必要とするエンドポイントにバインドします。
+2. リモート ページング機能を追加し、**リモート** ページング モードを選択して構成ダイアログを読み込みます。
+3. totalRecordsCount を、合計レコード数のみを返す別のエンドポイント (グリッドの `Data` プロパティとは異なる) にフックします。
+4. **ページング構成ダイアログ**で、**ページ インデックス**に使用するクエリ パラメーターと**ページ サイズ**に使用するクエリ パラメーターを指定します。
+5. [保存] をクリックします。
+
+**結果:**
+- **ページ インデックス**と**ページ サイズ**の両方の値を格納するための、数値型の 2 つの変数が作成されます。
+- グリッドのデータ ソースには、新しく作成された 2 つの変数にバインドされたクエリ パラメーターが含まれます。
+- **合計レコード数**を格納するための 3 番目の変数が作成されます。データ リクエストから初期化される **Object type** (オブジェクト タイプ)。(注意: 現在、App Builder はプリミティブ結果型をサポートしていません)
+- **PerPageChanged** と **PageChange** の 2 つのインタラクションが自動的に作成されます。
+   - **PerPageChange** の **Source** (値) は、igx-paginator によって提供されるイベント コンテキストからのページ サイズに設定されます。**ターゲット**変数は**ページ サイズ**になります。
+   - **PageChange** の Source (値) は、igx-paginator によって提供されるイベント コンテキストからのページ インデックス (現在のページ) に設定されます。  **ターゲット**変数は**ページ インデックス**になります。
+
+**動作:**
+- プレビューに移動すると、初期ロードで 2 つのリクエストが実行されます。1 つはグリッドスライスされたデータ用、もう 1 つは合計レコード数用です。その後、ページの変更時またはページの変更ごとに、グリッドスライスされたデータに対して 1 つのリクエストのみが行われます。
+
+## 既知の制限
+ユーザーがコンフィギュレーターを使用してリモート ページングを設定し、再度実行すると、API エンドポイントから初期化された冗長な変数はそのまま残ります。
+
+## その他のリソース
+
+<div class="divider--half"></div>
+
+* [App Builder コンポーネント](../indigo-design-app-builder-components.md)
+* [App Builder インターフェイスの概要](../interface-overview.md)
+* [単一ページとナビゲーション](../single-page-apps-and-navigation.md)
+* [App Builder コンポーネント](../indigo-design-app-builder-components.md)
+* [Flex レイアウト](../flex-layouts/flex-layouts.md)
+* [Desktop アプリの実行方法](../running-desktop-app.md)
+
+
+