我们使用vs code创建lwc 时,文件会默认生成包含 template作为头的html文件,包含了 import LightningElement的 js文件以及对应的.js-meta.xml文件.前一个LWC学习的文章中已经说过当浏览器渲染的时候,遇见<template>会将其渲染成<namespace-component-name>,比如 helloWorld.html引入在页面中浏览器进行渲染时,此文件的template会被渲染成<c-hello-world>…

本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation https://developer.salesforce.com/docs/component-library/documentation/en/lwc/use_record_context Salesforce LWC学习(三十六) Quick Action 支持选择 LWC了 我们在使用lwc…

本篇参考:https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist 我们做lwc的学习时,因为很多人可能还没接触过lwc的项目,所以通过学习知道很多的知识点,但是可能没有机会做到一个小项目,salesforce lwc superbadge正好可以在将知识点串起来基础上,深化学习,当一个小项目练手.首先先按照上方的superbadge要求,安装一个unlocked package,然后…

本篇参考: https://developer.salesforce.com/docs/atlas.en-us.224.0.api_rest.meta/api_rest/resources_composite_composite.htm https://developer.salesforce.com/docs/atlas.en-us.224.0.api_rest.meta/api_rest/resources_composite_sobject_tree.htm https://develop…

本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_quick_actions https://developer.salesforce.com/docs/component-library/bundle/lightning-quick-action-panel/documentation 背景: 我们现在项目越来越多的使用 lwc 进行了前端开发,当然我们知道lwc…

背景: 今天项目组小伙伴问了一个问题,如果更新数据超过1万条的情况下,有什么好的方式来实现呢?我们都知道一个transaction只能做10000条DML数据操作,那客户的操作的数据就是超过10000条的情况下,我们就只能搬出来salesforce government limitation进行拒绝吗?这显然也是不友好的行为. 实现方案: 1. 代码中调用batch,batch处理的数据量多,从而可以忽略这个问题.当然,这种缺点很明显: 1)不是实时的操作,什么时候执行取决于系统的可用线程,什么…

本篇参考:https://www.lightningdesignsystem.com/components/modals/ 随着salesforce lwc的优化,越来越多的项目从aura转到了lwc开发,没有lwc的知识是不能的,但是指望lwc可以搞定所有的场景是万万不能的,比如今天的场景,quick action.目前 quick action只允许选择 Aura Component,所以我们开发 quick action基本操作是 aura 套着 lwc实现功能.那如何更好的适配UI,本篇…

本篇参考:salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容 上一篇我们写了aura方式上传excel解析其内容.lwc作为salesforce的新宠儿,逐渐的在去aura化,这种功能怎么能lwc不搞一份,所以本篇来了,直接上代码. excelImportForLwc.html <template> <lightning-input type="file" label="上传" onchange={excel…

本篇参考:https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-indicator/example 我们在实际项目中有的时候要使用展示类似opportunity path的这种进度的标签,当然 lwc已经给做好了标签和demo,我们第一版进行一个简单的制作.直接上代码 testProgressIndicator.html <template> <lightning-card ti…

本篇参考: https://www.cnblogs.com/zero-zyq/p/14548676.html https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/#Styling-Hooks-What-Does-It-Look-Like https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_c…

本篇参考: Configure a Component for Dynamic Interactions in the Lightning App Builder - Salesforce Lightning Component Library Salesforce Help | Article GitHub - trailheadapps/dreamhouse-lwc: Sample application for Lightning Web Components on Salesforce…

在Salesforce LWC学习(八) Look Up组件实现篇中,我们实现了公用的lookup组件,使用的过程中,会发现当我们输入内容以后,搜索出来的列表便无法被清空. 针对此种情况我们打算优化一下代码,针对前端的输入框,增加onblur函数,当鼠标移除情况下,设置searchTerm为空字符串并且不让下方的options展示,当鼠标移入或者输入内容情况下在展示下方的options. customLookUpForLwc.html:输入框添加onblur,下方options使用变量控制显隐…

本篇参考:https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_error https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_errors.htm 在salesforce lwc开发的时候,我们在进行正常的业务处理基础上,也需要考虑捕捉异常系,对异常的内容根据正确的业务进行跳转到不同页面或者…

上一篇中我们在demo中使用了很多的 @salesforce 以及 lightning/ui*Api的方法,但是很多没有细节的展开.其实LWC中针对这些module提供了很多好用的方法,下面对这两种进行详细介绍. 一. @Salesforce @salesforce模块封装了很多的方法,用于在运行时添加相关的功能.主要方法及使用如下. 1. @salesforce/apex : 此方法用于引入apex的方法,这里的方法包括自定义的方法以及标准的预置的方法,具体操作如下.1)引入自定义apex类的…

