App Builder 23.1 リリース
新しい App Builder がリリースされました。Infragistics Ultimate 23.1 では、グリッドの CRUD サポート、Figma デザインからコードへの変換、新しいチャート、より多くのサンプルなど、さまざまな機能が追加されています。
Zdravko Kolev 2min read 本日のリリースをもって、Infragistics App BuilderTM Ultimate 23.1 を皆様にお届けできることをとても嬉しく思います。新機能と UI コントロール、拡張された機能、優れた設計開発プロセス、インタラクティブなデータ可視化体験。すべてが含まれています。
各更新の詳細を見てみましょう。
または、App Builder 23.1 リリースの簡単な概要をご覧になりたい場合は、このビデオをご覧ください。
グリッド列テンプレート - ヘッダー、表示、編集
グリッド列ごとに独自の列テンプレートを構築する方法を公開できることができました。たとえば、姓と名前の異なるフィールド、および住所の詳細 (通り、市区町村、郵便番号) を含むデータソースがあるとしましょう。これらすべてを 1 つのセル表示値に組み合わせて、表示される列を減らすことができます。さらに詳しい例は以下をご覧ください。
- URL データフィールドをカスタムイメージコンポーネントに関連付けることができます。
- 評価コンポーネントを表示して、特定の数値に対する視覚的な手がかりを与えます。
- 特定の列に電話番号が含まれていることを示す、より視覚的な方法を提供します。
上記は、列テンプレート化の強力さが与える数多くの例のほんの一部です。以下の画像は、上記の例がどのように機能するかを示しています。
グリッド列ヘッダー、セル、セル編集は、利用可能なテンプレート化オプションです。
Reveal ダッシュボード
App Builder ツールボックスから直接 Reveal ダッシュボードを追加して、データをホストしている Reveal Server SDK への URL を指定できるようになりました。App Builder をクライアントアプリケーションと考えてください。WYSIWYG App Builder がリクエストとレスポンスを送受信するサーバーのエンドポイントである baseURL を取得します。
Reveal ダッシュボードが読み込まれたら、4 つの利用可能なオプション (マーケティング、営業、キャンペーン、製造) からダッシュボード名を指定できます。テスト目的でのみ、独自のサーバーをホストしています。エクスポート時に、デモ目的でのみマーケティングダッシュボードを公開する試用版サーバー “https://samples.revealbi.io/upmedia-backend/reveal-api/” (ベース URL) への参照が得られます。
Reveal の力を示すライブアプリケーションを確認してください。
Reveal 概要
Reveal は、埋め込み分析のために特別に設計されたビジネスインテリジェンスソリューションです。Reveal では以下が可能です。
- フル機能のセルフサービスダッシュボードと最新のレポートを提供します。
- 任意の JavaScript フレームワーク (React、Angular、Vue JS、Web Components、Blazor など)、Windows Forms、または WPF アプリケーションで使用します。
- ブランド体験に合わせて UX をカスタマイズします。
- ほぼすべてのデータソースに接続してダッシュボードにデータを入力します。
- Java、ASP.NET、または Node.js バックエンドの任意のクラウド (パブリックまたはプライベート) またはオンプレミスサーバーにデプロイします。
Reveal には、クライアントアプリケーションへのダッシュボード提供を可能にする 2 つのコアコンポーネントがあります。
Figma オートレイアウト
更新された Figma UI Kit では、デザイナーが Figma でオートレイアウトを使用してデザインを作成する場合、App Builder パーサーはこれを利用してアプリレイアウトを構築することを検討します。オートレイアウトが使用されない場合、パーサーはデフォルトで絶対レイアウトになります。
ここで、Figma オートレイアウトを App Builder で使用して設計からコードへの変換を加速するについての詳細を確認できます。
Figma オートレイアウトは、Figma 内の Flexbox レイアウトの実装です。デザイナーに対しては少し異なる方法で公開されていますが、意図は設計レイアウトを Web レイアウトと結びつけることです。これはこの記事で説明されています。
利点は何ですか？
- デザイナーは Figma でデザインを作成するときにオートレイアウトを有効にし、アートボード全体をオートレイアウトとして設定することから始めます。
- ネストされたフレームを使用します。各フレーム内でオートレイアウトも有効になっています。
次の設計例を見て、フレームが App Builder のレイアウトにどのようにマップできるかを確認しましょう。
グリッド CRUD アクション
App Builder グリッドの機能は、もう 1 つの機能 - Web API コールを使用したグリッド作成、読み取り、更新、削除アクション - で成長を続けています。これらをグリッド編集アクションボタンにワイヤアップして、リアルタイムの Web API 更新を活用できるようになりました。コード生成時に、App Builder は、リソースの作成、取得、更新、削除のための API コールを処理するために必要なサービスを作成します。
グリッドが顧客テーブル (Swagger パス 画像 1) にバインドされている場合、[データインタラクション] セクションは、そのようなインタラクションを追加するときに顧客で利用可能なメソッドが読み込まれます (画像 2)。
階層型イテレータバインディングサポート
Tree、Cards、Containers などのコンポーネントに適用できます。以下の例は、シンプルな Tree と Tree Grid が階層構造を持つデータソースにバインドする方法を示しています。
階層型イテレータバインディングサポートの詳細をお読みください。
チャート集計機能
重複するラベルが存在する場合、カテゴリチャートでデータをグループ化して集計できるようになりました。この機能の基本的な考え方は、グリッドと非常に似ています。カテゴリ (食品、生活必需品、レストラン) でグループ化してから、金額列の最大値を取得するとしましょう。そのデータをカテゴリチャートに割り当ててから、グループをカテゴリに指定し、最大金額のサマリーを指定できます。
新しいオンプレミスバージョン
App Builder オンプレミスソフトウェアは、各組織の固有のデータセキュリティ、メンテナンス、ストレージ、ソフトウェア開発ニーズに対応します。App Builder のオンプレミスバージョンは、独自のインスタンスを使用して独自のインフラストラクチャ上で実行し、内部スタッフのみがアクセスできるようにすることにより、クラウドベースのプラットフォームにアクセスするための簡単な方法を組織に提供します。
新しいサンプルアプリケーション
以下は、さまざまな機能の UI を公開するために追加されたアプリケーションです。
学習ポータル
人気のあるトピックまたはインストラクターに基づいてコースの進捗を追跡する学習管理アプリ。REST にバインドされたカスタムリストと適応レイアウトの機能があります。
在庫管理
在庫レベルを管理し、在庫製品をレビューするためのレポートダッシュボード。ルーティング用のカスタムサイドナビゲーションとパフォーマンスをレポートするためのカテゴリチャートを使用します。
App Builder ドキュメント
ドキュメントはすべての製品に不可欠であり、ヘルプドキュメントの改善に相当な時間を投資しました。新しい各コンポーネントのトピックを追加しました。
- アコーディオン - アコーディオンは多くの場合、コンパクトなスペース内で大量の情報を管理し、ユーザーが特定の情報に選択的に焦点を当てることができるようにするために使用されます。
- 円グラフ - 各セクション (円グラフスライス) は、その基になるデータ値に比例する円弧の長さを持ちます。カテゴリは、分析対象の合計値に対する値の割合に基づいて他のカテゴリに比例して表示されます。円グラフは小さなデータセットに適しており、読みやすく理解しやすいです。
- 評価 - コンポーネントを使用すると、ユーザーは製品、サービス、ページ、その他のエンティティなど、アイテムまたは経験に対して評価を付与できます。評価は単一ユーザーまたは集計スター評価を表示でき、ユーザーが独自のスター評価を設定できるようにするために使用されます。
- ステッパー - プロセスまたはワークフローを段階的な方法で表示するために使用できる便利な UI 要素。ユーザーがプロセス内のどこにいるか、どのステップが残っているかを簡単に理解できます。現在、Figma でのみ Stepper コンポーネントをサポートしています。Sketch では、近い将来追加される予定です。
- ツリー - カテゴリ間の階層関係の視覚的な表現として、リスト構造で表示されます。Tree コンポーネントは、3 つの表示密度 - Comfortable、Cosy、Compact をサポートしています。簡単なヒント: Tree ノードを展開したときに、[展開] アイコンの状態を [展開] に切り替えてください。Tree ノードの子のいくつか (すべてではない) が選択されている場合は、親ノードのチェックボックスの状態を不確定状態に切り替えてください。
また、関連するトピックも更新しました。
- スタイリング - App Builder は、60 以上の UI コンポーネント (Ignite UI for Angular コントロールにもマップされる) のスタイリングのための精巧な手段を提供します。Angular 製品のテーマエンジンにより、わずか数行のコードで製品全体をリスタイルできるカスタムカラーテーマを作成できます。App Builder もこれらのテーマメカニズムを実装して、ユーザーが数回クリックするだけでアプリの外観を完全に変更できるようにします。
- UI パターン - 180 以上の UI パターンは、同じレスポンシブ Web デザイン動作とテーマ機能で拡張されています。UI パターンは、Figma と Sketch のライブラリの個別ページに分散されています。以下は、連絡先リスト、検索可能でフィルタリング可能なリスト、一致する結果が見つからない場合の空のリスト状態など、リストパターンのスニペットです。
その他の改善
- V.align と H.align をオーバーライドするために Align-self プロパティを追加しました (CSS Flex-box で親レイアウトで定義)
- Row/Column/Absolute レイアウトコンポーネントに丸みを設定するための Border-radius プロパティを追加しました
- ブラウザでページタイトルとしてアプリ名を表示
- 新しいデータコレクションを追加するときに、すべてのデータフィールドを選択します
- 新しいアプリケーション作成ダイアログを最大化するオプションを追加しました
- Figma デザインのオートレイアウトを使用する CSS Flexbox レイアウトを作成するレイアウトヒューリスティクスが改善されました。
- Figma プラグインを更新して、テーマパレットとダークテーマを使用してアプリを作成します。
- Figma デザインファイルからアプリを作成するときに、SVG と PNG を画像アセットとして自動的に抽出します。
- App Builder メニュー内の統合ドロップダウンして、デザインシステムリソースをダウンロードし、Discord チャネルに参加します。
- Combo、Select、Dialog コンポーネント (Blazor) 用の新しいコード生成
- ライセンスなしコード エクスポート用の新しいトグル
- バグ修正と全般的な改善
まとめ
ご覧のとおり、Infragistics Ultimate 23.1 リリースには、美しさとシンプルさを 1 つのアプリずつ構築する方法を大幅に改善、合理化、現代化する多数の新機能と更新があります。
このリリースの各部分の詳細があり、こちらで確認できます。
- Angular – Changelog & Updates
- App Builder – Change Log & What’s New
詳細が必要な場合は、以下をご確認ください。
すべてを体験するには、顧客ポータルにアクセスして、最新バージョンを入手してください。いつものように、フィードバックをお聞きして、追加または推奨する内容をお知らせいただきたいと思っています。zkolev@appbuilder.dev にメールしていただき、Infragistics で顧客に価値を提供し続けるのをお手伝いできることをお知らせください。
