salesforce lightning零基礎學習(七) 列表展示資料時兩種自定義編輯頁面

Salesforce · 發表 2018-10-09 20:36:00

摘要：上一篇Lightning內容描述的是LDS，通過LDS可以很方便的例項化一個物件的資料資訊。當我們通過列表展示資料需要編輯時，我們常使用兩種方式去處理編輯頁面：Pop Up Window彈出修改詳情以及在本頁面隱藏詳情頁面顯示編輯頁面。實現這個功能以前主要需要先了解幾個標籤： li...

上一篇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模式下展示，不允許編輯。

更多屬性請檢視： ofollow,noindex">https://developer.salesforce.com/docs/component-library/bundle/lightning:recordForm/specification

上面也說到了lightning:recordForm集合了lightning:recordViewForm以及lightning:recordEditForm.下面的demo是通過這兩個元素進行展示，所以簡單的說一下這兩個標籤：

lightning:recordViewForm:此標籤封裝了一個wrapper，通過recordId，使用lightning:outputField用來展示記錄相關的欄位值以及Label名稱。正常我們想要展示一條記錄，按照之前的學習有兩種實現的方式，第一種是後臺搜尋出來，init handler例項化，第二種是使用LDS，通過此標籤，我們只需要傳遞記錄ID，便可以使用記錄中所有可以訪問欄位的資訊。

此元素有兩個必填的屬性：

objectApiName：想要展示的object的API Name;

recordId: 想要展示資料的ID。

lightning:recordEditForm:此標籤用途和lightning:recordViewForm大部分相同，區別為此標籤用於Form配合lightning:inputField實現編輯一個form功能。如果recordId為空，則進行建立一條資料的功能，如果recordId有值，則進行更新記錄功能。

官方提供的簡單的demo如下： https://developer.salesforce.com/docs/component-library/bundle/lightning:recordEditForm/documentation

常用屬性：

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顯示效果如下：

這兩個方法的demo可以訪問： https://developer.salesforce.com/docs/component-library/bundle/lightning:overlayLibrary/documentation

注意：演示這兩個功能時，一定注意不要使用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
3public static List<Account> getAccountList() {
4return [SELECT Id,Name,AccountNumber,Site
5FROM Account
6LIMIT 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 ({
 2navToRecord : function (component, event, helper) {
 3var navEvt = $A.get("e.force:navigateToSObject");
 4navEvt.setParams({
 5"recordId": component.get("v.acc.Id")
 6});
 7navEvt.fire();
 8},
 9editRecord : function(component, event, helper) {
10helper.showHide(component);
11},
12handleSuccess : function(component, event, helper) {
13helper.showHide(component);
14var recUpdate = $A.get("e.c:recordUpdated");
15recUpdate.fire();
16},
17handleCancel : function(component, event, helper) {
18helper.showHide(component);
19event.preventDefault();
20}
21 })

4.SimpleSimpleAccountHelper.js:用於切換view/edit檢視的顯示；

1 ({
2showHide : function(component) {
3var editForm = component.find("editForm");
4$A.util.toggleClass(editForm, "slds-hide");
5var viewForm = component.find("viewForm");
6$A.util.toggleClass(viewForm, "slds-hide");
7}
8 })

5.SimpleAccountList.cmp：用於展示account的list；

 1 <aura:componentcontroller="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 ({
 2doInit : function(component, event, helper) {
 3
 4var action = component.get("c.getAccountList");
 5action.setCallback(this, function(response){
 6var simpleAccounts = response.getReturnValue();
 7component.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 ({
2handleSubmit : function(component,event,helper) {
3component.find("editForm").submit();
4},
5handleSuccess : function(component,event,helper) {
6console.log('save success');
7component.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 ({
 2handleClick : function(component, event, helper) {
 3var modalBody;
 4$A.createComponent("c:SimpleAccountEdit", { recordId : component.get('v.acc.Id')},
 5function(content, status) {
 6modalBody = content;
 7if (status === "SUCCESS") {
 8component.find('popuplib').showCustomModal({
 9header: "AccountEdit",
10body: modalBody,
11showCloseButton: true,
12cssClass: "mymodal",
13});
14}
15});
16}
17 })

5.SimpleAccountListUsingModal.cmp: 用於列表迴圈simpleAccountUsingModal元件，列表顯示card佈局的account資料；

 1 <aura:componentcontroller="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 ({
 2doInit : function(component, event, helper) {
 3
 4var action = component.get("c.getAccountList");
 5action.setCallback(this, function(response){
 6var simpleAccounts = response.getReturnValue();
 7component.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沒有處理異常的操作等等。感興趣的同學可以考慮優化，篇中有問題的地方歡迎指出。不懂得歡迎留言。

salesforce lightning零基礎學習(七) 列表展示資料時兩種自定義編輯頁面

效果展示：

二.顯示View列表，點選Edit後展示PopUp Modal，修改後，隱藏Modal，然後繼續展示列表。

效果展示：

您可能也會喜歡…