Lightning コンポーネント開発者ガイド
jレコードの作成
Lightning Data Service を使用してレコードを作成する場合は、recordId にアクセスするのではなく、最初に force:recordPreview を宣言します。次に、force:recordPreview の getNewRecord をコールして、レコードテンプレートを読み込みます。最後に、新しいレコードに値を適用し、force:recordPreview の saveRecord 関数をコールしてレコードを保存します。
Lightning Data Service を使用したレコードの作成は、2 つのステップからなるプロセスです。
- getNewRecord をコールして、レコードテンプレートから空のレコードを作成します。このレコードは、フォームのバッキングストアとして使用できます。あるいは、その値を保存用のデータに設定することもできます。この点は後続のセクションで説明します。
- saveRecord をコールして、レコードを確定させます。この点は、「レコードの保存」に記載されています。
レコードテンプレートから空のレコードの作成
レコードテンプレートから空のレコードを作成する場合、最初に force:recordPreview タグに recordId を設定しないようにします。recordId がなければ、Lightning Data Service が既存のレコードを読み込むことがありません。
次に、コンポーネントの init または別のハンドラで、force:recordPreview の getNewRecord をコールします。getNewRecord は次の引数を取ります。
| 属性名 | 型 | 説明 |
|---|---|---|
| entityApiName | String | 作成するレコードの sObject のエンティティ API 名。 |
| recordTypeId | String | 新しいレコードのレコードタイプの 18 文字の ID。 指定されていない場合は、オブジェクトのデフォルトのレコードタイプが使用されます。 |
| defaultFieldValues | Map | 使用前に空のレコードに設定する項目値の対応付け。この属性を使用して、デフォルト値またはコンテキスト固有の値を設定します。 |
| skipCache | Boolean | レコードテンプレートを、クライアント側の Lightning Data Service キャッシュではなく、サーバから読み込むかどうか。デフォルトは false です。 |
| callback | Function | 空のレコードの作成後に呼び出される関数。この関数は引数を受け取りません。 |
getNewRecord は結果を返しません。空のレコードを準備して、targetRecord 属性に割り当てるだけです。
レコードの作成
次の例は、Lightning Data Service を使用したレコードの作成の要点を示しています。この例は、取引先レコードの 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:recordPreview 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 <div class="slds-form--stacked">
29
30 <div class="slds-form-element">
31 <label class="slds-form-element__label" for="contactFirstName">First Name: </label>
32 <div class="slds-form-element__control">
33 <ui:inputText class="slds-input" aura:id="contactFirstName"
34 value="{!v.newContact.FirstName}" required="true"/>
35 </div>
36 </div>
37 <div class="slds-form-element">
38 <label class="slds-form-element__label" for="contactLastName">Last Name: </label>
39 <div class="slds-form-element__control">
40 <ui:inputText class="slds-input" aura:id="contactLastName"
41 value="{!v.newContact.LastName}" required="true"/>
42 </div>
43 </div>
44
45 <div class="slds-form-element">
46 <label class="slds-form-element__label" for="contactTitle">Title: </label>
47 <div class="slds-form-element__control">
48 <ui:inputText class="slds-input" aura:id="contactTitle"
49 value="{!v.newContact.Title}" />
50 </div>
51 </div>
52
53 <div class="slds-form-element">
54 <ui:button label="Save Contact" press="{!c.handleSaveContact}"
55 class="slds-button slds-button--brand" />
56 </div>
57
58 </div>
59
60</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:recordPreview
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 ハンドラがコールされます。これは、「レコードの保存」 に記載のとおり、取引先責任者を保存して、ユーザインターフェースを更新する単純明快なアプリケーションです。