新機能フォームビルダーによるApp Builderリリース
フォームビルダーは、App Builderに追加された最新の機能です。それはどのように機能し、アプリ構築エクスペリエンスにどのように役立つのでしょうか?リリースのブログ記事でご確認ください。
ズドラフコ・コレフ
7分で読めます
低コードで高パフォーマンスでデータ豊富なアプリを構築できるようにすることが、継続的な改善への取り組みの目標です。そのため、App Builderの最新機能がシームレスで最適化された開発エクスペリエンスを提供できるように常に心がけています。そして今、さらに別の優れた機能、フォームビルダーを追加しました。
新機能とすべての新機能について詳しく説明する前に、App Builderについて初めて学ぶ場合は、組織のアプリケーション開発プロセスの主要なツールと見なす必要がある理由を簡単に共有します。
- ビジュアルApp Builder– プロダクトマネージャー、デザイナー、開発者、ステークホルダーのための統合プラットフォーム。
- クラウドベースの WYSIWYG ドラッグ アンド ドロップ ツールにより、企業はこれまでより 80% 速く完全なビジネス アプリを設計および構築できます。
- FigmaおよびSketch設計から量産対応のBlazorコード、Angularコード、Web Components、およびReactコードを生成するローコードツールです。
App Builderのフォームビルダーとは何ですか?
App Builder の Form Builder 機能を使用すると、開発者はドラッグ アンド ドロップで HTML フォームをデザインできます。APIエンドポイントから直接フォーム構造を自動生成することに重点を置いており、作成プロセスが簡素化され、バックエンドソースとのシームレスなデータ接続が可能になります。この機能は、フォームのレイアウトとコンポーネントのカスタマイズに広範な柔軟性を提供し、送信、エラー、およびサーバー側の検証に関する通知を表示するオプションが含まれています。
また、その様子をご覧になりたい場合は、12 月に開催されるデモに焦点を当てたウェビナーにご登録ください。詳細はこちらでご確認いただき、ご登録ください。
データエンドポイントからの自動フォーム生成
開発者がデータ エンドポイントをデザイン サーフェイスにドラッグすると、エンドポイントのプロパティに基づいて一連のフォーム コンポーネントが自動的に生成されます。
POSTandPUTmethodsは、データ送信用の入力フィールドを作成します。- 基本的なイベント処理 (
OnSuccess OnErrorインタラクションなど) は自動的に設定されます。
フォームコントロールの自動作成とマッピング
フォームコントロールは、各フィールドのデータ型とメタデータに基づいて作成され、直感的な入力とラベルを保証します(たとえば、日付フィールドは日付ピッカーを使用し、ブールフィールドはスイッチを使用します)。開発者は、コンポーネントの変更、検証の追加、ラベルの調整をプロパティパネルで直接行うための完全な制御を保持します。
フォームの変更
生成されたフォームは、フィールドを含めたり除外したり、ラベルをカスタマイズしたり、入力検証を設定したりするように編集でき、直感的なデザインエクスペリエンスを提供します。App Builderにより、開発者はフォームのレイアウトとコンポーネントの両方を調整できます。
- フォーム内の要素を簡単に追加または削除できます。
- 必須および無効の検証、ラベルのカスタマイズ、マッピングなどのコントロールのプロパティを調整します。
手動フォーム作成
開発者は、入力フィールド、ボタン、フォームコンポーネントなどの要素をフォームコンテナにドラッグアンドドロップすることで、App Builderでフォームを手動で作成できます。このアプローチにより、データ ソースへの即時バインドを必要とせずに、構造とレイアウトを完全に制御できます。
データ ソース バインド
フォームがデザインされたら、開発者は構成されたデータ ソースからエンドポイントにバインドできます。この柔軟性により、データの相互作用を定義する前にフォーム要素を微調整できます。
バインディングの動作と検証
- エンドポイント間の切り替え: フォームの作成後にエンドポイントを切り替えると、一致しない入力には無効なバインディングの警告が表示され、それらのバインディングはコード出力で壊れたバインディングとして生成されません。
- 変数の初期化: API データ エンドポイントを使用して、フォーム エンドポイント バインド ダイアログから新しい変数を初期化し、フォームの初期化に必要なコンテキストを提供できます。
- コード生成: 無効なバインディングは生成されたコードから除外されるため、アプリケーションがエラーなしでコンパイルされます。
エンドポイントの切り替え時の中断を最小限に抑えるために、App Builderは潜在的な無効化に関する警告を提供します。
フォームとのライブインタラクション
App Builder のプレビュー モードでは、ユーザーはフォームを操作して次の情報を確認できます。
- リアルタイムの入力検証。
- フォームの送信 (成功または検証エラーを示す通知付き)。
手記：プレビューモードでフォームを送信すると、アクションPost/Putが実行され、指定されたエンドポイントを通じてレコードが追加または更新されます。
設定可能なアクションボタン
アクションボタン(Submit、Reset)は、フォーム内と外部の両方の配置をサポートし、完全なカスタマイズを提供します。この柔軟性は、より複雑なレイアウトでフォームの動作を正確に制御する必要がある開発者にとって不可欠です。
アクション通知の送信
成功とエラーのメッセージはスナックバーに表示され、フォームの送信に関する非侵入型のフィードバックを提供します。これらの通知は初期リリース用にハードコーディングされており、将来のイテレーションで柔軟な対話処理をサポートする予定です。
フォーム制御のサポート
フォームビルダーは、特定のデータタイプにマップされたさまざまなUIコントロールをサポートしているため、開発者はアクセス可能でレスポンシブなフォームを効率的に作成できます。以下は、サポートされているコントロールと現在の制限の概要です。すべての Form コントロールは双方向バインディングをサポートし、フォーム コンテキストにバインドされます。
| フォーム制御 | デフォルトタイプ | 筆記 |
|---|---|---|
| ラジオグループ | ブーリアン | 必須フィールドの検証が不足している |
| チェックボックス | ブーリアン | 必須フィールドの検証が不足している |
| スイッチ | ブーリアン | – |
| スライダー | 数 | – |
| 選択する | 列挙型 | – |
| コンボボックス | 列挙型 | – |
| 日付ピッカー | 日付 | – |
| 暦 | 日付 | 選択した日付が正確に更新されない場合があります |
| 入力フィールド | 文字列、数値 | – |
手記：フォーム コントロールは現在、基本的な検証プロパティ (Required、Disabled) をサポートしています。
今後の機能強化
App Builder の Form Builder のロードマップには、検証オプションの進歩、拡張メタデータのサポート、通知とインタラクションの処理の強化が含まれています。
今後の検証機能強化には、次のものが含まれます。
- 選択コントロールとコンボ ボックス コントロールの列挙型検証。
- 範囲の検証 (
min,max)。 - 文字列の長さの検証 (
min length,max length)。 - パターン検証 (regex)。
既知の問題と制限事項
次の既知の問題と制限は、Form Builder の初期リリースに適用されます。
- フォームのリセット動作App Builder、ランタイム エクスペリエンスと生成されたアプリケーション ランタイムの不一致:
- App Builderでは、レコードの編集時に [リセット] ボタンのクリックが初期値に戻り、新しいレコードを追加するときにフォームがクリアされます。
- 生成されたアプリケーションでは、[リセット] ボタンをクリックすると、すべてのフォーム コントロールが空の値に設定され、フォームがクリアされます。
- フォームのコピー&ペースト:現在、フォームをコピーして貼り付けると、元のフォームのデータ連結が失われ、新しく貼り付けたフォームインスタンスに転送されます。
- ブール必須フラグ: 必須ブールフィールドの実装には、特に「利用規約に同意する」などの場合にあいまいさがあります。
- 送信/リセットの動作: 送信/リセット機能は、テンプレートとリアクティブフォームの両方で機能するように調整されていますが、それでも不整合が発生する可能性があります。
- コード生成:
- フォームモデルでのタイピングの問題:特にネストされた構造体や配列を操作する場合、タイピングの不整合が発生する可能性があり、出力コードでの正確なフォームモデルの生成が複雑になります。
igx-hintプレビュー中の要素:igx-hint要素は最終的なコードでは生成されないため、現在プレビューから除外されています。今後の更新により、メッセージ表示機能のサポートが追加される可能性があります。- フォーム内で生成されたアプリにカレンダーが表示されません。
- リセットボタンのクリック動作–React生成されたプロジェクトのフォームをクリアします。初期値に戻る代わりに、フォーム コントロールは空の値を取得します。
- Disabled プロパティは、角度で生成されたフォームの入力に対してレンダリングされません。
投票の質問
次の投票にご記入ください。皆様からのフィードバックは、Form Builderとローコードツールの未来を形作る上で非常に貴重です。レスポンシブフォームの設計や検証の管理など、お客様の課題に対処するとともに、ドラッグ&ドロップUXやバックエンド統合などの機能を強化することに尽力しています。
結論
結論として、App Builderはアプリ開発プロセスのゲームチェンジャーです。クラウドベースのビジュアルビルダー、ローコード機能、新機能により、あらゆる組織にとって必須のツールとなっています。今すぐお試しください!詳細については、以下をご覧ください。
To experience everything, head to appbuilder.dev and start using the App Builder. If you want an exclusive preview of our latest developments, check our App Builder Preview environment. 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.
App Builder AI:アプリ開発をどのように効率化しますか?