首先本篇感谢长源edward老哥的大力帮助. 背景:我们在前端开发的时候,经常会用到输入框,并且对这个输入框设置 required或者其他的验证,当不满足条件时使用自定义的UI或者使用标准的 input的 setCustomValidity等操作方式去进行UI的展示.我们在https://www.cnblogs.com/zero-zyq/p/12734982.html有描述相关的操作,今天的内容就以这个知识点内容进行展开.首先先上代码 inputRequiredTest.html <templa…

我们在上篇介绍了 @track / @api的区别.在父子 component中,针对api类型的变量,如果声明以后就只允许在parent修改,son component修改便会导致报错. sonItem.html <template> <lightning-input value={itemName} onchange={changeItemName} label="item name"></lightning-input> </templa…

之前的几节都是基于前台变量进行相关的操作和学习,我们在项目中不可避免的需要获取数据以及进行DML操作.之前的内容中也有提到wire注解,今天就详细的介绍一下对数据进行查询以及DML操作以及Wire Service相关的知识. 一. LDS 学习LDS以前可以先看一下aura中LDS的概念salesforce lightning零基础学习(六)Lightning Data Service(LDS).针对LWC中的LDS和aura中的功能原理很像,区别可能是语法和标签的区别.所以这里对LDS不做过多…

上一篇我们介绍了针对LWC中常用的LDS的适配的wire service以及@salesforce模块提供的相关的service,其实LWC中还提供其他的好用的service,比如针对导航相关的lightning/navigation以及展示toast提示信息相关的lightning/platformShowToastEvent.此篇主要针对这两个service进行简单的介绍. 一. lightning/navigation 我们有好多场景会用到跳转操作,比如创建记录以后跳转到此记录详情页,点击…

本篇参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 随着项目的学习以及trailhead的学习,会遇见自己曾经模糊的定义或者比较浪费时间但是又比较简单的坑,在此mark一下,共同进行学习参考. 一.  子组件调用后台实现父组件更改后子组件清除cache更新 我们在开发中经常会出现父子component嵌套的情形.有一种场景为子component使用 lightning-record-form或者使用@getRecord去展示一…

本篇参看: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation https://www.lightningdesignsystem.com/components/data-tables/ 我们在salesforce中,经常会使用 listview,标准的 lightning listview会有排序,filter展示chart等等标准功能.当然,某些情况标…

本篇参考: https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_message_channel https://developer.salesforce.com/docs/component-library/bu…

上一篇我们简单的描述了一下Salesforce DX的配置以及CLI的简单功能使用,此篇主要简单描述一下LWC如何实现helloWorld以及LWC开发时应该注意的一些规范. 做国内项目的同学直观的感觉可能时这两年新项目基本上都在使用lightning,如果进行客制化使用aura框架进行开发.对于新项目来说,如果受够了classic平台下js,css都在page里面写,并且一个标签或者一个actionFunction各种reRender的杂乱情况下,aura模块的分层管理还是很易读的:但是对于老…

本篇参看:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array list是我们经常要处理的内容,lwc前端针对list主要有几个函数处理,不同函数针对不同场景有不同的功能.下面就根据几个常用的处理list的方法进行简单的介绍. 一. forEach 我们针对list处理经常需要迭代去处理,通常可能用到for(var index = 0;index < sampleList.le…

本篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_wire_adapters_picklist_values https://developer.salesforce.com/docs/component-librar…

本篇参看: https://trailhead.salesforce.com/content/learn/modules/test-lightning-web-components https://jestjs.io/docs/en/expect 我们在写lwc的js部分时,通常都是前端进行测试,针对js测试其实也有类似于apex class中的 test class类似的js test class,也就是今天说的 Jest Test,Jest Test不只是针对于 lwc可以使用,正常其他的非…

本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_ui_api https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_guidelines https://developer.salesforce.com/docs/component-library/docume…

本篇参考https://www.salesforcelwc.in/2019/10/lookup-in-lwc.html,感谢前人种树. 我们做lightning的时候经常会遇到Look up 或者MD字段在页面搜索展示的需求,在标准的页面很常见,而且很好看.但是很遗憾的是在自定义组件中还没有现成的标准组件去搞定.下面介绍两种方式去实现展示lookup / MD字段的组件样式.  一.  record-edit-form搭配 lightning-input-field 曲线救国 标准功能也不是10…

本篇参看: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reactivity_fields https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation 碰到之前接触的记录一下,深化一下印象. 一. 解决 lightning-recor…

本篇参考: https://developer.salesforce.com/docs/component-library/bundle/lightning-file-upload/documentation https://developer.salesforce.com/docs/component-library/bundle/lightning-input/specification 在salesforce中,上传附件是一个经常做的操作,在标准的功能基础上,lwc自然也封装了自定义的实现…

本篇参考: https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation https://www.lightningdesignsystem.com/components/input/#Error 当我们在前端有表单操作或者有大量的输入性条件作为搜索条件情况下, 通常会有一些校验,比如非空校验,类型校验等等.针对salesforce lwc也好或者是aura也好,通常有以下…