DEX602

课程介绍

今天我们来讲讲单元5——构建先进组件。这个单元主要是教大家如何在Salesforce中创建更复杂、更强大的组件，让你的应用更加灵活和高效。 首先，我们要明白什么是“先进组件”。简单来说，就是那些比基础组件更复杂、功能更强大的组件。它们可以帮助你实现更高级的功能，比如动态数据展示、复杂的用户交互等等。 在Salesforce中，构建先进组件通常涉及到使用Aura框架或Lightning Web Components（LWC）。Aura是Salesforce较早的组件框架，而LWC则是更现代、更高效的框架。我们今天的重点会放在LWC上，因为它是Salesforce未来的发展方向。 ### 1. ，了解LWC的基础， LWC是基于现代Web标准构建的，比如HTML、CSS和JavaScript。它使用了ES6+的语法，所以如果你对现代JavaScript有一定的了解，学习LWC会更容易。 ### 2. ，创建LWC组件， 创建LWC组件其实很简单。你只需要在Salesforce Developer Console或者VS Code中创建一个新的LWC项目。每个LWC组件通常由三个文件组成： - ，HTML文件，：定义组件的结构和布局。 - ，JavaScript文件，：处理组件的逻辑和交互。 - ，CSS文件，：定义组件的外观和样式。 ### 3. ，数据绑定， LWC支持双向数据绑定，这意味着你可以轻松地将数据从JavaScript传递到HTML，反之亦然。比如，你可以在JavaScript中定义一个变量，然后在HTML中使用这个变量来动态展示内容。 ### 4. ，事件处理， LWC还支持事件处理，这意味着你可以响应用户的操作，比如点击按钮、输入文本等。你可以通过JavaScript来定义这些事件的处理逻辑，从而让组件更加互动。 ### 5. ，使用Salesforce数据， LWC可以轻松地与Salesforce的数据进行交互。你可以使用Apex控制器来获取或更新Salesforce中的数据，然后在LWC组件中展示这些数据。 ### 6. ，组件复用， LWC的一个强大之处在于它的可复用性。你可以创建一个组件，然后在多个地方使用它。这不仅提高了开发效率，还保证了代码的一致性。 ### 7. ，调试和测试， 最后，别忘了调试和测试你的组件。Salesforce提供了丰富的工具来帮助你调试LWC组件，比如Chrome的开发者工具。你还可以编写单元测试来确保组件的功能正常。 好了，这就是我们今天的内容。希望你们对构建先进组件有了更清晰的理解。记住，多动手实践是掌握这些技能的关键。下次课我们会深入探讨一些实际案例，帮助你们更好地应用这些知识。

课程章节

本课程共有 54 个章节

• 1

  Unit 5 Building Advanced Components

  第 311 页

  今天我们来讲讲单元5——构建先进组件。这个单元主要是教大家如何在Salesforce中创建更复杂、更强大的组件，让你的应用更加灵活和高效。 首先，我们要明白什么是“先进组件”。简单来说，就是那些比基础组件更复杂、功能更强大的组件。它们可以帮助你实现更高级的功能，比如动态数据展示、复杂的用户交互等等。 在Salesforce中，构建先进组件通常涉及到使用Aura框架或Lightning Web Components（LWC）。Aura是Salesforce较早的组件框架，而LWC则是更现代、更高效的框架。我们今天的重点会放在LWC上，因为它是Salesforce未来的发展方向。 ### 1. ，了解LWC的基础， LWC是基于现代Web标准构建的，比如HTML、CSS和JavaScript。它使用了ES6+的语法，所以如果你对现代JavaScript有一定的了解，学习LWC会更容易。 ### 2. ，创建LWC组件， 创建LWC组件其实很简单。你只需要在Salesforce Developer Console或者VS Code中创建一个新的LWC项目。每个LWC组件通常由三个文件组成： - ，HTML文件，：定义组件的结构和布局。 - ，JavaScript文件，：处理组件的逻辑和交互。 - ，CSS文件，：定义组件的外观和样式。 ### 3. ，数据绑定， LWC支持双向数据绑定，这意味着你可以轻松地将数据从JavaScript传递到HTML，反之亦然。比如，你可以在JavaScript中定义一个变量，然后在HTML中使用这个变量来动态展示内容。 ### 4. ，事件处理， LWC还支持事件处理，这意味着你可以响应用户的操作，比如点击按钮、输入文本等。你可以通过JavaScript来定义这些事件的处理逻辑，从而让组件更加互动。 ### 5. ，使用Salesforce数据， LWC可以轻松地与Salesforce的数据进行交互。你可以使用Apex控制器来获取或更新Salesforce中的数据，然后在LWC组件中展示这些数据。 ### 6. ，组件复用， LWC的一个强大之处在于它的可复用性。你可以创建一个组件，然后在多个地方使用它。这不仅提高了开发效率，还保证了代码的一致性。 ### 7. ，调试和测试， 最后，别忘了调试和测试你的组件。Salesforce提供了丰富的工具来帮助你调试LWC组件，比如Chrome的开发者工具。你还可以编写单元测试来确保组件的功能正常。 好了，这就是我们今天的内容。希望你们对构建先进组件有了更清晰的理解。记住，多动手实践是掌握这些技能的关键。下次课我们会深入探讨一些实际案例，帮助你们更好地应用这些知识。

  ▶ 播放视频 查看详情
• 2

  Unit 5: Building Advanced Components

  第 312 页

  同学们，今天我们来聊聊Salesforce中的高级组件构建。想象一下，你正在搭建一个乐高模型，每个小部件都需要精确地放置和连接，以确保整个模型既美观又实用。在Salesforce中构建高级组件也是类似的道理。 首先，我们来看看如何创建自定义、响应式的数据表。这就像是在你的乐高模型中添加一个可以自动调整大小的展示柜。你可以使用Lightning Web Components (LWC)来创建这样的数据表，确保它能在不同设备上都能完美展示。 接下来，我们要定义组件上的公共方法。这就像是给你的乐高模型添加一些可以互动的按钮或开关。这些方法允许其他组件或外部系统与你的组件进行交互，比如获取数据或触发某些动作。 然后，我们来看看服务组件和Toast收件箱。服务组件就像是乐高模型中的电源模块，为其他部分提供必要的功能支持。而Toast收件箱则像是模型中的一个小信箱，用来接收和显示来自系统的即时消息或通知。 插槽和模式按钮是接下来要讲的内容。插槽允许你在组件中预留一些空间，以便插入其他内容或组件，这就像是在乐高模型中预留了一些空位，以便未来添加新的部件。模式按钮则是一种特殊的按钮，可以用来切换组件的不同状态或模式。 定位是构建高级组件时不可忽视的一部分。你需要确保每个组件都能准确地放置在页面的指定位置，就像在乐高模型中确保每个部件都稳固地连接在一起。 最后，我们来谈谈渲染器和第三方JS。渲染器负责将你的组件代码转换成用户可以看到的界面，这就像是把乐高模型的图纸变成实际的模型。而第三方JS则允许你引入外部的JavaScript库或框架，来增强你的组件功能，就像是在乐高模型中使用一些特殊的零件来增加模型的复杂性。 好了，同学们，这就是我们今天要讲的内容。希望你们能像搭建乐高模型一样，享受在Salesforce中构建高级组件的过程。记得，每个小细节都很重要，只有精心设计和构建，才能创造出既美观又实用的组件。加油！

  ▶ 播放视频 查看详情
• 3

  Making an HTML Table Responsive

  第 313 页

  今天我们来聊聊如何在Salesforce中使用Lightning设计系统来制作一个响应式的HTML表格。这个表格不仅看起来很棒，而且功能也很强大。 首先，我们要使用Lightning设计系统。这是一个由Salesforce提供的框架，它帮助我们快速构建符合Salesforce风格的界面。使用这个系统，我们可以确保我们的表格在不同的设备上都能很好地显示。 接下来，我们要实现一个数据表。这个表格有一个很酷的功能，就是它是响应式的。这意味着，当你在不同的设备上查看这个表格时，它会自动调整布局。比如，当你在手机上查看时，表格的单元格会堆叠起来，这样即使在小的屏幕上，数据也能清晰可见。 此外，我们还可以指定某些字段在移动设备上是否应该隐藏。比如，在这个例子中，我们可能不想在手机上显示标题字段，因为屏幕空间有限。通过简单的设置，我们就可以控制哪些字段在移动设备上显示，哪些不显示。 总之，通过使用Lightning设计系统，我们可以轻松创建一个既美观又实用的响应式表格，确保用户在任何设备上都能有良好的体验。这就是我们今天要讲的内容，希望你们能从中受益！

  ▶ 播放视频 查看详情
• 4

  Using slds-max-medium-table_stacked

  第 314 页

  让我们来聊聊这个名为`slds-max-medium-table_stacked`的类，以及它如何在移动设备上改变表格的显示方式。 首先，想象一下你有一个表格，里面有很多行和列的数据。在电脑屏幕上，这个表格看起来很正常，每一行都整齐地排列着。但是，当你用手机查看这个表格时，屏幕就变得很小，表格的列可能会挤在一起，变得难以阅读。 这时候，`slds-max-medium-table_stacked`就派上用场了。这个类的作用是，当屏幕宽度小于某个特定尺寸（通常是中等大小的屏幕，比如平板或手机）时，它会自动把表格的行转换成堆叠的形式。也就是说，每一行的数据会从上到下垂直排列，而不是从左到右水平排列。这样，即使在较小的屏幕上，用户也能清楚地看到每一行的数据，而不会因为屏幕太小而感到困惑。 你可以在SLDS的存档页面上找到更多关于这个类的详细信息，那里有更深入的解释和示例。而在当前的SLDS文档中，这个类只是被简短地提到了一下，所以如果你想了解更多，可能需要去存档页面看看。 总的来说，`slds-max-medium-table_stacked`是一个非常实用的类，它帮助我们在不同的设备上都能很好地展示表格数据，确保用户体验的一致性。希望这个解释对你有帮助！

  ▶ 播放视频 查看详情
• 5

  Applying a Media Query for Hidden CSS

  第 315 页

  让我们来聊聊如何在Salesforce中使用CSS媒体查询来隐藏某些内容，特别是在移动设备上。 首先，媒体查询是CSS的一个非常强大的功能。它允许我们根据不同的条件，比如屏幕的宽度，来应用不同的样式。这在我们想要让网页在不同设备上都能良好显示时特别有用。 假设我们有一个数据表，我们希望在屏幕宽度小于768像素时隐藏某些列。为了实现这一点，我们可以在CSS中定义一个名为`hiddenOnMobile`的类。在这个类中，我们使用媒体查询来检查屏幕宽度是否小于768像素。如果是，我们就应用`display: none;`这个样式，这样这些列在移动设备上就不会显示了。 接下来，当开发人员在使用这个响应式数据表时，他们需要提供一个列配置。在这个配置中，他们可以指定哪些列需要在移动设备上隐藏。例如，如果我们有两列，分别是“名称”和“标题”，我们可以在“标题”列上启用`hiddenOnMobile`功能。 最后，在`responsiveDatatable.js`这个JavaScript文件中，我们会编写一些逻辑来检查这些列配置。如果发现某列被配置为在移动设备上隐藏，我们就会自动给这列添加`hiddenOnMobile`这个CSS类。这样，当用户在移动设备上查看数据表时，这些列就会自动隐藏，从而提供更好的用户体验。 这就是如何在Salesforce中使用CSS媒体查询和JavaScript来创建响应式数据表的基本方法。希望这能帮助你理解这个过程！

  ▶ 播放视频 查看详情
