この数ヶ月、私たちはワクワクする新機能とコンポーネントの開発に取り組んできました。 そして、Angular v14をサポートする今回の22.2リリースにそのすべてが集約されています。 どのような新機能があるのか見てみましょう。
この記事の原文は以下よりご確認いただけます。
Radoslav Mirchev / Thursday, November 3, 2022 Ignite UI for Angular 22.2: What Are All The Exciting Improvements In This Release?
最新の22.2リリースにはAngular以外にも多くの製品アップグレードを出荷しています。Blazor、Web Components、Angularに対して共通の機能グレードを持つ、我々のUIの中でも最もポピュラーなグリッドコントロールの機能拡張を行いました。また、App Builderではコード生成機能の改善、Figmaデザインツールのサポート、その他多くの機能を追加しています。
モダンなウェブアプリケーションを設計・構築したい、レガシーアプリケーションをより優れたWYSIWYGローコードアプリケーションの開発体験に置き換えたい、あるいは、よりフル機能な開発スタックから始めたい、そんな皆様のために22.2リリースをご用意しました。
ここでは、開発プロセス全体を加速させ、プロジェクト全体で堅牢で一貫性のあるアクセス・フレンドリーなUIを提供するための最新のアップデートについて説明します。
Ignite UI for Angular
クエリ・ビルダー
Ignite UI クエリ・ビルダーコンポーネントは、UIを通じて複雑なクエリーを構築する方法を提供します。AND/OR演算子、条件、値を指定することで、ユーザーはクエリ式を作成することができます。
ピボットグリッドのエクセル出力
エクセル・エクスポーターサービスは、IgxPivotGridからExcel形式でデータをエクスポートできます。データエクスポート機能は、IgxExcelExporterServiceクラスにカプセル化されています。このプロセスを実行するには、IgxExcelExporterServiceのexportメソッドを呼び出し、IgxPivotGridコンポーネントを最初の引数として渡す必要があります。
グリッドのバリデーターサービス
グリッドでセル/行の編集時に、ユーザー入力のバリデーションを行う機構を組み込みました。これはAngular Formのバリデーターを拡張したもので、使い慣れた実装でバリデーションを導入することが出来ます。エディタの状態が変化したときに関連するセルに適用されます。以下の検証項目をサポートします。
- required
- min
- max
- minlength
- maxlength
- pattern
詳細はこちらのドキュメントをご確認ください。
ピボットグリッドの状態保持
igxGridStateディレクティブは、開発者がグリッドの状態を簡単に保存・復元できるようにするものです。IgxGridStateディレクティブがグリッドに追加されると、getStateおよびsetStateメソッドが利用可能になります。サポートするのは以下の機能です。
- ソート
- フィルタリング
- セルの選択状態
- 行の選択状態
- 列の選択状態
- グリッドの展開
- ピボット設定
- IPivotConfigurationインタフェースで定義されるピボット・コンフィギュレーション・プロパティ。
- ピボット・ディメンジョンとピボット・バリューの機能は、アプリケーション・レベルのコードを使用して復元されます。こちらをご参照ください。
- ピボット行とピボット列のストラテジーも、アプリケーションレベルのコードを使用して復元できます。こちらをご参照ください。
ピボットグリッドのフィルター式
すべてのディメンション（フィルタ、行、列）は、チップ型のUI または API を介してフィルタリングすることができます。この機能は、デフォルトで組み込まれ、有効になっています。 詳しくはこちらをご確認ください。
ピボットグリッドの集計方法を示すラベル
提供されたデータからフィールドに一致するメンバか、より複雑なカスタム・シナリオのためにカスタム集計関数を定義することで値の設定を行うことができます。すぐに利用可能な、データフィールドのデータ型に応じて使用できる4つの事前定義された集計があります。
- IgxPivotNumericAggregate - 数値フィールド用。以下の集計関数が含まれます。sum、avg、min、max、count。
- IgxPivotDateAggregate - 日付フィールド用。以下の集約関数が含まれます。latest、earliest、count。
- IgxPivotTimeAggregate - 時刻フィールド用。以下の集計関数が含まれます。latest、earliest、count。
- IgxPivotAggregate - その他のデータ型用。これはベースとなります。以下の集約関数が含まれます。COUNT。
詳しくはこちらをご確認ください。
タブUIの改善
詳しくはこちらをご確認ください。
コンボの改善 - フィルタリング戦略、複数フィールドのフィルタリング機能、新しい "searchKey "入力
コンボコンポーネントに「searchKey」入力が追加され、検索やフィルタリングに使用するデータキーが指定できるようになりました。詳しくはこちらをご確認ください。
その他
- Angular v14のサポート
- グリッドの自動サイズ調整に関するパフォーマンスの改善
まとめ
私たちは、Angular開発における最高のUIツールキットと、より多くのノウハウを提供することに専念し、継続的に新機能を出荷し、パフォーマンスを改善し、安定性の改善を実施し続けています。以下はフル機能のデータグリッドを１から作成するチュートリアルビデオです。（英語）
もし、私たちが提供するコンポーネントに新しい機能を追加したい、重要な問題を修正したい、あるいは新しいコンポーネントを導入したいなどのアイデアがあれば、GitHub リポジトリに投稿して私たちに知らせてください また、インフラジスティックスのコントロールを使って何かクールなものを作ったら、ぜひ私たちに教えてください。
技術サポート・無料オンライン相談会をご利用ください
インフラジスティックスのUI製品は多くの機能を備えているためドキュメントの情報量も多く、なかなかお探しの情報にたどり着けない場合もあります。そういった際はお気軽に技術サポートや、製品導入支援担当との無料オンライン相談会をご予約いただくことで検証時間を節約可能ですので、ぜひご活用ください。
