インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

App Builder 新機能リリース! ツリーグリッド、カラムプロパティ、その他多数!

こんにちは、インフラジスティックス・ジャパンです。

App Builder の10月のアップデートは、重要な更新を含んでいます。App Builderについて初めて知る方に向けて、アプリケーション開発プロセスにおける重要なツールとして、なぜApp Builderを検討すべきなのかを簡単に説明します。

  1. 視覚的なアプリケーション構築プラットフォーム - プロダクトマネージャー、デザイナー、デベロッパーのための統一プラットフォーム
  2. クラウドベースのビジュアルUIエディターで、ビジネスアプリケーションをこれまでより80%速く設計・構築することが可能
  3. Sketch や Adobe XD のデザインから、すぐに使えるBlazorコードやAngularコードを生成するローコードツール

この記事の原文は以下よりご確認いただけます。
Zdravko Kolev / Tuesday, October 18, 2022 App Builder Release with Tree Grid, Column Properties and More

ローコードツールApp Builderの新機能

グリッドカラムの設定

  • 各カラムはプレーンな文字列としてではなく推論されたカラムタイプで提供され、コードのエクスポート時に設定されます
  • キーボードの矢印キーとアウトラインパネルで列を並べ替えることができます。
  • 列のヘッダーを選択し、そのタイトルやデータフィールドを変更できます。
  • コードのエクスポート時にテンプレート化したり、既存のデータフィールドにバインドできる新しい(空の)列を追加できます。
  • deleteキーまたはアウトラインパネルによる列の削除
  • アウトラインパネルでカラムを非表示
  • デザインサーフェスからカラムのサイズを変更可能

次期バージョンでは、編集、フィルタリング、ピン留めなど、カラムベースの機能の有効化/無効化を追加する予定です。

ツリーグリッド

Ignite UI Angularツリーグリッドは、フラットなデータを簡単に表示、操作するために使用されます。非常に少ないコードで素早くデータをバインドしたり、様々なイベントを使用して異なる動作をカスタマイズできるようになりました。このコンポーネントは、データ選択、エクセル形式のフィルタリング、ソート、ページング、テンプレート化、カラム移動などの豊富な機能を提供します。

ツリーグリッドの最初のバージョンはフラットデータバインディングのみをサポートしているので、データオブジェクトはプライマリーキーと外部キーを含んでいなければなりません。主キーは現在のデータオブジェクトの一意な識別子であり、外部キーはその親の一意な識別子である。この場合、元のデータソースを含むツリーグリッドのデータプロパティは、フラットコレクションになります。

Angular Tree Grid | 最速の Angular Tree テーブル | インフラジスティックス

階層的なデータソースバインドは、次のイテレーションで計画されており、まもなくリリースされる予定です。

アコーディオン

このリリースでは、アコーディオンコンポーネントも追加されました。これは、クリック可能なヘッダーと関連するコンテンツセクションを持つ垂直方向に拡張可能なパネルを構築するためのGUIコンポーネントで、単一のコンテナ内に表示されます。アコーディオンは、1つのページで複数のセクションのコンテンツをスクロールする必要性を減らすために一般的に使用されます。

ライセンス認証されたコードの出力

現在、生成可能なコードは2種類あります。

1.ライセンスユーザーであれば、アプリ生成時にIgnite UI Angularのライセンスパッケージを使用します。これは、アプリケーションのダウンロードとGitHubへの公開の両方に適用されます。 アプリケーションをGitHubに公開する際、プロジェクトをビルドし、基本的なテストを実行するためのCIを追加します。また、ライセンスパッケージを使用できるようにするために、GitHub CIから必要とされるNPM_AUTH_TOKENを公開します。

2.トライアルユーザーの場合、アプリ生成時にIgnite UI Angularの無料トライアルパッケージを使用します。これは、アプリケーションのダウンロードとGitHubへの公開の両方に適用されます。 Ignite UI Angularのトライアル版を使用しているプロジェクトで、フルライセンスパッケージにアップグレードする方法と、ライセンスされたnpmフィードを使用するための環境とCIのセットアップ方法については、ライセンスFAQとインストールドキュメントを参照してください。

Ignite UI のライセンス

また、npm run infragistics-login を実行すると、ライセンスされたフィードにログインすることができます。

OpenAPIの改善

参照オブジェクトのサポート - 内部および外部で、仕様内の他のコンポーネントを参照できるようにするオブジェクトをサポートするようになりました。 OpenAPI Specification - Version 3.0.3 | Swagger

App Builder でデータを使用する

解析されたテーブルスキーマのサイズに関する制限を追加しました。 "Unable to infer schema from data" - このエラーメッセージは、データソースの解析されたテーブルスキーマのサイズが大きすぎる(5MB以上)ときに表示されます。次のような場合に発生する可能性があります。

  • 通常のRESTエンドポイントを追加する。
  • swaggerデータソースのエンドポイントを確認するとき。
  • またはデータソースが更新されたとき。

これはデータに対する制限ではないことに留意してください。例えば、50MB以上の行数でも、スキーマ(データの形状)が5MB以下で表現できれば、App Builderは読み込むことができます。

Safariブラウザのフルサポート

App BuilderがMacOS SafariとMobile Safari の両方をサポートするようになりました。

HRダッシュボードのサンプル

新しいサンプルアプリケーションには、グリッドとチャートのコンポーネントが追加されています。また、リスト、カード、ダイアログ、美しいレイアウトなど、他のコンポーネントの使い方も紹介されています。

20220902150221

まとめ

これらはすべて、App Builderの10月のアップデート新機能とコンポーネントです。より詳細な情報が必要な場合は、こちらも併せてご覧ください。

最後に、最新の Infragistics Ultimate 22.2の製品発表に伴い、アップグレードしたApp Builderを確認したい場合は、以下の動画(英語)をご覧ください。

youtu.be

今回ご紹介したリリースについてのご不明点、利用方法、アップグレード方法、より詳細なご説明、今後のロードマップやその他気になる点などございましたらお気軽にこちらよりご連絡ください。弊社の技術支援チームがサポートさせていただきます。