• 6

  Using Public Getters/Setters

  第 316 页

  让我们来聊聊Salesforce中的Public Getters和Setters，以及它们如何在Lightning Web Components (LWC) 中使用。 首先，Getters和Setters是JavaScript中的一种特殊方法，它们允许你控制如何读取和修改对象的属性。在Salesforce的LWC中，这些方法特别有用，因为它们可以帮助你管理组件的数据流。 想象一下，你有一个数据表，里面的数据是以一维数组的形式存在的。但是，为了在页面上显示这些数据，你可能需要将它们转换成更适合嵌套循环的格式。这时候，你就可以使用一个叫做`reformatmable`的函数来完成这个任务。 在这个函数中，我们会使用公共的Setter来确保数据在被设置之前已经被重新格式化。这意味着，无论何时数据被传入，它都会自动转换成我们需要的格式。 在LWC中，如果你使用`@api`装饰器来标记一个Getter或Setter，那么这个Getter或Setter就会自动变成公共的。这意味着它们可以被组件外部的代码访问和修改。通常，最佳实践是只注释Getter，因为这样可以保持Setter的私有性，从而更好地控制数据的修改。 如果你想要更深入地了解这个概念，可以访问Salesforce的官方文档，那里有更详细的解释和示例代码。此外，GitHub上也有一个叫做`lwc-recipes`的项目，里面有很多实用的代码示例，包括如何使用Public Getters和Setters。 希望这个解释能帮助你理解Public Getters和Setters在Salesforce LWC中的应用。如果你有任何问题，随时欢迎提问！

  ▶ 播放视频 查看详情
• 7

  Reformatting Data for the Grid

  第 317 页

  让我们来聊聊这个数据重新格式化的过程。想象一下，你有一堆杂乱无章的数据，就像一堆散落的拼图碎片。我们的目标是把这些碎片按照一定的规则拼成一个完整的图案，也就是一个整齐的二维表格。 首先，我们有一个原始的数据网格，里面包含了一些信息，比如ID、姓名、书名和电子邮件。这些信息就像拼图碎片，我们需要把它们重新排列组合。 接下来，我们有一个列配置（ColumnConfig），它就像是一个拼图的模板，告诉我们每一块拼图应该放在哪里。比如，第一列是“名称”，第二列是“标题”，第三列是“电子邮件”。这个模板还告诉我们哪些列在手机上应该隐藏，哪些列是电子邮件类型。 现在，我们要做的就是按照这个模板，把原始数据重新排列。我们把“姓名”放在第一列，“标题”放在第二列，“电子邮件”放在第三列。这样，每一行数据就变成了一个整齐的数组，按照列配置的顺序排列。 最后，我们只需要展示一行数据，因为空间有限。虽然我们删除了电话号码，但这个例子已经足够让你理解数据是如何被重新格式化成一个整齐的二维表格的。 所以，简单来说，我们就是把杂乱的数据按照一个模板重新排列，变成一个整齐的表格。这个过程就像拼图一样，把每一块放在正确的位置，最终形成一个完整的图案。

  ▶ 播放视频 查看详情
• 8

  Implementing Data Pagination

  第 318 页

  同学们，今天我们来聊聊如何在Salesforce中实现数据翻页。想象一下，你有一个包含1000条记录的列表，但你不想一次性加载所有数据，因为这可能会导致性能问题。相反，你希望每次只加载一部分数据，比如50条，这样页面加载更快，用户体验也更好。 首先，我们需要理解几个关键概念： 1. ，限制（Limit），：这是指在一次请求中你想要获取的记录数。比如，你设置限制为50，那么每次请求只会返回50条记录。 2. ，偏移（Offset），：这是指你从哪一条记录开始获取数据。比如，如果你设置偏移为200，那么请求会从第200条记录开始，返回接下来的50条记录（假设限制为50）。 举个例子，如果你有1000条记录，设置限制为50，偏移为200，那么你将会获取到第200到第249条记录。 接下来，我们来看看如何在代码中实现这一点。假设我们有一个Apex控制器，我们需要更新它以接受限制和偏移参数。然后，在Lightning Web Component (LWC) 中，我们会维护当前的页码和每页的大小。 ```apex public with sharing class PaginationExample { @AuraEnabled public static List getParticipants(Integer numRecords, Integer offset) { return [ SELECT Student__r.Email, Student__r.Name, Student__r.Account.Name, Course_Delivery__r.Start_Date__c, Course_Delivery__r.Course__r.Name FROM Course_Participant__c ORDER BY Student__r.Name LIMIT :numRecords OFFSET :offset ]; } } ``` 在LWC中，我们可以这样调用这个Apex方法： ```javascript import { LightningElement, track } from 'lwc'; import getParticipants from '@salesforce/apex/PaginationExample.getParticipants'; export default class PaginationExample extends LightningElement { @track data = []; currentPage = 1; pageSize = 50; connectedCallback() { this.loadData(); } loadData() { const offset = (this.currentPage - 1) * this.pageSize; getParticipants({ numRecords: this.pageSize, offset: offset }) .then(result => { this.data = result; }) .catch(error => { console.error('Error loading data', error); }); } handleNext() { this.currentPage++; this.loadData(); } handlePrevious() { if (this.currentPage > 1) { this.currentPage--; this.loadData(); } } } ``` 在这个例子中，我们有一个`currentPage`变量来跟踪当前页码，以及一个`pageSize`变量来设置每页的记录数。当用户点击“下一页”或“上一页”按钮时，我们会更新`currentPage`并重新加载数据。 这样，我们就可以在大型数据集中实现翻页功能，提高应用的性能和用户体验。希望这个解释对你们有帮助！如果有任何问题，随时问我。

  ▶ 播放视频 查看详情
• 9

  Wide View

  第 319 页

  同学们，今天我们来学习如何创建一个响应式数据表，并且把它集成到我们的学生浏览器中。这个练习听起来有点复杂，但其实跟着步骤走，你会发现它并不难。 首先，我们会创建一个响应式数据表。这个数据表能够根据屏幕的大小自动调整布局，这样无论是在电脑上还是在手机上查看，都能有很好的用户体验。大部分的代码我都会提供给你们，你们只需要按照指示做一些小的更新，添加一些新的功能就可以了。 接下来，我们要在学生浏览器中添加一个新的选项卡，名字叫做“网格”。这个“网格”选项卡将会是我们展示响应式数据表的地方。我们会把之前创建好的响应式数据表部署到这个新的“网格”选项卡中。而且，这个数据表会接收到和之前图库选项卡中相同的数据。这样，无论用户是在图库选项卡还是网格选项卡查看，他们看到的数据都是一致的。 最后，我们还要做一个小功能，就是监听数据表中的双击事件。当用户在数据表中双击某一行时，我们会使用导航服务来打开一个联系人编辑模式的窗口。这样，用户就可以直接编辑他们双击的那个联系人的信息了。 好了，这就是我们今天要做的所有事情。听起来是不是很有趣？让我们开始吧！

  ▶ 播放视频 查看详情
• 10

  Unit 5: Building Advanced Components - 321

  第 321 页

  同学们，今天我们来聊聊Salesforce中的高级组件构建。想象一下，你正在搭建一个乐高模型，每个小零件都有其特定的功能和位置。在Salesforce中，构建高级组件也是类似的，我们需要将不同的功能和元素巧妙地组合在一起。 首先，我们来看，创建自定义、响应式的数据表，。这就像是在你的乐高模型中添加一个动态展示区，可以根据用户的操作实时更新数据。在Salesforce中，我们可以使用Lightning Web Components (LWC) 来创建这样的数据表，确保它在不同设备上都能良好显示。 接下来是，定义组件上的公共方法，。这就像是给你的乐高模型添加一些可以公开使用的按钮或开关，其他开发者可以通过这些方法来控制或与你的组件交互。在LWC中，你可以通过定义公共的JavaScript方法来暴露组件的功能。 然后是，服务组件和Toast收件箱，。服务组件就像是乐高模型中的电源模块，提供必要的能量和功能。Toast收件箱则像是模型中的通知系统，当有重要信息时，它会弹出提示。在Salesforce中，服务组件可以用来处理数据逻辑，而Toast消息则用于向用户显示即时反馈。 ，插槽和模式按钮，是组件中的灵活部分，就像乐高模型中的可替换部件。插槽允许你在组件中插入其他内容或组件，而模式按钮则可以用来切换组件的不同视图或功能。 ，定位，在组件构建中也非常重要，它决定了组件在页面上的位置和布局。就像在乐高模型中，你需要确保每个部件都放在正确的位置，以确保整个模型的稳定性和美观性。 最后，，渲染器和第三方JS，。渲染器就像是乐高模型的装饰工具，帮助你更好地展示模型。在Salesforce中，渲染器可以用来优化组件的显示效果。而第三方JS库则像是额外的乐高套装，提供了更多的功能和可能性，让你可以更灵活地构建和扩展你的组件。 通过这些步骤，你可以构建出既强大又灵活的Salesforce组件，就像搭建出一个既稳固又美观的乐高模型一样。希望这些内容能帮助你们更好地理解和应用Salesforce中的高级组件构建技巧。

  ▶ 播放视频 查看详情
• 11

  Defining Public Methods on Components

  第 322 页

  让我们来聊聊如何在Salesforce的Lightning Web Components (LWC) 中定义和使用公共方法。首先，我们需要理解什么是公共方法。简单来说，公共方法就是可以被其他组件调用的方法。在LWC中，我们可以使用`@api`装饰器来标记一个方法为公共的。 假设我们有一个组件，它包含一个数据表格和一个学生图库。我们希望当用户选择一个学生时，这两个视图都能同步更新。为了实现这一点，我们需要在两个子组件中定义公共方法。 首先，在`StudentTiles`组件中，我们定义一个名为`setSelectedStudent`的公共方法。这个方法会接收一个`StudentID`参数，并更新选中的学生。这样，当用户选择一个学生时，图库中的边框会相应地更新。 ```javascript @api setSelectedStudent(studentId) { // 更新选中的学生ID this.selectedStudentId = studentId; // 这里可以添加更新边框的逻辑 } ``` 接下来，在`DataTable`组件中，我们定义一个名为`setSelectedRecord`的公共方法。这个方法会接收一个`RecordID`参数，并找到对应的表格行，然后高亮显示它。 ```javascript @api setSelectedRecord(recordId) { const tableRows = this.template.querySelectorAll('tr'); tableRows.forEach(row => { if (row.getAttribute('data-pk') === recordId) { row.classList.add('selected'); // 假设我们有一个CSS类来高亮显示 } else { row.classList.remove('selected'); } }); } ``` 最后，在父组件中，我们可以调用这两个公共方法来同步更新视图。例如，当用户选择一个学生时，我们可以这样调用： ```javascript updateSelectedStudent(studentId) { const grid = this.template.querySelector('c-data-grid-table'); const gallery = this.template.querySelector('c-student-tiles'); if (gallery) { gallery.setSelectedStudent(studentId); } if (grid) { grid.setSelectedRecord(studentId); } } ``` 这样，无论用户是在图库还是表格中选择学生，两个视图都会同步更新，保持一致性。希望这个解释对你有帮助！如果有任何问题，随时问我。

  ▶ 播放视频 查看详情
