DEX475

课程介绍

大家好，我是你们的Salesforce老师，今天咱们聊聊Lightning Web Components里模式窗口和通知的用法。这些东西都是用类扩展的方式来创建的，不是直接在HTML里写标签，所以它们是专用的基本组件，用起来很灵活。 先说说LightningModal，它就像个弹出来的对话框，你可以自定义标题、正文和页脚三个部分，轻松做出各种交互窗口。然后是LightningAlert、LightningConfirm和LightningPrompt，它们替换了以前浏览器自带的alert、confirm和prompt，因为那些老方法已经废弃了。现在这些新组件都用Promise来处理，也就是异步的，不会卡住页面，用户体验更好。 接下来是Toast通知，这是个小消息提示，我们推荐用lightning/toast模块来做。它支持内嵌链接，就是消息里能加点击链接，然后由lightning/toastContainer统一管理显示，很方便。至于Outlook和Gmail集成，如果你要把组件嵌到邮件服务里，会用到lightning__RST目标和电子邮件属性，这个咱们后面再细讲。 最后看快速动作，在记录页面上经常用。它通过lightning__RecordAction目标配置，有两种模式：ScreenAction和Action。ScreenAction会弹出带界面的模式窗口，供用户操作；Action是无头的，只跑后台代码，不显示任何界面。大家听懂了吗？有疑问随时提，下一课咱们就动手敲代码试试。

课程章节

本课程共有 6 个章节

• 1

  Modal Windows — LightningModal

  第 368 页

  今天我们来聊聊Lightning Web Components里一个挺特别的组件——LightningModal。它和普通组件不太一样，别的组件我们都是在HTML模板里直接写标签，比如`<lightning-button>`，但LightningModal呢，它不能用标签，而是要通过JavaScript类去扩展。 简单来说，你写一个模态框组件的时候，不是像以前那样继承`LightningElement`，而是继承`LightningModal`这个专门的类。这样，你的组件就有了模态框的全部能力。 模板结构上也很有意思，里面有三个帮手组件可以帮你快速搭出标准的弹窗样式：一个是`lightning-modal-header`，你想加标题就用它，是可选的部分；一个是`lightning-modal-body`，这个是必须有的，你的主要内容就放在这里面；还有一个是`lightning-modal-footer`，底部区域，比如放个关闭按钮，也是可选的。这样你就不用自己从头写样式，结构清晰还统一。 那怎么打开这个模态框呢？不是靠传统的父子组件嵌套，而是直接在父组件里引入你的模态框组件，然后调用它的静态方法`Modal.open()`。你可以往里面传一个配置对象，同时如果模态框需要接收一些数据，你可以在里面通过`@api`装饰的属性来接收，数据就会从父组件传进来。 那模态框怎么把结果返回给父组件呢？很简单，在模态框组件里，你调用`this.close(要返回的值)`就行了。父组件那边，因为`Modal.open()`返回的是一个Promise，你用`await`就能拿到这个结果，就像询问一个问题，然后等弹窗给回复一样。 这样整个流程就非常清晰：父组件通过静态方法打开弹窗，顺便把数据传进去；用户在弹窗里操作完后，弹窗关闭并通过`close`把结果传回来；父组件收到结果，继续往后处理。而且这个弹窗是完全可以自定义的，你可以在body里放任何内容。 记住这个模式：继承`LightningModal`，用那三个助手搭结构，通过`@api`接收数据，用`close`返回结果，父组件用`await Modal.open()`打开并获取结果。这样就掌握了LightningModal的核心用法。

  ▶ 播放视频 查看详情
