フォーム入力のカスタマイズ
Amplify Studioでフォームビルダーを使用してReactフォームコンポーネントをカスタマイズします。新しいフォーム入力を追加し、フィールドにバインドし、ラベルをカスタマイズし、検証ルールを追加できます。
フォームビルダーにアクセスするには、Amplify Studioにログインします。
フォームビルダーインターフェースは以下の項目で構成されています。
- フォーム入力: フォーム入力を選択して、表示、データ、検証ルール設定を表示します。
- 表示オプション: 入力のタイプ、ラベル、プレースホルダー、説明を設定します。
- データ: 入力を送信ペイロード内のフィールドに接続します。
- 検証ルール: 検証ルールを視覚的に追加します。検証ルールの追加方法をご覧ください。
- アクションメニュー: フォーム入力を削除するアクションメニュー。
- フォーム間隔エディター: フォームのパディングと、入力間の水平および垂直ギャップを設定します。
- エンドユーザーとして表示: Reactアプリにフォームを統合することなく、インラインでフォームをテストします。
フォーム入力を追加する
フォームをカスタマイズしてユースケースに合わせるためにフォーム入力を追加します。フォーム要素を追加するには:
- マウスをフォームキャンバスの中央に移動します。
- フォーム入力の間、前後にホバーし、(+)記号付きの青いバーが表示されるまで待ちます。
- (+)記号付きの青いバーをクリックします。
- 追加するフォーム入力を選択します。
フォーム内のすべての入力要素をカスタマイズできます。フォーム内のフィールドを選択して設定メニューを開き、表示ラベルやプレースホルダーなどの入力部分をカスタマイズできます。
ファイルアップローダーなど、一部のフォーム入力には固有の設定があります。ドキュメントで特殊フィールドの設定について詳細を確認してください。
ドラッグアンドドロップでフォーム入力を並び替える
フォーム入力を縦または横に並び替えます。
- フォーム入力をクリックしてドラッグします
- フォーム入力を別のフォーム入力の上、下、左、または右に移動します
- 青いバーが表示されたときにドロップし、フォーム入力の新しい配置を示します
エンドユーザーとしてフォームを表示する
フォームのカスタマイズをすばやくテストする場合は、エンドユーザーとして表示を選択してStudio内で完全に機能するカスタマイズされたフォームを表示します。
注: フォームがデータモデルに接続されている場合、送信をクリックするとフォームデータがクラウドに保存されます。このアプリが本番環境で使用されている場合、保存するデータが顧客に見える可能性があります。
フォーム間隔(パディングとギャップ)を設定する
フォームと入力間にスペースを追加します。スペーシングエディターを使用して、次のスペーシング値を設定できます(左から右へ):
- 水平ギャップ: 水平に配置された入力間のスペース。
- 垂直ギャップ: 垂直に配置された入力間のスペース。
- パディング: フォーム入力とフォームの境界線周辺のスペース。
スペーシング値には、CSSの長さ値(px、rem、em、%)またはテーマオブジェクトのスペーシング値への参照(xss、medium、large)を指定できます。
Select、Radio Group、またはAutocompleteフィールドのオプションを設定する
Selectフィールド、Radio Groupフィールド、Autocompleteフィールドは、ユーザーが選択できるオプションのセットが必要です。たとえば、「ステータス」入力は「未開始」、「進行中」、「完了」のオプションのみを持つことができます。
- Selectフィールド、Radio Groupフィールド、またはAutocompleteフィールド入力を選択します
- データ > オプションに移動します
- 利用可能なオプションを1行ずつ入力するか、
["Not started", "In progress", "Done"]などのJSONアレイを貼り付けます
リスト入力を有効にする
TextInputは「複数の値を受け入れる」を切り替えることで複数の値を受け入れることができ、ユーザーがアイテムを追加、更新、削除できるようになります。この機能は、データモデルにリンクされていない入力に対してのみ有効です。入力が既存モデルにリンクされている場合、この機能は対応するフィールドの「配列である」プロパティを切り替えることで、モデル上で直接制御されます。
- データモデルに接続されていないフォーム入力を選択します
- データに移動します
- 複数の値を受け入れるを選択します
エンドユーザーにとってリスト入力がどのように見えるかを示します:
セクション要素を追加する
セクション要素を使用してフォームを複数の部分に分割します。これは、ネストされたデータと個々のセクション内の指定されたフォーム入力を表現するのに役立ちます。
- マウスをフォームキャンバスの中央に移動します。
- フォーム入力の間、前後にホバーし、(+)記号付きの青いバーが表示されるまで待ちます。
- (+)記号付きの青いバーをクリックします。
- 要素検索リストの下部までスクロールします
- 見出し、区切り線、またはテキストを選択します
フォーム入力を削除する
- フォーム入力を選択します。
- アクション > 削除を選択します。