• 12

  Exercise 5-2: Using Custom Events and Public Methods

  第 323 页

  让我们来聊聊这个练习5-2。在这个练习中，我们要让图库视图和网格视图保持同步。想象一下，你在一个页面上有两个不同的视图来展示学生信息：一个是图库视图，另一个是网格视图。你希望当你在一个视图中选择一个学生时，另一个视图也能自动更新，显示同一个学生的信息。 首先，当你点击图库视图中的一个学生卡片（StudentTile）时，StudentBrowser组件会调用网格视图上的一个公共方法，叫做setSelectedRecord。这个方法的作用是告诉网格视图：“嘿，用户刚刚选择了这个学生，你也应该选中他。” 反过来，当你在网格视图中点击一行时，StudentBrowser组件会调用图库视图中的一个公共方法，叫做setSelectedStudent。这个方法的作用是告诉图库视图：“用户刚刚在网格中选择了这个学生，你也应该选中他。” 在这两种情况下，我们使用了一个叫做pubSub的机制来更新StudentDetail组件，确保它显示的是当前选中的学生信息。 不过，这里有一个小问题，叫做“延迟实例化”。简单来说，就是网格视图的内容在你点击网格选项卡之前还没有被创建出来。所以，在你点击网格选项卡之前，你不能对网格视图调用任何公共方法。这是一个限制，我们需要想办法解决它。 在练习的最后，我们会讨论如何更新架构，使得即使有延迟实例化的情况，两个视图也能保持同步，不管你先点击哪个选项卡。 一种可能的解决方案是，让StudentBrowser组件保留当前选中的学生ID的副本，并把这个ID作为属性传递给图库视图和网格视图。对于图库视图，你可以直接传入选中的学生ID，而不需要调用任何API方法来改变它。对于网格视图，你可以传递一个新的属性，叫做Selected-pk-val，然后在renderedCallback()方法中使用这个属性来高亮显示当前选中的行。 renderedCallback()方法的作用是在组件渲染完成后执行一些操作。在这个方法中，我们首先检查组件是否已经渲染过一次。如果是，就直接返回。如果不是，我们就设置一个标志位，表示组件已经渲染过一次，然后调用setSelectedRecord方法，传入初始的选中学生ID。 这样，无论你先点击哪个选项卡，两个视图都能保持同步，显示同一个选中的学生信息。 希望这个解释能帮助你理解这个练习的关键点。如果你有任何问题，随时问我！

  ▶ 播放视频 查看详情
• 13

  Unit 5: Building Advanced Components - 325

  第 325 页

  同学们，今天我们来聊聊Salesforce中的高级组件构建。想象一下，你正在搭建一个乐高模型，每个小部件都需要精确地放置和连接，以确保整个模型既美观又实用。在Salesforce中，构建高级组件也是类似的道理。 首先，我们来看看如何创建自定义、响应式的数据表。这就像是在你的乐高模型中添加一个可以自动调整大小的展示架。你需要使用Lightning Web Components (LWC)来创建这些数据表，确保它们能够根据屏幕大小自动调整，提供最佳的用户体验。 接下来，我们要定义组件上的公共方法。这就像是为你的乐高模型添加一些可以互动的按钮或开关。这些公共方法允许其他组件或外部系统与你的组件进行交互，比如触发数据更新或执行特定的操作。 然后，我们来看看服务组件和Toast收件箱。服务组件就像是乐高模型中的电源模块，为整个模型提供动力。而Toast收件箱则像是模型中的一个小信箱，用于接收和显示来自系统的通知或消息。 插槽和模式按钮是另一个重要的概念。插槽就像是乐高模型中的连接点，允许你插入其他组件或模块。模式按钮则像是模型中的开关，可以改变组件的显示模式或行为。 定位在组件构建中也非常关键。你需要确保每个组件都放置在正确的位置，就像在乐高模型中确保每个部件都准确无误地放置一样。这涉及到CSS和HTML的布局技巧，以确保组件在不同设备和屏幕尺寸上都能正确显示。 最后，我们来看看渲染器和第三方JS。渲染器就像是乐高模型中的装饰品，用于增强组件的视觉效果。而第三方JS库则像是模型中的额外工具，可以帮助你实现更复杂的功能或效果。 总之，构建高级组件就像是在搭建一个复杂的乐高模型，需要精确的规划、设计和实施。通过掌握这些技巧，你将能够创建出既美观又实用的Salesforce组件，为用户提供卓越的体验。希望这些内容对你们有所帮助，继续加油！

  ▶ 播放视频 查看详情
• 14

  What is a Service Component?

  第 326 页

  让我们来聊聊服务组件。想象一下，你在开发一个大型应用，有很多不同的组件。这些组件可能需要共享一些相同的功能或数据。这时候，服务组件就派上用场了。 服务组件其实就是一个没有用户界面（UI）的组件。它主要是用来存放一些可以被其他组件共享的代码。这样，你就不用在每个组件里重复写相同的代码了，既节省时间，又减少了出错的机会。 服务组件是用ES6模块语法创建的。ES6是JavaScript的一个版本，它提供了一些新的语法特性，让代码更简洁、更易读。在服务组件中，你可以选择使用默认导出或者命名导出来共享你的代码。默认导出就是你只能导出一个东西，而命名导出则可以导出多个东西。 举个例子，你可能已经用过一种叫做pubSub的服务组件。它用来在不同的组件之间传递消息。还有，如果你注意到在多个组件中都有一个叫做_getDisplayValue的功能，那么这个功能就很适合放在服务组件里。比如，在studentDetail.js、deliveryDetailMap.js和courseAttendee.js这几个文件中，都有这个功能。 总之，服务组件是一个非常有用的工具，可以帮助你在不同的组件之间共享代码，让你的应用更加模块化和易于维护。如果你对这个话题感兴趣，可以查看Salesforce开发者博客上的相关文章，那里有更多详细的信息和例子。

  ▶ 播放视频 查看详情
• 15

  Service Components – Default Export

  第 327 页

  让我们来聊聊服务组件中的默认输出。在ES6模块中，我们可以用两种方式来输出功能。今天我们先讲第一种，叫做默认输出。 默认输出允许一个模块输出一个单独的函数或类。这意味着，当你从另一个文件导入这个模块时，你可以给它起任何你喜欢的名字。这给了你很大的灵活性。 举个例子，假设我们有一个服务组件，我们把它实例化为`const myUtils`。在这个例子中，`myUtils`包含了两个函数：`alertMessage`和`logMessage`。这两个函数不是静态的，也就是说，它们需要实例化后才能使用。 当我们定义服务组件时，我们通常会声明一些静态方法。静态方法是不需要实例化就可以直接调用的方法。但在我们这个例子中，`alertMessage`和`logMessage`不是静态的，所以我们需要先创建一个`myUtils`的实例，然后才能使用这些函数。 简单来说，默认输出让我们可以灵活地导出一个主要的函数或类，并且在导入时可以根据需要给它起名字。而实例化则是为了使用那些非静态的方法或函数。希望这个解释对你有帮助！

  ▶ 播放视频 查看详情
• 16

  Service Components – Named Export

  第 328 页

  让我们来聊聊Salesforce中的服务组件，特别是关于命名出口模块的部分。这个功能其实挺酷的，它允许你在一个模块中定义一些函数或变量，然后通过一个特定的名字把这些功能“出口”出去。这样，其他组件就可以通过这个名字来导入并使用这些功能了。 想象一下，你有一个工具箱，里面装满了各种工具。每个工具都有它自己的名字和用途。当你需要用到某个工具时，你只需要喊出它的名字，然后它就会出现在你手中。命名出口模块就像是这个工具箱，它让你能够把需要的工具（也就是函数或变量）准确地拿出来使用。 在Salesforce的Lightning Web Components中，这种机制非常有用。你可以创建一个服务组件，里面包含一些常用的功能，比如数据处理、用户验证等。然后，通过命名出口模块，你可以把这些功能“打包”并命名，供其他组件调用。这样，不仅代码更加模块化，也更容易维护和复用。 所以，下次当你需要在多个组件中复用某些功能时，不妨考虑使用命名出口模块来简化你的工作流程。这样，你的代码不仅会更加整洁，也会更加高效。希望这个解释能帮助你更好地理解和使用Salesforce中的服务组件！

  ▶ 播放视频 查看详情
• 17

  Examples of Default and Named Exports

  第 329 页

  让我们来聊聊Salesforce中的默认和命名出口（Exports）的概念，以及它们在Apex和Lightning Web Components (LWC) 中的应用。 首先，想象一下你有一个工具箱，里面有很多工具。默认出口就像是你最常用的那个工具，每次你打开工具箱，你首先看到的就是它。在编程中，默认出口意味着当你从一个模块导入东西时，如果你不特别指定要导入什么，系统会自动给你这个默认的东西。 在Apex中，当你写一个方法，比如`getStudents`，这个方法可以被看作是默认出口。当你在LWC中导入这个方法时，你可以这样写： ```javascript import getStudents from '@salesforce/apex/StudentBrowse.getStudents'; ``` 这里，`getStudents`就是默认出口，你不需要特别说明，系统就知道你要导入的是这个方法。 接下来，命名出口就像是你工具箱里的其他工具，每个工具都有自己的名字。当你需要某个特定的工具时，你会直接叫它的名字来使用它。在编程中，命名出口允许你从一个模块中导入多个特定的东西。 在LWC中，当你使用`lightning/uiRecordApi`模块时，你可能会需要导入多个方法，比如`getRecord`, `getFieldValue`, 和 `getFieldDisplayValue`。这时，你可以这样写： ```javascript import { getRecord, getFieldValue, getFieldDisplayValue } from 'lightning/uiRecordApi'; ``` 这里，`getRecord`, `getFieldValue`, 和 `getFieldDisplayValue`都是命名出口。你明确地列出了你需要的方法，这样系统就知道你要导入的是这些特定的方法。 总结一下，默认出口是你最常用的那个工具，而命名出口是你需要特别指定的工具。在Salesforce的Apex和LWC中，这两种出口方式帮助你更有效地管理和使用你的代码工具。希望这个解释能帮助你更好地理解默认和命名出口的概念！

  ▶ 播放视频 查看详情
