Ignite UI Angular Grid Summary Export:入門編

(原文 Wednesday, January 18, 2023 : Ivaylo Barakov / 翻訳 : インフラジスティックス・ジャパン)

Infragistics では、お客様に市場で最高の製品とソリューションを提供することに専念しています。私たちは常に改善と革新に努めており、最新のIgnite UI for Angular 22.2リリースも例外ではありません。Ignite UI Angularにはたくさんの改良と新しいコンポーネントが追加されましたが、このリリースの目立った機能の1つは間違いなくAngular Grid Summary Excel Exporterです。

今回は、それに焦点を当て、次のようなトピックを取り上げます。

Angular Grid Summary Excel Exporterをひとことで言うと

Angular Grid Summary Excel Exporterは、サマリー付きの任意のGridをMicrosoft Excelに簡単にエクスポートできる新機能で、データの分析や操作をこれまで以上に簡単に行うことができます。データに対する柔軟性とコントロールがさらに向上し、より良いWYSIWYGエクスペリエンスを享受することができます。

Angular Grid Summariesとは何ですか？

大規模なデータセットを扱う際の重要な課題の1つは、その中に含まれる情報を素早く理解し、意味を理解できるようにすることです。Angular Grid Summariesを使えば、もうそのような問題はありません。基本的に、Angular Grid SummariesはIgnite UI for Angular Data Gridの強力な機能で、グループフッターとしてカラム単位で機能します。これにより、ユーザーはカラム内のすべてのデータに対して計算された集計値を見ることができます。

列のデータの種類に基づいた主要な要約統計のセットがあらかじめ定義されているので、時間を節約し、データの傾向やパターンを特定し、その情報に基づいてより多くの情報に基づいた意思決定を行うことができます。しかし、これらの機能で要件を満たせない場合は、カスタムサマリーを提供することも可能です。

以下に、Angular Grid Summariesの例を示します。

Ignite UI for Angular Excel Exporter

Ignite UI for AngularのExcel Exporterサービスは、生のデータ（配列）または弊社のGridコンポーネントからExcel形式でデータをエクスポートすることができます。これにより、ユーザーはデータをExcelに手入力する必要がなくなり、時間と労力を節約することができます。さらに、ExporterはフラットなデータをMS Excelの表形式でエクスポートし、フィルタリングやソートなどの機能を提供します。

以下のAngular Excel Exporterで動作を確認してみてください。

サマリー付きグリッドの書き出し

Angular Excel exporterを使用する主な利点の1つは、サマリーの生成に使用されたデータと計算の整合性が保たれることです。単なるプレーンテキストのエクスポートではなく、Excelエクスポーターはサマリーを同等のExcel関数に変換するため、データ分析を継続し、常に最新の情報を手元に置いておくことができます。つまり、サマリー値を再計算することなく、Excelでデータを処理し続けることができるのです。

このGridを例にとって見てみましょう。

ご覧のように、サマリーが有効になっている列がいくつかあります。このグリッドをエクスポートすると このグリッドをエクスポートすると、IgxExcelExporterServiceは、これらのサマリーごとに適切な関数を作成します。例えば、'UnitPrice' カラムのデータの合計は、SUM 式を使用してエクスポートされます。これは、シートのデータが変更された場合、その変更を反映するためにサマリーの値が自動的に更新されることを意味します。

上記のグリッドをエクスポートした結果がこちらです。

以下の表では、デフォルトの各サマリーに対応するExcelの数式を見つけることができます。

制約事項としてはどのようなものがありますか？

サマリーエクスポート機能は、Angular Pivotグリッドを除くすべてのAngularグリッドタイプで利用可能です。また、エクスポートされたファイルには隠しカラムがあり、各 DataRecordのレベルを保持する隠しカラムも含まれます。このレベルは、特定のサマリー関数に含まれる必要があるセルをフィルタリングするために、サマリーで使用されます。

しかし、カスタムサマリについてはどうでしょうか？Angular Excel Exporterはそのようなものも扱えるのでしょうか？答えはイエスです。カスタムサマリーのExcel版を知ることはできませんが、Excel Exporterはカスタムサマリーをプレーンテキストとしてエクスポートします。このような場合でも、データの集計情報を素早く簡単に表示できるため、有用であることに変わりはありません。

Ignite UI Angular Excel Exporterを始めるにあたって

サマリー付きGridのエクスポートを開始するためには、まず、サマリーを有効にする必要があります。これを行うには、カラムのhasSummaryプロパティをtrueに設定する必要があるだけです。また、各カラムのサマリーは、カラムのデータ型に従って解決されることを覚えておくことが重要です。デフォルトのカラム・タイプは文字列なので、数値や日付に固有のサマリーが必要な場合は、カラム・タイプに data Typeプロパティを数値または日付に指定する必要があります。

次に必要なことは、グリッドにエクスポートすることです。IgxExcelExporterService.を開始するには、コンポーネントのテンプレートでボタンのハンドラを使用することができます。

次に、エクスポーターサービスのexportメソッドを呼び出し、IgxGridコンポーネントを第一引数として渡す必要があります。

また、exportSummariesオプションも公開しています。このオプションはデフォルトで有効になっています。エクスポートされたファイルにサマリーが必要ない場合は、オプションのexportSummariesプロパティをfalseに設定するだけです。

まとめ

ウェブアプリケーションで作業していると、最も速く、最も簡単で、最も効率的な方法でデータをエクスポートするという課題に直面することがよくあります。Ignite UI Angular Gridの最新機能であるAngular Grid Summary Excel Exportのおかげで、このプロセスはよりシンプルになったと言ってよいでしょう。 これは、11月にリリースされたIgnite UI for Angular 22.2の一部です。

Mediumで私たちをフォローし、私たちが取り組んでいる最新のAngular関連プロジェクトの最新情報を入手してください。GitHubで私たちに星を付けてください。また、懸念事項、質問、機能要求をissueセクションに記載し、私たちの製品を継続的に改善することに協力してください。私たちは、お客様のあらゆるニーズに応え、簡単にアプリを構築できるよう、常に製品体験を向上させるために最善を尽くしていきます。

何かお気づきの点があれば、JapanPR@infragistics.comまでご連絡ください。