Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jレコードの作成
lightning:recordForm を使用したレコードの作成
lightning:recordForm を使用してレコードを作成するには、recordId 属性を除外します。
次の例では、項目のリストを持つ取引先レポートを作成するためのフォームを表示しています。フォームの一番下には、[キャンセル] ボタンと [保存] ボタンがあります。
1<aura:component>
2 <aura:attribute name="fields"
3 type="String[]"
4 default="['Name', 'Industry']"/>
5 <lightning:recordForm objectApiName="Account"
6 fields="{!v.fields}"/>
7</aura:component>レコードが正常に保存されると、鉛筆アイコンが表示され、インライン編集が可能なことを示します。このビューは、ページを更新または再読み込みするまで表示され続けます。更新または再読み込みを行うと、データを持たないレコード項目が再表示され、新しいレコードを作成できるようになります。
または、[Full] レイアウト種別を使用して、完全なレイアウトからすべての項目を読み込んで、レコードを作成するためのフォームを作成します。columns 属性は、レコード項目を同じ幅の 2 つの列に表示します。
1<aura:component>
2 <lightning:recordForm objectApiName="Account"
3 layoutType="Full"
4 columns="2"/>
5</aura:component>lightning:recordForm でのエラー処理のカスタマイズ
保存中にエラーが発生すると、lightning:recordForm はフォームの一番上にエラーメッセージを表示します。onerror イベントハンドラを使用して、追加のエラー処理を定義できます。
次の例では、エラーが返されるとトーストメッセージを表示しています。
1<aura:component>
2 <aura:attribute name="fields"
3 type="String[]"
4 default="['Name', 'Industry']"/>
5
6 <!-- Displays toast notifications -->
7 <lightning:notificationsLibrary aura:id="notifLib" />
8 <lightning:recordForm
9 objectApiName="Account"
10 fields="{!v.fields}"
11 onerror="{!c.handleError}"/>
12</aura:component>エラーメッセージを返すには、event.getParam("message") を使用します。
1({
2 handleError: function (cmp, event, helper) {
3 cmp.find('notifLib').showToast({
4 "title": "Something has gone wrong!",
5 "message": event.getParam("message"),
6 "variant": "error"
7 });
8 }
9})レコードが正常に保存された場合のフォーム動作をカスタマイズ��るには、onsuccess イベントハンドラを使用します。
フォームの表示時にカスタムレイアウトを使用したり、カスタムフィールド値を読み込んだりするには、次のセクションで説明する lightning:recordEditForm コンポーネントを使用します。
lightning:recordEditForm を使用したカスタムレイアウトレコードの作成
フォーム項目のカスタムレイアウトを指定するには、lightning:recordEditForm コンポーネントを使用します。
レコード項目種別に基づいて入力コントロールを表示する lightning:inputField に項目を渡します。
次の例では、Lightning Design System で Grid ユーティリティクラスを使用して、カスタムレイアウトを作成しています。
1<aura:component>
2 <lightning:recordEditForm objectApiName="Account">
3 <lightning:messages />
4 <div class="slds-grid">
5 <div class="slds-col slds-size_2-of-3">
6 <lightning:inputField fieldName="Name"/>
7 </div>
8 <div class="slds-col slds-size_1-of-3">
9 <lightning:inputField fieldName="Industry"/>
10 </div>
11 </div>
12 <lightning:button class="slds-m-top_small" type="submit" label="Create new" />
13 </lightning:recordEditForm>
14</aura:component>サーバエラーが発生すると、lightning:recordEditForm はフォーム項目の上にエラーメッセージを表示します。自動エラー処理を有効にするには、lightning:messages コンポーネントを使用します。もしくは、onerror イベントハンドラを使用して、エラー処理方法を定義します。
lightning:recordForm にはなくて lightning:recordEditForm だけにある、もう 1 つの機能は、次のセクションで説明するプリセットカスタム項目値です。
項目値の事前読み込み
フォームの表示時にカスタム項目値を表示するには、lightning:inputField で value 属性を使用します。レコード ID を事前に読み込む場合、レコードを読み込んだときに返される レコード ID によってカスタム値が上書きされることはありません。
あるいは、項目値を次の構文で設定します。
1cmp.find("nameField").set("v.value", "My New Account Name");レコードの作成時に lightning:recordForm や lightning:recordEditForm では行えないカスタマイズが必要な場合には、force:recordData の使用を検討してください。
force:recordData を使用したカスタムユーザインターフェース経由でのレコードの作成
- getNewRecord をコールして、レコードテンプレートから空のレコードを作成します。このレコードは、フォームのバッキングストアとして使用できます。あるいは、その値を保存用のデータに設定することもできます。
- saveRecord をコールして、レコードを確定させます。この点は、「レコードの編集」に記載されています。
レコードテンプレートから空のレコードの作成
レコードテンプレートから空のレコードを作成する場合、force:recordData タグに recordId は設定できません。recordId がなければ、Lightning データサービスが既存のレコードを読み込むことがありません。
| 属性名 | 型 | 説明 |
|---|---|---|
| objectApiName | String | 新しいレコードのオブジェクト API 参照名。 |
| recordTypeId | String | 新しいレコードのレコードタイプの 18 文字の ID。 指定されていない場合は、ユーザのプロファイルで定義したオブジェクトのデフォルトのレコードタイプが使用されます。 |
| skipCache | Boolean | レコードテンプレートを、クライアント側の Lightning データサービスキャッシュではなく、サーバから読み込むかどうか。デフォルトは false です。 |
| callback | Function | 空のレコードの作成後に呼び出される関数。この関数は引数を受け取りません。 |
getNewRecord は結果を返しません。空のレコードを準備して、targetRecord 属性に割り当てるだけです。
レコードの作成
次の例は、Lightning データサービスを使用したレコードの作成の要点を示しています。この例は、取引先レコードの Lightning ページに追加されることを意図しています。
1<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
2
3 <aura:attribute name="newContact" type="Object"/>
4 <aura:attribute name="simpleNewContact" type="Object"/>
5 <aura:attribute name="newContactError" type="String"/>
6
7 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
8
9 <force:recordData aura:id="contactRecordCreator"
10 layoutType="FULL"
11 targetRecord="{!v.newContact}"
12 targetFields="{!v.simpleNewContact}"
13 targetError="{!v.newContactError}" />
14
15 <!-- Display the new contact form -->
16 <div class="Create Contact">
17 <lightning:card iconName="action:new_contact" title="Create Contact">
18 <div class="slds-p-horizontal--small">
19 <lightning:input aura:id="contactField" label="First Name" value="{!v.simpleNewContact.FirstName}"/>
20 <lightning:input aura:id="contactField" label="Last Name" value="{!v.simpleNewContact.LastName}"/>
21 <lightning:input aura:id="contactField" label="Title" value="{!v.simpleNewContact.Title}"/>
22 <br/>
23 <lightning:button label="Save Contact" variant="brand" onclick="{!c.handleSaveContact}"/>
24 </div>
25 </lightning:card>
26 </div>
27
28 <!-- Display Lightning Data Service errors -->
29 <aura:if isTrue="{!not(empty(v.newContactError))}">
30 <div class="recordError">
31 {!v.newContactError}</div>
32 </aura:if>
33
34</aura:component>1({
2 doInit: function(component, event, helper) {
3 // Prepare a new record from template
4 component.find("contactRecordCreator").getNewRecord(
5 "Contact", // sObject type (objectApiName)
6 null, // recordTypeId
7 false, // skip cache?
8 $A.getCallback(function() {
9 var rec = component.get("v.newContact");
10 var error = component.get("v.newContactError");
11 if(error || (rec === null)) {
12 console.log("Error initializing record template: " + error);
13 return;
14 }
15 console.log("Record template initialized: " + rec.apiName);
16 })
17 );
18 },
19
20 handleSaveContact: function(component, event, helper) {
21 if(helper.validateContactForm(component)) {
22 component.set("v.simpleNewContact.AccountId", component.get("v.recordId"));
23 component.find("contactRecordCreator").saveRecord(function(saveResult) {
24 if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
25 // record is saved successfully
26 var resultsToast = $A.get("e.force:showToast");
27 resultsToast.setParams({
28 "title": "Saved",
29 "message": "The record was saved."
30 });
31 resultsToast.fire();
32
33 } else if (saveResult.state === "INCOMPLETE") {
34 // handle the incomplete state
35 console.log("User is offline, device doesn't support drafts.");
36 } else if (saveResult.state === "ERROR") {
37 // handle the error state
38 console.log('Problem saving contact, error: ' + JSON.stringify(saveResult.error));
39 } else {
40 console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
41 }
42 });
43 }
44 }
45})[取引先責任者を保存] ボタンがクリックされると、handleSaveContact ハンドラがコールされます。これは、「レコードの編集」に記載のとおり、取引先責任者を保存して、ユーザインターフェースを更新する単純明快なアプリケーションです。