• 18

  What is a Toast Message?

  第 330 页

  今天我们来聊聊Salesforce中的“祝酒词”，也就是Toast消息。你可以把它想象成一种非常友好的提示方式，就像在宴会上举杯祝酒一样，既不会打扰到大家，又能传递信息。 Toast消息是从屏幕顶部弹出的一个小提示，它不会打断你正在进行的操作，也就是说，你的脚本会继续运行，不会因为Toast消息而停下来。这种设计非常贴心，因为它不会干扰用户的工作流程。 Toast消息有几种不同的显示模式，我们可以根据需要进行配置： 1. ，可禁用模式（默认），：这是最常见的模式。Toast消息会显示3秒钟，或者直到你点击它为止，哪个先发生就按哪个来。也就是说，如果你不点击它，3秒后它就会自动消失。 2. ，纠缠模式，：这种模式下，Toast消息会一直显示，直到你点击它为止。它不会自动消失，所以如果你不主动点击，它就会一直留在屏幕上。 3. ，粘稠模式，：这种模式下，Toast消息会显示3秒钟，然后自动消失。无论你是否点击它，3秒后它都会消失。 为什么要用Toast消息呢？因为传统的JavaScript alert()会弹出一个对话框，强制用户点击“确定”才能继续操作，这会让用户体验变得很差。而Toast消息则更加友好，它不会打断用户的操作，只是轻轻地提醒一下，用户可以继续工作，不会被强制打断。 所以，Toast消息是一种非常优雅的方式来传递信息，既不会打扰用户，又能有效地传达重要内容。希望这个解释能帮助你更好地理解Toast消息的作用和使用场景。

  ▶ 播放视频 查看详情
• 19

  Implementing Toasts using a Service Component

  第 331 页

  让我们来聊聊如何在Salesforce的Lightning Web组件中使用Toasts来给用户提供反馈。Toasts是一种非常友好的方式，可以在用户完成某个操作后，比如创建了一条记录，给他们一个即时的反馈，告诉他们操作成功了或者需要注意什么。 首先，我们需要从Lightning平台导入一个叫做`ShowToastEvent`的东西。这个`ShowToastEvent`是一个事件，我们可以用它来创建并显示Toasts。导入的代码看起来像这样： ```javascript import { ShowToastEvent } from 'lightning/platformShowToastEvent'; ``` 接下来，我们需要创建一个`ShowToastEvent`实例，并给它一些参数，比如消息的内容、类型（成功、警告、错误等）以及持续时间。这些参数会决定Toast显示什么信息，以及它看起来是什么样子的。 创建好这个事件后，我们就可以调用`dispatchEvent`方法来触发它，这样Toast就会显示在用户的界面上。 现在，假设我们有一个按钮，用户点击这个按钮后，我们想要显示一个Toast。我们可以在按钮的点击事件处理函数中调用一个服务组件的静态方法，这个静态方法会负责创建并触发`ShowToastEvent`。 这个服务组件的静态方法的好处是，我们不需要创建这个组件的实例就可以直接使用它。这样，我们的代码会更加简洁和高效。 在下一部分，我们会更详细地看看这个服务组件的静态方法是如何定义的，以及我们如何在按钮的点击事件中使用它来显示Toast。这样，你就可以在你的Salesforce应用中轻松地实现这个功能了。

  ▶ 播放视频 查看详情
• 20

  Showing a Toast by Calling the Service Component

  第 332 页

  让我们一步一步来理解这个练习。首先，我们要创建一个名为“utils”的服务组件。这个组件就像是一个工具箱，里面装了很多有用的工具，我们可以在需要的时候拿出来用。 接下来，我们要从“layoutManager”这个模块中导入“Utils”组件。这就像是去仓库里找到我们需要的工具箱，然后把它搬到我们的工作台上。 然后，我们要使用“Utils”组件中的“showToast”功能。这个功能就像是一个小喇叭，可以在屏幕上弹出一个消息，告诉用户一些信息。在这个练习中，我们要在“linkedCallback”这个事件发生时，调用“showToast”来显示一条欢迎信息。 最后，这个代码示例是一个简化版，它展示了如何在“linkedCallback”中调用“showToast”功能。这就像是一个小演示，告诉我们如何在实际的项目中使用这些工具。 希望这个解释能帮助你更好地理解这个练习。如果你有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 21

  layout-manager custom component

  第 333 页

  同学们，今天我们来聊聊Salesforce中的布局经理和自定义组件。想象一下，你正在设计一个Salesforce页面，你想要在用户登录时显示一个欢迎消息。这时候，布局经理和自定义组件就派上用场了。 首先，我们创建一个名为`utils`的服务组件。这个组件就像是一个工具箱，里面装满了各种实用的小工具。在这个工具箱里，我们放了一个叫做`showToast`的静态方法。这个方法的作用很简单，就是弹出一个提示框，显示我们想要的信息。 接下来，我们在布局经理的`linkedCallback`方法中调用这个`showToast`方法。`linkedCallback`就像是布局经理的一个小助手，当页面加载完成时，它会自动执行一些任务。在这里，我们让它调用`Utils.showToast()`，这样当用户登录时，就会看到一个温馨的欢迎消息。 简单来说，我们通过创建一个服务组件`utils`，并在布局经理中调用它的`showToast`方法，实现了在用户登录时弹出欢迎消息的功能。这样，用户一登录就能感受到我们的热情欢迎，是不是很简单呢？

  ▶ 播放视频 查看详情
• 22

  Create a service component and define a function to show toast notifications.

  第 334 页

  同学们，今天我们来学习如何在Salesforce中创建一个服务组件，并且定义一个函数来显示吐司通知。这个练习的目的是让我们熟悉如何在Lightning组件中使用吐司通知来给用户提供反馈。 首先，我们需要创建一个服务组件。这个组件将负责处理显示吐司通知的逻辑。我们可以把它想象成一个专门用来发送消息的小助手。 接下来，我们要定义一个函数，这个函数的作用是当用户点击某个按钮时，显示一个吐司通知。吐司通知就像是一个小弹窗，它会短暂地出现在屏幕的某个角落，告诉用户一些重要的信息。 最后，我们还要确保当组件启动时，这个吐司通知能够自动显示出来。这样，用户一进入页面，就能立刻看到我们想要传达的信息。 整个过程大概需要20分钟，我们会一步步来，确保每个步骤都清晰易懂。准备好了吗？让我们开始吧！

  ▶ 播放视频 查看详情
• 23

  Unit 5: Building Advanced Components - 335

  第 335 页

  同学们，今天我们来聊聊Salesforce中的高级组件构建。想象一下，你正在搭建一个乐高模型，每个小部件都需要精确地放置，以确保整个模型既美观又实用。在Salesforce中，构建高级组件也是类似的。 首先，我们来看如何创建自定义、响应式的数据表。这就像是在你的乐高模型中添加一个可以自动调整大小的展示柜。你可以使用Lightning Web Components (LWC)来创建这样的数据表，确保它能在不同的设备上都能完美展示。 接下来，定义组件上的公共方法。这就像是给你的乐高模型添加一些可以互动的按钮，比如按下按钮，展示柜的灯光就会亮起。在Salesforce中，你可以通过定义公共方法，让其他组件或页面能够调用这些方法，实现特定的功能。 然后，我们谈谈服务组件和Toast收件箱。服务组件就像是乐高模型中的电源系统，为整个模型提供动力。而Toast收件箱则像是模型中的小喇叭，可以发出提示音，告诉用户有新的消息或状态更新。 插槽和模式按钮是另一个重要的话题。插槽就像是乐高模型中的连接点，允许你插入不同的部件。在Salesforce中，插槽允许你在组件中插入其他内容。模式按钮则像是模型中的开关，可以改变模型的展示模式，比如从日间模式切换到夜间模式。 定位和渲染器也是构建高级组件时需要考虑的。定位就像是确定乐高模型中每个部件的位置，确保它们都在正确的地方。渲染器则像是模型中的装饰，确保每个部件看起来都符合整体风格。 最后，我们来看看第三方JS。这就像是给你的乐高模型添加一些外部的小配件，比如LED灯或者小风扇。在Salesforce中，你可以使用第三方JavaScript库来增强你的组件功能，比如添加动画效果或者更复杂的数据处理。 好了，今天的课程就到这里。希望你们能像搭建乐高模型一样，享受在Salesforce中构建高级组件的过程。下次课我们再见！

  ▶ 播放视频 查看详情
• 24

  Slots

  第 336 页

  让我们来深入理解一下插槽（slot）的概念。想象一下，插槽就像是你家里的一个预留空间，比如一个空的书架。你可以在这个书架上放任何你喜欢的书，书架本身不会限制你放什么书，它只是提供了一个地方让你放书。 在Salesforce的Lightning Web Components（LWC）中，插槽的工作原理非常相似。它允许你在一个组件中预留一个空间，然后在使用这个组件的时候，你可以在这个空间里放入任何你想要的HTML内容或者其他的组件。 举个例子，我们有一个`lightning-card`组件，它有一个插槽叫做`actions`。这个插槽是用来放一些操作按钮的，比如“前往记录”按钮。在代码中，我们是这样写的： ```html <div> </div> [更多内容] ``` 在这个例子中，`<div>`就是我们的“书架”，而``就是我们要放的“书”。通过指定`slot=&quot;actions&quot;`，我们告诉`lightning-card`组件，这个按钮应该放在`actions`这个插槽里。 如果我们去掉`slot=&quot;actions&quot;`，那么这个按钮就不会出现在我们预留的“书架”上，而是会出现在其他地方，可能就不是我们想要的效果了。 所以，插槽是一个非常强大的工具，它让我们可以灵活地在组件中插入内容，而不需要改变组件本身的代码。这样，我们就可以创建出更加动态和可复用的组件了。希望这个解释能帮助你更好地理解插槽的概念！</div>

  ▶ 播放视频 查看详情
• 25

  Default Slot

  第 337 页

  让我们来聊聊这个“默认插槽”的概念。想象一下，你有一个盒子，这个盒子叫做``。当你在这个盒子的开始标签和结束标签之间放一些东西时，比如文字或者图片，这些东西就会自动出现在盒子的“默认插槽”里。这个“默认插槽”就像是盒子里的一个默认位置，专门用来放你传递进去的内容。 现在，我们来看一个具体的例子。假设我们有一个组件叫“slotWrapper”，它里面又用到了另一个组件叫“slotDemo”。这个“slotDemo”组件里面有一些标签，这些标签的意思是：“当你创建这个组件的输出时，请把别人传递给你的内容放在这里，也就是开始标签和结束标签之间。” 最后，当你运行这个代码时，你会看到底部的渲染输出。这个输出就是“slotDemo”组件把你传递的内容放在了它的默认插槽里，然后显示出来的结果。 简单来说，默认插槽就是一个预定的位置，让你可以轻松地把内容放到组件里面，而不需要做太多复杂的设置。希望这个解释能帮助你更好地理解这个概念！

  ▶ 播放视频 查看详情
