レコードの作成

ユーザがレコードを作成できるフォームを作成するための最も簡単な方法は、lightning-record-form を使用することです。フォームのレイアウトをカスタマイズしたり、カスタマイズ値を事前に読み込んだりするには、lightning-record-edit-form を使用します。

これらのコンポーネントよりも高い柔軟性が必要な場合は、「レコードを作成および編集するカスタム UI の作成」を参照してください。

lightning-record-form を使用してレコードを作成するには、record-id 属性を除外します。次の例では、取引先オブジェクトとその項目のインポート参照を使用してレコードを作成します。フォームには、レコードを更新するための [保存] ボタンと、変更内容を破棄するための [キャンセル] ボタンがあります。

項目のインポートは、myFields 配列に渡されます。インポートした参照は、コンパイル時に検証されます。次の例をレコードページに配置することで、record-id プロパティと object-api-name プロパティを継承できます。

[キャンセル] ボタンと [保存] ボタンを持つフォーム

データが正常に保存されると、鉛筆アイコンが表示され、インライン編集が可能なことを示します。このビューは、ページを更新または再読み込みするまで表示され続けます。

インライン編集

lightning-record-edit-form を使用して、項目のレイアウトやデータの表示方法をカスタマイズできます。

レコード項目種別に基づいて入力コントロールを表示する lightning-input-field に項目を渡します。エラーメッセージの自動表示を有効にするには、lightning-messages コンポーネントを使用します。

目的の項目にアクセスするには、@salesforce/schema からの項目インポートを使用します。オブジェクトや項目への参照をインポートすると、オブジェクトや項目の名前が変更されても、コードは確実に機能します。

フォームの表示時に項目値を表示するには、lightning-input-fieldvalue 属性を使用します。

次の例では、取引先名項目にカスタム値が入力されたフォームを表示します。このフォームのボタンをクリックすると、取引先レコードが作成されます。

フォームが読み込まれたときに値が設定されるようにするには、JavaScript で値を指定してください。次の例は、myValue を使用して値を設定しています。この値を後でプログラムによって設定することもできます。ここでは onclick イベントハンドラが overrideValue メソッドをコールすることによって設定しています。

lightning-record-edit-form には、lightning-record-form にあるような [キャンセル] ボタンや [保存] ボタンはありません。項目値を元に戻すための [キャンセル] ボタンを作成するには、reset() メソッドをコールする lightning-button コンポーネントを使用します。record-id には自分のレコード ID を指定してください。例については、「レコードの編集」を参照してください。

lightning-record-edit-form は、フォームの送信とエラーを自動的に処理します。エラーメッセージを自動的にフォーム項目の上または下に表示するには、lightning-messageslightning-input-field コンポーネントの前または後に追加します。

lightning-record-edit-form では、次のカスタムイベントを処理できます。

  • error — フォームがサーバ側のエラーを返した時点で実行されます。
  • load — フォームがレコードデータを読み込んだ時点で実行されます。
  • submit — フォームが変更済みのレコードデータを送信した時点で実行されます。
  • success — フォームが変更済みのレコードデータを送信した時点で実行されます。

例については、「レコードの編集」を参照してください。