Skip to main content

 

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

Data Grid

はじめに、Data GridコンポーネントとData Grid Sampleコンポーネントが環境にインストールされていることを確認します。

詳細については、YouTubeのOutSystems Data Gridのビデオチュートリアルもご覧ください。

データを表示するインターフェイスを作成する

以下の手順を実行して、ユーザーがデータを表示したりフィルタリングしたりできるグリッドインターフェイスを作成します。

  1. 新しいWebアプリを作成し、参照を追加します。DataGridComponentを検索し、すべての要素を追加します。次にDataGridExampleを検索し、[Entities]ツリーにある要素のみを追加します。

  2. Data Gridで必要なJSONを返すためのRESTエンドポイントを作成します。[Logic]>[Integrations]>[REST]を右クリックし、[Expose REST API]を選択します。このREST APIに「Suppliers」という名前を付けます。新しいREST APIメソッドを作成して「GetAll」という名前を付け、Supplierエンティティ([Data]>[DataGridExample]内)のすべてのエンティティを返すように設計します。Suppliersの出力パラメータのデータ型はSupplier Listにします。

    データ取得ロジック

  3. REST URIを取得するサーバーアクションを作成します。[Logic]>[Server Actions]を右クリックし、[Add Server Action]を選択します。アクションに「GetAllSuppliers」という名前を付け、GetOwnerURLPath() + "rest/Suppliers/GetAll"という値のURLパラメータを返すように設計します。 RESTサーバーアクション

  4. 新しい空の画面を作成し、Preparationを追加します。画面に「ScreenDataGridRead」という名前を付け、PreparationでアクションロジックにGetAllSuppliersを追加します。

  5. Data Gridコンテナブロックを追加します。[Interface]タブのDataGridComponent > Structuresに移動し、[GridContainer]を[ScreenDataGridRead]のメインセクションにドラッグします。「MyDataGrid」という名前を付けます。この時点でエラーが表示されますが、まだデータを入力していないため問題はありません。

  6. Data Gridにデータを入力します。「MyDataGrid」を選択してRestURLプロパティを探し、[GetAllSuppliers.URL]を選択します。

  7. 列を挿入します。列を追加するには、[Interface]タブのDataGridComponent > Columnsに移動し、[GridColumnText]を[MyDataGrid]にドラッグ&ドロップします。列に「ColumnSupplierCode」という名前を付け、JSONFieldプロパティに「"SupplierCode"」(引用符を含む)と入力します。[Supplier Name]フィールドでもこれを繰り返し、JSONFieldプロパティに「"SupplierName"」と入力します。
    Data Gridの列

  8. アプリをパブリッシュし、ブラウザでページにアクセスします。Data Gridが表示され、デフォルトで有効な列の表示/非表示やコンテキストフィルタなどの機能を使用できます。
    Data Gridのプレビュー

データを表示、編集、保存するインターフェイスを作成する

引き続き以下の手順を実行して、ユーザーがデータを表示するだけでなく、編集したり保存したりできるグリッドインターフェイスを作成します。

  1. REST URIを取得するサーバーアクションを作成します。[Logic]>[Server Actions]を右クリックし、[Add Server Action]を選択します。アクションに「SaveAllSuppliers」という名前を付け、GetOwnerURLPath() + "rest/Suppliers/SaveAll"という値のURLパラメータを返すように設計します。

  2. アプリで必要なJSONを受け取るためのRESTエンドポイントを作成します。[Logic]タブのIntegrations > REST > Suppliersに移動し、「SaveAll」という名前のREST APIメソッドを作成します。「SaveAll」のHTTPメソッドを「POST」に設定します。

  3. Textデータ型のパラメータを受け取るようにAPIメソッドを設計し、「JSON」という名前を付けます。この入力パラメータのReceive Inプロパティを「Body」に設定します。

  4. データを保存するための「SaveAll」のロジックを編集します。JSON Deserializeツールをアクションロジックにドラッグし、ツールのプロパティでJSON Stringを「JSON」入力パラメータに、Data Typeを「Supplier List」に設定します。アクションロジックを終了し、受け取ったレコードが保存されるようにします(SupplierエンティティのCreateOrUpdateSupplierアクションを使用可能)。

    Data Gridの保存ロジック

  5. [ScreenDataGridRead]画面をコピーして貼り付け、新しい画面を作成し、「ScreenDataGridSave」という名前に変更します。「ScreenDataGridSave」のPreparationロジックにSaveAllSuppliersサーバーアクションを配置します。注記: 前の手順の要素を再利用しています。このセクションの手順はすべて「ScreenDataGridSave」に関して説明しています。

  6. セルの編集と行の選択を有効にします。[MyDataGrid]を選択し、プロパティで[CheckboxSelection]を「True」に設定します。 また、グリッドの各列を選択し、プロパティで[Editable]を「True」に設定します。

  7. 保存ボタンを追加します。[Interface]タブのDataGridComponent > Actionsに移動し、[SendSelectedRowsButton]をドラッグして画面内に配置します。ボタンのラベルに「Save selected」と入力します。ボタンが選択された状態で、RestURLプロパティを探し、これを[SaveAllSuppliers.URL]に設定します。 Data Gridセルの編集のプレビュー