• 2

  Notification Modals — Alert, Confirm & Prompt

  第 369 页

  好，咱们来看这页内容，讲的是 LWC 里怎么代替那些已经废弃的浏览器弹窗。 以前咱们可能习惯用 window.alert、window.confirm 或者 window.prompt 来弹个提示、确认框什么的。但现在在 Lightning Web Components 里，这些都不能再用了。为什么呢？因为在现代浏览器的安全策略下，跨源的 iframe 环境会直接把这些原生弹窗给屏蔽掉，而 Salesforce 恰恰跑在 iframe 里，所以你调用它们压根不会生效。那怎么办？放心，LWC 给我们准备了三个专门的替代模块。 第一个叫 LightningAlert。它就相当于过去的 alert，用来显示一条紧急消息。不同的是，它有一个可配置的主题，比如你设置成 error，标题栏就会变成猩红色，特别显眼。同时你还可以通过标签属性设置标题文本。要使用它，需要先从 lightning/alert 模块导入，然后调用它的 .open() 方法。这个方法会返回一个 Promise。 第二个是 LightningConfirm，它替代 confirm，让用户确认操作。返回的结果是 true 表示点了确定，false 表示点了取消。它还有个很方便的无标题变体，可以把标题栏直接隐藏掉，界面更简洁。 第三个叫 LightningPrompt，对应 prompt，用来让用户输入文本。如果用户点了确定，就返回输入的字符串；如果取消，返回空字符串。你还可以给它一个可选的 defaultValue，提前把输入框填好。 这几个模块有个特别需要留意的地方：它们和原生函数的最大区别就是，不阻塞 JavaScript 的执行。原生 alert 一弹，整个页面就卡住了，直到你点掉才继续往下走。但 LightningAlert 这些是异步的，调用 .open() 后代码会立刻往下跑。如果你需要等弹窗关闭后再做一些事情，千万不能直接把逻辑写在后面，而是要用 async/await，或者用 .then() 链式调用来处理。这样才能确切地在用户响应后拿到结果并执行后续代码。 总之记住，在 LWC 开发中，任何需要提示、确认、输入的场景，都要用这三个模块来代替老旧的 window 弹窗，它们不仅解决了跨源限制问题，还更符合组件化的异步流程。

  ▶ 播放视频 查看详情
• 3

  Toast Notifications & Toast Container

  第 370 页

  好，同学们，我们现在来讲一下Salesforce里的吐司通知，就是那个在页面顶部弹出的小提示条。在Lightning Web Components中，我们有新旧两种方式来实现它。 首先，首选的方法是使用`lightning/toast`模块。这个模块功能更强大，支持在标题和消息里插入可点击的链接。插入链接有两种格式。第一种是基于数组的格式，你在文本里用{0}、{1}这种占位符，然后通过一个叫`labelLinks`的数组来提供实际的链接数据，比如链接地址和显示文字。第二种是基于对象的格式，更直观一些，你在文本里用`{linkName}`这样的占位符，然后提供一个叫`messageLinks`的对象，里面键就是占位符名字，值就是链接信息。另外要特别注意，调用这个模块的`show`方法时，你必须要传入`this`作为第二个参数，这样才能正确关联当前组件的上下文。 接下来是旧版的方式，也就是`lightning/platformShowToastEvent`，通过事件派发来实现。它使用起来更简单，但有两个限制：一是不支持在LWR网站和独立应用中使用，二是不能在标题里添加内联链接。所以如果你只是做个简单的提示，并且确保运行在Salesforce标准环境里，旧方式也够用。 两种方式都支持四种外观变体：成功（绿色）、错误（红色）、警告（橙色）和信息（蓝色）。也支持两种显示模式：一种是可以自动消失的，通常几秒后自己关闭；另一种是粘性的，会一直停留直到用户手动关掉。所以你可以根据需要选择。 不管用哪种方式生成的吐司，它们都由一个叫`lightning/toastContainer`的组件来统一管理。这个容器负责显示、排队和布局。我们可以通过属性进行配置，比如`max-toasts`设置最多同时显示几条，默认是3条；`toast-position`设置吐司出现的屏幕位置，默认是顶部居中；当同时触发多条吐司时，容器会按照先后顺序排队显示。记住，每个页面只需要一个toast容器实例就足够了，多余的会自动被忽略，所以别重复放多个容器。 总结一下，如果你项目里需要支持LWR站点，或者想在提示里添加可点击的链接，就用新模块`lightning/toast`，记得传`this`。如果只是简单场景，旧事件方式也行，但要清楚它的局限。还有就是别忘了页面上放一个`lightning/toast-container`，并设置好你需要的参数。 好了，这就是吐司通知的内容，是不是简单明了？我们继续下一节。

  ▶ 播放视频 查看详情