• 26

  Named Slot

  第 338 页

  让我们来聊聊Salesforce Lightning组件中的命名槽（Named Slots）。想象一下，你有一个盒子，这个盒子有几个不同的隔间，每个隔间都有特定的用途。在Lightning组件中，这些隔间就是我们所说的“槽”（Slots），它们允许我们在组件中定义特定的区域，其他组件或内容可以插入到这些区域中。 首先，我们来看顶端的代码片段。这里，我们创建了一个组件，并定义了三个槽：一个用于名字（FirstName），一个用于姓氏（LastName），还有一个默认槽。默认槽就像是一个万能槽，如果你没有指定特定的槽，内容就会放在这里。我们还为每个槽设置了默认值，这样即使没有内容传入，组件也不会显得空荡荡的。 接下来是中间的代码片段。这里，我们实例化了刚才创建的组件，并向每个槽传递了具体的内容。比如，我们把“EL”传递给了名字槽，“Toro”传递给了姓氏槽，而默认槽则接收了一个包含“Global Master Instructor”的HTML元素。这样，我们的组件就变得生动起来，每个槽都有了具体的内容。 最后，底部的代码片段展示了最终的渲染结果。你可以看到，所有的内容都按照我们指定的槽位正确地显示了出来。 现在，回到我们的Lightning Card例子。如果我们把Slot=“Actions”改为Slot=“Footer”，那么原本放在“Actions”槽中的按钮就会移动到页脚位置。这就像是在盒子里重新安排隔间的位置，内容会根据槽的名称自动调整到新的位置。 所以，通过改变槽的名称，我们可以灵活地控制内容的显示位置，这在构建复杂的用户界面时非常有用。希望这个解释能帮助你更好地理解命名槽的概念和用法！

  ▶ 播放视频 查看详情
• 27

  Modals

  第 339 页

  同学们，今天我们来聊聊如何在LWC中使用模态框（Modal）。模态框是一种常见的UI组件，通常用于显示重要的信息或者收集用户的输入。在LWC中，我们可以从lwc-recipes这个GitHub仓库中借用现成的modal组件。 这个modal组件设计得非常灵活，它有两个命名的插槽（slot）：一个用于标题，一个用于页脚。此外，还有一个未命名的插槽，用于放置主要内容。这种设计让我们可以轻松地自定义模态框的各个部分。 如果你之前使用过Aura框架，你可能会注意到，在LWC中，我们没有直接等同于Aura的OverlayLibrary的组件。不过，别担心，LWC提供了其他强大的工具和组件来帮助我们实现类似的功能。 所以，通过使用这个modal组件，我们可以快速地在LWC应用中实现一个功能齐全的模态框，而不需要从头开始编写代码。这不仅节省了时间，还能确保我们的应用遵循最佳实践。希望这个解释对你们有帮助，接下来我们可以一起看看如何在代码中实现这个模态框。

  ▶ 播放视频 查看详情
• 28

  Unit 5: Building Advanced Components - 342

  第 342 页

  同学们，今天我们来聊聊Salesforce中的高级组件构建。想象一下，你正在搭建一个乐高模型，每个小部件都需要精确地放置和连接，以确保整个模型既美观又实用。在Salesforce中构建高级组件也是类似的道理。 首先，我们来看如何创建自定义、响应式的数据表。这就像是在你的乐高模型中添加一个动态的显示屏，能够根据不同的数据自动调整显示内容。在Salesforce中，你可以使用Lightning Web Components (LWC) 来创建这样的数据表，确保它既美观又能响应用户的操作。 接下来，我们讨论如何在组件上定义公共方法。这就像是为你的乐高模型添加一个遥控器，让其他人也能控制模型的某些部分。在Salesforce中，你可以通过定义公共方法，让其他组件或页面能够调用这些方法，实现更复杂的交互。 然后，我们来看看服务组件和Toast收件箱。服务组件就像是乐高模型中的电源模块，为整个模型提供动力。而Toast收件箱则像是模型中的一个小喇叭，用来向用户发送通知或消息。在Salesforce中，服务组件可以帮助你管理数据和服务，而Toast收件箱则可以用来显示重要的提示信息。 插槽和模式按钮是接下来要讲的内容。插槽就像是乐高模型中的连接点，允许你插入不同的部件。模式按钮则像是模型中的一个开关，可以改变模型的工作模式。在Salesforce中，插槽允许你在组件中插入其他内容，而模式按钮则可以用来切换组件的不同视图或功能。 定位和渲染器是构建高级组件时不可或缺的部分。定位就像是确定乐高模型中每个部件的位置，确保它们能够正确地组合在一起。渲染器则像是模型中的装饰，让模型看起来更加精美。在Salesforce中，定位和渲染器帮助你确保组件在页面上正确显示，并且外观符合预期。 最后，我们谈谈第三方JS。这就像是在你的乐高模型中使用了一些特殊的部件，这些部件不是乐高原装的，但能让模型更加独特和强大。在Salesforce中，你可以集成第三方JavaScript库来增强组件的功能，比如添加复杂的图表或动画效果。 好了，今天的课程就到这里。希望你们能像搭建乐高模型一样，享受在Salesforce中构建高级组件的过程。下次课我们将深入探讨更多有趣的内容，记得准时来哦！

  ▶ 播放视频 查看详情
• 29

  Localizing Content

  第 343 页

  同学们，今天我们来聊聊如何在Salesforce中实现本地化。本地化，简单来说，就是让你的应用能够适应不同地区的用户，比如支持多种语言、货币和日期格式。这样，无论用户来自哪里，都能感受到贴心的服务。 首先，我们来看看如何定义可以翻译成多种语言的动态标签。这就像是你有一个多语言的标签库，你可以根据用户的语言设置，自动选择对应的标签显示。这样，你的应用就能“说”用户的语言了。 接下来，我们有两个组件可以帮助我们处理日期和数字的显示问题：``和``。这两个组件非常智能，它们可以根据用户的地区设置，自动调整日期和数字的显示格式。比如，美国的日期格式是月/日/年，而欧洲则是日/月/年，这些组件都能自动适应。 在本地化过程中，我们主要需要解决两个问题：一是文本语言的翻译，二是数字、日期和时间的格式。这两个问题看似简单，但处理得当，能让用户体验大大提升。 好了，今天的课程就到这里。希望大家能够理解并掌握这些本地化的技巧，让你的应用更加国际化。下次课我们再见！

  ▶ 播放视频 查看详情
• 30

  User Locale Settings

  第 344 页

  让我们来聊聊Salesforce中的用户区域设置。想象一下，你正在使用Salesforce的Lightning Experience，就像你在使用一个非常智能的助手。这个助手知道你在世界的哪个角落，因此它可以根据你的位置来调整显示信息的方式。 比如说，当你在查看数字或日期时间时，Salesforce会自动根据你的区域设置来展示这些信息。这意味着，如果你在美国，数字可能会显示为“1,000.00”，而在欧洲，同样的数字可能会显示为“1.000,00”。日期也是一样，美国用户可能会看到“MM/DD/YYYY”的格式，而欧洲用户可能会看到“DD/MM/YYYY”。 这些智能的调整是通过两个特殊的组件来实现的：和。它们就像是两个小助手，自动读取你的区域设置，然后根据这个设置来调整显示的内容。 所以，无论你在世界的哪个地方，Salesforce都能确保你看到的信息是最符合你习惯的格式。这不仅让信息更易于理解，也让使用Salesforce变得更加亲切和个性化。这就是Salesforce的智能之处，它总是尽力让每个用户的使用体验都尽可能的舒适和自然。

  ▶ 播放视频 查看详情
• 31

  Custom Labels

  第 345 页

  今天我们来聊聊Salesforce中的自定义标签。想象一下，你正在搭建一个多语言的网站或者应用，你需要让不同语言的用户都能看到他们熟悉的文字。这时候，自定义标签就派上用场了。 自定义标签，简单来说，就是一些可以自定义的文本值。这些文本值可以被翻译成Salesforce支持的任何语言。这意味着，无论你的用户来自哪里，他们都能看到用自己母语显示的文本。 每个自定义标签最多可以包含1000个字符，这对于大多数情况来说已经足够了。而且，每个Salesforce组织最多可以创建5000个这样的标签，所以你可以为你的应用准备大量的文本资源。 设置自定义标签的路径也很简单，你只需要进入设置，然后找到用户界面，再点击自定义标签就可以了。 使用自定义标签的好处是，它允许你在管理界面中控制那些通常需要硬编码在JavaScript或HTML文件中的字符串。这意味着，即使你不是开发人员，你也可以轻松地更改这些文本，而不需要开发人员的帮助。 即使你的网站或应用只使用一种语言，自定义标签也很有用。因为它们可以帮助你更好地组织和管理你的文本资源，使得未来的更新和维护变得更加容易。 所以，下次当你在Salesforce中需要处理多语言支持或者想要更灵活地管理文本时，记得考虑使用自定义标签。它们会让你的工作变得更加轻松和高效。

  ▶ 播放视频 查看详情
• 32

  Translation Workbench

  第 346 页

  让我们来聊聊Salesforce中的翻译工作台。想象一下，你有一个多语言的团队，你需要确保每个人都能理解和使用Salesforce中的标签和术语。这时候，翻译工作台就派上用场了。 首先，你需要启用一个叫做“翻译收件箱”的功能。这就像是打开了一个翻译的开关，让系统知道你需要开始翻译工作了。 接下来，你需要指定一些用户作为翻译员。这些用户就像是你的语言专家，他们负责将标签翻译成你需要的语言。你可以根据团队的需求，选择那些精通特定语言的用户来担任这个角色。 当这些翻译员登录到Salesforce的Lightning Experience界面，并开始编辑自定义标签时，他们会看到一个选项，可以将这些标签翻译成他们被分配的语言。这里要注意的是，这个翻译过程是手动完成的，也就是说，翻译员需要亲自输入翻译内容，而不是由系统自动完成。 所以，虽然翻译工作台提供了一个方便的平台来管理和进行翻译工作，但实际的翻译过程还是需要人工参与的。这样确保了翻译的准确性和质量，让每个团队成员都能在Salesforce中使用他们熟悉的语言。

  ▶ 播放视频 查看详情
• 33

  Creating a Translation

  第 347 页

  今天我们来聊聊如何在Salesforce中创建翻译。想象一下，你有一个团队，团队成员来自世界各地，他们使用不同的语言。为了让每个人都能轻松理解和使用Salesforce，我们可以为自定义标签添加翻译。 首先，假设你已经创建了一个自定义标签，比如“欢迎信息”。现在，当你的团队成员登录到Lightning Experience并编辑这个标签时，他们会看到一个选项，可以将这个标签翻译成他们分配的语言。 举个例子，如果你的团队成员A使用的是法语，那么当他们编辑“欢迎信息”这个标签时，系统会提示他们输入法语的翻译，比如“Message de bienvenue”。这样，当其他使用法语的用户看到这个标签时，就会显示“Message de bienvenue”，而不是英文的“Welcome Message”。 这个过程非常简单，就像你在填写一个多语言的表格一样。你只需要为每个语言输入相应的翻译，Salesforce就会自动根据用户的语言设置显示正确的翻译。 这样，无论你的团队使用什么语言，每个人都能看到他们熟悉的语言版本，大大提高了使用的便利性和效率。希望这个解释对你有帮助！

  ▶ 播放视频 查看详情
