Component介绍 我们在Apex中经常使用Visualforce Component做一些公用组件,但是lightning中的component和刚才说的不是一个内容。...eg:aura:attribute name="showDetail" type="Boolean" /> Date:定义一个日期类型,不含Time,默认格式:YYYY-MM-dd。...eg: aura:attribute name="startDate" type="Date" /> Datetime:定义一个日期类型,含Time。... : 瓷砖模型,用于展示一条记录的相关信息 按钮组件 lightning:button: 普通按钮 lightning:buttonIcon:只有一个html icon的按钮 lightning:buttonGroup...aura:id不支持表达式,只支持普通的字符串值作为local id. local id 理论上是唯一的,但是不强制唯一,比如一组checkbox元素标签,可以设置他们的local id是相同的。
父子component交互 在项目中我们针对一个大的component/app设计时,可能有多个component组合在一起,比如我们在salesforce lightning零基础学习(十一) Aura...attribute或者attribute value来匹配一个或者多个元素; Pseudo-classes:匹配一个或者多个处于特定状态的元素,例如鼠标指针悬停在其上的元素、当前被禁用或选中的复选框或是...比如每个段落的第一个字等。 Simple selectors我们在项目中经常用到的就是标签选择器,class选择器,id选择器。...但是我们疑问还是特别多,比如针对事件处理的方法,我能做什么?针对Event是否有什么封装好的方法可以让我更好的去运用?...大家在aura学习事件处理的时候应该很有了解,salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇 aura提供了我们针对事件处理的一系列的方法。
目前lex下只允许通过aura重写,所以即使使用lwc的情况下同样需要aura套一个壳子来实现,所以如何来在新建的情况下获取主表ID呢?大神同事发过来一串代码搞定,这里也做一下汇总和复盘。...newCaseComponent.cmp:这里有一个要求,除了实现 lightning:actionOverride以外,一定要实现 lightning:isUrlAddressable aura:component...的 inContextOfRef, 尽管网络上这个参数使用特别多,但是很遗憾,没有找到详细描述的官方文档,只有一个 salesforce article对它有一点简单的描述,我们可以通过这个获取到对应的...> 先放一个显示效果。...组件中的margin/padding设置:我们看到图中的button都是有一点距离的,使用的是slds-m-left_x-small来实现。
我们做了简单的demo去验证: aura:component implements="flexipage:availableForAllPageTypes"> 一个aura封装的组件名称,aura:method。...我们在前端正常去进行方法调用通常是绑定一个handler或者执行某个事件从而去调用方法,使用aura:method定义一个方法可以作为组件的API的一部分,这样我们在client-controller部分可以直接调用此方法...只需要引入此公用组件便有权限直接调用aura:method声明的方法了。...aura:method可以实现同步以及异步的返回,感兴趣的可以查看细节,下面内容为通过aura:method实现Toast公用组件。
结果我高兴了没多久,测试人员提了一个问题,你这个组件名称OK了的,但是我重复上传一个文件,只是改了文件里面的内容,他怎么不识别呢?...我们发现,如果只是想要给或丢弃文件给干掉,只需要以下的css作用一下,理论上就是可以搞定的。...通过aura的aura:html tag="style">覆盖: 很幸运地是我这个模块是需要放在 tab的,我新建了一个 lightning component的tab,这样的话,需要使用一层aura...,aura里面包了一个lwc,所以针对这个需求,只需要通过aura的手段去搞定即可。...总结:篇中主要针对 lightning-input type=file根据需求做了一个简单的优化,以及引申出的lwc的一个针对组件css调整的功能,功能很强大,但是beta中,所以使用需谨慎,尽快期待转正吧
我们在lightning开发中,quick action是一个常用的功能,很可惜的是,lwc目前还不支持单独的custom quick action操作,只能嵌套在aura中使用才能发挥作用。 ?...--This is a lwc component--> aura:component> 我们只需要声明一个aura的components...lwc quick action更新某个字段以后没法及时刷新父的详情页面,如何去解决? 针对这两个问题,我们一个一个进行解决。...针对第一个问题,我们使用lightning:quickActionAPI 组件,然后调用其getSelectedActions方法获取Promise然后解析即可实现。...当然此组件还有很多经常用到的好用的功能,感兴趣的小伙伴自己读一下:https://developer.salesforce.com/docs/component-library/bundle/lightning
有的时候标准的满足不了客户需求,比如客户想在knowledge上看外部数据,因为需要创建external lookup,因为knowledge不支持创建external lookup,另外formula...也不支持external object,这时候我们需要自定义一个lookup来满足客户需求。...c.clear }"> aura:set attribute="media"> lightning...v.IconName}"/> aura:set> lightning:pill>... aura:id="lookupField" class="slds-show"> lightning:icon
,lightning到底有多少已经声明的方法可供我们使用,此篇主要讲述aura framework为我们提供的 component的js的主要方法。...每个人的URL不同,URL 保留到force.com,然后添加一下URL: /auradocs/reference.app 即可看到aura的文档,aura文档里面给我们提供了aura framework...我们知道lightning每个元素都默认有一个属性:aura:id, 此属性用来标记这个组件元素的local id,理论上local id是唯一的,但是实际操作中可以不唯一,所以find这个方法返回值可以有多种形式...,如果 component中针对所查的local id有不止一个,则返回一个数组来盛接,如果有一个,则直接返回当前元素,如果不存在,则直接返回undefined; eg: component.find...local id, 此方法通常用于通过事件获取事件的元素组件以后,获取元素组件的local id; eg: TestComponent.cmp aura:component> lightning
曾经对recordId的使用不是很深入,随着quick action的一个功能的使用,发现了recordId在lwc下的一个隐藏描述(或者直接说是bug也好)。...我们先来一个大家常用并且看上去没有问题的代码 testLwcQuickAction.html lightning-quick-action-panel header="Test...至少lwc的文档中没有查看到,所以我们需要先找到 aura的文档,因为aura是lightning experience的第一版,我们只需要看一下 force:hasRecordId的文档去碰一下运气看看有没有即可...通过描述愈发的感觉这是因为 lwc quick action的兼容性导致的问题,或者说是一个bug,因为这个并不符合说的显示记录的上下文的描述,而且同样代码作为组件放在record page即可以生效。...类型quick action,aura搭配lwc的组合YYDS testQuickActionForAura.cmp: aura下嵌入 recordId正常 aura:component implements
上一篇介绍了lightning component events的简单介绍。此篇针对上一篇进行深入,主要讲的内容为component event中的阶段(Phase)。 一....: A SPAN DIV 二.阶段(Phase)在lightning中的使用 官方文档里面给出了一个例子很好,在这里直接引用过来。...handler,一个元素可以通过aura:handler>标签执行他自身的事件。...当父元素组件在他的标签里面实例化了子元素的元素组件后,可以直接使用aura:handler来执行事件。...尽管eventBubblingChild是eventBubblingGrandchild的父级结构,但是lightning component event中,在组件元素中,只有最外层元素组件事件才可以被处理
背景: 我们现在项目越来越多的使用 lwc 进行了前端开发,当然我们知道lwc并不能所有的场景都支持自己玩,比如组件之间的navigation、 quick action等都需要通过aura进行操作,aura...弹出一个popup modal,modal中展示一个UI,不管是一个可以用于修改的表单,还是展示只读内容然后有操作按钮等等,这些都无所谓了,重点是有UI的内容,展示modal; 2....}) ); }); } } screenAction.html:这里我们看到一个新的组件的面孔...当然,官方除了可以使用 lightning-quick-action-panel组件以外,也支持自己使用html去适配。...2. lwc弹出的modal的宽度是固定的,如果客户希望更改lwc弹出的modal的宽度,则无法实现,这种在aura可以通过 aura:tag注入可以搞定 3.
,我们在进行正常的业务处理基础上,也需要考虑捕捉异常系,对异常的内容根据正确的业务进行跳转到不同页面或者展示不同的报错信息等处理。...,接下来考虑如何进行公用组件封装变成一个通用的组件。...我们在看上面的链接可以看出来,errorItem的body可能返回出来一个数组,这里进行了简单的操作,直接获取了第一个操作。...这里我们封装了一个公共的error跳转的公用组件 navigationUtils,使用的是navigation,因为navigation没法直接跳转到lwc,只能先跳转到aura,所以实现为aura套壳子来进行实现...aura:component implements="lightning:isUrlAddressable" access="global"> aura:attribute name="errorMessage
说Facet以前,我们先说一下浏览器加载解析以及渲染的过程。浏览器获取一个HTML的文件时,会按照自上向下的顺序进行解析,并在加载过程中进行渲染。...因为Facet是一个占位符,所以Facet不会单独的出现在外层的组件,只会作为父元素组建的一个子进行出现。当然也不是所有的元素都可以使用Facet,只有部分的组件元素可以使用Facet。...Facet既可以使用在lightning中,也可以使用到classic中。Facet在classic中使用 apex:facet 组件,在lightning中使用Aura.Component。...c:facetHeader:此元素组件声明了一个header的attribute,类型为Aura.Component,当父元素组件引用此元素并且赋值情况下,便可以动态的加载赋值。这里面有一个{!...v.body}需要说明,针对lightning,每个aura:component都会内置一个body的属性,当父调用此元素时,此元素内部的body部分便会作为v.body进行渲染。
上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息。...实现这个功能以前主要需要先了解几个标签: lightning:recordForm: 此标签允许用户快速的创建一个form去查看,添加以及修改一条记录。...所以简单的说一下这两个标签: lightning:recordViewForm:此标签封装了一个wrapper,通过recordId, 使用lightning:outputField用来展示记录相关的字段值以及...showCustomPopover:此方法用于弹出一个弹出框,类似标签中title样式,hover后在旁边展示的描述信息的效果。...2.点击其中的一个edit,会切换成edit模式,其他的不变化; ? 3.点击save后正常显示save以后的列表效果。 ?
背景: 我们现在项目越来越多的使用 lwc 进行了前端开发,当然我们知道lwc并不能所有的场景都支持自己玩,比如组件之间的navigation、 quick action等都需要通过aura进行操作,...弹出一个popup modal,modal中展示一个UI,不管是一个可以用于修改的表单,还是展示只读内容然后有操作按钮等等,这些都无所谓了,重点是有UI的内容,展示modal; 2....}) ); }); } } screenAction.html:这里我们看到一个新的组件的面孔...当然,官方除了可以使用 lightning-quick-action-panel组件以外,也支持自己使用html去适配。...2. lwc弹出的modal的宽度是固定的,如果客户希望更改lwc弹出的modal的宽度,则无法实现,这种在aura可以通过 aura:tag注入可以搞定 3.
type: 想要动态创建的元素组件的类型,可以是Aura Framework中提供的标准的元素组件,也可以是自己自定义的元素组件; attributes:想要给元素组件传的参数以及对应的value信息,...这里有两个例子,一个例子为创建标准的元素组件,一个是自定义的元素组件(这里有demo:https://www.cnblogs.com/zero-zyq/p/9630835.html) $A.createComponent...auraTextComponent is an instance of aura:text containing the value Hello World }); 这个官方的demo代表调用此段逻辑会创建一个...aura:text组件,组件有一个value的attribute,他的值为Hello World; 2.createComponents (Array components,function callback...关于 $A的其他方法请自行查看。 总结:篇中主要写了一些我练习lightning时遇到的常用的方法,写的并不深入。如果想要深入的了解还请自己查看文档。
诚然以前的项目都会用到javascript以及CSS相关的UI处理,但是学的总是一知半解,从来没有系统性的读过一本书或者看过一个完整的教程,基本上就是了解一个大概,后期用到哪百度谷歌,倒是也不耽误开发。...所以在避免盲目学习,学玩就忘的前提下,翻了一些trailhead以后,安利一下官方提供的这个lightning aura框架下的基础学习。 一....惭愧的是我目前只是浅显的读了一遍,权当抛砖引玉。...后来基本上用到哪个lightning封装好的标签便会看一下这个对应的html/css实现,多读多看,时间长了对于提升css能力还是有很大帮助的,感兴趣的小伙伴可以尝试。...trail_id=lex_dev 基本上这个trailhead涵盖了简单的lightning的组件开发的基础东西,剩下的就要看多读官方的文档,aura框架就可以入门了。
释放这些资源使浏览器和操作系统的资源管理更加高效,允许浏览器和操作系统在经常使用的应用程序(如Lightning Experience)上花费更多的时间和系统资源。...禁用Aura调试模式: 您的组织可能已经启用了Aura调试模式,以便更容易地在Lightning组件中调试JavaScript代码。但是运行Aura调试模式会降低闪电体验的性能。...在第一个选项卡上显示最需要的信息,并将辅助信息移动到后面的选项卡上。将不太重要的组件移动到一个或多个Lightning页面选项卡之后。不在主选项卡中的组件不会在初始页面加载中呈现,而是只按需呈现。...相关列表:将相关列表组件放在辅助选项卡中,可以使用新的“相关列表”组件在主页面上显示一个或两个关键的相关列表。将相关列表的数量减少到3个或更少。...Lightning组件执行最佳实践 为了了解更多关于闪电经验的有用的最佳实践,请回顾我们的Lightning Experience(闪电组件)性能最佳实践。
主要功能是一个卖房的应用,可以通过条件查询需要的房源,点击房源可以查看到房源详情以及中介详情等信息,和我们之前做的superbadge整体功能很相似,使用到的技术以及排版等基本相同,即一个 lightning...大概UI如下图所示 本来这个是一个没啥好说的demo,但是眼神好的我看到了右侧的详情页面是可以编辑的。...Dynamic Interaction 我们应该在今年年初的新闻中,就可能看到过salesforce针对 lightning app builder要推出一个low code工具用来实现不同组件之间的交互...使用Dynamic Interaction,Lightning页面上某个组件中发生的事件,例如用户单击列表视图中的某个item,可以更新页面上的其他组件。...Dynamic interaction 目前只支持在 app page 只有LWC自定义组件可以是事件源,但页面上出现的任何组件(Aura或LWC)都可以是目标组件。
领取专属 10元无门槛券
手把手带您无忧上云