App Builderリリース: 双方向のデータバインディング、データソースのOpenAPIスキーマの更新など
またしても素晴らしいApp Builderリリースがリリースされました!双方向のデータバインディング、データソースOpenAPIスキーマの更新など、すべての更新に追いつきます。
Zdravko Kolev
5min read
5 月のApp Builderリリースがリリースされ、多くの新機能と改善点がもたらされます。ユーザーは、既存のデータソースを最新のOpenAPIスキーマに更新し、違いを表示できるようになりました。また、Input、Checkbox、Switch、Date Picker、Calendar、Rating、Slider の各コンポーネントの双方向データ バインディングのサポートも改善されています。
他には。行を作成、更新、および削除するためのデータアクションがツリーグリッドコンポーネントで使用できるようになり、ツリーグリッドコンポーネントの行選択イベントに基づいて変数を更新できるようになりました。ツリーコンポーネントが強化され、単一ノードの展開とアイテムクリックの切り替えのプロパティが追加されました。さらに、入力コンポーネントの新しい検索スタイルオプションが追加されました。
これらの新機能について詳しく説明する前に、App Builderについて初めて学ぶ場合は、組織のアプリケーション開発プロセスの主要なツールと見なす必要がある理由を簡単に共有しましょう。
- ビジュアル アプリ ビルダー – プロダクト マネージャー、デザイナー、開発者、関係者向けの統合プラットフォーム。
- クラウドベースのWYSIWYGドラッグ&ドロップツールで、企業は完全なビジネスアプリをこれまで以上に80%速く設計および構築できます。
- Figmaデザインから量産対応のAngular、React、Web Components、Blazorコードを生成するローコードツールです。
双方向のデータ バインディングのサポート
このApp Builderリリースでは、入力、チェックボックス、スイッチ、日付ピッカー、カレンダー、評価、スライダーの各コンポーネントに双方向のデータバインディングのサポートが追加されました。
双方向バインディングのサポートにより、プロパティが変数にバインドされている場合に、コンポーネント・プロパティをtwoWayBindableとしてマークできます。しかし、双方向バインディングとは正確には何ですか?UIと基になるデータの同期を維持することを想像してみてください。そのため、データを変更すると UI が自動的に更新され、UI を変更すると変数データも自動的に更新されます。
ユーザーは、次のことができるようになりました。
- 入力内容を何らかの値に設定し、これを生成されたコードで双方向のデータ バインド フィールドとして生成します。
- 値/コンテンツ・プロパティに対応するコンポーネントを変数にバインドします。
- このバインディングを双方向バインディングとして生成するかどうかを制御します。
App Builder Release With Data Source OpenAPI Schema Update
App Builderのデータソース UI は、データソースのエンドポイントとスキーマを開発者に視覚化します。データ ソースは時間とともに進化し、スキーマも変化するため、App Builderデータ ソース UI はそれに応じて更新する必要があります。
このApp Builderリリースでは、既存のデータ ソースを簡単に更新して、最新バージョンの OpenAPI スキーマを使用し、違いがある場合は表示することができます。
この新機能の本質は何ですか?
- この機能により、App Builderでフロントエンドを開発しながら、データソースをバックエンドWebAPIと同期できます。
- データ ソースを更新し、データ バインディングに使用したデータ スキーマ プロパティが変更されない場合、データ バインディングはそのまま残ります。
- データ バインディングと、データ バインディングの変更に使用したデータ スキーマ プロパティを更新すると、影響を受けるデータ バインディングのリストが記載された通知が表示されるため、それに応じて UI コンポーネントを手動で更新できます。
※今後は、データソースのWeb API URLが変更されていない場合に便利な自動バックグラウンドリフレッシュの導入を予定しています。新しいデータマッピング機能も利用可能になり、バインディングをより便利に更新するためのUIが提供されます。
ツリーグリッドアクション
Web API呼び出しを使用して、ツリーグリッドコンポーネントの行を作成、更新、および削除するためのデータアクションを設定できるようになりました。これらをツリーグリッドの編集アクションボタンに配線して、リアルタイムのWeb API更新を活用できます。コード生成時に、App Builderは、使用可能な Post/Put/Delete HTTP メソッドを使用して、リソースの作成、取得、更新、および削除の API 呼び出しを処理するために必要なサービスを作成します。
ツリーグリッド行選択インタラクション
このApp Builderリリースでは、ツリーグリッドコンポーネントの行選択イベントに基づいて変数を更新することもできます。
念のため、昨年のメジャー App Builderリリースでは、変数管理のコンテキストで役立つさまざまなコンポーネント イベント ハンドラーを公開しました。
主なイベントは次のとおりです。
- 選択変更イベント: コンボコンポーネントで使用されます。
- 行選択変更イベント: グリッド・コンポーネントとツリー・グリッド・コンポーネントの両方で使用されます。
- クリックイベント: このイベントは、すべてのコンポーネントで使用でき、クリックアクション時に変数を設定するコンテキストで使用されます。
- 特定のコンポーネントイベント。たとえば、Stepper コンポーネントでは、次のアクションが公開されます – [Next/Previous step]、[Reset]、および [Go to step (x)]。
詳細については、このトピック (App Builderでのイベントとアクションの操作) を参照してください。
このApp Builderリリースの新しいツリーコンポーネントのプロパティも追加されました
単一ノードの展開とアイテムクリックの切り替えのためのツリーコンポーネントプロパティを追加しました。
- 単一ノード拡張– 有効にすると、一度に 1 つのツリー ノードのみが拡張されます。2 つ目のものを開こうとすると、前者は崩壊します。
- クリック時にアイテムを切り替える– これは、展開/折りたたみアイコンだけでなく、ノードをクリックしたときに展開/折りたたみの状態を切り替えるプロパティです。
まとめ
結論として、App Builderはアプリ開発プロセスのゲームチェンジャーです。クラウドベースのビジュアルビルダー、ローコード機能、新機能など、あらゆる組織にとって必須のツールです。今すぐお試しください!詳細については、以下をご覧ください。
To experience everything, visit your customer portal and get the latest version. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So please email me at zkolev@appbuilder.dev and let me know how we can help you continue delivering value to your customers with Infragistics.
