salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

时间:2021-11-27 12:45:20

上一篇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模式下展示,不允许编辑。

更多属性请查看: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。

更多属性请查看:https://developer.salesforce.com/docs/component-library/bundle/lightning:recordViewForm/specification

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: 数据操作失败后的回调函数;

更多属性请参看:https://developer.salesforce.com/docs/component-library/bundle/lightning:recordEditForm/specification

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效果展示图如下:

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

showCustomPopover:此方法用于弹出一个弹出框,类似标签中title样式,hover后在旁边展示的描述信息的效果。此方法包含以下常用参数:

  • body:传入类型为object,用于展示popover中的body部分;
  • referenceSelector:指定popover要展示在哪个元素后面;
  • cssClass:逗号分隔的一个list的css class应用于此modal。

popover显示效果如下:

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

这两个方法的demo可以访问:https://developer.salesforce.com/docs/component-library/bundle/lightning:overlayLibrary/documentation

注意:演示这两个功能时,一定注意不要使用single app,single app展示这种方式会出现报错:

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

测试这两种样式可以考虑demo中component implements="flexipage:availableForAllPageTypes",然后放在一个object的detail页面看效果。下面为demo部分。

一. 列表使用Card样式展示,点击Edit图标覆盖原View布局显示Edit布局,点击Save以后显示View布局的List样式。

1.SimpleAccountList:此类用于默认初始化搜索出来10条Account信息;

 public class SimpleAccountListController {
@AuraEnabled
public static List<Account> getAccountList() {
return [SELECT Id,Name,AccountNumber,Site
FROM Account
LIMIT 10];
}
}

2.SimpleAccount.cmp:用于默认初始化展示view视图,点击edit的icon后显示edit部分视图;

 <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="acc" type="Account"/>
<lightning:recordViewForm aura:id="viewForm" recordId="{!v.acc.Id}" objectApiName="Account">
<div class="slds-media">
<div class="slds-media__body">
<lightning:layout class="slds-hint-parent">
<a onclick="{!c.navToRecord}">
<h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.acc.Name}</h3>
</a>
<lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}"/>
</lightning:layout>
<lightning:layout multipleRows="true">
<lightning:layoutItem size="6">
<lightning:outputField fieldName="AccountNumber"/>
</lightning:layoutItem>
<lightning:layoutItem size="6">
<lightning:outputField fieldName="Site"/>
</lightning:layoutItem>
</lightning:layout>
</div>
</div>
</lightning:recordViewForm>
<lightning:recordEditForm aura:id="editForm" recordId="{!v.acc.Id}" objectApiName="Account" class="slds-hide" onsuccess="{!c.handleSuccess}">
<div class="slds-media"> <div class="slds-media__body">
<lightning:layout>
<a onclick="{!c.navToRecord}">
<h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.acc.Name}</h3>
</a>
</lightning:layout>
<lightning:layout multipleRows="true">
<lightning:layoutItem size="6">
<lightning:inputField fieldName="AccountNumber"/>
</lightning:layoutItem>
<lightning:layoutItem size="6">
<lightning:inputField fieldName="Site"/>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout horizontalAlign="center" class="slds-m-top_large">
<lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}"/>
<lightning:button variant="brand" label="Submit" title="Submit" type="submit"/>
</lightning:layout>
</div>
</div>
</lightning:recordEditForm>
</aura:component>

3.SimpleAccountController.js: 处理跳转到account页面以及点击edit,save以及cancel操作处理;

 ({
navToRecord : function (component, event, helper) {
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": component.get("v.acc.Id")
});
navEvt.fire();
},
editRecord : function(component, event, helper) {
helper.showHide(component);
},
handleSuccess : function(component, event, helper) {
helper.showHide(component);
var recUpdate = $A.get("e.c:recordUpdated");
recUpdate.fire();
},
handleCancel : function(component, event, helper) {
helper.showHide(component);
event.preventDefault();
}
})

4.SimpleSimpleAccountHelper.js:用于切换view/edit视图的显示;

 ({
showHide : function(component) {
var editForm = component.find("editForm");
$A.util.toggleClass(editForm, "slds-hide");
var viewForm = component.find("viewForm");
$A.util.toggleClass(viewForm, "slds-hide");
}
})

5.SimpleAccountList.cmp:用于展示account的list;

 <aura:component  controller="SimpleAccountListController" implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="simpleAccounts" type="Object[]"/>
<aura:attribute name="acc" type="Account"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:card iconName="standard:account" title="simple accounts" class="slds-is-relative">
<div class="slds-p-left_medium slds-p-right_medium">
<ul class="slds-list_vertical slds-has-dividers_top-space">
<aura:if isTrue="{!v.simpleAccounts.length > 0}">
<aura:iteration items="{!v.simpleAccounts}" var="item">
<li class="slds-list__item">
<c:SimpleAccount acc="{!item}"/>
</li>
</aura:iteration>
<aura:set attribute="else">
<li class="slds-list__item">
<h3 class="slds-text-small slds-text-color_error">No accounts found.</h3>
</li>
</aura:set>
</aura:if>
</ul>
</div>
</lightning:card>
</aura:component>

