Skip to main content

 

OutSystems

Data Grid

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

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

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

  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ブラウザのプレビュー

Data Gridの使用

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

Data Gridが適している場合

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

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

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

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

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