• 4

  Outlook & Gmail Integration + Quick Actions Overview

  第 371 页

  同学们，咱们来看这一页，讲的是怎么在 Lightning Web 组件里跟 Outlook 或 Gmail 集成，还有怎么配置快速操作。这两个都是很实用的功能，我来给你们掰开揉碎讲清楚。 先说 Outlook 和 Gmail 的集成。在 Lightning Web 组件里，如果你想让组件能嵌入到邮件侧边栏，得用 `lightning__RST` 这个目标。这个目标自带了一些预定义的属性，比如邮件的正文、主题、相关人员、日期、电子邮件地址、位置、模式、来源这些，全都是从邮件的上下文中自动抓过来填好的。所以你不用再费劲自己去取这些数据。记得，这些属性默认不用出现在你的组件配置文件里，除非你非要给它们设个默认值，否则系统会自动处理好。 接下来是快速操作，这玩意儿是通过 `lightning__RecordAction` 目标来配置的。快速操作有两种类型：一种是 `ScreenAction`，能弹出一个有界面的窗口，让用户填东西；另一种是 `Action`，完全是后台跑代码，没界面，用户点了就默默执行。关键点在这儿：类型一旦定下来，后面就改不了啦，所以一开始就得想清楚。另外，快速操作只能在 Lightning Experience 里面的记录页面用，在 Aura 网站或者移动 App 上是不行的。 还有一个很重要的细节：当快速操作加载时，`recordId` 不会在常规的 `linkedCallback()` 生命周期钩子里传给你。那怎么拿到当前记录的 ID 呢？你得用一个带 `@api` 装饰器的 setter 方法，等框架把值分配过来的时候，你就能抓住它了。这个点经常有人踩坑，所以要特别记住。 配置完了组件之后，你不是自动就能用的。你还得去设置里手动创建一个快速操作，把它绑定到你的组件上，然后再把这个快速操作拖到相应的页面布局里，这样用户才能看到和点击。 好，这页的重点就这些，很简单，就是记住那几个属性自动填、类型不可变、适用范围、还有怎么拿 recordId。有什么问题随时问。

  ▶ 播放视频 查看详情
• 5

  Screen Quick Actions

  第 372 页

  嘿，同学，我们来看一下这个闪电快速操作面板。你可能会在列表、记录页面看到一个按钮一点，弹出一个模态框，这就是快速操作。它能让我们做简单的数据编辑，而且UI长得跟Salesforce原生一样，因为有SLDS样式的标题、正文和页脚三个区域。 那制作这个面板，有两种主要模式。第一种最简单：直接用 `lightning-record-edit-form` 加上 `lightning-input-field`，这种形式是自动生成编辑字段的，比如你放一个姓名字段，它自动就知道当前记录是什么，并且自动填充值。注意，这时候按钮是嵌在表单内部的，所以不用额外定义页脚插槽。点保存，它自己就能更新记录。 第二种模式更灵活：你用 `lightning-record-edit-form` 吗？不，这里用自定义表单，也就是 `lightning-input` 这些组件自己搭。然后用 `wire` 加 `getRecord` 把记录数据拉下来，自己绑定到各个输入框。这时候，保存按钮要放到页脚的插槽里，自己写逻辑，比如先验证一下，如果姓名字段为空，就把保存按钮禁用掉。然后真正保存时要调用 `updateRecord()` 方法，亲手把更改提交上去。 别忘了关闭模态框。我们有个事件叫 `CloseScreenEvent`，用它发送就能关掉这个面板。但是，有个大坑要记住：用户按那个 X 按钮直接关闭，并不会触发你的取消逻辑，它只是把窗口关了，所以如果有未保存的更改，你得想办法提醒用户，或者在取消按钮里处理，别光靠 X。 最后，在模态里面，你怎么知道当前是哪个记录、哪个对象呢？它可以通过 `@api` 自动接收 `recordId`，`objectApiName`，甚至整个 `clientPageReference`。你直接用这些属性，或者通过 `wire` 适配器，就能获取页面上下文了，非常方便。 好，这个Slide你理解了吗？总结就是两种实现方式，记得关闭要发事件，验证要自己写，上下文参数自动有。我们下一章继续。

  ▶ 播放视频 查看详情
