上一篇简单的介绍了自定义的Lookup单选的组件,功能为通过引用组件Attribute传递相关的sObject Name,捕捉用户输入的信息,从而实现搜索的功能。

我们做项目的时候,可能要从多个表中获取数据并且选择相关的记录(单选或者多选),也可能要获取不同的变量的值,不一定是Name字段,也有可能在对某个表进行关键字搜索基础上有额外的条件过滤。此公用组件在上述的背景下进行开发,安装地址如下:https://login.salesforce.com/packaging/installPackage.apexp?p0=04t0I000000f7Ts

安装后访问https://<myDomain>.lightning.force.com/auradocs/reference.app, 将myDomain 换成你自己的domain,然后切换到Components -> aura -> c -> CommonLookUp 即可看到此组件的用法以及相关Attribute的描述。

Single Choise:只需要声明一个类型为CommonLookUpController.SearchResultWrapper的变量,selectedRecord赋值这个变量即可。

searchObjList 代表当前搜索数据要在Account & Contact两个表中搜索数据, searchFieldMapping2Object代表返回的数据的值取得是Account的Name字段值以及Contact的Name字段值。attribute中还有一些default值,比如singleOrMultiple,默认为true,即单选。searchGroup默认值为 ALL FIELDS,代表SOSL进行搜索时,匹配的模式为ALL FIELDS,其他的attribute的用法,可以自行查看文档。

<aura:attribute name="selectedRecord" type="CommonLookUpController.SearchResultWrapper"/>
<c:CommonLookup searchObjList="['Account','Contact']" searchFieldMapping2Object="{'Account':'Name','Contact':'Name'}" selectedRecord="{!v.selectedRecord}"/>

Controller.js中只需要通过这个变量获取相关的属性即可。 objId对应这条数据的ID,objName对应返回这条数据对应表的API Name,objValue返回的是这条数据要搜索的值,上面设置的searchFieldMapping2Object中field为什么,即返回的什么值,objLabel返回的是这条数据对应表的label Name。

console.log('objId : ' + component.get('v.selectedRecord').objId);
console.log('objName : ' + component.get('v.selectedRecord').objName);
console.log('objValue : ' + component.get('v.selectedRecord').objValue);
console.log('objLabel : ' + component.get('v.selectedRecord').objLabel);

效果展示:

1. 用户搜索时的UI展示,列表中左面会标记记录属于哪个object,后面是记录检索的值

2. 选中后输出信息,可以根据想要的变量返回不同的结果信息。

Multiple Choise:和 single模式的区别为需要声明类型为List的变量,并设置给selectedRecordList,singleOrMultiple设置为false即可,其他用法相同。

<aura:attribute name="selectedRecordList" type="List"/>
<c:CommonLookUp searchObjList="['Account','Contact']" searchFieldMapping2Object="{'Account':'Name','Contact':'Name'}" selectedRecordList="{!v.selectedRecordList}" singleOrMultiple="false"/>

Controller.js针对list进行迭代输出展示:

for(var i=0;i< component.get('v.selectedRecordList').length;i++) {
var selectedRecord = component.get('v.selectedRecordList')[i];
console.log(selectedRecord.objId);
console.log(selectedRecord.objName);
console.log(selectedRecord.objValue);
console.log(selectedRecord.objLabel);
}

效果展示:

1.针对选中的不同的数据,因为可能来自于不同的对象,所以当hover时,会展示当前记录对应的object的label信息

2. 搜索时,下面的展示数据仍然按照 object label + object value模式展示。

3. 获取数据的变量同single 模式。

总结:此公用组件作为第一版还有很多不成熟的地方以及没有进行特别多的测试,欢迎大家下载测试。篇中或者代码中如果有错误的地方欢迎指出,有不懂的欢迎留言。如果小伙伴们觉得关于LookUp组件有需要强化的点,欢迎留言,集思广益,使组件公用型变得更强。

