新機能: 条件付きデータ アクション、グリッド マスター/ディテールなどによるApp Builder
App Builderの 6 月のアップデートでは、アプリ開発を加速し、ユーザーとの対話を効率化するように設計された生産性向上機能の新たな波が導入されています。条件付きデータアクションからスペイン語のローカライゼーションまで、今すぐすべてをご覧ください。
ズドラフコ・コレフ
7分で読めます
6 月のApp Builderリリースでは、アプリ開発を加速し、ユーザーとの対話を効率化するために設計された生産性向上機能の新たな波が導入されています。条件付きデータアクションをApp Builderすることで、API呼び出しの成功または失敗に基づいて、よりスマートなロジックをワークフローに組み込むことができるようになりました。コードは必要ありません。新しいグリッドマスター詳細テンプレートを使用すると、拡張可能なコンテキスト対応ビューで行データを視覚的に充実させることができます。また、グローバルチーム向けには、プラットフォーム全体でスペイン語のローカライゼーションを導入しています。このリリースは、新しい子レベルのルーティング機能、デザイン時の機能強化、アウトライン アイコン ボタンや包含アイコン ボタンなどの拡張された UI バリアントと組み合わせることで、より多くのデザイン パワーとロジック制御をすぐに行うことができます。
これらの新機能について詳しく説明する前に、初めてApp Builderについて学ぶ場合は、組織のアプリケーション開発プロセスの主要なツールと見なすべき理由を簡単に共有しましょう。
- ビジュアルアプリビルダー –経営幹部、エンタープライズアーキテクト、開発チームリーダー、デザイナー、開発者、ステークホルダーのための統合プラットフォームです。
- クラウドベースの WYSIWYG ドラッグ アンド ドロップ ツールにより、企業はこれまでより 80% 速く完全なビジネス アプリを設計および構築できます。
- ローコード ツールは、Angular、React、Web Components、Blazorの量産対応コードを生成し、Figmaデザインをコードに変換します。
このApp Builderリリースの新機能
マスター/ディテールテンプレートによるグリッドの強化
App Builderのマスター/ディテールテンプレートは、データグリッドに強力なインタラクティブ性をもたらします。拡張可能な行を有効にすることで、ユーザーは、顧客の最近の注文、従業員のパフォーマンス、車両の移動履歴など、各レコードに関連付けられた詳細をグリッド内で表示できます。
App Builder の直感的なデザインタイムサポートにより、カードやテキストブロックなどのコンポーネントを展開された詳細領域にドラッグアンドドロップして、現在の行のデータコンテキストにバインドできます。これは、フラットテーブルを超えた情報量の多いUIを迅速かつ柔軟に構築する方法です。
これを使用するには、プロパティパネルからGrid-detailsオプションを有効にし、コンポーネントを追加して、それらを行データにバインドします。
次のデモを見てみましょう。
上のデモでは、CRMアプリケーション内で適用されるマスター/ディテールレイアウトの動作を示しています。これは、顧客を選択すると、関連する注文がどのように表示されるか、さらに、各注文が関連する注文の詳細を動的に読み込む方法を示しています。
この設定では、次のようになります。
- メインビューには顧客の一覧が表示され、顧客を選択すると、その注文を確認できます。
- 選択した注文の行コンテキストにバインドされた 2 番目の注文詳細グリッドが追加されました。
- このコンテキスト駆動型バインディングにより、ユーザーが特定の注文を選択すると、Order Details Gridが更新され、関連情報のみが表示されます。
これは、コンテキスト データ バインディングを使用してドリルダウン エクスペリエンスをいかに簡単に構築できるかを示しており、ユーザーは手動の配線や追加のコードなしで階層的なデータ関係を探索できます。
すべてをライブでプレビューし、生成されたコードでアプリをエクスポートします。行ごとのパラメーター化されたデータ ソースやダイアログなどのオーバーレイ コンポーネントなど、特定の高度なバインディングは、現在コード生成でサポートされていないことに注意してください。完全なヘルプトピックはこちらからご覧ください。
よりスマートなワークフロー:条件付きデータアクションによるApp Builder
このリリースでは、データリクエストの結果に基づいてアプリケーションの動作を制御する強力な方法である条件付きデータアクションが導入されApp Builder。最初のアクションが成功または失敗した場合にのみトリガーされるフォローアップ アクションを定義できるようになりました。たとえば、フォームの送信が成功した後に成功バナーを表示したり、失敗した場合はエラーメッセージを表示したりします。
この機能は、物事をクリーンで焦点を絞った状態に保ちます:条件は現在、データアクションのみに制限されており、特定のHTTPコードをチェックする必要なく、単純な合格/不合格の評価をサポートしています。また、条件内で変数を使用したり、入力変数、結果、ユーザー定義変数のいずれを参照しているのかを明確にするのに役立つコンテキストドロップダウンを利用することもできます。これは、よりインテリジェントで応答性の高いアプリケーションロジックに向けた基本的なステップであり、コーディングは必要ありません。
以下のデモは、HR ダッシュボード アプリケーション内で実際に動作する条件付きアクションの出力を示しています。新しい従業員を追加するプロセスを動的に処理し、その結果に基づいてコンテキスト ナビゲーションを提供することで、アプリのフローを強化する方法を示します。
次に、その処理を行います。
- 新しい行が従業員グリッドに追加されると、条件付きアクションによってバックエンドへのPUTリクエストがトリガーされます。
- リクエストが成功すると、次の 2 つの処理が行われます。
- 変数は、新しく作成された従業員オブジェクトを格納するように設定されます。
- スナックバー通知が表示され、成功を確認し、新入社員のデータが事前に入力された詳細なフォームビューへのナビゲーションボタンを提供します。
- 要求が失敗すると、ユーザーに問題を通知するダイアログ ウィンドウが表示されます。
- フォームビューで従業員を編集し、更新を送信すると、2番目のスナックバーが表示され、ユーザーはチームビューに誘導され、新しく追加または更新された従業員を含む従業員の完全なリストを確認できます。
このフローは、Conditional Actionsが、データ作成から簡単なアプリ内ナビゲーションまで、コードを1行も必要とせずに、シームレスでマルチステップのユーザーエクスペリエンス(UX)を調整する方法を示しています。
はいはい！App Builderがスペイン語に対応しました
App Builderではスペイン語のローカライズが提供されるようになったため、スペイン語を話すユーザーは、デザイン サーフェイス、ツールボックス、プロパティ パネルなどを簡単に操作できます。このアップデートでは、ブラウザの言語設定や設定に基づいてインターフェースを自動的に適応させることで、よりアクセスしやすく包括的なエクスペリエンスが保証されます。
パス パラメーターとクエリ パラメーターを使用した子レベル ルーティングの概要
App Builderでのルーティングの大幅な機能強化として、パスとクエリのパラメーターを使用した子レベルのルーティングの完全サポートを発表できることを嬉しく思います。この機能により、アプリケーション階層内でネストされたビューコンテナ(ルーターアウトレット)を構成できるようになり、開発者はマルチレベルのナビゲーション構造を簡単に設計できます。マスターディテール エクスペリエンス (Customers → Orders → OrderDetailsなど) を構築する場合でも、深くネストされた UI を構築する場合でも、App Builderでは最大 5 レベルの深さのルーティング階層がサポートされるようになりました。また、ナビゲーション ピッカーとターゲット ピッカーの UI が強化され、より直感的なセットアップが可能になりました。
クエリパラメータ、ナビゲーションロジック、ランタイム動作
パス・パラメータに加えて、App Builderには、同じ名前の複数のパラメータを処理する戦略など、すべてのプラットフォームに対する堅牢なクエリ・パラメータのサポートが含まれるようになりました。コード生成ロジックは、クエリ パラメーターの正しい使用法を反映するように更新され、ルーティング アクションとシームレスに統合されました。さらに、ナビゲーションの動作が改善され、ルート (/) へのナビゲーションは、最も深い有効なルートに自動的にドリルダウンされ、必須パラメーターが未定義の場合にのみ停止するようになりました。このインテリジェントなルーティング動作により、アプリのプレビュー エクスペリエンスが向上し、複雑なデータドリブンなナビゲーション フローを自信を持って構築するための基盤が設定されます。
新しいアイコンボタンのバリエーション: Contained & Outline
App Builderは、アイコンボタンコンポーネントのContainedバリアントとOutlineバリアントをサポートし、デザインシステムやFigma UI キットで利用可能なオプションと整合するようになりました。これらの新しいスタイルは、大胆で充実した外観を目指す場合でも、ミニマルなアウトラインを目指す場合でも、アプリの視覚的なトーンに合わせる柔軟性を高めます。このアップデートでは、App Builder UIでのデザイン時設定、更新されたコンポーネント定義による正確なコード生成、デザインからコードへの一貫したフローを維持するためのFigmaからのシームレスなインポートなど、プラットフォーム全体で完全にサポートされます。
まとめ
6 月のリリースは、App Builderでスケーラブルで最新のアプリ エクスペリエンスを提供するという Microsoft の継続的な取り組みを反映しています。複雑なデータ グリッドの設計、堅牢な検証ルールの適用、DevOps ワークフローの合理化など、このアップデートにより、より迅速に行動し、より適切に構築するためのツールが提供されます。
今すぐappbuilder.devの新機能をお試しください
App Builderは、アプリ開発プロセスにおけるゲームチェンジャーです。クラウドベースのビジュアルビルダー、ローコード機能、新機能など、あらゆる組織にとって必須のツールです。今すぐお試しください!詳細については、以下をご覧ください。
最新のApp Builderアップデートのすべてを体験するには、カスタマーポータルにアクセスして最新バージョンを入手してください。いつものように、私たちはあなたのフィードバックを受け取り、あなたが追加したいものや推奨したいものを聞くことに常に興奮しています。ですから、zkolev@appbuilder.devにメールを送って、Infragisticsで顧客に価値を提供し続けるために私たちがどのように支援できるかを教えてください。
