フォームビルダー

Amplify Studioのフォームビルダーは、Reactフォームを作成するためのビジュアルインターフェースです。バリデーションロジックを構成し、テーマを調整し、すべてコンソール内でプレゼンテーションをカスタマイズできます。

フォームは完全に拡張可能で、ライフサイクル管理を可能にし、外部APIの呼び出しや別のデータベースに対する検証を含む、コード内のカスタムバリデーションロジックをサポートしています。

フォームビルダーは現在、コンフリクト解決なしのGraphQL APIへのデータバインディングをサポートしています。GraphQLおよびコンフリクト解決の詳細についてはこちらをご覧ください。

はじめに

フォームビルダーでフォームを構築すると、Amplify Studioは設計に基づいて再利用可能なReactコンポーネントを生成します。このコンポーネントコードはプロジェクトディレクトリにプルでき、インポートして、わずか数行のコードでアプリでレンダリングできます。

Studioアプリでフォームビルダーを使い始めるには...

Studioアプリケーションにログイン
左側のナビゲーションバーでUIライブラリを選択
次のいずれかのパスを実行します:

Amplifyアプリにデプロイされたデータモデルがある場合、Studioはデフォルト接続フォームを自動生成します。

デフォルトフォームを使用するには:

Amplify Studioにログインして、データモデルをデプロイします
Studio Console > UIライブラリに移動します

フォームは左側のナビゲーションバーのフォームヘッダーの下に一覧表示されます

左側のナビゲーションバーに自動生成されたフォームを表示するStudioコンソール

デフォルトフォームはフォーム名の横にあるAmplifyアイコンで識別できます

デフォルトフォームであることを示すAmplifyアイコン付きのフォーム名

フォームが見つかりませんか？ デプロイされたデータモデルがあるが、フォームがない場合は、自動フォーム生成が無効になっている可能性があります。UIライブラリの右上隅でUIライブラリ設定を選択し、自動フォーム作成を有効にしてください。

デフォルトフォームはそのまま使用することも、カスタマイズすることもできます。デフォルトフォームをカスタマイズするには、左側のナビゲーションバーでフォームを選択し、右上隅の構成をクリックします。考え直した場合は、フォームを削除でき、新しいデフォルトフォームが生成されます。

フォームに満足したら、アプリでレンダリングできます。

接続フォームを使用するには、最初にデータモデルが必要です。Amplify Studioにログインして、データモデルをデプロイします。

新しい接続フォームを構築するには...

UIライブラリを選択
左側のナビゲーションバーのフォームセクションで、新規を選択
フォームに名前を付け、作成または更新を選択
データモデルドロップダウンで、フォームが接続すべきモデルを選択
フォームを作成を選択

Publisherデータモデルが「データモデル」セクションでハイライトされた新しいフォーム画面

フォームビルダーは、接続されたデータモデルのフィールドと一致する入力フィールドを持つ新しいフォームを生成します。ここから、入力をカスタマイズし、フォームに満足したら、アプリでレンダリングできます。

Amplify Studioは、出力したいJSONオブジェクトに基づいて、接続されていないフォームを生成できます。これは別のAPIとインターフェースしている場合に特に便利です - ほとんどのAPIエンドポイントは入力データをJSON形式で期待しているため、サンプルペイロードを貼り付けるだけで、すばやくフォームを生成できます。

JSONからフォームを生成するには:

Amplify Studioコンソールで、UIライブラリに移動
左側のナビゲーションバーで、フォームヘッダーの横にある新規を選択
フォームに名前を付け、作成または更新を選択
新規フォームページで、JSONオブジェクトを選択
JSONをコードエディターに貼り付けて、フォームを作成をクリック

フォームビルダーは値に基づいて入力要素タイプを推測でき、配列とネストされたJSON値を処理できます。たとえば、このJSONサンプルを使用します:

  "basics": {
    "firstName": "Wesley",
    "emailAddress": "wesley@example.com"
  "favoriteThings": {
    "animals": ["Cats", "Snakes", "Quokka"],
    "month": "December",
    "number": 17
  "active": true,
  "enabled": false

このJSONは次のフォームをレンダリングします:

キーペア値から推測されたタイプを持つ見出しとフィールドを表示するJSONからレンダリングされたフォーム

JSONオブジェクトから、Amplify Studioは自動的に...

...メールアドレスと数値に正しいタイプを設定
...動物を複数の値を受け取るように設定
...アクティブと有効をスイッチに設定

このフォームに満足したら、データモデルにバインドすることで接続フォームに変換したり、アプリでレンダリングしたりできます。

Amplify Studioは、ビジュアルインターフェースを使用して、ゼロから完全に接続されていないフォームをビルドすることを可能にします。基本的で、まったく新しいフォームを生成するには:

Amplify Studioコンソールで、UIライブラリに移動
左側のナビゲーションバーで、フォームヘッダーの横にある新規を選択
フォームに名前を付け、作成または更新を選択
ブランクフォームを選択したままにして、フォームを作成をクリック

新しいフォームページで、新しいフォーム作成時に利用可能なオプションを表示

フォームを作成をクリックすると、フォーム編集ページが表示されます。プラス記号を選択し、フォームに追加する入力要素を選択します。

入力要素をフォームに追加する機能を示す青いバーとプラス記号を持つフォーム作成ページの画像

フォーム入力のカスタマイズを続けることができ、満足したら、データモデルにバインドすることで接続フォームに変換したり、アプリでレンダリングしたりできます。

または、AWSにログインせずに開始するには、Amplify Sandboxで接続されていないフォームをビルドできます。

アプリでReactフォームをレンダリング

初期プロジェクト設定

アプリケーションでフォームを使用するには、まずプロジェクトをAmplify Studio生成コンポーネントを使用するように構成する必要があります。開始するには、新しいReactアプリを作成してから、

アプリケーションのルートディレクトリに移動し、次のnpm依存関係をインストール

npm install -g @aws-amplify/cli

npm install aws-amplify @aws-amplify/ui-react

アプリケーションのエントリーポイントファイル(create-react-appの場合はsrc/index.js、Viteの場合はsrc/main.jsx)で、次のインポートと構成を追加

import '@aws-amplify/ui-react/styles.css';
import { Amplify } from 'aws-amplify';
import { ThemeProvider } from '@aws-amplify/ui-react';
import amplifyconfig from './amplifyconfiguration.json';
import studioTheme from './ui-components/studioTheme';
Amplify.configure(amplifyconfig);

アプリケーションのエントリーポイントファイル(create-react-appの場合はsrc/index.js、Viteの場合はsrc/main.jsx)で、<App />コンポーネントを次でラップ:

<ThemeProvider theme={studioTheme}>
</ThemeProvider>

フォームをインポートしてレンダリング

次に、フォームをAmplifyクラウドからプロジェクトにプルして、コードにインポートする必要があります。

アプリケーションのルートディレクトリに移動して、amplify pullを実行
フォームを名前でインポート。ProductCreateFormという名前のフォームの場合、次のコードを使用します:

import { ProductCreateForm } from './ui-components';

コードにフォームを配置。ReactプロジェクトでProductCreateFormという名前のフォームの場合、次のAppコードを使用できます:

function App() {
  return <ProductCreateForm />;
export default App;