• 34

  Programmatically Access Labels

  第 348 页

  让我们来聊聊如何在Salesforce中通过编程方式访问和使用标签。首先，想象一下标签就像是你书桌上的便利贴，上面写着一些重要的信息。在Salesforce中，这些标签是用来存储一些固定的文本信息，比如错误消息、提示信息等。 当你想要在代码中使用这些标签时，首先你需要“导入”它们。这就像是把便利贴从书桌上拿起来，准备使用。导入标签后，你就可以在代码中通过一个变量名来引用它。这个变量名就像是便利贴上的标题，让你一眼就能知道这张便利贴的内容是什么。 举个例子，假设我们有一个标签，上面写着“此功能不可用”。在代码中，我们可能会这样使用它： ```java // 假设我们已经导入了这个标签，并给它起了一个变量名叫做UNAVAILABLE_FEATURE_MESSAGE showModal(UNAVAILABLE_FEATURE_MESSAGE); ``` 在这个例子中，`showModal`是一个函数，用来显示一个模态窗口。我们传递了`UNAVAILABLE_FEATURE_MESSAGE`这个标签作为参数，这样当模态窗口显示时，用户就会看到“此功能不可用”这条信息。 所以，通过这种方式，你可以轻松地在代码中引用和使用标签，让用户看到你预先定义好的信息。这不仅让代码更整洁，也方便了信息的统一管理和更新。希望这个解释对你有帮助！

  ▶ 播放视频 查看详情
• 35

  Using @salesforce/i18n Scoped Module

  第 349 页

  让我们来聊聊如何在Salesforce中使用`@salesforce/i18n`这个模块来处理国际化（i18n）的需求。这个模块特别有用，因为它能帮助我们根据用户的语言和地区设置来显示信息，比如日期、时间、货币等。 在这个例子中，我们主要关注两个用户相关的属性：，当前用户的区域设置，和，当前用户的货币，。这两个属性可以帮助我们根据用户的地理位置和偏好来格式化信息。 首先，我们需要从`@salesforce/i18n`模块中导入这两个属性。你可以这样写： ```javascript import { locale, currency } from &#39;@salesforce/i18n&#39;; ``` 这里，`locale`会告诉我们用户所在的地区，比如是“en-US”（美国英语）还是“fr-FR”（法国法语）。而`currency`则会告诉我们用户偏好的货币类型，比如“USD”（美元）或“EUR”（欧元）。 接下来，我们可以利用这些信息来格式化货币。JavaScript提供了一个非常方便的函数叫做`NumberFormat`，它可以根据我们提供的区域设置和货币类型来格式化数字。 比如，如果我们想把一个数字格式化为用户所在地区的货币格式，可以这样做： ```javascript const formatter = new Intl.NumberFormat(locale, { style: &#39;currency&#39;, currency: currency }); const amount = 1234.56; console.log(formatter.format(amount)); // 输出会根据用户的区域和货币变化 ``` 在这个例子中，`formatter.format(amount)`会根据用户的区域和货币设置，把`1234.56`这个数字格式化为相应的货币格式。如果用户在美国，可能会显示为“$1,234.56”；如果用户在法国，可能会显示为“1 234,56 €”。 这样，无论你的用户在哪里，他们看到的货币格式都会符合他们的习惯，这大大提升了用户体验。 希望这个解释对你有帮助！如果你有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 36

  Localizing Dates in Markup with <lightning-formatted-date-time>

  第 350 页

  让我们来聊聊如何在Salesforce中使用``组件来显示本地化的日期和时间。 首先，``是一个非常有用的组件，它可以帮助我们根据用户所在的地区，自动调整日期和时间的显示格式。这个组件背后使用的是JavaScript的`Intl.DateTimeFormat`对象，它能够根据不同的语言和地区设置，智能地格式化日期和时间。 举个例子，假设我们有一个日期值，比如2023年1月19日。如果我们把这个日期传递给``组件，它会根据用户的区域设置来显示这个日期。 比如，如果用户的区域设置是法语（法国），那么日期可能会显示为“vendredi, 11 janvier 19”，也就是“星期五，1月11日19年”。而如果用户的区域设置是英语（美国），同样的日期可能会显示为“Friday, January 11, 19”，也就是“星期五，1月11日19年”。 你可以看到，虽然日期是相同的，但显示的方式却因为用户所在的地区不同而有所变化。这就是本地化的魅力所在——它让不同地区的用户都能以他们熟悉的方式看到日期和时间。 所以，当你使用``组件时，你不需要担心如何手动调整日期格式，组件会自动帮你处理这些细节，确保每个用户都能看到符合他们习惯的日期显示方式。

  ▶ 播放视频 查看详情
• 37

  <lightning-formatted-number>

  第 351 页

  让我们来聊聊Salesforce中的``这个组件。这个组件非常有用，它可以帮助我们以不同的格式显示数字，比如小数、货币或者百分比。而且，这个格式会根据Salesforce用户的区域设置自动调整。 举个例子，如果你在美国，你可能会看到货币显示为“5000.00美元”，小数点后面有两位数字。这是因为在美国，货币通常是这样显示的。 但是，如果你在法国，同样的数字可能会显示为“5000,00美元”。注意到小数点变成了逗号吗？这是因为在法国，逗号是用来表示小数点的。 所以，这个组件非常智能，它能够根据用户所在的地区自动调整数字的显示方式。这样，无论用户在哪里，他们看到的数字都是他们习惯的格式。 这就是``组件的基本功能。它让数字的显示更加符合用户的习惯，提高了用户体验。希望这个解释对你有帮助！

  ▶ 播放视频 查看详情
• 38

  Exercise 5-5: Localizing Content

  第 352 页

  同学们，今天我们来做一个非常有趣的练习——本地化内容。这个练习的目的是让我们学会如何让Salesforce应用支持多语言，这样无论用户来自哪个国家，都能看到他们熟悉的语言。 首先，我们要创建一个自定义标签。这个标签的内容是“此功能当前不可用”。这个标签的作用是，当某个功能暂时不能用时，我们可以用这个标签来提示用户。 接下来，我们要启用翻译中心。翻译中心是Salesforce提供的一个工具，它可以帮助我们管理和翻译应用中的各种文本。启用翻译中心后，我们就可以开始为我们的自定义标签创建翻译了。 创建翻译的过程很简单。我们只需要在翻译中心找到我们刚才创建的自定义标签，然后为它添加其他语言的翻译。比如，我们可以为这个标签添加西班牙语的翻译。 然后，我们要在我们的代码中使用这个标签。在我们的certifiedStudentList.js文件中，有一个硬编码的字符串，我们要用我们创建的自定义标签来替换它。这样，当用户的语言设置不同时，这个字符串就会自动显示为对应的语言。 最后，我们要测试一下我们的工作。我们可以将用户的语言更改为西班牙语，然后看看我们的标签是否正确地显示为西班牙语的翻译。 好了，这就是我们今天要做的练习。通过这个练习，我们学会了如何让Salesforce应用支持多语言，这对于我们开发全球化的应用非常重要。希望大家都能顺利完成这个练习，如果有任何问题，随时问我。

  ▶ 播放视频 查看详情
• 39

  Define a dynamic label for use in the “Not Available” message.

  第 353 页

  同学们，今天我们来学习如何在Salesforce中定义和使用动态标签，特别是用于显示“不可用”消息的场景。我们还会涉及到如何本地化这些内容，让不同语言的用户都能看到适合他们的信息。 ### 任务概述 我们需要完成以下几个步骤： 1. ，定义一个标签，：创建一个标签来存储“不可用”消息。 2. ，部署标签，：将这个标签部署到你的Salesforce环境中。 3. ，翻译标签，：将这个标签翻译成西班牙语。 4. ，验证翻译，：确保西班牙语用户能看到正确的翻译内容。 ### 步骤详解 #### 1. 定义一个标签 首先，我们需要在Salesforce中创建一个标签。标签是用来存储文本内容的，比如错误消息、提示信息等。 - 进入 ，设置，，然后在快速查找框中输入“自定义标签”。 - 点击 ，新建，，然后填写以下信息： - ，名称，：比如 `UnavailableMessage` - ，值，：比如 “This service is currently unavailable.” - ，描述，：可以写“用于显示服务不可用的消息”。 保存这个标签。 #### 2. 部署标签 接下来，我们需要将这个标签部署到你的Salesforce环境中。如果你是在开发环境中创建的标签，可以通过更改集或手动复制的方式将其部署到生产环境。 - 如果你使用的是更改集，将标签添加到更改集中，然后部署到目标环境。 - 如果是手动复制，确保在生产环境中也创建相同的标签。 #### 3. 翻译标签 现在，我们需要将这个标签翻译成西班牙语。 - 进入 ，设置，，然后在快速查找框中输入“翻译工作台”。 - 选择 ，翻译工作台，，然后选择你要翻译的语言，比如西班牙语。 - 找到你刚刚创建的标签 `UnavailableMessage`，然后在对应的翻译框中输入西班牙语的翻译，比如 “Este servicio no está disponible actualmente.” - 保存翻译。 #### 4. 验证翻译 最后，我们需要验证西班牙语用户是否能看到正确的翻译内容。 - 你可以通过切换用户的语言设置来测试。 - 将你的用户语言设置为西班牙语，然后查看显示的消息是否变成了 “Este servicio no está disponible actualmente.” - 如果显示正确，说明翻译成功了。 ### 总结 通过这个练习，我们学会了如何定义、部署、翻译和验证动态标签。这对于多语言支持的应用程序非常重要，确保不同语言的用户都能获得一致且准确的用户体验。 好了，这就是今天的课程内容。如果有任何问题，随时提问！

  ▶ 播放视频 查看详情
• 40

  Unit 5: Building Advanced Components - 354

  第 354 页

  同学们，今天我们来聊聊Salesforce中的高级组件构建。想象一下，你正在搭建一个乐高模型，每个小部件都是模型的一部分。在Salesforce中，这些“小部件”就是我们的组件。 首先，我们来看看如何创建自定义、响应式的数据表。这就像是在你的乐高模型中添加一个可以自动调整大小的展示柜。你可以通过定义组件上的公共方法来实现这一点。这些方法就像是展示柜的遥控器，让你可以控制数据表的显示和行为。 接下来，我们谈谈服务组件和Toast收件箱。服务组件就像是模型中的电源，为其他部件提供能量。而Toast收件箱则像是模型中的小喇叭，用来播放消息或通知。 插槽和模式按钮是模型中的连接件和开关。插槽允许你将不同的部件连接在一起，而模式按钮则让你可以切换模型的不同模式或功能。 定位在模型中非常重要，它确保每个部件都在正确的位置。在Salesforce中，定位确保你的组件在页面上正确显示。 最后，渲染器和第三方JS就像是模型中的装饰和外部设备。渲染器负责将你的组件以美观的方式展示出来，而第三方JS则可以为你的模型添加额外的功能或效果。 记住，构建高级组件就像搭建乐高模型，需要耐心和创造力。每个部件都有其独特的功能，只有将它们正确地组合在一起，才能创造出既实用又美观的模型。现在，让我们一起动手，开始构建属于你的Salesforce高级组件吧！

  ▶ 播放视频 查看详情
