コンテンツにスキップ
App Builder Release: Two-Way Data Binding, Datasource OpenAPI Schema Update & More

App Builderリリース:双方向データバインディング、データソースOpenAPIスキーマの更新など

もうひとつのエキサイティングなApp Builderリリースが本日発売されました。双方向データ バインディング、更新されたデータソース OpenAPI スキーマなどを使用して、アプリ開発を前進させています。

6分で読めます

5 月のApp Builderリリースでは、多くの新機能と改善が加えられています。ユーザーは、既存のデータソースを最新のOpenAPIスキーマに更新し、相違点を表示できるようになりました。改善点には、入力チェックボックススイッチ日付ピッカーカレンダー評価、およびスライダーコンポーネント双方向データバインディングのサポートも含まれます。

他には。行を作成、更新、削除するためのデータアクションがツリーグリッドコンポーネントで使用可能になり、ツリーグリッドコンポーネントの行選択イベントに基づいて変数を更新できるようになりました。ツリーコンポーネントが拡張され、単一ノードの展開アイテムクリックの切り替えのプロパティが追加されました。さらに、入力コンポーネントの新しい検索スタイルオプションが追加されました。

これらの新機能に飛び込む前に、App Builderについて初めて学ぶ場合は、組織のアプリケーション開発プロセスにおける重要なツールとして検討する必要がある理由を簡単に説明します。

  • ビジュアルアプリビルダー – プロダクトマネージャー、デザイナー、開発者、関係者のための統合プラットフォーム。
  • クラウドベースの WYSIWYG ドラッグ アンド ドロップ ツールにより、企業はこれまでより 80% 速く完全なビジネス アプリを設計および構築できます。
  • FigmaおよびSketchデザインから、本番環境に対応したBlazorコードAngularコード、Web Componentsコードを生成するローコード ツールです

双方向のデータ バインディングのサポート

このApp Builderリリースでは、入力、チェックボックス、スイッチ、日付ピッカー、カレンダー、評価、スライダーの各コンポーネントに双方向のデータバインディングのサポートが追加されました。

双方向バインディングのサポートにより、プロパティが変数にバインドされているときに、コンポーネントプロパティをtwoWayBindableとしてマークできます。しかし、双方向バインディングとはいったい何なのでしょうか?UI と基になるデータの同期を維持することを想像してみてください。そのため、データを変更すると UI が自動的に更新され、UI を変更すると変数データが自動的に更新されます。

ユーザーは、次のことができるようになりました。

  • 入力コンテンツを何らかの値に設定し、生成されたコードで双方向のデータ バインド フィールドとして生成します。
  • コンポーネントの対応する値/コンテンツプロパティを変数にバインドします。
  • このバインディングを双方向バインディングとして生成するかどうかを制御します。
Two way binding demo

データソース OpenAPI スキーマの更新を含むApp Builderリリース

App Builderのデータ ソース UI は、データ ソースのエンドポイントとスキーマを視覚化して開発者に提示します。データ ソースは時間の経過と共に進化し、そのスキーマも変化するため、App Builderデータ ソース UI はそれに応じて更新する必要があります。

このApp Builderリリースでは、既存のデータ ソースを簡単に更新して、最新バージョンの OpenAPI スキーマを使用し、存在する場合は相違点を表示する方法が利用できるようになりました。

Updating existing data sources in App Builder

この新機能の本質は何ですか? 

  • この機能を使用すると、App Builderでフロントエンドを開発しながら、データ ソースをバックエンドの WebAPI と同期できます。
  • データソースを更新し、データバインディングに使用したデータスキーマプロパティが変更されない場合、データバインディングはそのまま残ります。
  • データ バインディングの変更に使用したデータ ソースとデータ スキーマ プロパティを更新すると、影響を受けるデータ バインディングの一覧が記載された通知が表示されるため、それに応じて UI コンポーネントを手動で更新できます。

※今後、データソースのWeb APIのURLが変わっていない場合に便利な自動バックグラウンド更新の導入を予定しています。新しいデータマッピング機能も利用可能になり、バインディングをより便利に更新するためのUIが提供されます。 

ツリーグリッドアクション

Web API 呼び出しを使用して、ツリーグリッドコンポーネントの行を作成、更新、および削除するようにデータアクションを設定できるようになりました。これらをツリー グリッドの編集アクション ボタンに結び付けて、リアルタイムの Web API 更新を活用できます。コード生成時に、App Builderは、使用可能な Post/Put/Delete HTTP メソッドを使用して、リソースの作成、取得、更新、および削除の API 呼び出しを処理するために必要なサービスを作成します。

ツリーグリッドの行選択インタラクション

このApp Builderリリースでは、ツリーグリッドコンポーネントの行選択イベントに基づいて変数を更新することもできます。

Tree Grid Selection Change

念のため、昨年のApp Builderのメジャーリリースでは、変数管理のコンテキストに役立つさまざまなコンポーネントイベントハンドラを公開しました。

主なイベントは次のとおりです。 

  • Selection Changed Event: Combo コンポーネントで使用されます。
  • 行選択変更イベント: グリッドコンポーネントとツリーグリッドコンポーネントの両方で使用されます。
  • クリックイベント: このイベントは、すべてのコンポーネントで使用でき、クリックアクション時に変数を設定するコンテキストで使用されます。
  • 特定のコンポーネント イベント。たとえば、Stepper コンポーネントは、次のアクションを公開します – 次/前のステップ、リセット、およびステップ (x) に移動。

詳細については、このトピック「App Builderでのイベントとアクションの操作」を参照してください。

このApp Builderリリースの新しいツリーコンポーネントプロパティも

単一ノードの展開アイテムクリックの切り替えのためのツリーコンポーネントプロパティを追加しました。

  • 単一ノードの展開– 有効にすると、一度に 1 つのツリー ノードのみが展開されます。2つ目を開こうとすると、前者は崩壊します。
  • クリック時にアイテムを切り替える– これは、展開/折りたたみアイコンだけでなく、ノードをクリックしたときに展開/折りたたみの状態を切り替えるプロパティです。
Tree Component new properties

その他の改善点

まとめ

結論として、App Builderはアプリ開発プロセスのゲームチェンジャーである。クラウドベースのビジュアル・ビルダー、ローコード機能、そして新機能を備えたこのツールは、あらゆる組織にとって必携のツールだ。今すぐお試しください!より詳細な情報が必要な場合は、こちらをご覧ください:

すべてを体験するには、カスタマーポータルにアクセスして最新バージョンを入手してください。いつものように、私たちは常にあなたのフィードバックを得て、あなたが追加したいものや推奨したいものを聞くことを楽しみにしています。ですから、zkolev@appbuilder.devまでメールでご連絡いただき、インフラジスティックスでお客様に価値を提供し続けるお手伝いをさせていただきます。

App Builder Release: Two-Way Data Binding, Datasource OpenAPI Schema Update & More
デモを予約