salesforce lightning零基础学习(十三) 自定义Lookup组件(Single & Multiple)的更多相关文章

  1. salesforce lightning零基础学习(十五) 公用组件之 获取表字段的Picklist(多语言)

    此篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) 我们在lightning中在前台会经常碰到获取pi ...

  2. salesforce lightning零基础学习(十六) 公用组件之 获取字段label信息

    我们做的项目好多都是多语言的项目,针对不同国家需要展示不同的语言的标题.我们在classic中的VF page可谓是得心应手,因为系统中已经封装好了我们可以直接在VF获取label/api name等 ...

  3. salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容

    本篇参考: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader https://github.com/SheetJS/sheetjs ...

  4. salesforce lightning零基础学习(十二) 自定义Lookup组件的实现

    本篇参考:http://sfdcmonkey.com/2017/01/07/custom-lookup-lightning-component/,在参考的demo中进行了简单的改动和优化. 我们在ht ...

  5. salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型

    看此篇博客前或者后,看一下trailhead可以加深印象以及理解的更好:https://trailhead.salesforce.com/modules/lex_dev_lc_basics 做过cla ...

  6. salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning

    lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...

  7. salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)

    在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribute的值,可以使用{!v.expresi ...

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

    上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息.当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:Pop Up Window弹出修改详情以 ...

  9. salesforce lightning零基础学习(十一) Aura框架下APP构造实现

    前面的一些lightning文章讲述了aura的基础知识,aura封装的常用js以及aura下的事件处理.本篇通过官方的一个superbadge来实现一个single APP的实现. superbad ...

随机推荐

  1. 【转】腾讯云-解决Winscp permission denied的问题

    刚刚注册完腾讯云,因为要用来跑作业代码,所以操作系统选择的Ubuntu 16.04 32位 用Winscp登陆之后出现了错误代码为3的permission denied的错误,不能创建路径,也不能上传 ...

  2. python基础----1. globals和locals

    官方文档 globals """ Return a dictionary representing the current global symbol table. Th ...

  3. 利用Github免费搭建个人主页(转)

    搭建过程涉及: Github注册 Github搭建博客 域名选购 绑定域名 更多 一.  Github注册 在地址栏输入地址:http://github.com/join填写相关信息, 按步骤完成即可 ...

  4. ubuntu/deepin 下 Sha 哈 dow 哈 socks 全局配置

    1. 安装编译环境 Ubuntu在默认情况下没有提供C/C++的编译环境,因此需要手动安装.如果单独安装gcc以及g++比较麻烦,为了方便,我们直接安装Ubuntu提供的build-essential ...

  5. MFC实现红黑砖块

    MFC实现红黑砖块 题目 老题目了,给定w,h长宽的图,上面有颜色不同的瓷砖,黑和红,问从给的起点出发,只能走黑色瓷砖,能走多少块,可视化输出过程 思路 咋一看搜索水题,但是要用可视化,要用模板类,, ...

  6. Base64简单原理

    Base64要求把每三个8bit的字节转换为四个6bit的字节(即3*8 = 4*6 = 24) 1.例如我们有一个中文字符“中国(gb2312)”,转为十进制为:中-->54992,国--&g ...

  7. PIL库自我学习总结及应用(美白,磨皮,搞笑图片处理)

    Hello!今天我们来学习一下这个神奇的图片处理的第三方函数库——PIL库 (本blog部分图片及代码来自网络) 这是一个支持图像存储.显示和处理的函数库,它能够处理几乎所有图像格式,可以完成对图像的 ...

  8. RaspberryPi上建立wordpress

    准备工作: 1.RaspberryPi 3代 B型 2.可用内存卡 3.读卡器 4.DiskGenius 5.Win32 Disk Imager 6.可用局域网 7.Xshell 和 Xftp 8.官 ...

  9. H5混合开发问题总结

    1.This application is modifying the autolayout engine from a background thread, which can lead to en ...

  10. Ubuntu环境下配置darknet

    本教程基于Linux物理机进行相关配置,要求物理机中包含N卡且Capbility>=3.0,小于3.0(Fermi架构)只允许配置cuda,不能配置使用Cudnn: 本教程分为: 1.安装NVI ...