• 41

  RenderedCallback

  第 355 页

  让我们来聊聊Lightning Web Components（LWC）中的一个特别有用的生命周期钩子——`renderedCallback`。 首先，什么是生命周期钩子呢？简单来说，它们是组件在不同阶段自动调用的方法。比如，当组件第一次加载到页面上时，或者当组件的数据发生变化时，这些钩子就会被触发。 `renderedCallback`是LWC独有的一个钩子，它会在每次组件的渲染阶段结束时运行。也就是说，每当组件的内容被更新或重新渲染后，`renderedCallback`就会被调用。 那么，为什么这个钩子特别有用呢？想象一下，你希望在组件第一次渲染时执行一些特定的逻辑，比如初始化某些数据或者设置一些默认值。这时候，`renderedCallback`就派上用场了。 但是，`renderedCallback`会在每次渲染时都运行，而我们可能只希望在第一次渲染时执行这些逻辑。怎么办呢？我们可以使用一个布尔变量来控制。 具体来说，你可以在组件中定义一个布尔变量，比如`hasRendered`，初始值为`false`。然后在`renderedCallback`中检查这个变量的值。如果是`false`，说明这是第一次渲染，你就可以执行你的逻辑，并将`hasRendered`设置为`true`。这样，下次再渲染时，`renderedCallback`就不会再执行这些逻辑了。 举个例子： ```javascript import { LightningElement } from &#39;lwc&#39;; export default class MyComponent extends LightningElement { hasRendered = false; renderedCallback() { if (!this.hasRendered) { // 这里是第一次渲染时要执行的逻辑 console.log(&#39;组件第一次渲染！&#39;); this.hasRendered = true; } } } ``` 在这个例子中，`renderedCallback`会在每次渲染时被调用，但只有在第一次渲染时，`hasRendered`为`false`，所以会执行`console.log`语句，并将`hasRendered`设置为`true`。之后，即使组件再次渲染，`renderedCallback`也不会再执行这段逻辑了。 总结一下，`renderedCallback`是一个非常有用的钩子，特别是在你需要控制某些逻辑只在第一次渲染时执行的情况下。通过使用一个布尔变量，你可以轻松地实现这一点。 如果你想了解更多细节，可以访问Salesforce的官方文档，链接我已经放在这里了。 希望这个解释对你有帮助！如果有任何问题，随时问我哦。

  ▶ 播放视频 查看详情
• 42

  Using a Static Resource as JS with loadScript

  第 356 页

  今天我们来聊聊如何在Salesforce的Lightning Web组件中使用静态资源来加载JavaScript。这个过程其实很简单，但有几个关键步骤我们需要掌握。 首先，我们需要创建一个静态资源。静态资源可以是任何类型的文件，比如图片、CSS文件或者JavaScript文件。在我们的例子中，我们需要的是一个包含JavaScript代码的文件。创建好这个静态资源后，我们就可以在Lightning Web组件中使用它了。 接下来，我们需要使用`platformResourcePlayer`中的`unload`和`loadScript`方法来管理这个静态资源。`loadScript`方法用于加载我们刚刚创建的静态资源中的JavaScript代码，而`unload`方法则用于在不需要时卸载这些脚本，以释放资源。 在Salesforce中，我们不能像在其他网站上那样直接从外部CDN加载JavaScript文件。例如，在其他网站上，我们可能会看到这样的代码： ```html ``` 但在Salesforce中，出于安全考虑，即使我们将这些外部域名添加到受信任的网站列表中，也是不允许的。因此，我们必须通过静态资源的方式来加载JavaScript。 总结一下，使用静态资源加载JavaScript的步骤是：创建静态资源，使用`loadScript`方法加载脚本，使用`unload`方法在适当的时候卸载脚本。这样，我们就可以安全地在Salesforce的Lightning Web组件中使用JavaScript了。希望这个解释对你有帮助！

  ▶ 播放视频 查看详情
• 43

  Using an External Style Sheet with loadStyle

  第 357 页

  同学们，今天我们来聊聊如何在Salesforce中使用外部样式表来美化我们的组件。这个方法非常有用，特别是当你想要在多个组件之间共享相同的样式时。 首先，我们需要创建一个CSS文件。这个文件将包含我们想要应用到组件上的所有样式。创建好之后，我们需要将这个CSS文件作为静态资源上传到Salesforce组织中。你可以把它想象成把一件衣服放进衣柜里，这样无论什么时候你需要，都可以拿出来穿。 接下来，在我们的组件代码中，我们需要从“@salesforce/resourceUrl/resourceName”导入这个静态资源。这里的“resourceName”就是你上传的CSS文件的名称。然后，我们还需要从“lightning/platformResourceLoader”导入两个方法：loadStyle和loadScript。这两个方法就像是我们的助手，帮助我们加载CSS和JavaScript文件。 现在，我们可以在组件中使用loadStyle方法来加载我们的CSS文件了。只需要调用loadStyle(this, resourceName)，就可以将样式应用到组件上。这里的“this”指的是当前的组件实例，而“resourceName”就是我们的CSS文件。 虽然我们在本课程中不会使用这种技术来加载CSS样式表，但了解这一点是非常有帮助的。它让我们能够更灵活地管理和应用样式，尤其是在处理多个组件时。希望这个简单的解释能帮助你们理解如何在Salesforce中使用外部样式表。如果有任何疑问，随时提问哦！

  ▶ 播放视频 查看详情
• 44

  Working with External APIs

  第 358 页

  今天我们来聊聊如何在Salesforce中使用外部API。这其实是一个非常实用的技能，尤其是在你需要从Salesforce外部获取数据或者发送数据到外部系统的时候。 首先，使用外部API主要有两种方法： 第一种方法是通过Apex代理请求。简单来说，Apex是Salesforce的一种编程语言，你可以编写Apex代码来处理这些外部请求。虽然我们不会在课堂上详细讲解如何编写Apex代码，但你可以通过参加专门的Apex课程来学习。使用Apex的好处是，它可以帮你处理很多复杂的逻辑和数据处理。不过，使用Apex之前，你需要设置一些东西，比如远程站点设置或者命名凭据，这些都是为了确保Salesforce能够安全地连接到外部系统。 第二种方法是直接向外部服务器发出请求。这种方法相对简单一些，你只需要将外部服务器的域名添加到Salesforce的“受信任的网站”列表中。我们在课程的一个挑战中会实际操作这一点，比如我们会使用一个包含Heroku数据的URL来演示如何实现这一点。 这两种方法各有优缺点，选择哪一种取决于你的具体需求和场景。如果你需要处理复杂的数据逻辑，Apex可能是更好的选择；如果你只是需要简单地获取或发送数据，直接请求可能更快捷。 最后，我还为你准备了一些有用的链接，这些链接可以帮助你更深入地理解如何在Salesforce中调用第三方API。你可以访问这些链接，获取更多的信息和代码示例。 希望这些信息对你有帮助，如果你有任何问题，随时提问！

  ▶ 播放视频 查看详情