6. SimpleAccountListController.js:用于初始化数据

 ({
doInit : function(component, event, helper) { var action = component.get("c.getAccountList");
action.setCallback(this, function(response){
var simpleAccounts = response.getReturnValue();
component.set("v.simpleAccounts", simpleAccounts); });
$A.enqueueAction(action);
}
})

7.将SimpleAccountList.cmp放在account的detail page中。

效果展示:

1.默认通过card布局展示列表

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

2.点击其中的一个edit,会切换成edit模式,其他的不变化;

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

3.点击save后正常显示save以后的列表效果。

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

二.显示View列表,点击Edit后展示PopUp Modal,修改后,隐藏Modal,然后继续展示列表。

1.SimpleAccountEdit.cmp:用来展示编辑Account的UI

 <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="recordId" type="String" />
<lightning:overlayLibrary aura:id="popuplib"/>
<lightning:recordEditForm aura:id="editForm" recordId="{!v.recordId}" objectApiName="Account" onsuccess="{!c.handleSuccess}" onsubmit="{!c.handleSubmit}">
<div class="slds-media">
<div class="slds-media__body">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="6">
<lightning:inputField fieldName="AccountNumber"/>
</lightning:layoutItem>
<lightning:layoutItem size="6">
<lightning:inputField fieldName="Site"/>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout horizontalAlign="center" class="slds-m-top_large">
<lightning:button variant="brand" label="Submit" title="Submit" type="submit"/>
</lightning:layout>
</div>
</div>
</lightning:recordEditForm> </aura:component>

2. SimpleAccountEditController.js:Edit操作 submit以及操作success的handler操作;

 ({
handleSubmit : function(component,event,helper) {
component.find("editForm").submit();
},
handleSuccess : function(component,event,helper) {
console.log('save success');
component.find("popuplib").notifyClose();
},
})

3.SimpleAccountUsingModal.cmp:用来显示Account的View UI

 <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="acc" type="Account"/>
<lightning:overlayLibrary aura:id="popuplib"/>
<lightning:recordViewForm aura:id="viewForm" recordId="{!v.acc.Id}" objectApiName="Account">
<div class="slds-media"> <div class="slds-media__body">
<lightning:layout class="slds-hint-parent">
<a onclick="{!c.navToRecord}">
<h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.acc.Name}</h3>
</a>
<lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.handleClick}"/>
</lightning:layout>
<lightning:layout multipleRows="true">
<lightning:layoutItem size="6">
<lightning:outputField fieldName="AccountNumber"/>
</lightning:layoutItem>
<lightning:layoutItem size="6">
<lightning:outputField fieldName="Site"/>
</lightning:layoutItem>
</lightning:layout>
</div>
</div>
</lightning:recordViewForm>
</aura:component>

4.SimpleAccountUsingModalController.js:用于点击编辑按钮,显示SimpleAccountEdit组件;

 ({
handleClick : function(component, event, helper) {
var modalBody;
$A.createComponent("c:SimpleAccountEdit", { recordId : component.get('v.acc.Id')},
function(content, status) {
modalBody = content;
if (status === "SUCCESS") {
component.find('popuplib').showCustomModal({
header: "Account Edit",
body: modalBody,
showCloseButton: true,
cssClass: "mymodal",
});
}
});
}
})

5.SimpleAccountListUsingModal.cmp: 用于列表循环simpleAccountUsingModal组件,列表显示card布局的account数据;

 <aura:component  controller="SimpleAccountListController" implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="simpleAccounts" type="Object[]"/>
<aura:attribute name="acc" type="Account"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <lightning:card iconName="standard:account" title="simple accounts" class="slds-is-relative"> <div class="slds-p-left_medium slds-p-right_medium">
<ul class="slds-list_vertical slds-has-dividers_top-space">
<aura:if isTrue="{!v.simpleAccounts.length > 0}">
<aura:iteration items="{!v.simpleAccounts}" var="item">
<li class="slds-list__item">
<c:SimpleAccountUsingModal acc="{!item}"/>
</li>
</aura:iteration>
<aura:set attribute="else">
<li class="slds-list__item">
<h3 class="slds-text-small slds-text-color_error">No accounts found.</h3>
</li>
</aura:set>
</aura:if>
</ul> </div>
</lightning:card>
</aura:component>

6.SimpleAccountListUsingModalController.js:用于初始化list数据

 ({
doInit : function(component, event, helper) { var action = component.get("c.getAccountList");
action.setCallback(this, function(response){
var simpleAccounts = response.getReturnValue();
component.set("v.simpleAccounts", simpleAccounts); });
$A.enqueueAction(action);
}
})

效果展示:

1.正常显示account的list

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

2.点击Edit按钮以后会弹出popup modal用来显示编辑Form

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

3.点击Submit后继续展示account list,modal消失。

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

总结:篇中使用两种方式实现list 模式下两种方式Edit数据方式,demo比较粗糙,其中有很多地方是可以优化的,比如edit没有处理异常的操作等等。感兴趣的同学可以考虑优化,篇中有问题的地方欢迎指出。不懂得欢迎留言。