salesforce lightning零基礎學習(七) 列表展示資料時兩種自定義編輯頁面
上一篇Lightning內容描述的是LDS，通過LDS可以很方便的例項化一個物件的資料資訊。當我們通過列表展示資料需要編輯時，我們常使用兩種方式去處理編輯頁面：Pop Up Window彈出修改詳情以及在本頁面隱藏詳情頁面顯示編輯頁面。
實現這個功能以前主要需要先了解幾個標籤：
lightning:recordForm: 此標籤允許使用者快速的建立一個form去檢視，新增以及修改一條記錄。集合了 lightning:recordEditForm 以及 lightning:recordViewForm 兩個標籤功能。
下面例舉一些此標籤常用的屬性：
objectName: 想要展示的object的API Name，此屬性為必填的屬性；
recordId：想要展示記錄的ID；
mode:指定Form的互動方式以及樣式。值有三個：
- view – 記錄在View模式下展示，預設顯示編輯（鉛筆）圖示，點選編輯圖示後進入編輯模式；
- edit – 記錄展示包含Save和Cancel的Edit模式；
- readonly – 記錄在View模式下展示，不允許編輯。
上面也說到了lightning:recordForm集合了lightning:recordViewForm以及lightning:recordEditForm.下面的demo是通過這兩個元素進行展示，所以簡單的說一下這兩個標籤：
lightning:recordViewForm:
此元素有兩個必填的屬性：
objectApiName：想要展示的object的API Name;
recordId: 想要展示資料的ID。
lightning:recordEditForm:此標籤用途和lightning:recordViewForm大部分相同，區別為此標籤用於Form配合lightning:inputField實現編輯一個form功能。如果recordId為空，則進行建立一條資料的功能，如果recordId有值，則進行更新記錄功能。
常用屬性：
objectApiName：想要編輯的object的API Name；
recordId：想要編輯的記錄的Id，如果此屬性為空，則認為是新建記錄；
recordTypeId：想要編輯的記錄的record type id,用於指定新建/編輯記錄的record type
onload：Form資料載入後觸發的回撥函式；
onsubmit：Form資料submit後觸發的回撥函式；
onsuccess：資料操作成功後的回撥函式；
onerror： 資料操作失敗後的回撥函式；
lightning:overlayLibrary：此標籤包含兩個功能：彈出popup modal以及展示Popover(彈出框)。此標籤包含了兩個主要的方法：
showCustomModal：此方法用於彈出一個popup modal，樣式和使用標準介面修改一條記錄彈出的modal類似。此方法包含以下常用引數：
- header：傳入型別為object，用於展示在modal header部分；
- body：傳入型別為object，用於展示在modal body部分；
- footer：傳入型別為object，用於展示在modal的footer部分；
- showCloseButton：指定是否在modal中展示關閉按鈕，預設為true；
- cssClass：逗號分隔的一個list的css class應用於此modal；
- closeCallback：modal關閉時的回撥函式。
此方法的語法格式如下：
component.find('overlayLib').showCustomModal({
//modal attributes
}).then(function (overlay) {
//closes the modal immediately
overlay.close();
});
modal效果展示圖如下：
showCustomPopover:此方法用於彈出一個彈出框，類似標籤中title樣式，hover後在旁邊展示的描述資訊的效果。此方法包含以下常用引數：
- body：傳入型別為object，用於展示popover中的body部分；
- referenceSelector：指定popover要展示在哪個元素後面；
- cssClass：逗號分隔的一個list的css class應用於此modal。
popover顯示效果如下：
注意：演示這兩個功能時，一定注意不要使用single app，single app展示這種方式會出現報錯：
測試這兩種樣式可以考慮demo中component implements="flexipage:availableForAllPageTypes"，然後放在一個object的detail頁面看效果。下面為demo部分。
一. 列表使用Card樣式展示，點選Edit圖示覆蓋原View佈局顯示Edit佈局，點選Save以後顯示View佈局的List樣式。
1.SimpleAccountList:此類用於預設初始化搜尋出來10條Account資訊；
1 public class SimpleAccountListController { 2 @AuraEnabled 3 public static List<Account> getAccountList() { 4 return [SELECT Id,Name,AccountNumber,Site 5 FROM Account 6 LIMIT 10]; 7 } 8 }
2.SimpleAccount.cmp:用於預設初始化展示view檢視，點選edit的icon後顯示edit部分檢視；
1 <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId"> 2 <aura:attribute name="acc" type="Account"/> 3 <lightning:recordViewForm aura:id="viewForm" recordId="{!v.acc.Id}" objectApiName="Account"> 4 <div class="slds-media"> 5 <div class="slds-media__body"> 6 <lightning:layout class="slds-hint-parent"> 7 <a onclick="{!c.navToRecord}"> 8 <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.acc.Name}</h3> 9 </a> 10 <lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}"/> 11 </lightning:layout> 12 <lightning:layout multipleRows="true"> 13 <lightning:layoutItem size="6"> 14 <lightning:outputField fieldName="AccountNumber"/> 15 </lightning:layoutItem> 16 <lightning:layoutItem size="6"> 17 <lightning:outputField fieldName="Site"/> 18 </lightning:layoutItem> 19 </lightning:layout> 20 </div> 21 </div> 22 </lightning:recordViewForm> 23 <lightning:recordEditForm aura:id="editForm" recordId="{!v.acc.Id}" objectApiName="Account" class="slds-hide" onsuccess="{!c.handleSuccess}"> 24 <div class="slds-media"> 25 26 <div class="slds-media__body"> 27 <lightning:layout> 28 <a onclick="{!c.navToRecord}"> 29 <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.acc.Name}</h3> 30 </a> 31 </lightning:layout> 32 <lightning:layout multipleRows="true"> 33 <lightning:layoutItem size="6"> 34 <lightning:inputField fieldName="AccountNumber"/> 35 </lightning:layoutItem> 36 <lightning:layoutItem size="6"> 37 <lightning:inputField fieldName="Site"/> 38 </lightning:layoutItem> 39 </lightning:layout> 40 <lightning:layout horizontalAlign="center" class="slds-m-top_large"> 41 <lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}"/> 42 <lightning:button variant="brand" label="Submit" title="Submit" type="submit"/> 43 </lightning:layout> 44 </div> 45 </div> 46 </lightning:recordEditForm> 47 </aura:component>
3.SimpleAccountController.js: 處理跳轉到account頁面以及點選edit，save以及cancel操作處理；
1 ({ 2 navToRecord : function (component, event, helper) { 3 var navEvt = $A.get("e.force:navigateToSObject"); 4 navEvt.setParams({ 5 "recordId": component.get("v.acc.Id") 6 }); 7 navEvt.fire(); 8 }, 9 editRecord : function(component, event, helper) { 10 helper.showHide(component); 11 }, 12 handleSuccess : function(component, event, helper) { 13 helper.showHide(component); 14 var recUpdate = $A.get("e.c:recordUpdated"); 15 recUpdate.fire(); 16 }, 17 handleCancel : function(component, event, helper) { 18 helper.showHide(component); 19 event.preventDefault(); 20 } 21 })
4.SimpleSimpleAccountHelper.js:用於切換view/edit檢視的顯示；
1 ({ 2 showHide : function(component) { 3 var editForm = component.find("editForm"); 4 $A.util.toggleClass(editForm, "slds-hide"); 5 var viewForm = component.find("viewForm"); 6 $A.util.toggleClass(viewForm, "slds-hide"); 7 } 8 })
5.SimpleAccountList.cmp：用於展示account的list；
1 <aura:component controller="SimpleAccountListController" implements="flexipage:availableForRecordHome,force:hasRecordId"> 2 <aura:attribute name="simpleAccounts" type="Object[]"/> 3 <aura:attribute name="acc" type="Account"/> 4 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 5 <lightning:card iconName="standard:account" title="simple accounts" class="slds-is-relative"> 6 <div class="slds-p-left_medium slds-p-right_medium"> 7 <ul class="slds-list_vertical slds-has-dividers_top-space"> 8 <aura:if isTrue="{!v.simpleAccounts.length > 0}"> 9 <aura:iteration items="{!v.simpleAccounts}" var="item"> 10 <li class="slds-list__item"> 11 <c:SimpleAccount acc="{!item}"/> 12 </li> 13 </aura:iteration> 14 <aura:set attribute="else"> 15 <li class="slds-list__item"> 16 <h3 class="slds-text-small slds-text-color_error">No accounts found.</h3> 17 </li> 18 </aura:set> 19 </aura:if> 20 </ul> 21 </div> 22 </lightning:card> 23 </aura:component>
6. SimpleAccountListController.js：用於初始化資料
1 ({ 2 doInit : function(component, event, helper) { 3 4 var action = component.get("c.getAccountList"); 5 action.setCallback(this, function(response){ 6 var simpleAccounts = response.getReturnValue(); 7 component.set("v.simpleAccounts", simpleAccounts); 8 9 }); 10 $A.enqueueAction(action); 11 } 12 })
7.將SimpleAccountList.cmp放在account的detail page中。
效果展示：
1.預設通過card佈局展示列表
2.點選其中的一個edit，會切換成edit模式，其他的不變化；
3.點選save後正常顯示save以後的列表效果。
二.顯示View列表，點選Edit後展示PopUp Modal，修改後，隱藏Modal，然後繼續展示列表。
1.SimpleAccountEdit.cmp：用來展示編輯Account的UI
1 <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId"> 2 <aura:attribute name="recordId" type="String" /> 3 <lightning:overlayLibrary aura:id="popuplib"/> 4 <lightning:recordEditForm aura:id="editForm" recordId="{!v.recordId}" objectApiName="Account" onsuccess="{!c.handleSuccess}" onsubmit="{!c.handleSubmit}"> 5 <div class="slds-media"> 6 <div class="slds-media__body"> 7 <lightning:layout multipleRows="true"> 8 <lightning:layoutItem size="6"> 9 <lightning:inputField fieldName="AccountNumber"/> 10 </lightning:layoutItem> 11 <lightning:layoutItem size="6"> 12 <lightning:inputField fieldName="Site"/> 13 </lightning:layoutItem> 14 </lightning:layout> 15 <lightning:layout horizontalAlign="center" class="slds-m-top_large"> 16 <lightning:button variant="brand" label="Submit" title="Submit" type="submit"/> 17 </lightning:layout> 18 </div> 19 </div> 20 </lightning:recordEditForm> 21 22 </aura:component>
2. SimpleAccountEditController.js：Edit操作 submit以及操作success的handler操作；
1 ({ 2 handleSubmit : function(component,event,helper) { 3 component.find("editForm").submit(); 4 }, 5 handleSuccess : function(component,event,helper) { 6 console.log('save success'); 7 component.find("popuplib").notifyClose(); 8 }, 9 })
3.SimpleAccountUsingModal.cmp:用來顯示Account的View UI
1 <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId"> 2 <aura:attribute name="acc" type="Account"/> 3 <lightning:overlayLibrary aura:id="popuplib"/> 4 <lightning:recordViewForm aura:id="viewForm" recordId="{!v.acc.Id}" objectApiName="Account"> 5 <div class="slds-media"> 6 7 <div class="slds-media__body"> 8 <lightning:layout class="slds-hint-parent"> 9 <a onclick="{!c.navToRecord}"> 10 <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.acc.Name}</h3> 11 </a> 12 <lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.handleClick}"/> 13 </lightning:layout> 14 <lightning:layout multipleRows="true"> 15 <lightning:layoutItem size="6"> 16 <lightning:outputField fieldName="AccountNumber"/> 17 </lightning:layoutItem> 18 <lightning:layoutItem size="6"> 19 <lightning:outputField fieldName="Site"/> 20 </lightning:layoutItem> 21 </lightning:layout> 22 </div> 23 </div> 24 </lightning:recordViewForm> 25 </aura:component>
4.SimpleAccountUsingModalController.js：用於點選編輯按鈕，顯示SimpleAccountEdit元件；
1 ({ 2 handleClick : function(component, event, helper) { 3 var modalBody; 4 $A.createComponent("c:SimpleAccountEdit", { recordId : component.get('v.acc.Id')}, 5 function(content, status) { 6 modalBody = content; 7 if (status === "SUCCESS") { 8 component.find('popuplib').showCustomModal({ 9 header: "Account Edit", 10 body: modalBody, 11 showCloseButton: true, 12 cssClass: "mymodal", 13 }); 14 } 15 }); 16 } 17 })
5.SimpleAccountListUsingModal.cmp: 用於列表迴圈simpleAccountUsingModal元件，列表顯示card佈局的account資料；
1 <aura:component controller="SimpleAccountListController" implements="flexipage:availableForRecordHome,force:hasRecordId"> 2 <aura:attribute name="simpleAccounts" type="Object[]"/> 3 <aura:attribute name="acc" type="Account"/> 4 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 5 6 <lightning:card iconName="standard:account" title="simple accounts" class="slds-is-relative"> 7 8 <div class="slds-p-left_medium slds-p-right_medium"> 9 <ul class="slds-list_vertical slds-has-dividers_top-space"> 10 <aura:if isTrue="{!v.simpleAccounts.length > 0}"> 11 <aura:iteration items="{!v.simpleAccounts}" var="item"> 12 <li class="slds-list__item"> 13 <c:SimpleAccountUsingModal acc="{!item}"/> 14 </li> 15 </aura:iteration> 16 <aura:set attribute="else"> 17 <li class="slds-list__item"> 18 <h3 class="slds-text-small slds-text-color_error">No accounts found.</h3> 19 </li> 20 </aura:set> 21 </aura:if> 22 </ul> 23 24 </div> 25 </lightning:card> 26 </aura:component>
6.SimpleAccountListUsingModalController.js：用於初始化list資料
1 ({ 2 doInit : function(component, event, helper) { 3 4 var action = component.get("c.getAccountList"); 5 action.setCallback(this, function(response){ 6 var simpleAccounts = response.getReturnValue(); 7 component.set("v.simpleAccounts", simpleAccounts); 8 9 }); 10 $A.enqueueAction(action); 11 } 12 })
效果展示：
1.正常顯示account的list
2.點選Edit按鈕以後會彈出popup modal用來顯示編輯Form
3.點選Submit後繼續展示account list，modal消失。
總結：篇中使用兩種方式實現list 模式下兩種方式Edit資料方式，demo比較粗糙，其中有很多地方是可以優化的，比如edit沒有處理異常的操作等等。感興趣的同學可以考慮優化，篇中有問題的地方歡迎指出。不懂得歡迎留言。