lightning web component
文章平均质量分 66
LWC(Lightning Web Component)是使用HTML和现代JavaScript构建的自定义HTML元素。基于在浏览器中本地运行的代码构建的,因此它是轻量级的,并具有出色的性能。在Salesforce的Lightning系统中,它十分常见,并且为SF官方推荐的下一代开发框架。
Fala Oviara
ultimate full-stack
展开
-
【LWC】 响应式根据记录类型获取选项列表的值
【LWC】 响应式根据记录类型获取选项列表的值在某些场景下,一个对象的某个选项列表的值,会根据记类型的不同而设置为不同的值。我们可以使用标准API,在组件中方便快捷地获取它们,并且根据不同的记录类型响应式地重新获取它们的值。Show Me The Code在HTML文件中,我们会使用标准组件<lightning-dual-listbox>渲染出选项列表(多选)<lightning-dual-listbox name="picklist" label="选项列表" required原创 2021-07-19 18:28:18 · 268 阅读 · 0 评论 -
【Salesforce】 LWC框架文档 (入门介绍及教程)#长文预警
LWC(Lightning Web Component)介绍及使用 07/2021Salesforce Lightning Experience为了适应多端以及现代化Web应用,Salesforce在2015年推出了全新的Lightning Experience用户界面。目前为止,Salesforce的用户界面分为两种:Salesforce ClassicVisualforce PagesSalesforce Lightning ExperienceLightning Web Com原创 2021-07-08 18:42:45 · 4239 阅读 · 1 评论 -
【LWC】标准API [outputField] 出现罕见警告消息TypeError: Cannot read property ‘displayValue‘ of undefined的解决方法
LWC标准API[outputField]出现罕见警告消息TypeError: Cannot read property ‘displayValue’ of undefined的解决方法场景最近在测试组件画面的时候,在调试栏内经常会得到许多非常恼人的警告消息:/components/lightning/outputField.js:1 TypeError: Cannot read property 'displayValue' of undefined at Object.p [as ge原创 2021-06-23 18:13:56 · 313 阅读 · 0 评论 -
【LWC】有关旧样式被废弃的重要提示 组件渲染相关 重要
有关旧样式废弃的重要提示场景最近某一天打开VSCode,发现我的许多lwc组件的HTML代码里出现了很多验证警告,警告的Message基本上说的是“该样式已更新,请使用最新的样式”。我在StackExchange上询问这个警告是否可以关闭/无视,得到了以下回复:Please note that the old styles were planned for deprecation this release (Summer '21). This change has been postponed,原创 2021-06-23 17:35:19 · 114 阅读 · 0 评论 -
【LWC】Resource not found异常的一个可能原因
Resource not found异常的一个可能原因场景在我当前项目中,有一个用来创建记录的LWC组件。创建记录的流程大致为以下三步:用户输入信息用户点击保存,后台处理数据,创建记录记录创建成功,跳转到相应记录页面但是我发现,有时候在用户点击保存之后,在表单头会报错 Resource not found 。这个错误信息很奇怪,因为一般这种错误信息只会出现在调用REST API的场景。排查其实一开始排查这个错误的时候,我是往创建记录的时候遇到错误的方向排查的。我以为是当前用户简档对对象中原创 2021-06-22 14:19:18 · 8120 阅读 · 0 评论 -
【LWC】组件中快速取得当前登录用户ID
LWC中快速取得当前登录用户ID场景在业务逻辑中,我们经常要获得当前登陆用户的Id,在Apex中,我们可以方便地使用UserInfo().getUserId();来实现,在LWC中,我们有另一种方便的方法来获取当前登录用户的Id。方法在lwc组件的js代码中添加以下几行:// 头部import CURRENTUSERID from '@salesforce/user/Id';// 类export default class Component extends LightningElemen原创 2021-06-10 14:51:45 · 492 阅读 · 0 评论 -
【LWC】lightning-input-field 没有 checkValidity()方法 #checkValidity is not a function
lightning-input-field 没有 checkValidity()方法 #checkValidity is not a function场景如果在提交表单之前需要整体验证所有lightning-input-field的正确性,但是它又没有封装好的checkValidty()方法,如何解决?Sample Code利用reportValidity()同样会返回Boolean结果的特性,使用下述代码解决:const allValid = [...this.template.querySel原创 2021-05-20 15:59:27 · 302 阅读 · 0 评论 -
【LWC】LWC组件中JS代码格式规范
LWC的JS代码格式规范代码模板// import startimport { wire, track, api, LightningElement } from 'lwc';// import end// const// const endexport default class ComponentName extends LightningElement { // api // api end // wire // wire end // tra原创 2021-04-28 17:32:22 · 408 阅读 · 0 评论 -
【LWC】一个设置解决 Lightning Web Component 组件修改后没有及时反映的问题
【LWC】一个设置解决 Lightning Web Component 组件修改没有及时反映文章目录【LWC】一个设置解决 Lightning Web Component 组件修改没有及时反映场景解决方法原因?场景我们知道LWC的开发是只能通过VSCode(或者SublimeText)利用Salesforce Cli工具查看、修改、提交代码的。但是刚开始开发LWC组件的开发者可能会发现,自己开发的组件在Salesforce平台页面上不管怎么刷新,作出的修改都没有反映上去,有开发者可能会误以为是网络问题原创 2021-04-14 13:49:43 · 787 阅读 · 0 评论 -
【LWC】Lightning-input-field 不同类型字段onchange事件value属性的区别
Lightning-input-field 不同类型字段onchange事件value属性的区别应用场景在使用lightning-input-field的过程中,我们是不需要规定这个输入框的输入类型的,框架会自动根据字段去选择渲染什么类型的输入框。然而当字段的类型有区别的时候,我们在元素的 onchange 事件取得用户输入值的方法也会有所改变。本文用不同类型的字段提示开发者个中区别。五个不同类型字段在这个组件中,有五个不同类型的字段,分别为文本、查找关系、日期时间、选项列表、多选列表。<原创 2021-04-04 12:38:44 · 687 阅读 · 0 评论 -
【LWC】使用HTMLSelectElement标准接口 checkValidity reportValidity setCustomValidity 检查输入值、自定义验证规则及错误消息
使用HTMLSelectElement标准接口 checkValidity reportValidity setCustomValidity 检查输入值、自定义验证规则及错误消息应用场景在LWC组件中经常会有自定义表单的出现,如果我们对一个对象记录进行新建、编辑操作时需要提前检查输入的合法性,我们可以使用LWC提供的公共方法来检查输入值,甚至可以自定义一个检查规则。本文会用一个很简单的例子告诉你正确的使用方式。检查方法我们首先写一个最简单的表单LWC组件:<template>原创 2021-04-03 23:45:03 · 528 阅读 · 0 评论 -
【Salesforce / LWC】LWC中使用第三方库开发 Use Third-Party JavaScript Libraries In LWC
LWC中使用第三方库开发文章目录LWC中使用第三方库开发准备工作标准方法讲解JavaScript 中的 DOM 操作示例上述代码中需要注意的几点:补充在LWC中,我们当然可以使用第三方库的代码。今天我会用 highCharts来手把手教你怎么调用。准备工作下载你想使用的第三方库代码到本地。作为静态资源,上传到Salesforce。在 js文件中:导入静态资源import resourceName from '@salesforce/resourceUrl/resourceNa原创 2021-03-08 18:11:08 · 768 阅读 · 0 评论 -
【LWC】lightning-input-field参照字段值响应式清除失效的解决方法 #hack trick
Hack trick,lightning-input-field参照字段值响应式清除失效的方法文章目录Hack trick,lightning-input-field参照字段值响应式清除失效的方法场景复原排查原因解决方法相关链接场景复原今天有一个需求是这样的:根据用户选择的查找字段的id值,判断选择的id记录是否符合某种要求,如果不符合,则将这个输入框的内容清除并且提示。当然,这个需求乍一看很容易实现,参照我之前分享的一个经验博文 里面有这个需求的写法。但是今天测试的时候,发现第一次选择不符合要求的原创 2021-03-04 21:58:32 · 287 阅读 · 1 评论 -
【LWC】Lightning标准/自定义编辑表单组件中,<lightning-messages> 标签显示错误信息的两种方法 show error messages in lwc edit-form
<lightning-messages></lightning-messages>标签显示错误信息的两种用法文章目录标签介绍用法字段级别的验证规则错误信息显示建立验证规则效果在Trigger中建立代码级别的验证规则例子效果总结标签介绍<lightning-messages></lightning-messages>是组件 lightning-record-edit-form自带的标签,它用统一的ui提示用户错误消息(error messages)。用法原创 2021-03-01 22:25:15 · 308 阅读 · 0 评论 -
【LWC】轻巧的加载预显示行 UI组件 - loading-place-holder #lwc组件 #Salesforce #用户体验
轻巧的加载预显示行 - loading-place-holder文章目录轻巧的加载预显示行 - loading-place-holder背景介绍使用例子完整代码背景介绍在加载一个数据量比较大的组件时,在元素被渲染出来之前页面上会存在一些空白区域,元素加载完成突然被渲染之后,空白区域又会被突然填满,用户体验上并不友好。因此,在设计Lightning组件的时候,为了更加良好的用户体验,我引入了预显示行。它和官方ui库提供的 lightning-spinner的区别在于,spinner并不占位,因此在数据原创 2021-02-20 18:33:45 · 335 阅读 · 0 评论 -
【Salesforce】【LWC】响应式验证标准查找输入框
应用场景在使用lwc的标准查找输入标签 lightning-input-field 中,有时候会需要验证用户的输入内容,并且根据内容进行不同的处理。如果用户的选择不符合要求,则需要清除输入的内容,并且提示用户。*补充说明:*标准查找输入标签指 lightning-input-field 的 field-name 值为一个查找(look-up)字段。响应式验证怎么做到能够清除标准输入框的内容?其实很简单,在标准标签中添加上一个 value 属性,并且在js中管理这个变量。例:html:<l原创 2021-01-13 15:23:36 · 584 阅读 · 0 评论 -
[LWC小知识] 标准lightning-input-field怎么取得变更值(onchange)
在lightning-record-edit-form中,我们用lightning-input-field自定义需要的字段。当我们需要得到用户的输入值(如Id,值等),我们可以在标签中加上onchange事件,然后在事件中抓取原创 2020-12-15 09:36:25 · 638 阅读 · 0 评论 -
[Salesforce组件开发][LWC] 弹出框开发
前言:LWC(Lightning Web Component)是使用HTML和现代JavaScript构建的自定义HTML元素。基于在浏览器中本地运行的代码构建的,因此它是轻量级的,并具有出色的性能。在Salesforce的Lightning系统中,它十分常见,并且为SF官方推荐的下一代开发框架。Salesforce致力于开发开放的Web标准,并且是World Wide Web联盟(W3C)的成员。弹出框概念 (Modals)在页面App中,弹出框可以说是十分常见的Case,很多操作都会用到它,因为弹原创 2020-12-13 20:06:30 · 1632 阅读 · 0 评论 -
lwc 开发一个Salesforce标准关注按钮
前言lwc是Salesforce的新一代基于ES6的组件库,在它们的CRM系统上普遍应用于Lightning框架。由于项目需要,我需要开发一个和它们标准关注按钮一样的按钮,尽可能实现一样的效果。思路既然是已经有的标准按钮,那么我们可以先看一下它的行为。在关注之前,这个按钮长这样。关注之后,按钮的背景色消失,在发生hover(mouseover)事件之后,按钮的文字、图标都发生变化。样式上大致明白了,在开发者模式下,把两种状态下的按钮样式记录下来(因为是标准按钮我们可以直接借鉴官方样式,不原创 2020-12-08 22:41:57 · 722 阅读 · 0 评论