• 45

  Calling External API's - the Code

  第 359 页

  同学们，今天我们来聊聊如何在Salesforce的Lightning Web Components（LWC）中调用外部的API。这个功能非常强大，因为它允许我们的应用与外部系统进行数据交换。 首先，我们需要一个API的URL，这个URL是我们想要调用的外部服务的地址。在我们的代码中，我们假设这个URL已经被定义为一个变量，叫做`apiUrl`。 接下来，我们使用现代浏览器内置的`fetch`方法来发起请求。如果你之前用过jQuery，那么`fetch`和`jQuery.get()`非常相似，都是用来发送HTTP请求的。但是，`fetch`是更现代的方法，它返回的是一个Promise对象，这个对象代表了一个HTTP响应。 这里有个小细节要注意：`fetch`返回的响应并不是直接的JSON数据，而是一个包含HTTP响应的对象。所以，我们需要调用`response.json()`方法，将这个响应转换成我们能够使用的JSON对象。 一旦我们有了JSON对象，我们就可以自由地处理这些数据了，比如显示在页面上，或者进行一些计算。 为了帮助大家更好地理解，我给大家准备了一个示例代码，这个代码来自Salesforce的官方食谱库。你可以通过这个链接查看完整的代码：[示例代码链接](https://github.com/trailheadapps/lwc-recipes/blob/master/force-app/main/default/lwc/miscRestApiCall/miscRestApiCall.js)。 这个示例展示了如何在LWC中使用`fetch`来调用外部API，并处理返回的数据。希望这个例子能帮助大家更好地理解这个过程。如果有任何问题，随时提问哦！

  ▶ 播放视频 查看详情
• 46

  Passing Apex Data into ChartJS using Promises

  第 360 页

  同学们，今天我们要学习一个非常实用的技能——如何将Salesforce中的Apex数据传递到ChartJS中，用来展示一个最受欢迎认证的图表。听起来是不是很酷？让我们一步步来。 首先，我们需要从Apex中获取数据。这里我们会使用一个我们自己定义的Apex方法，叫做`getCertPopularity`。这个方法会返回一些数据，比如不同认证的受欢迎程度。 接下来，我们需要在页面上使用ChartJS来展示这些数据。ChartJS是一个很棒的JavaScript库，专门用来制作各种图表。为了使用它，我们需要先把它导入到我们的Salesforce环境中。这里我们可以使用Salesforce提供的`loadScript`方法，这个方法可以帮助我们加载外部的JavaScript库，比如ChartJS。 当我们调用`loadScript`来加载ChartJS时，这个方法会返回一个Promise。Promise是JavaScript中的一个概念，简单来说，它代表了一个将来会完成的操作。当这个操作完成时，我们可以继续执行后续的代码。 同样地，当我们调用`getCertPopularity`这个Apex方法时，它也会返回一个Promise。这意味着我们可以等待这个方法完成，获取到我们需要的认证数据。 一旦我们获取到了数据，我们就需要对这些数据进行一些处理。因为ChartJS需要的数据格式是两个数组：一个数组用来存放认证的名称，另一个数组用来存放每个认证的受欢迎程度。所以，我们需要循环遍历我们获取到的数据，然后重新格式化，生成这两个数组。 最后，当我们有了这两个数组，我们就可以使用ChartJS来创建一个图表，展示最受欢迎的认证了。 总结一下，我们首先加载ChartJS，然后获取Apex数据，处理数据，最后用ChartJS展示数据。这个过程涉及到Promise的使用，确保我们在数据准备好之后再继续操作。希望这个过程对你们来说既简单又有趣！

  ▶ 播放视频 查看详情
• 47

  Lightning Locker

  第 361 页

  今天我们来聊聊Salesforce中的闪电储物柜（Lightning Locker）以及它的一些关键点。闪电储物柜是Salesforce用来确保组件安全运行的一个机制，它可以帮助我们避免一些潜在的安全风险。 首先，如果你使用的是API 39或更早版本的Aura组件，那么这些组件不会受到Lightning Buttons的影响。这意味着，如果你还在使用这些旧版本的组件，你可以继续使用它们，而不必担心Lightning Buttons会带来什么问题。 其次，关于Lightning Web Components（LWC），有一点需要注意：你无法禁用LWC的收件箱功能。这是因为LWC的最低API版本是45.0，而这个版本已经包含了收件箱功能。所以，如果你在使用LWC，收件箱功能是默认开启的，你无法关闭它。 最后，从2020年冬季开始，你可以选择Lightning Doctons的API版本。这意味着你可以决定你的组件使用哪个版本的Lightning Doctons。你可以选择的最早的收件箱API版本是46.0，这个版本支持2019年夏季版本的收件箱功能。如果你需要了解更多细节，可以参考Salesforce的官方发布说明。 总结一下，闪电储物柜是一个非常重要的安全机制，特别是在处理不同版本的组件时。了解这些细节可以帮助你更好地管理和优化你的Salesforce环境。希望这些信息对你有帮助！

  ▶ 播放视频 查看详情
• 48

  Testing Third Party JS with Locker Console

  第 362 页

  让我们来聊聊如何使用NPS控制台来测试第三方的JavaScript代码。想象一下，你有一个工具箱，NPS控制台就是这个工具箱，而你要测试的JavaScript代码就是你要修理的小玩意儿。 首先，你会看到几个选项卡，比如“开发人员指南”、“收件箱控制台”、“托马西皮查看器”和“操场”。这些就像是工具箱里的不同工具，每个都有它特别的用途。今天，我们要用的是“收件箱控制台”，这个工具特别适合用来测试你的JavaScript代码。 在“代码控制台”（1）这里，你可以把你的JavaScript代码粘贴进去，或者直接在这里输入。这就像是你把要修理的小玩意儿放在工作台上，准备开始工作。 接下来是“切换”（2）部分。这里有两个开关，一个是用来启用或禁用Lightning收件箱的，另一个是用来启用或禁用严格的MPS。这就像是选择你要用哪种工具来修理你的小玩意儿。 最后是“行动”（3）部分。这里有三个按钮：“评估”、“Benchmark”和“清除结果”。点击“评估”按钮，就像是按下开关，开始运行你的代码。点击“Benchmark”按钮，可以让你看到使用和不使用Lightning Buttons时，代码的性能差异。这就像是测试你的修理工作是否真的让东西变好了。如果你觉得结果有点乱，点击“清除结果”按钮，就可以把之前的结果都清掉，重新开始。 所以，使用NPS控制台测试第三方JavaScript代码，就像是用工具箱修理东西一样简单。你只需要选择正确的工具，然后按照步骤来，就能轻松完成测试。希望这个解释能帮助你更好地理解这个过程！

  ▶ 播放视频 查看详情
• 49

  Using Locker API Viewer

  第 363 页

  让我们来聊聊Salesforce中的Locker API查看器。想象一下，你有一个工具箱，里面装满了各种工具，帮助你安全地构建和检查你的Salesforce组件。Locker API查看器就是这样一个工具，它帮助你查看和理解在Salesforce Lightning组件中可以安全使用的JavaScript和DOM API。 当你打开Locker API查看器，你会看到一个简洁、直观的界面，这是基于Salesforce Lightning设计系统（SLDS）构建的。这个工具让你可以探索JavaScript DOM API的安全版本，比如`Window`对象。你可以比较浏览器原生的对象和Salesforce提供的安全版本，比如`Window`和`SecureWindow`，这样你就能看到它们之间的兼容性和差异。 现在，说到第三方Web组件，Salesforce出于安全考虑，不允许在平台上使用这些组件。为什么呢？因为Web组件是自定义元素，要定义这些元素，你需要使用`customElements.define` API。这个API是全局的，意味着你可以在全局范围内注册组件名称。这听起来很方便，但也带来了安全风险，因为攻击者可以注册任何名称，从而可能控制你的页面。 这就是Lightning Locker的`SecureWindow`包装器发挥作用的地方。它阻止了创建自定义Web组件的`CustomElement`方法。在Locker API查看器中，如果你查看`SecureWindow`包装器的列表，你会发现`CustomElements`返回的是`undefined`。这意味着在Salesforce的安全环境中，你不能使用这个方法来定义新的Web组件，从而保护了你的应用不受潜在的安全威胁。 简单来说，Locker API查看器是一个强大的工具，帮助你确保你的Salesforce组件既安全又符合Salesforce的标准。通过它，你可以更好地理解哪些API是可用的，以及如何在Salesforce的安全框架内使用它们。

  ▶ 播放视频 查看详情
• 50

  Locker and DOM Access Containment

  第 364 页

  让我们来聊聊Salesforce Lightning Web Components（LWC）中的DOM访问和安全性。 首先，LWC有一个非常重要的安全特性，叫做“Shadow DOM”。这个特性确保了每个组件的DOM（文档对象模型）是独立的，也就是说，一个组件不能直接访问或修改另一个组件的DOM。这样做的好处是，可以防止组件之间的干扰，确保每个组件都能安全、独立地运行。 在LWC中，如果你想访问当前组件的DOM元素，你不能直接使用全局的`document`或`window`对象。这是因为这些全局对象可以访问整个页面的DOM，这可能会破坏组件的封装性和安全性。相反，你应该使用`this.template`来访问当前组件的DOM。`this.template`提供了一个安全的方式来查询和操作当前组件的DOM元素。 举个例子，假设你有一个HTML文件，里面有一个按钮，当点击这个按钮时，你希望访问一个特定的DOM元素。如果你使用`this.template.querySelector`，你会得到一个安全的DOM元素引用。但如果你尝试使用`document.querySelector`，你会得到一个空值，因为LWC不允许你直接访问全局的DOM。 总结一下，LWC通过使用Shadow DOM和限制全局DOM访问，确保了组件的安全性和独立性。在编写LWC时，记得使用`this.template`来访问和操作DOM元素，这样可以避免潜在的安全问题，并保持代码的清晰和可维护性。

  ▶ 播放视频 查看详情
• 51

  Exercise 5-6: Renderers and Third-Party JS

  第 365 页

  同学们，今天我们来做一个非常有趣的练习。这个练习是关于如何在Salesforce中使用第三方JavaScript库，特别是ChartJS，来创建一些漂亮的图表。我们会通过几个步骤来完成这个任务。 首先，我们需要将ChartJS这个第三方JavaScript库作为静态资源加载到我们的Salesforce环境中。静态资源就像是你在网页上使用的图片或者CSS文件一样，它们被存储在Salesforce中，可以在需要的时候被调用。 接下来，我们会使用Apex代码来检索我们最受欢迎的认证数据。Apex是Salesforce的一种编程语言，它允许我们与数据库交互，获取我们需要的数据。在这个例子中，我们会编写一个Apex方法来获取最受欢迎的认证信息。 然后，我们会将这些数据输入到ChartJS库中。ChartJS是一个非常流行的JavaScript图表库，它可以帮助我们轻松地创建各种图表，比如柱状图、饼图等。我们会将Apex获取的数据传递给ChartJS，让它来帮我们生成图表。 最后，我们会在一个HTML页面上使用Canvas元素来渲染这个图表。Canvas是HTML5中的一个元素，它允许我们在网页上绘制图形。我们会将ChartJS生成的图表绘制在这个Canvas上，这样用户就可以在Salesforce页面上看到这个漂亮的图表了。 这个练习不仅会帮助你理解如何在Salesforce中使用第三方JavaScript库，还会让你了解到如何将Apex数据与前端技术结合起来，创造出动态的、交互式的用户界面。让我们开始吧！

  ▶ 播放视频 查看详情
• 52

  Unit 5 Summary

  第 367 页

  让我们来聊聊Salesforce中的一些关键概念，特别是关于Lightning Web Components（LWC）的部分。 首先，，公共设置器，。想象一下，你有一个属性，比如一个名字或者一个日期。当这个属性的值发生变化时，你可能想要执行一些特定的操作，比如更新数据库或者发送通知。公共设置器就是用来做这个的。它允许你在属性值改变时，自动执行你定义好的逻辑。 接下来是，公共方法，。这些方法用`@api`装饰器标记，意味着它们可以被其他组件调用。你可以把它们看作是组件的“接口”，其他组件可以通过这些方法来与你的组件互动。 然后是，服务组件，。这些组件没有用户界面，它们的主要任务是封装一些可重用的逻辑。比如，你可能有一个服务组件专门用来处理数据的获取和存储，这样你就不用在每个需要这些功能的组件里重复写代码了。 ，插槽，的概念也很重要。想象一下，你有一个父组件，它想把一些内容传递给子组件。插槽就是子组件中用来接收这些内容的占位符。你可以把插槽看作是子组件中的一个“洞”，父组件可以把任何内容“塞”进去。 ，本地化，是另一个关键点。Lightning Web Components支持通过自定义标签和区域来识别组件，这样你可以轻松地为不同语言的用户提供本地化的内容。 最后，，第三方JavaScript库，。有时候你可能需要使用一些外部的JavaScript库来增强你的组件功能。你可以把这些库作为静态资源上传到Salesforce，然后在你的组件中引用它们。 总结一下，这些概念帮助你更好地构建和管理你的Lightning Web Components，使它们更灵活、更强大。希望这些解释对你有帮助！

  ▶ 播放视频 查看详情
• 53

  Unit 5 Review

  第 368 页

  让我们来聊聊Salesforce中的一些关键概念，特别是关于Lightning Web Components (LWC) 和用户设置的部分。 首先，关于LWC中的公共setter和getter。在LWC中，你可以定义一个公共属性，并且为这个属性设置一个setter。这意味着每当这个属性的值发生变化时，你可以执行一些自定义的逻辑。比如，你可能想在属性值改变时更新界面或者触发一些其他的操作。同时，父组件可以通过几种方式与子组件通信：可以直接传递属性的值，调用子组件上的公共方法，或者通过插槽（无论是命名的还是未命名的）来传递信息。 接下来，关于MPS Trusted Sites和Lightning收件箱的部分。这里有一个误解，MPS Trusted Sites实际上允许你向特定的站点进行XLHTTP请求或获取数据，而不是阻止。而Lightning收件箱确实会阻止从任何域加载资源，比如通过

  ▶ 播放视频 查看详情
• 54

  Challenge 4: Website Visits per Month

  第 369 页

  今天我们来聊聊如何在Salesforce中创建一个组件，这个组件能够使用ChartJS来展示一个线性图，数据是从一个外部URL获取的。这个任务听起来可能有点复杂，但别担心，我会一步步带你完成。 首先，我们需要创建一个新的Lightning Web Component，我们叫它`challenge_lineChart`。这个组件的主要任务是使用ChartJS库来绘制一个线性图。ChartJS是一个非常流行的JavaScript库，专门用于创建各种图表。 接下来，我们需要在Salesforce的App Builder中配置这个组件，让它能够接受一个外部URL作为数据源。这个URL是我们在设计时设置的，也就是说，当我们在App Builder中拖放这个组件到页面上时，我们可以指定一个URL，组件会从这个URL获取数据。 为了安全起见，我们需要确保这个外部URL是受信任的。所以，我们需要将这个URL添加到Salesforce的MPS（My Domain Settings）受信任的网站列表中。这样，Salesforce就知道这个URL是安全的，允许我们的组件从中获取数据。 现在，我们需要在组件中使用JavaScript的`fetch()`函数来发出请求，获取数据。`fetch()`是一个现代的、基于Promise的API，用于发起网络请求。我们可以使用它来从我们配置的URL获取数据。 一旦我们获取了数据，我们就可以使用ChartJS来绘制线性图了。我们需要在组件中引入ChartJS库，然后使用获取到的数据来配置和渲染图表。 最后，我们需要将这个组件添加到我们的挑战库中，这样我们就可以在Salesforce的其他地方使用它了。 整个过程大概需要40分钟左右，具体时间取决于你对这些技术的熟悉程度。但别担心，跟着我的步骤来，你一定能完成这个挑战的。 好了，这就是我们今天的内容。希望你能通过这个挑战，更深入地理解如何在Salesforce中使用外部数据和第三方库来创建动态的、交互式的组件。加油！

  ▶ 播放视频 查看详情