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

作者：大永8899_226 | 来源：互联网 | 2024-09-27 10:39

上一篇Lightning内容描述的是LDS，通过LDS可以很方便的实例化一个对象的数据信息。当我们通过列表展示数据需要编辑时，我们常使用两种方式去处理编辑页面：PopUpWindo

上一篇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效果展示图如下：

技术分享图片

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
3     public static List 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没有处理异常的操作等等。感兴趣的同学可以考虑优化，篇中有问题的地方欢迎指出。不懂得欢迎留言。

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

推荐阅读

function
Node.js 进程异常时自动发送邮件通知

在项目部署后，Node.js 进程可能会遇到不可预见的错误并崩溃。为了及时通知开发人员进行问题排查，我们可以利用 nodemailer 插件来发送邮件提醒。本文将详细介绍如何配置和使用 nodemailer 实现这一功能。 ... [详细]

蜡笔小新 2024-12-23 08:56:34
function
JavaScript 中创建对象的多种方式

本文介绍了 JavaScript 中创建对象的几种常见方法，包括字面量形式、构造函数、原型对象等。每种方法都有其特点和适用场景，通过对比分析，帮助开发者选择最适合的方式。 ... [详细]

蜡笔小新 2024-12-23 17:42:09
main
解决Selenium浏览器实例化位置导致的闪退问题

本文探讨了在使用Selenium进行自动化测试时，由于webdriver对象实例化位置不同而导致浏览器闪退的问题，并提供了详细的代码示例和解决方案。 ... [详细]

蜡笔小新 2024-12-23 16:09:49
function
理解反向投影技术及其应用

反向投影技术主要用于在大型输入图像中定位特定的小型模板图像。通过直方图对比，它能够识别出最匹配的区域或点，从而确定模板图像在输入图像中的位置。 ... [详细]

蜡笔小新 2024-12-23 12:24:22
function
解决Anaconda安装TensorFlow时遇到的TensorBoard版本问题

本文介绍了在使用Anaconda安装TensorFlow时遇到的“Could not find a version that satisfies the requirement tensorboard”错误，并提供详细的解决方案，包括创建虚拟环境和配置PyCharm项目。 ... [详细]

蜡笔小新 2024-12-23 11:58:00
function
二叉查找树(3)查找值最小的节点

查找最小值的操作是很简单的，只需要从根节点递归的遍历到左子树节点即可。当遍历到节点的左孩子为NULL时，则这个节点就是树的最小值。上面的树中,从根节点20开始，递归遍历左子 ... [详细]

蜡笔小新 2024-12-23 11:47:29
string
深入理解Lucene搜索机制

本文旨在帮助读者全面掌握Lucene搜索的编写步骤、核心API及其应用。通过详细解析Lucene的基本查询和查询解析器的使用方法，结合架构图和代码示例，带领读者深入了解Lucene搜索的工作流程。 ... [详细]

蜡笔小新 2024-12-23 11:06:10
function
深入理解JavaScript的作用域链与闭包

本文详细探讨了JavaScript中的作用域链和闭包机制，解释了它们的工作原理及其在实际编程中的应用。通过具体的代码示例，帮助读者更好地理解和掌握这些概念。 ... [详细]

蜡笔小新 2024-12-23 01:27:41
function
C#设计模式学习笔记：观察者模式解析

本文将探讨观察者模式的基本概念、应用场景及其在C#中的实现方法。通过借鉴《Head First Design Patterns》和维基百科等资源，详细介绍该模式的工作原理，并提供具体代码示例。 ... [详细]

蜡笔小新 2024-12-22 19:07:42
input
哈密顿回路检测问题【25分】

哈密顿回路问题旨在寻找一个简单回路，该回路包含图中的每个顶点。本文将介绍如何判断给定的路径是否构成哈密顿回路。 ... [详细]

蜡笔小新 2024-12-23 21:02:53
数组
算法题解析：最短无序连续子数组

本题探讨如何通过单调栈的方法，找到一个数组中最短的需要排序的连续子数组。通过正向和反向遍历，分别使用单调递增栈和单调递减栈来确定边界索引，从而定位出最小的无序子数组。 ... [详细]

蜡笔小新 2024-12-23 15:00:57
数组
线性代数进阶：向量的线性相关性与秩

本文深入探讨了线性代数中向量的线性关系，包括线性相关性和极大线性无关组的概念。通过分析线性方程组和向量组的秩，帮助读者理解这些概念在实际问题中的应用。 ... [详细]

蜡笔小新 2024-12-23 14:44:20
string
C++ 中的链表实现与应用

本文介绍如何在 C++ 中使用链表结构存储和管理数据。通过具体示例，展示了静态链表的基本操作，包括节点的创建、链接及遍历。 ... [详细]

蜡笔小新 2024-12-23 14:22:40
string
高效筛选APP产品经理的面试技巧

本文旨在提供一套高效的面试方法，帮助企业在短时间内找到合适的产品经理。虽然观点较为直接，但其方法已被实践证明有效，尤其适用于初创公司和新项目的需求。 ... [详细]

蜡笔小新 2024-12-23 13:49:37
function
JavaScript 基础语法指南

本文详细介绍了 JavaScript 的基础语法，包括变量、数据类型、运算符、语句和函数等内容，旨在为初学者提供全面的入门指导。 ... [详细]

蜡笔小新 2024-12-23 10:54:44

大永8899_226

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章