8.アプリをパブリッシュし、ブラウザでページにアクセスします。セルを編集し、保存する行のチェックボックスを選択して、[Save Selected]をクリックします。「Data updated successfully」というメッセージが表示されます。

![Data Gridブラウザのプレビュー](images/data-grid-in-browser-save.png?width=600)

サーバー側検証を実装する

クライアント側検証の後、エラーを含む行はサーバーに送信されません。ただし、データが有効ではない可能性があっても、場合によってはクライアント側でデータを検証せずにサーバーに送信することができます。その場合は、サーバー側検証のロジックを実装します。そのロジックでデータを検証してデータベースに保存し、検証済みのデータをData Gridに送り返します。

これらは、サーバーアクションにサーバー側検証とデータ保存を実装する場合に推奨される手順です。

  1. Data Gridウィジェットで、SendDirtyRowsButtonまたはSendSelectedRowsButtonを使用し、CanSendErrorFreeRowプロパティを「True」に設定します。 2.データを検証して保存するサーバーアクションで、JSONResponseデータ型の出力パラメータを設定します。JSONResponseは、Data Gridコンポーネントのストラクチャです。 3.Data GridのJSONを解析し、データを処理して、エラー条件を確認します。 4.エラー条件のTrueブランチで(エラーがある場合)、エラーリストにエラーを追加します。 5.エラー条件のFalseブランチで(エラーがない場合)、データベースのデータを更新します。 6.データとフィードバックメッセージを含むJSONResponseをData Gridウィジェットに送り返します。

Data Grid SampleコンポーネントのDataGrid Exampleモジュールで、検証の例を確認することができます。DataGrid Exampleモジュールを開いて、[Logic]タブのIntegrations > REST > Orders > SaveOrdersに移動します。以下は、アクションの概要です。

サーバー側検証

サーバーアクションには、(Data Gridコンポーネントの)JSONResponseデータ型の出力パラメータがあります。

JSONResponseストラクチャ

エラーを表示するUIの場所を識別するos_RowID行識別子が設定されています。

行識別子

エラーの詳細は、ErrorCellローカル変数に設定されます。

エラーの詳細

エラーの情報は、DataRow.ErrorCellsエラーリストに追加されます。行全体のデータがリストに追加され、JSONResponse出力に渡されます。

エラーリスト

Data Gridウィジェットがデータを受け取るときにエラーがある場合は、エラーを含むセルが赤枠付きで表示されます。マウスポインタをセル上に移動すると、エラーメッセージがポップアップ表示されます。

エラーを含むData Gridのセル

Data Gridの使用

Excelに似たインターフェイスであるデータグリッドのユースケースとしては、一括データ入力や、ソート、フィルタリング、編集が可能なレポート機能などがあります。

Data Gridが適している場合

以下は、Data Gridの使用がユーザーエクスペリエンスの向上に役立つ場合の例です。

  • ユーザーがデータを一括で入力または編集する必要がある。
  • データの階層関係が強く、ユーザーがすばやく概要を確認する必要がある。
  • ユーザーが任意のセルに対して編集やアクセスを行う必要がある。
  • ユーザーが書式設定機能を備えたインターフェイスを必要としており、関連性や条件がある。
  • 一般的に、ユーザーがテーブルよりも高機能なエクスペリエンスを必要としている。

テーブルの適している場合

以下は、Data Gridの使用がユーザーにとって複雑になりすぎる場合の例です。

  • ユーザーが1つの列にのみアクセスできればよく、複数の列に同時にアクセスする必要がない。
  • ユーザーがすべてのフィールドを表示する必要がなく、スクロールでデータを探すことができる。
  • セル間に直接的な階層関係がない。
  • ユーザーが「ビューを保存」する必要がある。つまり、ユーザーが必要とする実際の機能がカスタマイズではなく構成である。この場合はカスタマイズ可能なテーブルが適しています。
  • ターゲットアプリがモバイルアプリである。特にスマートフォンでは、大きなグリッド形式では管理が難しくなります。