特別な入力の設定
リレーションシップを持つオートコンプリートフィールド
リレーションシップを持つデータモデルに連動した接続フォームがある場合、フォームビルダーは送信を処理するための特別なフィールドを使用します。オートコンプリートフィールドを使用すると、フォーム送信者は関連するデータモデルから 1 つ以上のレコードを選択できます。これらの接続されたオートコンプリートフィールドには、いくつかの特別な設定があります。
フォームビルダーは現在、競合解決のない GraphQL API へのデータ連動をサポートしています。GraphQL と競合解決の詳細はこちらをご覧ください。
フォーム内のリレーションシップフィールドを有効化する
データモデルにリレーションシップがあるが、接続フォームに関連フィールドがない場合は、リレーションシップフィールドが有効になっていない可能性があります。リレーションシップサポートを有効にするには...
- Studio アプリケーションにログインします
- 左側のバーでUI ライブラリを選択します
- 右上隅でUI ライブラリ設定を選択します
- リレーションシップフィールドを選択して有効化します
レコードラベルをカスタマイズする
フォーム送信者がフォーム内のオートコンプリートフィールドを選択すると、関連するレコードのリストが入力されます。デフォルトでは、これらのレコードはデータモデルの最初のフィールド、ハイフン、およびレコードの ID でラベル付けされます。
この例では、フォームは新しい著者を作成し、ユーザーが関連する本を検索できるようにします。Book モデルの最初のフィールドは ISBN なので、ラベルは次のように表示されます:
これをフォーム送信者にとってより有用にするために、モデル内の任意のフィールドと文字列連結でラベルをカスタマイズできます。この例では、本の name フィールド、カンマ、year フィールドの方が理にかなっています。
コード内でリレーションシップを持つフォームを使用する
フォーム設定とスタイルに満足したら、フォームをローカルプロジェクトで生成できます。
GraphQL API が DataStore を使用していない場合、リレーションシップを持つフォームはクエリコードジェン深度 4 が必要であり、そうでなければ期待通りに機能しません。クエリ深度を更新するには:
- ターミナルを開き、Amplify プロジェクトのルートディレクトリに移動します
amplify configure codegenを実行します- Query Depth の入力を求められたら、4 に変更します。その他のオプションはお好みで設定できます
- すべての設定を確認した後、
amplify codegenを実行してプロジェクトのクエリ生成を更新します
ファイルアップローダー
ファイルアップローダーフィールドを使用すると、フォームがファイルアップロードを受け入れることができます。ファイルは Amplify アプリに接続された Amazon S3 バケットに保存されます。アップロード後、ファイルの S3 キーはデータモデルに保存され、Amplify JS ライブラリを使用したシステムティックな取得が可能になります。
前提条件
ファイルアップローダーフィールドを使用するには、Amplify アプリが次の前提条件を満たす必要があります:
- Studio が有効化された Amplify アプリが必要です
- Amplify 認証が必要です。Studio 経由または CLI 経由で設定できます
- Amplify Storage をアプリに追加する必要があります。Studio 経由または CLI 経由で設定できます
動作方法
フォームビルダーのファイルアップローダー入力により、フォーム送信者はローカルデバイスからファイルを選択し、S3 バケットにアップロードできます。ファイルアップローダーは Amplify Storage の一部として追加された S3 バケットに自動的に接続し、同じファイルレベルアクセスの概念を使用して、デフォルトで private に設定されます。
ファイルは選択時に即座にアップロードされ、S3 キーが生成されます。デフォルトでは、ファイルアップローダーはアップロードされたファイルに基づいて一意の S3 キーを生成します。フォーム送信時に、ファイルアップローダーは文字列としてアップロードされたファイルの S3 キーを返します。
ファイルアップローダーフィールドがデータモデル内のフィールドに接続されている場合、S3 キーは GraphQL API 経由でデータベースに書き込まれます。フィールドがデータモデルに接続されていない場合、onSubmit フックを使用して S3 キーを手動で処理できます。
接続フォームを持つファイルアップローダー
ファイルアップローダーフィールドが接続フォームの一部としてデータモデルに連動している場合、フォーム送信時にバインドされたデータモデルにレコードが作成または更新されます。
接続フォームにファイルアップローダー入力フィールドが追加されると、アップロードされたファイルの S3 キーが接続されたデータモデルの String フィールドに書き込まれます。
前提条件:
- GraphQL API が必要です。Studio 経由または CLI 経由でデプロイできます
- データモデルに
String型の少なくとも 1 つのフィールドが必要です - 接続フォームが必要です。これはデフォルトフォームまたはカスタム接続フォームです
接続フォームにファイルアップローダーを追加...
- Studio アプリにログインして、UI ライブラリを選択します
- 接続フォームを選択し、右上隅の設定を選択します
- ファイルアップローダーフィールドに変換する
stringフィールドを選択します - 入力設定サイドバーの表示セクションで、タイプドロップダウンを選択して
StorageFieldを選択します
接続されていないフォームを持つファイルアップローダー
接続されていないフォームにファイルアップローダーフィールドを追加...
- Studio アプリにログインして、UI ライブラリを選択します
- 接続されていないフォームに移動するか、新しい空白フォームを作成します
- 青いプラス記号をクリックしてフォームに新しいフィールドを追加します
StorageField入力要素を選択します
接続されていないすべてのフォームでは、フォーム送信を手動で設定する必要があります。onSubmit フックと fields オブジェクトを使用して、送信をコード内で処理します。
ファイルアップローダーの設定
ファイルアップローダーには、右側のツールバーで適用できる複数の固有の設定があります。
- ファイルレベルアクセス: アップロードされたファイルにアクセスできるユーザーを決定します。ファイルアップローダーはデフォルトで「プライベート」に設定されます。
- プライベート: アップロード者のみがアクセス可能
- 保護: 認証されたすべてのユーザーがアクセス可能
- パブリック: 誰でもアクセス可能
- 受け入れるファイルタイプ: アップロードできるファイルタイプを制限します
- 詳細設定
- 最大ファイル数: 送信前にフォームに追加できる最大ファイル数。バインドされたデータモデルフィールドが配列でない場合、常に 1 になります
- 最大ファイルサイズ: アップロードされた各ファイルの最大サイズ
- 一時停止可能: ユーザーがアップロードを一時停止および再開できます
- 画像プレビュー: アップロードされたファイルが画像の場合、画像のプレビューがフォームにレンダリングされます
ファイルレベルアクセス
ファイルアップローダーは Storage カテゴリと同じファイルレベルアクセスの概念を使用し、デフォルトで private に設定されます。private または protected ファイルレベルアクセスを選択すると、アップロードされたすべてのファイルのファイルパスに {user_identity_id} が含まれます。これにより、読み取りと書き込みアクセスが制限され、異なるユーザーがアップロードした同じファイルが一意のパスを持つことが保証されます。
一意な S3 キー
同じ S3 キーを持つファイルが同じパスにアップロードされると、S3 はこれらのファイルを上書きします。ファイルの誤った上書きを防ぐために、ファイルアップローダーは_ファイルコンテンツ_をハッシュ化して一意の S3 キーを生成します。同じ名前の異なるファイルをアップロードしても、元のファイルは上書きされません。
ただし、フォーム送信者が同じパスに 2 つの同一ファイルをアップロードする場合 - ファイル名が異なっていても - ファイルアップローダーは S3 バケット内のファイルの重複を防ぎます。