Lightning コンポーネント開発者ガイド
jレコードの作成
Lightning データサービスを使用してレコードを作成する場合は、recordId を割り当てずに、最初に force:recordData を宣言します。次に、force:recordData の getNewRecord 関数をコールして、レコードテンプレートを読み込みます。最後に、新しいレコードに値を適用し、force:recordData の saveRecord 関数をコールしてレコードを保存します。
Lightning データサービスを使用したレコードの作成は、2 つのステップからなるプロセスです。
- getNewRecord をコールして、レコードテンプレートから空のレコードを作成します。このレコードは、フォームのバッキングストアとして使用できます。あるいは、その値を保存用のデータに設定することもできます。この点は後続のセクションで説明します。
- saveRecord をコールして、レコードを確定させます。この点は、「レコードの保存」に記載されています。
レコードテンプレートから空のレコードの作成
レコードテンプレートから空のレコードを作成する場合、最初に force:recordData タグに recordId を設定しないようにします。recordId がなければ、Lightning データサービスが既存のレコードを読み込むことがありません。
次に、コンポーネントの init または別のハンドラで、force:recordData の getNewRecord をコールします。getNewRecord は次の引数を取ります。
| 属性名 | 型 | 説明 |
|---|---|---|
| entityApiName | String | 作成するレコードの sObject のエンティティ API 名。 |
| recordTypeId | String | 新しいレコードのレコードタイプの 18 文字の ID。 指定されていない場合は、ユーザのプロファイルで定義したオブジェクトのデフォルトのレコードタイプが使用されます。 |
| defaultFieldValues | Map | 使用前に空のレコードに設定する項目値の対応付け。この属性を使用して、デフォルト値またはコンテキスト固有の値を設定します。 |
| skipCache | Boolean | レコードテンプレートを、クライアント側の Lightningデータサービスキャッシュではなく、サーバから読み込むかどうか。デフォルトは false です。 |
| callback | Function | 空のレコードの作成後に呼び出される関数。この関数は引数を受け取りません。 |
getNewRecord は結果を返しません。空のレコードを準備して、targetRecord 属性に割り当てるだけです。
レコードの作成
次の例は、Lightning データサービスを使用したレコードの作成の要点を示しています。この例は、取引先レコードの Lightning ページに追加されることを意図しています。
ldsCreate.cmp
1<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
2
3 <aura:attribute name="newContact" type="Object"/>
4 <aura:attribute name="newContactError" type="String"/>
5 <force:recordData aura:id="contactRecordCreator"
6 layoutType="FULL"
7 targetRecord="{!v.newContact}"
8 targetError="{!v.newContactError}"
9 />
10
11 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
12
13 <!-- Header -->
14 <div class="slds-page-header" role="banner">
15 <p class="slds-text-heading--label">Create Contact</p>
16 </div>
17
18 <!-- Display Lightning Data Service errors, if any -->
19 <aura:if isTrue="{!not(empty(v.newContactError))}">
20 <div class="recordError">
21 <ui:message title="Error" severity="error" closable="true">
22 {!v.newContactError}
23 </ui:message>
24 </div>
25 </aura:if>
26
27 <!-- Display the new contact form -->
28 <lightning:input aura:id="contactField" name="firstName" label="First Name"
29 value="{!v.newContact.FirstName}" required="true"/>
30
31 <lightning:input aura:id="contactField" name="lastname" label="Last Name"
32 value="{!v.newContact.LastName}" required="true"/>
33
34 <lightning:input aura:id="contactField" name="title" label="Title"
35 value="{!v.newContact.Title}" />
36 <lightning:button label="Save Contact" onclick="{!c.handleSaveContact}"
37 variant="brand" class="slds-m-top--medium"/>
38</aura:component>
ldsCreateController.js
1({
2 doInit: function(component, event, helper) {
3 // Prepare a new record from template
4 component.find("contactRecordCreator").getNewRecord(
5 "Contact", // sObject type (entity API name)
6 null, // record type
7 null, // default record values
8 false, // skip cache?
9 $A.getCallback(function() {
10 var rec = component.get("v.newContact");
11 var error = component.get("v.newContactError");
12 if(error || (rec === null)) {
13 console.log("Error initializing record template: " + error);
14 }
15 else {
16 console.log("Record template initialized: " + rec.sobjectType);
17 }
18 })
19 );
20 },
21
22 handleSaveContact: function(component, event, helper) {
23 if(helper.validateContactForm(component)) {
24 component.set("v.newContact.AccountId", component.get("v.recordId"));
25 component.find("contactRecordCreator").saveRecord(function(saveResult) {
26 if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
27
28 // Success! Prepare a toast UI message
29 var resultsToast = $A.get("e.force:showToast");
30 resultsToast.setParams({
31 "title": "Contact Saved",
32 "message": "The new contact was created."
33 });
34 resultsToast.fire();
35
36 // TODO: Reset the form to empty values
37
38 // Reload the view so components not using force:recordData
39 // are updated
40 $A.get("e.force:refreshView").fire();
41 }
42 else if (saveResult.state === "INCOMPLETE") {
43 console.log("User is offline, device doesn't support drafts.");
44 }
45 else if (saveResult.state === "ERROR") {
46 console.log('Problem saving contact, error: ' +
47 JSON.stringify(saveResult.error));
48 }
49 else {
50 console.log('Unknown problem, state: ' + saveResult.state +
51 ', error: ' + JSON.stringify(saveResult.error));
52 }
53 });
54 }
55 },
56})[取引先責任者を保存] ボタンがクリックされると、handleSaveContact ハンドラがコールされます。これは、「レコードの保存」 に記載のとおり、取引先責任者を保存して、ユーザインターフェースを更新する単純明快なアプリケーションです。