Lightning Component Framework Sp

2019-03-22 本文已影响0人 Salesforce考试

继续解锁：

https://trailhead.salesforce.com/en/content/learn/superbadges/superbadge_lcf

Lightning Data Service Basics for Aura Components

https://trailhead.salesforce.com/content/learn/modules/lightning_data_service

Get Started with Lightning Data Service for Aura Components

https://trailhead.salesforce.com/content/learn/modules/lightning_data_service/lightning_data_service_get_started

Manipulate Records with force:recordData

https://trailhead.salesforce.com/content/learn/modules/lightning_data_service/lightning_data_service_manipulate_records

accDisplay.cmp

<aura:component implements="force:hasRecordId,
                            flexipage:availableForRecordHome">
 <aura:attribute name="record"
                    type="Object"
                    description="The record object to be displayed"/>
    <aura:attribute name="accountRecord"
                    type="Object"
                    description="A simplified view record object to be displayed"/>
    <aura:attribute name="recordError"
                    type="Object"
                    description="An error message bound to force:recordData"/>
    
    <force:recordData aura:id="accountRecordId"
                      recordId="{!v.recordId}"
                      layoutType="FULL"
                      mode="VIEW"
                      targetRecord="{!v.record}"
                      targetFields="{!v.accountRecord}"                      targetError="{!v.recordError}"/>
    
    <!-- Display a lightning card with details about the record -->
    <div class="Record Details">
        <lightning:card iconName="standard:account" title="{!v.accountRecord.Name}">
            <div class="slds-p-horizontal--small">
             <p>
                    <lightning:formattedText title="Industry" value="{!v.accountRecord.Industry}"/>
                </p>
                <p>
                    <lightning:formattedText title="Description" value="{!v.accountRecord.Description}"/>
                </p>
                <p>
                    <lightning:formattedPhone title="Phone" value="{!v.accountRecord.Phone}"/>
                </p>
            </div>
        </lightning:card>                        
    </div>
</aura:component>

accEdit.cmp

<aura:component implements="force:hasRecordId,
                            flexipage:availableForRecordHome">
 <aura:attribute name="record"
                   type="Object"
                   description="The record object to be displayed"/>
    <aura:attribute name="accountRecord"
                    type="Object"
                    description="A simplified view record object to be displayed"/>
    <aura:attribute name="recordError"
                    type="Object"
                    description="An error message bound to force:recordData"/>
    
    <force:recordData aura:id="accountRecordId"
                      recordId="{!v.recordId}"
                      fields="Name"
                      mode="EDIT"
                      targetRecord="{!v.record}"
                      targetFields="{!v.simpleRecord}"
                      targetError="{!v.recordError}"/>
    
    
    <!-- Display an editing form -->
    <div class="Record Details">
        <lightning:card iconName="action:edit" title="Edit Account">
            <div class="slds-p-horizontal--small">
                <lightning:input label="Account Name" value="{!v.accountRecord.Name}"/>
                <br/>
                <lightning:button label="Save Account" variant="brand" onclick="{!c.handleSaveRecord}" />
            </div>
        </lightning:card>
    </div>
    
    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}
        </div>
    </aura:if>
</aura:component>

accEditController.js

({
 handleSaveRecord : function(component, event, helper) {
  component.find("accountRecordId").saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                console.log("Save completed successfully.");
            } else if (saveResult.state === "INCOMPLETE") {
                console.log("User is offline, device doesn't support drafts.");
            } else if (saveResult.state === "ERROR") {
                console.log('Problem saving record, error: ' + 
                           JSON.stringify(saveResult.error));
            } else {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
        }));
 }
})

Handle Record Changes and Errors

https://trailhead.salesforce.com/content/learn/modules/lightning_data_service/lightning_data_service_handle_notifications

accEdit.cmp

<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome">
 <aura:attribute name="record"
                   type="Object"
                   description="The record object to be displayed"/>
    <aura:attribute name="accountRecord"
                    type="Object"
                    description="A simplified view record object to be displayed"/>
    <aura:attribute name="recordSaveError"
                    type="String"
                    description="An error message bound to force:recordData"/>
    
    <force:recordData aura:id="accountRecordId"
                      recordId="{!v.recordId}"
                      fields="Name"
                      mode="EDIT"
                      targetRecord="{!v.record}"
                      targetFields="{!v.simpleRecord}"
                      targetError="{!v.recordSaveError}"/>
    
    
    <!-- Display an editing form -->
    <div class="Record Details">
        <lightning:card iconName="action:edit" title="Edit Account">
            <div class="slds-p-horizontal--small">
                <lightning:input label="Account Name" value="{!v.accountRecord.Name}"/>
                <br/>
                <lightning:button label="Save Account" variant="brand" onclick="{!c.handleSaveRecord}" />
            </div>
        </lightning:card>
    </div>
    
    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordSaveError))}">
        <div class="recordError">
            {!v.recordSaveError}
        </div>
    </aura:if>
</aura:component>

accEditController.js

({
 handleSaveRecord : function(component, event, helper) {
  component.find("accountRecordId").saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                console.log("Save completed successfully.");
            } else if (saveResult.state === "INCOMPLETE") {
                console.log("User is offline, device doesn't support drafts.");
            } else if (saveResult.state === "ERROR") {
                console.log('Problem saving record, error: ' + 
                           JSON.stringify(saveResult.error));
                var errMsg = "";
                for (var i = 0; i < saveResult.error.length; i++) {
                    errMsg += saveResult.error[i].message + "\n";
                }
                component.set("v.recordSaveError", errMsg);
            } else {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
        }));
 }
})