• 6

  Headless Quick Actions & Email Quick Actions

  第 373 页

  大家好，今天我们来聊聊Lightning Web Components里的一个特别实用的小技巧——无头快速操作。你可以把它想象成一个悄悄在后台帮你干活儿的助手，它不需要弹出任何界面，就能完成一系列任务。 首先，这个“无头”的意思就是模板为空，不会渲染出页面元素，所以用户根本看不到它。但别小看它，它必须有一个公共方法叫“invoke”，并且一定要加上@api装饰器来标记。因为Salesforce会在适当的时机自动调用这个invoke方法，就像给你发了一个无声的指令，请你立刻执行代码。 为了确保操作不乱套，我们通常会设置一个布尔类型的标志，比如叫isExecuting。为什么这么做呢？因为无头快速操作的返回类型是“空”，也就是它不返回Promise，所以系统不会理睬你有没有执行完，很可能在上一轮还没结束的时候就又触发下一次调用。用这个标志锁住，就能防止多次并行执行，保证逻辑是顺序、干净的。 那么无头操作能做什么呢？常见的模式有三种：第一种是用NavigationMixin导航到特定的页面或记录，比如操作完后自动跳转到某个对象的详情页；第二种是按顺序发送延迟的吐司通知，比如先弹出一个提示说“操作已提交”，过一会儿再弹一个“处理完成”；第三种就是执行后台操作，比如更新数据、调用Apex方法等等，完全在幕后工作。 现在我们来重点关注一下电子邮件快速操作。它也是一种特殊的无头操作，但是专门用来发送邮件的。在组件里，你需要引用一个标准__quickAction页面引用类型，它的API名称是“Global.SendMail”，注意大小写。这样平台就知道这是一个发邮件的行为。 那怎么预填充邮件的各项内容呢？你要用到一个叫“encodeDefaultFieldValues”的方法。你可以把收件人、抄送、邮件正文甚至HTML内容都提前塞进去，传给这个方法后，平台会自动生成预填好的邮件窗口，或者直接发送（取决于配置）。要注意一点：你在代码里想预设的这些字段，必须在电子邮件操作布局里不是只读的，否则填进去也没用。 我会给两个具体的例子帮助你理解。第一个例子：基于联系人的简单邮件。你使用getRecord拿到当前联系人记录的Id，把这个Id作为RelatedToId，邮件就会自动关联到这个联系人身上；第二个例子：基于客户的邮件。你可以使用lightning-record-picker组件让用户挑选一个客户下的联系人，过滤条件限定为只显示这个客户的相关联系人，选好后再把Id传进去。 总之，无头快速操作让你的组件更智能，用户体验也更流畅。记住这几个关键点：模板为空、必须实现@api invoke()、用isExecuting防重入，而电子邮件操作要使用Global.SendMail类型，并通过encodeDefaultFieldValues预设字段。灵活运用这些模式，你就可以创建出既安静又强大的功能。 今天的讲解就到这里，希望大家对无头快速操作有了清晰的认识，下次可以动手试试看哦。

  ▶ 播放视频 查看详情