专栏首页salesforce零基础学习salesforce lightning零基础学习(十三) 自定义Lookup组件(Single & Multiple)

salesforce lightning零基础学习(十三) 自定义Lookup组件(Single & Multiple)

上一篇简单的介绍了自定义的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组件有需要强化的点,欢迎留言,集思广益,使组件公用型变得更强。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入vue - 源码目录及构建过程分析

     公众号原文链接:深入vue - 源码目录及构建过程分析    喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」

    用户1741436
  • 前端项目从0到1的感悟

    一个项目的开始,特别是丰富多样的前端工程,首先一定要确定好采用的框架和技术点。2016年vue.js如火如荼,webpack强势崛起,但是是否就可直接拿到项目中...

    奋斗蒙
  • java 多态 向上转型 后期绑定一例

    switch中的 default 语句不管放在哪个位置,都是在所有case都不满足的情况下最后执行。 foreach语句 for(元素类型 元素变量;遍历...

    葫芦
  • 几种应该避免使用箭头函数的情况

    箭头函数虽然因语法简练受人追捧。但由于没有 this 会导致在一些情况下出现预想不到的意外情况。?

    JS菌
  • 九张动画图回顾 Web 设计的 25 年历史

    Froont,一家为web设计师制作工具的旧金山公司,用9个GIF格式动画来表现网页设计在过去25年的发展历程。如果你想知道为什么CSS这么重要,为什么Flas...

    奋斗蒙
  • 收藏 | 全网最大机器学习数据集,视觉、NLP、音频都在这了

    每年都有很多大型、高质量的数据集发布,其中大多数数据集都发布在各自的网站上,通过谷歌搜索很难找到所有这些数据集。

    CDA数据分析师
  • 如何撰写精彩的技术博客文章

    我已经在开源社区工作了近 5 年,建立和推广包括 Meteor 和 Apollo 在内的开发者工具。在那个时候,我发现博客是传播思想的最有效方式之一。 写博文不...

    我就是马云飞
  • 来学习几个简单的Hive函数啦

    咳咳,今天来介绍一下几个Hive函数吧,先放一张我登哥划水的照片,希望大家也做一只自由的鱼儿,在知识的海洋里游呀游,嘻嘻!

    用户1332428
  • 不会查看系统源码,还搞什么Android?

    在上一篇文章如何方便快速的整编Android 9.0系统源码? )中,我们对系统源码进行了编译,这篇文章我们接着来学习如何将系统源码导入到编辑器中,以便于查看...

    Android技术干货分享
  • Outlook.com邮箱环境在iOS浏览器下的Stored XSS漏洞

    大家好,今天分享的writeup是关于outlook.live.com邮箱环境在iOS浏览器下的存储型XSS漏洞(Stored XSS),由于测试范围隶属微软漏...

    FB客服

扫码关注云+社区

领取腾讯云代金券