DEX602

课程介绍

今天我们来聊聊Salesforce中的Lightning Web组件，简称LWC。你可以把它想象成是Salesforce用来构建用户界面的“积木”。这些“积木”可以帮助我们快速搭建出既美观又功能强大的页面。 首先，Lightning Web组件是基于现代Web标准构建的，这意味着它们使用了HTML、CSS和JavaScript这些你可能已经熟悉的技术。这样做的目的是为了让开发者能够更容易上手，同时也保证了组件的性能和安全性。 在Salesforce中，LWC可以用来创建自定义的页面元素，比如按钮、表单、列表等等。你可以把这些组件拖放到Salesforce的Lightning页面上，就像拼图一样，组合出你想要的页面布局。 举个例子，假设你需要一个显示客户信息的卡片。你可以创建一个LWC，里面包含客户的姓名、地址和联系方式。然后，你可以把这个组件放到你的Salesforce主页上，这样每次打开主页，你就能一眼看到这些重要的客户信息。 LWC的另一个好处是它们可以被重用。这意味着你创建了一个组件后，可以在多个地方使用它，而不需要每次都重新编写代码。这不仅节省了时间，也减少了出错的可能性。 最后，LWC还支持响应式设计，这意味着它们可以自动适应不同的屏幕大小，无论是在电脑上还是在手机上，都能保持良好的显示效果。 总之，Lightning Web组件是Salesforce中非常强大的工具，它们让创建和管理用户界面变得简单而高效。希望这个简短的介绍能帮助你更好地理解LWC的概念和用途。如果你有任何问题，随时欢迎提问！

课程章节

本课程共有 56 个章节

• 1

  Unit 3 Surfacing Lightning Web Components

  第 215 页

  今天我们来聊聊Salesforce中的Lightning Web组件，简称LWC。你可以把它想象成是Salesforce用来构建用户界面的“积木”。这些“积木”可以帮助我们快速搭建出既美观又功能强大的页面。 首先，Lightning Web组件是基于现代Web标准构建的，这意味着它们使用了HTML、CSS和JavaScript这些你可能已经熟悉的技术。这样做的目的是为了让开发者能够更容易上手，同时也保证了组件的性能和安全性。 在Salesforce中，LWC可以用来创建自定义的页面元素，比如按钮、表单、列表等等。你可以把这些组件拖放到Salesforce的Lightning页面上，就像拼图一样，组合出你想要的页面布局。 举个例子，假设你需要一个显示客户信息的卡片。你可以创建一个LWC，里面包含客户的姓名、地址和联系方式。然后，你可以把这个组件放到你的Salesforce主页上，这样每次打开主页，你就能一眼看到这些重要的客户信息。 LWC的另一个好处是它们可以被重用。这意味着你创建了一个组件后，可以在多个地方使用它，而不需要每次都重新编写代码。这不仅节省了时间，也减少了出错的可能性。 最后，LWC还支持响应式设计，这意味着它们可以自动适应不同的屏幕大小，无论是在电脑上还是在手机上，都能保持良好的显示效果。 总之，Lightning Web组件是Salesforce中非常强大的工具，它们让创建和管理用户界面变得简单而高效。希望这个简短的介绍能帮助你更好地理解LWC的概念和用途。如果你有任何问题，随时欢迎提问！

  ▶ 播放视频 查看详情
• 2

  Unit 3: Surfacing Lightning Web Components

  第 216 页

  同学们，今天我们来聊聊Salesforce中的Lightning Web组件，也就是我们常说的LWC。这个技术非常强大，可以帮助我们构建更加动态和响应式的用户界面。 首先，我们来看看如何在Lightning页面中使用这些组件。你可以通过Salesforce的应用程序构建器，也就是App Builder，来拖拽这些组件到页面上。这样，即使你不是一个专业的开发者，也能轻松地构建出功能丰富的页面。 接下来，我们谈谈如何在记录页面上使用这些组件。在Salesforce的Lightning体验中，每个记录页面都可以通过添加LWC来增强其功能。比如，你可以添加一个自定义的组件来显示与该记录相关的特定信息或操作。 然后，我们来看看如何覆盖标准的操作。在Salesforce中，很多标准操作可能不完全符合你的业务需求。通过使用LWC，你可以创建自定义的按钮或链接，来替换这些标准操作，使其更符合你的业务流程。 此外，我们还可以定义自己的Lightning应用程序。这意味着你可以创建一个全新的应用，完全由LWC构成，满足特定的业务需求。 还有一个非常酷的功能是，你可以在Visualforce页面中使用Lightning组件。通过Lightning Out技术，你可以在传统的Visualforce页面中嵌入LWC，这样你就可以在不完全迁移到Lightning体验的情况下，享受到LWC带来的好处。 最后，我们还会探索其他支持Lightning体验的地方。Salesforce的生态系统非常庞大，LWC可以在很多不同的地方使用，比如在Salesforce移动应用中，或者在Salesforce的社区中。 总之，Lightning Web组件是一个非常灵活和强大的工具，可以帮助我们在Salesforce中构建出更加高效和用户友好的界面。希望今天的介绍能帮助大家更好地理解和使用LWC。

  ▶ 播放视频 查看详情
• 3

  Using <lightning-map>

  第 217 页

  让我们来聊聊如何使用``组件来创建一个名为`delivyListMap`的地图组件。这个组件的主要功能是显示我们交付的每个地点的地图标记，并且当你点击这些标记时，它会显示在该位置已经完成的交付数量。 首先，``组件是基于谷歌地图的，这意味着你可以直接使用谷歌地图的功能，而不需要额外的API密钥。这大大简化了我们的开发过程。 在这个组件中，我们需要为每个交付地点设置一个地图标记。每个标记都需要一个具体的位置，这个位置通常由纬度和经度来定义。但是，如果你只有地址而没有具体的经纬度，那么你需要进行一个叫做“地理编码”的过程。地理编码就是将地址转换成经纬度的过程，这样谷歌地图才能知道在哪里放置标记。 在我们的例子中，我们有一个地址是英国伦敦。由于我们没有提供具体的经纬度，所以这个地址需要先进行地理编码。需要注意的是，每张地图最多只能对10个地址进行地理编码，而且建议地图上的标记总数不要超过100个，以保证地图的加载速度和性能。 为了在地图上显示这些标记，我们需要填充`map-markers`属性。这个属性是一个数组，数组中的每个元素都描述了一个标记的位置和其他相关信息。在我们的示例中，我们只显示一个地图标记，指向伦敦。 总结一下，使用``组件，我们可以轻松地创建一个显示交付地点地图的组件。通过设置`map-markers`属性，我们可以控制地图上显示的标记，并且通过地理编码，我们可以将地址转换为地图上的具体位置。这样，用户就可以直观地看到每个交付地点的位置，并通过点击标记来查看交付的详细信息。

  ▶ 播放视频 查看详情
• 4

  Exposing Properties to App Builder

  第 218 页

  让我们来一步步理解这个过程。想象一下，你正在设计一个Salesforce Lightning组件，你希望这个组件在Lightning App Builder中可以被用户自定义配置。为了实现这一点，我们需要在组件的元数据文件中添加一些配置。 首先，我们需要确保组件是公开的，这样它才能在App Builder中被使用。这通过在元数据文件中设置``标签为`True`来实现。 接下来，我们需要定义组件的目标。在这个例子中，我们的目标是`Lightning__AppPage`，这意味着这个组件可以在Lightning App Builder的页面中使用。 然后，我们进入``部分，这里我们定义了具体的配置选项。每个配置选项都是一个``标签，它允许我们在设计时为组件添加可配置的属性。在这个例子中，我们有两个属性： 1. `listView`：这是一个字符串类型的属性，允许用户在“可见”和“隐藏”之间切换列表视图。 2. `markersTitle`：这也是一个字符串类型的属性，允许用户自定义列表的标题，这个标题会在列表视图可见时显示。 为了让这些属性在JavaScript代码中可用，我们需要使用`@api`装饰器来公开它们。这样，当我们在Lightning App Builder中配置这些属性时，它们就会在组件的JavaScript代码中生效。 总结一下，通过这种方式，我们可以让最终用户在Lightning App Builder中轻松地自定义组件的外观和行为，而无需编写任何代码。这不仅提高了组件的灵活性，也大大增强了用户体验。希望这个解释对你有帮助！如果有任何问题，随时提问。

  ▶ 播放视频 查看详情
• 5

  Populating App Builder Picklists Dynamically (1 of 2)

  第 219 页

  让我们来聊聊如何在Salesforce的App Builder中动态填充一个Picklist（选择列表）。想象一下，你有一个表单，里面有一个选择城市的选项。通常，这些城市是预先设定好的，但如果我们想让这个列表根据某些条件动态变化呢？这就是我们今天要讲的内容。 首先，我们需要一个Apex类，这个类负责提供城市列表。在这个例子中，我们有一个叫做`CityPicklist`的Apex类。这个类会返回一个城市列表，然后我们的Picklist就会根据这个列表来动态显示选项。 在App Builder中，当你设计一个组件时，你可以设置Picklist的值来源。通常，你可以手动输入这些值，但在这里，我们选择让这个Picklist的值来自我们的`CityPicklist`类。这样，无论`CityPicklist`类返回什么城市列表，我们的Picklist都会自动更新。 接下来，我会在下一部分详细展示如何实现这个功能，包括如何编写`CityPicklist`类以及如何在App Builder中设置Picklist。这样，你就可以在你的Salesforce应用中实现动态的Picklist了。

  ▶ 播放视频 查看详情
• 6

  Populating App Builder Picklists Dynamically (2 of 2)

  第 220 页

  让我们继续深入了解一下如何在Salesforce中动态填充应用程序构建器的挑选列表。今天，我们主要关注的是如何通过Apex类来实现这一功能。 首先，你的Apex类需要扩展`VisualEditor.DynamicPicklist`。这是一个特殊的接口，它允许你在应用程序构建器中动态生成挑选列表的选项。为了实现这一点，你需要实现两个关键的方法：`getDefaultValue()`和`getValues()`。 1. ，getDefaultValue()，: 这个方法用于返回挑选列表的默认值。当用户第一次打开挑选列表时，这个值会被自动选中。这个方法应该返回一个`VisualEditor.DataRow`对象，这个对象代表默认的选项。 2. ，getValues()，: 这个方法用于返回挑选列表中的所有选项。它应该返回一个`VisualEditor.DynamicPickListRows`对象，这个对象包含多个`VisualEditor.DataRow`，每个`DataRow`代表挑选列表中的一个选项。 让我们来看一个简单的例子，假设我们要动态填充一个城市列表： ```apex public class CityPicklist extends VisualEditor.DynamicPicklist { public override VisualEditor.DataRow getDefaultValue() { // 返回默认的城市，比如“New York” return new VisualEditor.DataRow(&#39;New York&#39;, &#39;New York&#39;); } public override VisualEditor.DynamicPickListRows getValues() { VisualEditor.DynamicPickListRows cityRows = new VisualEditor.DynamicPickListRows(); // 添加城市选项 cityRows.addRow(new VisualEditor.DataRow(&#39;New York&#39;, &#39;New York&#39;)); cityRows.addRow(new VisualEditor.DataRow(&#39;Los Angeles&#39;, &#39;Los Angeles&#39;)); cityRows.addRow(new VisualEditor.DataRow(&#39;Chicago&#39;, &#39;Chicago&#39;)); // 你可以继续添加更多的城市 return cityRows; } } ``` 在这个例子中，`getDefaultValue()`方法返回了一个代表“New York”的`DataRow`，而`getValues()`方法则创建了一个包含多个城市选项的`DynamicPickListRows`对象。 通过这种方式，你可以轻松地在Salesforce应用程序构建器中动态生成和管理挑选列表的选项。希望这个解释对你有帮助！如果有任何疑问，随时提问。

  ▶ 播放视频 查看详情
• 7

  Defining an Apex Class that Returns a List of Locations

  第 221 页

  让我们一步一步地来理解这段代码和它背后的概念。 首先，我们有一个Apex类，名为`CourseDeliveryLocations`。这个类里面有一个方法`getLocations`，这个方法被标记为`@AuraEnabled`和`cacheable=true`。这意味着这个方法可以被Lightning Web Components (LWC)调用，并且它的结果可以被缓存，以提高性能。 `getLocations`方法执行一个SOQL查询，从`Course_Delivery__c`对象中选择`City__c`和`Country__c`字段，并对`ID`字段进行计数。这个查询的结果是按`City__c`和`Country__c`分组的，这意味着它会返回每个城市和国家的组合以及对应的交付次数。 接下来，我们来看JavaScript部分。在`LocationComponent.js`中，我们使用`@wire`装饰器来调用Apex方法`getLocations`。`@wire`装饰器允许我们在LWC中调用Apex方法，并且可以处理返回的数据或错误。 在`Wired_getLocations`函数中，我们首先初始化一个空数组`this.mapMarkers`。然后，如果数据返回成功（即`data`存在），我们遍历这个数据数组。对于每个位置（`loc`），我们创建一个包含城市和国家的对象，并将其推入`this.mapMarkers`数组中。这样，我们就可以在LWC中使用这个数组来显示地图标记。 总结一下，我们从这段代码中学到了以下几点： 1. ，Apex类中的方法，：必须标记为`@AuraEnabled`和`cacheable=true`，并且是`public`或`global`和`static`的，以便LWC可以调用。 2. ，JavaScript控制器，：我们使用`@wire`装饰器来调用Apex方法，并且可以在将数据提供给LWC之前对数据进行转换。 希望这个解释能帮助你更好地理解这段代码和它的工作原理。如果有任何疑问，随时问我！

  ▶ 播放视频 查看详情
• 8

  Creating an Aura DeliveryListAction Component

  第 222 页

  让我们来聊聊如何在Salesforce中创建一个Aura Delivery ListAction事件，并且如何将Lightning Web组件（LWC）包装在Aura组件中。 首先，想象一下，你有一个非常酷的Lightning Web组件，你希望它能在Salesforce的多个地方展示，比如在Lightning App Builder或者自定义操作中。但是，你可能发现，虽然LWC很强大，但它并不能在所有可以使用Aura组件的地方直接使用。这时候，我们就需要一点小技巧——将LWC包装在Aura组件中。 怎么做呢？很简单，在你的Aura组件中，你会使用一个叫做“implements”的属性。这个属性就像是给Aura组件贴上一个标签，告诉Salesforce这个组件可以在哪些地方出现。你只需要在“implements”属性后面列出你希望组件出现的位置，这些位置是用逗号分隔的接口列表。 例如，如果你想让你的组件既能在Lightning App Builder中使用，也能在自定义操作中出现，你就可以在“implements”属性中列出相应的接口。你可以访问Salesforce的组件库，那里有一个详细的接口列表，帮助你了解每个接口对应的功能。 通过这种方式，你就可以灵活地在Salesforce生态系统中展示你的Lightning Web组件了。记住，虽然LWC和Aura组件各有千秋，但通过这种包装的方式，你可以让它们更好地协同工作，发挥出最大的效能。希望这个解释对你有帮助！

  ▶ 播放视频 查看详情
• 9

  Creating an Aura DeliveryListAction Component (Cont.)

  第 223 页

  让我们继续来聊聊这个Aura组件——DeliveryListAction.cmp。这个组件其实是一个桥梁，它连接了Aura和Lightning Web组件（LWC）。你可以把它想象成一个翻译官，帮助两种不同的技术语言互相理解。 首先，我们来看一下这个组件的结构。它使用了``标签，并且实现了两个接口：`flexipage:availableForAllPageTypes`和`force:lightningQuickAction`。这两个接口的作用是让这个组件可以在所有页面类型中使用，并且可以作为Lightning的快速操作来使用。 接下来，我们在这个组件中引入了一个名为`c:deliveryListMap`的组件。这个`c:`前缀代表的是自定义命名空间，也就是说，`deliveryListMap`是一个我们自己定义的组件。这个组件可能是用Aura或者LWC编写的，但在这里，我们是用Aura的方式来引用它。 现在，我们来谈谈命名规则。在Salesforce中，我们使用一种叫做“骆驼大小写”的命名规则。这意味着，如果组件名称由多个单词组成，我们会把每个单词的首字母大写，并且不使用空格或下划线。例如，`deliveryListMap`就是一个典型的骆驼大小写命名。 当我们从Aura组件中引用一个Lightning Web组件时，我们会使用标准的Aura符号。也就是说，我们会使用`c:`前缀加上组件的名称。这种方式让Aura组件能够识别并加载LWC组件。 总结一下，这个DeliveryListAction.cmp组件是一个Aura组件，它通过标准的Aura符号引用了一个名为`deliveryListMap`的组件。这个组件可能是用Aura或LWC编写的，但在这里，我们是用Aura的方式来引用它。通过这种方式，Aura和LWC可以无缝地协同工作，帮助我们构建更加强大和灵活的Salesforce应用。

  ▶ 播放视频 查看详情
• 10

  Exercise 3-1: Surfacing a Component in App Builder

  第 224 页

  让我们一步一步来完成这个练习。首先，我们要创建一个新的Lightning App Builder页面，名字叫做“Deliveries Map”。这个页面将帮助我们在地图上查看所有的交付信息。 接下来，我们需要创建一个新的组件，叫做“DeliveryListMap”。这个组件会显示一个列表和地图，帮助我们更直观地看到交付的位置和状态。创建好之后，我们要把这个组件放到我们刚刚创建的“Deliveries Map”页面上。 然后，我们要确保这个“DeliveryListMap”组件可以在Lightning App Builder中进行配置。这意味着我们可以根据需要调整它的设置，比如显示哪些信息，或者地图的显示方式等。 之后，我们要在“收件箱地图”页面上添加一个快速操作。这个快速操作允许我们快速记录一个电话呼叫，这样我们就可以在查看地图的同时，轻松地记录下与客户的沟通情况。 最后，我们要创建一个新的全局操作，这个操作会显示“Deliveries Map”。然后，我们要把这个全局操作放在Lead（潜在客户）详细信息的页面布局中。这样，当我们在查看某个潜在客户的详细信息时，就可以直接点击这个操作，快速跳转到“Deliveries Map”页面，查看相关的交付信息。 通过以上步骤，我们就完成了这个练习。这样，我们就可以更有效地管理和查看我们的交付信息了。

  ▶ 播放视频 查看详情
• 11

  Exercise 3-1: Creating a Lightning Component Global Action with Aura

  第 225 页

  让我们一步一步来完成这个练习。首先，我们要创建一个Lightning组件，这个组件将会显示一个地图，上面标记了所有交付的地点。然后，我们会把这个组件作为一个全球动作（Global Action）添加到Salesforce的Lead页面布局中。 ### 第一步：创建Lightning组件 1. ，打开开发者控制台，：在Salesforce中，点击右上角的齿轮图标，选择“开发者控制台”。 2. ，创建新组件，：在开发者控制台中，点击“文件”菜单，选择“新建” -&gt; “Lightning组件”。给你的组件起个名字，比如“DeliveryListMap”。 3. ，编写组件代码，：在组件文件中，你会看到一些自动生成的代码。我们需要在这个基础上添加一些代码来显示地图。你可以使用HTML和JavaScript来定义组件的外观和行为。 ### 第二步：实现接口 为了让我们的组件能够作为全球动作使用，我们需要实现一些特定的接口。这些接口告诉Salesforce我们的组件可以在哪些上下文中使用。 1. ，添加接口，：在你的组件代码中，找到``标签，然后在里面添加`implements=&quot;force:lightningQuickActionWithoutHeader,force:hasRecordId&quot;`。这样，我们的组件就可以在没有头部的情况下作为快速动作使用，并且可以访问当前记录的ID。 ### 第三步：包装组件 1. ，创建Aura组件，：我们需要创建一个Aura组件来包装我们的Lightning组件。这个Aura组件将作为全球动作的入口点。 2. ，添加Lightning组件，：在Aura组件的代码中，使用``标签来嵌入我们之前创建的Lightning组件。 ### 第四步：添加到页面布局 1. ，编辑Lead页面布局，：在Salesforce的设置中，找到“对象管理器”，然后选择“Lead”。在左侧菜单中选择“页面布局”。 2. ，添加全球动作，：在页面布局编辑器中，找到“移动操作”部分，然后将我们创建的全球动作拖放到布局中。 ### 第五步：测试 1. ，保存并测试，：保存你的更改，然后打开一个Lead记录，看看是否可以看到我们添加的全球动作。点击它，应该会弹出我们创建的地图组件。 这样，我们就完成了创建一个Lightning组件并将其作为全球动作添加到Lead页面布局的过程。希望这个过程对你来说既简单又有趣！如果有任何问题，随时问我哦。

  ▶ 播放视频 查看详情
• 12

  Use Lightning App Builder to Create a Lightning Page with a Quick Action.

  第 226 页

  同学们，今天我们来学习如何使用Lightning App Builder创建一个带有快速操作的Lightning页面。这个练习会很有趣，因为我们会涉及到一些实际操作，让你能够亲手体验Salesforce的强大功能。 首先，我们要创建一个名为DeliveryListMap的组件。这个组件将会在我们的Lightning页面中扮演重要角色。创建好组件后，我们需要在Lightning App Builder中提供这个组件。这样，我们就可以在页面上使用它了。 接下来，我们要定义这个Lightning页面在Salesforce移动设备和Lightning Experience中的显示方式。这一步很重要，因为我们需要确保页面在不同设备上都能良好地展示。 然后，我们会把DeliveryListMap组件添加到Lightning Page上。添加后，你可以尝试修改它的配置属性，看看这些修改会如何影响页面的显示和功能。 我们还会在页面上添加Chatter Feed、过滤列表和快速操作。这些功能可以大大提升用户的使用体验，让页面更加互动和实用。 最后，别忘了在Lightning Experience和Salesforce移动版中激活并测试你的Lightning页面。这一步是确保一切功能都按预期工作的关键。 整个练习预计需要35分钟，所以准备好你的Salesforce环境，我们马上开始吧！

  ▶ 播放视频 查看详情
• 13

  Code Review

  第 227 页

  同学们，今天我们来聊聊代码审查的两个关键点。首先，我们来看一下`delivyListMap`。在这个部分，我们需要仔细审查配置文档。为什么呢？因为配置文档会告诉我们，哪些属性是可以在应用程序构建器中进行配置的。这些属性可能包括一些开关、选项或者是一些特定的设置，它们决定了应用程序的行为和外观。所以，审查这些文档，确保我们了解每一个可配置的属性，是非常重要的。 接下来，我们转向`delivyListAction`。在这个部分，我们的任务是识别出那些允许组件作为自定义操作显现的代码。简单来说，就是找出那些代码片段，它们能够让组件在用户界面上以按钮、链接或者其他交互元素的形式出现。这些代码通常涉及到事件处理、用户交互逻辑等。识别这些代码，有助于我们理解组件是如何与用户进行互动的，以及它们在整个应用程序中的作用。 总结一下，代码审查不仅仅是查找错误，更是深入理解代码如何工作，以及它如何与应用程序的其他部分相互作用的过程。通过审查`delivyListMap`和`delivyListAction`，我们能够更好地掌握应用程序的构建和功能实现。希望这些信息对你们有所帮助，继续加油！

  ▶ 播放视频 查看详情
• 14

  Unit 3: Surfacing Lightning Web Components - 228

  第 228 页

  同学们，今天我们来聊聊如何在Salesforce的Lightning Experience中，使用Lightning Web组件和应用程序构建器来定制我们的记录详情页面。 首先，我们要明白什么是Lightning Web组件。简单来说，这些组件就像是乐高积木，你可以用它们来搭建出你想要的页面布局和功能。Salesforce提供了一系列的标准组件，比如按钮、表格、图表等，但你也可以创建自己的自定义组件来满足特定的业务需求。 接下来，我们会使用应用程序构建器。这是一个非常直观的工具，允许你通过拖放的方式，将组件添加到页面上。你可以轻松地调整组件的位置，设置它们的属性，甚至预览页面在不同设备上的显示效果。 在本单元中，我们特别关注的是记录详情页面的定制。记录详情页面是用户查看和编辑单个记录信息的地方。通过使用Lightning Web组件，我们可以增强这些页面的功能，比如添加自定义按钮、显示额外的信息或者集成外部服务。 我们还会学习如何推翻标准行动。这意味着你可以替换或修改Salesforce提供的标准按钮和行为，以适应你的业务流程。 此外，我们还会探讨如何定义Lightning应用程序，以及如何在带有Lightning Out的Visualforce页面中使用Lightning组件。这让你可以在传统的Visualforce页面中嵌入现代的Lightning组件，从而提升用户体验。 最后，我们会看看其他支持体验，比如如何在移动设备上优化你的Lightning页面，确保用户无论在哪里都能获得一致的体验。 好了，这就是我们今天要学习的内容。通过本单元的学习，你将能够使用Lightning Web组件和应用程序构建器，来创建更加动态和用户友好的Salesforce页面。让我们开始吧！

  ▶ 播放视频 查看详情
• 15

  Adding a Map to the Course Delivery Record Page

  第 229 页

  同学们，今天我们要学习的是如何在Salesforce的课程交付记录页面上添加一个地图组件。这个功能非常实用，因为它可以帮助我们直观地看到课程交付的地点。 首先，我们需要创建一个新的地图组件。这个组件会显示在课程交付记录的详细信息页面上。想象一下，当你查看某个课程的交付记录时，旁边就有一个小地图，显示这个课程是在哪里进行的，是不是很方便？ 创建这个地图组件的过程其实很简单。我们只需要在Salesforce的开发环境中，选择合适的地图API，然后根据课程交付记录中的地址信息，将地图嵌入到页面中。这样，每当我们查看一个课程交付记录时，地图就会自动显示相应的位置。 接下来，我会一步步带大家操作，确保每个人都能跟上。我们首先会设置地图的显示参数，比如地图的大小和默认的缩放级别。然后，我们会将地图组件与课程交付记录的地址字段关联起来，这样地图就能根据不同的记录显示不同的位置了。 最后，我们还会测试一下这个地图组件，确保它在不同的设备和浏览器上都能正常工作。这样，无论用户是在电脑上还是在手机上查看课程交付记录，都能看到清晰、准确的地图。 好了，这就是我们今天要学习的内容。希望大家能通过这个功能，更好地理解和利用Salesforce的强大功能。如果有任何问题，随时提问，我会在这里帮助大家。

  ▶ 播放视频 查看详情
• 16

  Map – Configuration File

  第 230 页

  让我们一步一步来理解这个Salesforce Lightning组件的配置和实现。 首先，我们来看一下这个XML配置文件。这个文件是用来定义我们的Lightning组件的一些基本信息和行为的。在这个文件中，我们指定了组件的API版本是48.0，并且我们通过设置``为“真”来让这个组件在Salesforce的App Builder中可见。我们还通过``标签指定了这个组件可以在“闪电__RecordPage”上使用，也就是说，这个组件可以被添加到记录详情页面上。 接下来，我们来看一下JavaScript文件`deliveryDetailMap.js-meta.xml`。这个文件是用来定义我们的Lightning组件的元数据的。在这个文件中，我们需要添加一个名为`recordId`的属性，并且用`@api`装饰器来装饰它。这样做是为了让我们的组件能够访问当前记录的ID。 为了在记录详细信息页面上使用这个组件，我们需要做两件事情： 1. 在``配置文档中指定`lightning__RecordPage`，这样我们的组件就可以被添加到记录详情页面上。 2. 在我们的控制器内装饰名为`@recordId`的属性，这样我们的组件就可以访问当前记录的ID了。 简单来说，这个配置文件和JavaScript文件的工作就是让我们的Lightning组件能够在Salesforce的记录详情页面上显示，并且能够访问和显示当前记录的ID。这样，我们就可以在页面上展示与这个记录相关的更多信息了。

  ▶ 播放视频 查看详情
• 17

  Exercise 3-2: Building Components for Lightning Experience Record Pages

  第 231 页

  同学们，今天我们来学习如何构建一个名为`deliveryDetailMap`的Lightning组件。这个组件将用于显示与特定记录相关的交付详情地图。我们之前已经有一个类似的组件叫做`deliveryListMap`，但这次我们要做的是更专注于单个记录的详细信息。 首先，我们需要在组件中定义一个`@api`属性，叫做`recordId`。这个属性非常重要，因为它会接收从页面传递过来的记录ID。这个ID是我们获取更多信息的关键。 接下来，我们需要配置这个组件，使其能够在记录详细信息页面中使用。这意味着我们需要在组件的配置文件中进行一些设置，确保它能够正确地嵌入到页面中。 然后，我们将使用Salesforce提供的`getRecord`有线服务。这个服务允许我们根据`recordId`来获取记录的详细信息。通过这种方式，我们可以动态地加载和显示与特定记录相关的数据。 总结一下，我们今天的任务是创建一个新的Lightning组件`deliveryDetailMap`，它能够接收一个`recordId`，并通过`getRecord`服务获取并显示该记录的详细信息。这样，我们就可以在记录详细信息页面上看到一个详细的地图，展示与交付相关的具体信息。 希望这个解释对你们有帮助，接下来我们可以一起动手实践，看看这个组件是如何工作的。

  ▶ 播放视频 查看详情
• 18

  Code Review - 233

  第 233 页

  让我们来聊聊代码审查中的一个重要部分——在`DeliveryDetailMap`组件中，如何确保组件正确地使用注入的`recordId`来获取更多信息。 首先，`recordId`是一个非常重要的参数，它通常是从父组件传递到子组件的。这个`recordId`代表了一个特定的记录，比如一个订单或者一个客户。我们的组件需要利用这个`recordId`去获取更多关于这个记录的详细信息。 在代码审查时，我们需要关注几个关键点： 1. ，确保`recordId`被正确注入，：我们需要检查组件是否正确地接收了`recordId`。在Salesforce的Lightning Web Components (LWC)中，这通常是通过`@api`装饰器来实现的。确保`recordId`被标记为`@api`，这样它才能从父组件传递过来。 2. ，检查`recordId`的使用，：接下来，我们需要看看组件是如何使用这个`recordId`的。通常，组件会使用这个`recordId`去调用Apex方法或者使用Lightning Data Service来获取记录的详细信息。确保这些调用是正确且高效的。 3. ，错误处理，：我们还需要确保组件能够处理`recordId`可能为空或者无效的情况。比如，如果`recordId`没有正确传递，组件应该有一个合理的默认行为或者错误提示。 4. ，性能考虑，：最后，我们需要考虑性能。如果`recordId`频繁变化，组件是否能够高效地更新显示的信息？确保没有不必要的重复调用或者数据加载。 通过这些步骤，我们可以确保`DeliveryDetailMap`组件能够正确地使用注入的`recordId`来获取和展示更多信息，同时保证代码的健壮性和性能。希望这些点能帮助你在代码审查时更加得心应手！

  ▶ 播放视频 查看详情
• 19

  Unit 3: Surfacing Lightning Web Components - 234

  第 234 页

  让我们来聊聊如何在Salesforce中使用Lightning Web组件（LWC）来构建更加动态和交互式的页面。你已经熟悉了使用App Builder来布局你的应用，现在我们来探索一下另一种方法，那就是使用Lightning Web组件。 首先，Lightning Web组件是一种现代的、基于标准的编程模型，它允许你使用HTML、JavaScript和CSS来构建组件。这些组件可以被用在Lightning页面上，通过Salesforce的Lightning App Builder来拖放和配置。 在Lightning Experience中，你可以使用这些组件来构建记录页。记录页是显示单个记录详细信息的页面，比如一个客户或一个机会。你可以自定义这些页面，添加或移除组件，以满足你的业务需求。 接下来，我们来看看如何推翻标准行动。标准行动是Salesforce提供的一些默认按钮，比如“新建”、“编辑”或“删除”。你可以通过创建自定义的Lightning Web组件来替换这些标准行动，提供更加个性化的用户体验。 定义Lightning应用程序意味着你可以创建一个包含多个Lightning页面的应用程序。这些页面可以包含不同的组件和布局，你可以通过导航菜单在不同的页面之间切换。 此外，你还可以在Visualforce页面中使用Lightning Out来嵌入Lightning组件。这意味着你可以在传统的Visualforce页面中利用Lightning组件的强大功能。 最后，Salesforce还支持其他类型的体验，比如Salesforce Mobile和Salesforce Console。你可以确保你的Lightning Web组件在这些不同的环境中都能正常工作。 总之，通过使用Lightning Web组件，你可以构建更加灵活和强大的Salesforce应用，提供更好的用户体验。希望这些信息对你有帮助，让你在Salesforce的世界里更加游刃有余。

  ▶ 播放视频 查看详情
• 20

  Surfacing Components in App Builder Pages vs Tabs

  第 235 页

  同学们，今天我们来聊聊Salesforce中的App Builder，特别是关于“表面组件页面”和“选项卡”的使用。我们一直在开发一个叫“Aw讲师”的页面，这个页面是用Lightning App Builder来构建的。Lightning App Builder是一个非常强大的工具，它让我们可以轻松地拖放组件来创建自定义的页面。 但是，App Builder页面并不是我们唯一的选择。有时候，我们可能需要一个组件来完全接管整个页面的布局。这就是我们在这个单元中要学习的内容。通过这种方式，我们可以让一个组件成为页面的主角，完全控制页面的展示和功能。 我们还讨论了App Builder页面和选项卡之间的一些区别。简单来说，App Builder页面更像是一个完整的画布，你可以在上面放置多个组件，而选项卡则更像是页面中的一个部分，它可以帮助我们组织内容，让用户在不同的视图之间切换。 所以，当我们设计“Aw讲师”页面时，我们需要考虑是使用App Builder页面来展示所有内容，还是让某个组件来主导整个页面。这取决于我们想要实现的功能和用户体验。希望这个解释能帮助大家更好地理解这两个概念。

  ▶ 播放视频 查看详情
• 21

  Surfacing Lightning Web Components in Salesforce Mobile and Lightning Experience

  第 236 页

  同学们，今天我们来聊聊如何在Salesforce Mobile和Lightning Experience中使用Lightning Web组件，并且如何将这些组件添加到Salesforce的移动导航菜单和Lightning体验中。 首先，我们需要创建一个新的Lightning组件。这个组件可以是你自己开发的，也可以是Salesforce提供的标准组件。创建好组件后，我们需要在组件的配置文件中添加一个目标，这个目标叫做`lightning__Tab`。这个步骤是为了告诉Salesforce，这个组件是可以被添加到选项卡中的。 接下来，我们要创建一个新的Lightning组件选项卡。这个选项卡将会在Salesforce的界面上显示，用户可以通过点击这个选项卡来访问你的组件。创建选项卡的过程很简单，只需要在Salesforce的设置中找到“选项卡”选项，然后选择“新建”，接着选择你的Lightning组件，给它起个名字，保存就可以了。 最后，我们需要将这个新创建的Lightning组件选项卡添加到Salesforce的移动导航菜单和Lightning体验中。这样，无论用户是在手机上使用Salesforce Mobile，还是在电脑上使用Lightning Experience，他们都能轻松找到并使用你的组件。 总结一下，整个过程分为三步：创建并配置Lightning组件，创建新的Lightning组件选项卡，然后将这个选项卡添加到Salesforce的移动和桌面界面中。这样，你的组件就能被更多的用户使用了。希望这个解释对你们有帮助，如果有任何问题，随时提问哦！

  ▶ 播放视频 查看详情
• 22

  LayoutManager – Configuration File

  第 237 页

  同学们，今天我们来聊聊如何在Salesforce中使用LayoutManager来配置组件，使其显示为闪电选项卡。听起来有点复杂，但其实很简单。 首先，LayoutManager是Salesforce中一个非常强大的工具，它允许我们自定义页面的布局和显示方式。如果你想在页面上添加一个组件，并且希望这个组件以闪电选项卡的形式显示，那么你需要做一些配置。 具体来说，你需要在配置文件中添加一个目标，这个目标就是``。这个目标告诉Salesforce，你想要这个组件显示为一个闪电选项卡。 举个例子，假设你有一个组件叫做“我的组件”，你想让它显示为一个选项卡。你只需要在配置文件中找到这个组件，然后添加``作为它的目标。这样，当你在页面上查看时，这个组件就会以选项卡的形式显示出来。 简单吧？通过这种方式，你可以轻松地管理和自定义你的Salesforce页面布局，让它们更符合你的需求。希望这个解释对你有帮助！如果有任何问题，随时问我哦。

  ▶ 播放视频 查看详情
• 23

  Creating a Lightning Component Tab

  第 238 页

  同学们，今天我们来聊聊如何在Salesforce中手动创建一个Lightning组件选项卡。这个过程其实很简单，但如果你没有通过激活向导来完成，那就需要手动操作一下。 首先，打开你的Salesforce设置。在设置页面中，找到“用户界面”这一部分。在这里，你会看到一个选项叫做“选项卡”。点击它，我们就进入了管理选项卡的界面。 接下来，点击“新建”按钮。这时，系统会问你想要创建哪种类型的选项卡。因为我们是要为Lightning组件创建选项卡，所以在这里选择“Lightning组件选项卡”。 选择好之后，系统会要求你选择一个已经配置好的Lightning组件。这个组件就是你之前已经创建并配置好的那个。选择它，然后给这个选项卡起一个名字，这个名字会显示在用户的界面上。 最后，点击“保存”，你的Lightning组件选项卡就创建好了。现在，用户就可以在他们的Salesforce界面上看到并使用这个新的选项卡了。 整个过程就是这样，简单几步，你就可以为你的Lightning组件创建一个新的选项卡。希望这能帮助到你们，如果有任何问题，随时提问哦！

  ▶ 播放视频 查看详情
• 24

  Creating a Two Column Layout in Code

  第 239 页

  让我们来简单解释一下这段代码的作用。 这段代码是用来创建一个两列布局的。想象一下，你有一个页面，你想把它分成两列，左边一列宽一点，右边一列窄一点。这段代码就是做这个的。 首先，我们有一个``标签，这个标签就像是一个容器，用来装我们的两列。然后，在这个容器里，我们有两个``标签，每个标签代表一列。 第一个``标签的`size`属性设置为8，这意味着这一列会占据整个宽度的8份中的8份，也就是2/3的宽度。在这一列里，我们放了一个叫``的组件，这个组件可能是用来显示学生列表的。 第二个``标签的`size`属性设置为4，这意味着这一列会占据整个宽度的8份中的4份，也就是1/3的宽度。在这一列里，我们放了一个叫``的组件，这个组件可能是用来显示学生详细信息的。 所以，简单来说，这段代码的作用就是在页面上创建两列，左边一列宽一点，用来显示学生列表，右边一列窄一点，用来显示学生详细信息。这样，用户就可以在一个页面上同时看到学生列表和详细信息了。

  ▶ 播放视频 查看详情
• 25

  Adding a Lightning Component Tab to Salesforce Mobile Navigation

  第 240 页

  今天我们来聊聊如何在Salesforce移动应用中手动添加一个Lightning组件选项卡。如果你没有通过激活向导来完成这个步骤，别担心，我们完全可以手动操作。 首先，打开你的Salesforce设置。在设置菜单中，找到“应用程序”这一项，点击进入。在这里，你会看到“移动应用”这个选项，继续点击它。 接下来，你会看到一个叫做“Salesforce导航”的部分。这里就是管理你移动应用导航菜单的地方。我们需要在这里添加新的选项卡。 点击“新建”按钮，然后选择“Lightning组件”作为选项卡类型。这样，你就可以选择你想要添加到移动导航菜单中的具体Lightning组件了。 选择好组件后，给它起一个名字，这样在移动应用中就能清楚地看到这个选项卡是做什么的。最后，别忘了保存你的设置。 这样，你就成功地将一个新的Lightning组件选项卡添加到了Salesforce移动应用的导航菜单中。现在，无论你身在何处，都可以轻松访问这个组件了。希望这个步骤对你有帮助！

  ▶ 播放视频 查看详情
• 26

  Adding Lightning Component Tabs to the App Launcher

  第 241 页

  让我们来聊聊如何将Lightning组件选项卡添加到Salesforce的应用程序启动器中。这个过程其实很简单，但需要你手动操作一下。 首先，你需要确保你的Lightning组件已经创建好了。接下来，我们要把这个组件作为一个选项卡添加到你的应用程序中。这样，用户就可以直接从应用程序启动器访问它了。 具体怎么做呢？你可以按照以下步骤来操作： 1. 打开Salesforce的设置页面。你可以在右上角找到齿轮图标，点击它，然后选择“设置”。 2. 在设置页面的左侧，你会看到一个名为“应用程序”的选项。点击它，然后选择“App Manager”。 3. 在App Manager页面中，你会看到所有已安装的应用程序。找到你想要添加Lightning组件选项卡的应用程序，然后点击它旁边的箭头，选择“编辑”。 4. 在编辑应用程序的页面中，你会看到一个名为“选项卡”的部分。在这里，你可以选择要添加到应用程序的选项卡。 5. 找到你之前创建的Lightning组件选项卡，然后把它从“可用选项卡”移动到“选定的选项卡”列表中。 6. 最后，别忘了点击“保存”按钮，这样你的更改就会生效了。 这样，你的Lightning组件选项卡就成功添加到应用程序启动器中了。用户现在可以直接从应用程序启动器访问这个组件，非常方便。 希望这个解释对你有帮助！如果你有任何问题，随时问我哦。

  ▶ 播放视频 查看详情
• 27

  Creating a Container Component that Controls Layout

  第 242 页

  让我们来聊聊如何在Salesforce中创建一个控制布局的容器组件。想象一下，你正在设计一个页面，这个页面需要展示两个主要部分：一个是学生的浏览器，另一个是学生的详细信息。为了做到这一点，我们会使用一个叫做“布局管理器”的工具。 首先，我们需要创建一个容器组件。这个容器组件就像是一个大盒子，里面可以放其他小盒子。在这个大盒子里，我们会放两个“闪电布局项”。你可以把“闪电布局项”想象成小盒子，每个小盒子里面可以放不同的内容。 第一个小盒子里，我们会放学生的浏览器。这个浏览器可以帮助用户查找和选择学生。第二个小盒子里，我们会放学生的详细信息。这样，当用户从浏览器中选择一个学生时，详细信息就会自动显示在第二个小盒子里。 通过这种方式，我们可以轻松地管理和控制页面的布局，确保用户能够方便地浏览和查看学生的信息。这就是我们如何使用布局管理器来创建一个控制布局的容器组件的过程。希望这个解释对你有帮助！

  ▶ 播放视频 查看详情
• 28

  Exercise 3-3: Surfacing a Component Lightning Experience

  第 243 页

  让我们一步一步来完成这个练习。首先，我们要创建一个新的组件，名字叫`layoutManager`。这个组件将会帮助我们管理页面的布局。 1. ，创建`layoutManager`组件，： - 打开Salesforce的开发者控制台。 - 选择“文件” &gt; “新建” &gt; “闪电组件”。 - 在弹出的对话框中，输入组件名称`layoutManager`，然后点击“提交”。 - 现在，你可以在代码编辑器中看到新创建的组件。 2. ，配置`layoutManager`作为选项卡，： - 在`layoutManager`组件的代码中，确保它被设置为可以作为选项卡使用。这通常意味着你需要确保组件的接口（interface）支持`force:appHostable`，这样它就可以被添加到应用程序的选项卡中。 3. ，创建新选项卡，： - 在Salesforce设置中，搜索“选项卡”。 - 选择“新建”来创建一个新的自定义选项卡。 - 在“组件”部分，选择我们刚刚创建的`layoutManager`组件。 - 填写选项卡的标签和名称，然后保存。 4. ，将新选项卡添加到认证应用程序，： - 打开“应用程序管理器”。 - 找到并选择你想要添加新选项卡的应用程序，比如“认证应用程序”。 - 在应用程序的详细信息页面，找到“选项卡”部分。 - 点击“编辑”按钮，将我们刚刚创建的`layoutManager`选项卡添加到选定的选项卡列表中。 - 保存更改。 5. ，将新选项卡添加到移动导航菜单，： - 在“应用程序管理器”中，再次选择你的应用程序。 - 这次，找到“移动导航”部分。 - 点击“编辑”按钮，将`layoutManager`选项卡添加到移动导航菜单中。 - 保存更改。 完成这些步骤后，你的`layoutManager`组件就会作为一个新的选项卡出现在桌面和移动设备的认证应用程序中了。这样，用户就可以通过这个选项卡来访问和管理页面布局了。希望这个过程对你来说既简单又有趣！如果有任何疑问，随时问我哦。

  ▶ 播放视频 查看详情
• 29

  Surface a Lightning Web Component in Lightning Experience.

  第 244 页

  同学们，今天我们来学习如何在Lightning Experience中覆盖Lightning Web组件。这个练习会帮助我们更好地理解如何自定义和展示我们的组件。 首先，我们需要定义一个顶级的Lightning Web组件，这个组件将决定我们的布局。你可以想象这个组件就像是一个房子的框架，所有的房间和家具都会在这个框架内摆放。 接下来，我们需要将目标添加到元数据文件中。这个步骤就像是给我们的房子画一张地图，告诉Salesforce我们的组件应该放在哪里，以及如何与其他部分互动。 然后，我们要上传自定义的选项卡图标。这就像是为我们的房子选择一个独特的门牌号，让用户一眼就能认出它。 定义好Lightning Components选项卡后，我们就可以在Lightning Experience应用程序中显示这个选项卡了。这就像是把我们的房子放在一个显眼的位置，让所有人都能看到并使用它。 整个过程大约需要20分钟，但别担心，我会一步步指导你们完成。准备好了吗？让我们开始吧！

  ▶ 播放视频 查看详情
• 30

  Unit 3: Surfacing Lightning Web Components - 245

  第 245 页

  今天我们来聊聊Salesforce中的Lightning Web组件，以及如何使用它们来构建动态的Lightning页面。首先，Lightning Web组件是一种现代的、基于标准的编程模型，它允许开发者构建快速、轻量级的组件，这些组件可以在Salesforce的Lightning Experience中使用。 在Lightning Experience中，你可以使用组件和应用程序构建器来创建和定制页面。这些页面可以包含各种组件，比如记录页，这是展示单个记录详细信息的页面。你可以通过拖放的方式，将不同的组件添加到页面上，比如图表、列表视图、自定义组件等。 接下来，我们谈谈如何推翻标准行动。在Salesforce中，标准行动是系统预定义的一些操作，比如“新建”、“编辑”等。但有时候，你可能需要自定义这些操作的行为。这时，你可以使用Lightning Web组件来重写这些标准行动。你只需要在对象管理器中找到相应的对象，然后通过菜单设置操作覆盖。记住，只有那些实现了适当接口的组件才会显示在重写的组件列表中。 此外，你还可以定义Lightning应用程序。这些应用程序可以包含多个Lightning页面，每个页面都可以包含不同的组件。你可以通过Lightning Out在Visualforce页面中使用这些Lightning组件。这意味着你可以在传统的Visualforce页面中嵌入现代的Lightning组件，从而提升用户体验。 最后，Salesforce还支持其他类型的体验，比如移动应用、社区等。你可以根据业务需求，选择合适的体验类型来展示你的Lightning组件。 总结一下，通过使用Lightning Web组件和应用程序构建器，你可以轻松地构建和定制Salesforce的Lightning页面，提升用户的操作体验。希望这些信息对你有所帮助，如果你有任何问题，随时提问！

  ▶ 播放视频 查看详情
• 31

  Overriding Standard Actions

  第 246 页

  同学们，今天我们来聊聊如何在Salesforce中覆盖标准操作。首先，我们需要明白一点：直接使用Lightning Web Components（LWC）来覆盖标准操作是不行的。但是，别担心，我们还是有办法的！ 我们可以利用Lightning Experience和移动设备中的Aura组件来实现这一点。具体来说，我们可以使用Lightning:actionDocs界面来覆盖标准操作。这个界面允许我们自定义按钮、链接或其他操作，从而改变用户与Salesforce交互的方式。 简单来说，虽然LWC不能直接覆盖标准操作，但通过Aura组件和Lightning:actionDocs，我们依然可以实现类似的效果。希望这个解释对你们有帮助！如果有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 32

  Wrapping a Lightning Web Component in an Aura Component

  第 247 页

  今天我们来聊聊如何将Lightning Web组件（LWC）包裹在Aura组件中，并且覆盖课程参与者对象的“查看”操作。听起来有点复杂，但其实很简单，我们一步步来。 首先，我们要实现三个接口。这三个接口就像是给我们的组件添加了三个超能力，让它们能够完成特定的任务。 第一个接口是`Lightning:actionoverride`。这个接口的作用是让我们能够覆盖默认的“查看”操作。也就是说，当用户点击“查看”按钮时，不是打开标准的页面，而是打开我们自定义的组件。这样，我们就可以完全控制用户看到的界面和功能了。 第二个接口是`Force:hasRecordId`。这个接口的作用是让我们的组件能够获取到当前记录的ID。这个ID会作为一个属性传递到我们的组件中，我们可以通过`{!v.recordId}`来访问它。有了这个ID，我们就可以在组件中加载和显示特定的记录数据了。 第三个接口是`Force:hasSObjectName`。这个接口的作用是让我们能够获取到当前记录的sObject名称。虽然我们现在只是用这个组件来覆盖课程参与者记录的“查看”操作，但如果我们想让这个组件能够覆盖多个对象的操作，了解sObject名称就会非常有用。这样，我们就可以根据不同的对象类型来动态调整组件的行为。 总结一下，通过实现这三个接口，我们的组件就能够覆盖“查看”操作，获取当前记录的ID和sObject名称，并且根据这些信息来展示自定义的界面和功能。是不是很简单呢？希望你们都能掌握这个技巧，灵活运用在自己的项目中！

  ▶ 播放视频 查看详情
• 33

  Invoking Lightning Web Components from Aura

  第 248 页

  让我们来聊聊如何在Aura组件中重新启动一个Lightning Web组件（LWC），并且传递当前显示的记录的ID。 首先，我们知道Aura和LWC是Salesforce中两种不同的组件框架。Aura是较早的框架，而LWC是较新的、更现代的框架。尽管LWC在很多方面更强大，但有时候我们仍然需要在Aura组件中使用LWC。 在这个例子中，我们有一个Aura组件，它实现了`lightning:actionOverride`和`force:hasRecordId`接口。这意味着这个组件可以覆盖标准的操作，并且它可以访问当前显示的记录的ID。 在这个Aura组件中，我们想要嵌入一个LWC组件，叫做`courseAttendee`。我们想要把当前记录的ID传递给这个LWC组件。 在Aura中，我们使用``的语法来引用LWC组件。注意，这里的`c`代表的是命名空间，通常是你自定义组件的命名空间。 在这个例子中，我们使用``来引用LWC组件，并且通过`recordId=&quot;{!v.recordId}&quot;`将当前记录的ID传递给它。这里的`{!v.recordId}`是Aura的表达式语法，表示从Aura组件的属性中获取`recordId`的值。 需要注意的是，当我们在Aura中引用LWC组件时，我们使用的是Aura的语法，而不是LWC的语法。在LWC中，我们通常会使用烤肉串命名法（kebab-case），比如``，但在Aura中，我们使用点号（dot notation），比如``。 总结一下，当你在Aura组件中嵌入LWC组件时，你需要使用Aura的语法来实例化LWC组件，并且通过Aura的表达式语法来传递属性。这样，你就可以在Aura组件中成功地使用LWC组件，并且传递必要的参数了。 希望这个解释对你有帮助！如果你有任何问题，随时问我。

  ▶ 播放视频 查看详情
• 34

  Overriding a Standard Action

  第 249 页

  今天我们来聊聊如何在Salesforce中覆盖标准收件箱的使用。首先，你需要知道，这个操作是通过对象管理器来完成的。你可以在对象管理器里找到你想要修改的对象，然后通过菜单来设置操作覆盖。 这里有个小细节要注意，不是所有的组件都能被覆盖。只有那些已经实现了适当接口的组件，才会出现在你可以重写的组件列表中。这意味着，如果你想要覆盖某个功能，你得先确保这个功能对应的组件已经准备好了，能够支持你的覆盖操作。 简单来说，就是先找到对象，然后看看哪些组件是你可以改的，最后选择你想要覆盖的操作。这样，你就可以根据自己的需求来定制Salesforce的功能了。希望这个解释对你有帮助！

  ▶ 播放视频 查看详情
• 35

  Standard Record Page

  第 250 页

  同学们，今天我们来聊聊如何在Salesforce中玩转标准记录页面。想象一下，你有一个课程参加者的列表，你想用一种更酷的方式查看他们的信息，而不是普通的查看方式。这就是我们今天要做的——用替代视图来覆盖默认的查看操作。 首先，我们要重用之前创建的学生瓷砖组件。这就像是你在乐高积木中找到一个特别酷的零件，然后决定在不同的模型中都使用它。这样做不仅节省时间，还能保持界面的一致性，是不是很甜呢？ 接下来，我们要使用一个叫做NavigationMixin的工具。这个工具就像是你的导航助手，帮助你在Salesforce的不同页面之间跳转。但这次，我们不是要打开一个新的记录创建窗口，而是要打开一个编辑窗口。这样，当你点击某个学生时，不是仅仅查看他们的信息，而是可以直接编辑这些信息。 想象一下，这就像是你有一个魔法遥控器，可以随时调整电视节目的内容，而不是只能看固定的节目。通过这种方式，你可以更灵活地管理和更新课程参加者的信息。 好了，这就是今天的课程内容。希望你们能通过这些技巧，让你们的Salesforce页面变得更加高效和有趣。下次课我们再见！

  ▶ 播放视频 查看详情
• 36

  Unit 3: Surfacing Lightning Web Components - 252

  第 252 页

  今天我们来聊聊Salesforce中的Lightning Web组件（LWC），这是Salesforce提供的一种现代、高效的方式来构建用户界面。想象一下，你正在搭建一个乐高模型，每个小积木块都是一个组件，你可以自由组合它们来创建出你想要的任何形状。在Salesforce中，这些“积木块”就是Lightning Web组件。 首先，我们来看看如何使用这些组件和应用程序构建器来构建Lightning页面。应用程序构建器是一个拖放式的工具，它让你可以轻松地将组件添加到页面上，就像在画布上放置积木一样简单。你可以选择不同的组件，比如表格、图表或者按钮，然后将它们拖到你想要的位置。 接下来，我们会探讨如何推翻标准行动。在Salesforce中，标准行动是系统预设的一些操作，比如“新建”或“编辑”。但有时候，这些标准行动可能不完全符合你的业务需求。这时，你就可以使用Lightning Web组件来创建自定义的行动，让它们更贴合你的业务流程。 然后，我们会定义什么是Lightning应用程序。简单来说，Lightning应用程序就是由多个Lightning Web组件组成的集合，它们共同工作，提供一个完整的用户界面。你可以把它想象成一个完整的乐高模型，由许多小积木块组成。 我们还会学习如何在带有Lightning Out的Visualforce页面中使用Lightning。Visualforce是Salesforce的另一种用户界面技术，而Lightning Out则允许你在Visualforce页面中嵌入Lightning组件。这就像是在一个旧式的电视机上播放高清视频，虽然设备不同，但内容依然精彩。 最后，我们会看看其他支持体验。Salesforce不仅仅支持Lightning体验，还有其他一些体验，比如Salesforce Classic。了解这些不同的体验，可以帮助你更好地选择适合你业务需求的解决方案。 总之，通过本单元的学习，你将掌握如何使用Lightning Web组件来构建灵活、强大的用户界面，让你的Salesforce应用更加符合你的业务需求。就像搭建乐高模型一样，你可以自由地创造和调整，直到一切都完美无缺。

  ▶ 播放视频 查看详情
• 37

  Creating a Lightning Application in VS Code

  第 253 页

  让我们一步一步来学习如何在VS Code中创建一个Lightning应用程序。首先，确保你已经打开了VS Code，并且已经连接到了你的Salesforce环境。 1. ，打开VS Code，：启动你的VS Code编辑器。 2. ，右键单击光环，：在VS Code的左侧文件资源管理器中，找到并右键点击“Aura”文件夹。这个文件夹是用来存放所有Aura组件的，包括Lightning应用程序。 3. ，选择SFDX：创建Lightning应用程序，：在弹出的菜单中，选择“SFDX: Create Lightning App”。这个选项会启动一个向导，帮助你创建一个新的Lightning应用程序。 4. ，输入组件名称，：接下来，系统会提示你输入新组件的名称。请确保你输入的名称是唯一的，并且遵循Salesforce的命名规范。通常，名称应该简洁明了，能够反映出应用程序的功能。 5. ，完成创建，：输入名称后，按下回车键，VS Code就会在Aura目录下创建一个新的Lightning应用程序。这个应用程序将包含几个默认的文件，比如控制器、帮助器、样式表等。 记住，Lightning应用程序是Aura框架的一部分，所以它们会被自动放置在Aura目录中。这样，你就可以开始开发你的Lightning应用程序了，利用Salesforce的强大功能来构建动态和响应式的用户界面。 希望这个过程对你来说简单易懂。如果有任何疑问，随时提问，我会在这里帮助你。

  ▶ 播放视频 查看详情
• 38

  Defining and Browsing to a Lightning App

  第 254 页

  让我们来聊聊如何在Salesforce中定义和浏览Lightning应用程序。首先，当你创建一个Lightning应用程序时，你实际上是在设计一个完全由你控制的用户界面。这意味着你可以自由地决定这个应用的外观和感觉，而不必拘泥于Salesforce的默认样式。 在创建过程中，Salesforce的标准样式表（SIDS）不会自动加载。如果你需要这些样式，你可以通过使用`extends`关键字来手动包含它们。这样，你就可以确保你的应用既符合Salesforce的生态系统，又保持了你的个性化设计。 接下来，我们来看看如何实例化一个Lightning Web组件。以我们的`deliveryListMap`为例，你可以直接在代码中创建这个组件的实例，这样它就会在你的应用中显示出来。 现在，让我们谈谈如何查看你的Lightning应用程序。每个Lightning应用程序都有一个独特的URL，格式通常是`/c/YourAppName.app`。你可以通过几种方式访问这个URL： 1. 直接在浏览器的地址栏中输入这个URL。 2. 在Salesforce的开发人员控制台中，找到你的`.app`文件，然后点击“预览”按钮。 3. 使用Salesforce的命令行工具，通过输入`sfdx force:org:open`命令，并指定路径来打开你的应用。 通过这些步骤，你就可以轻松地创建、定制和查看你的Lightning应用程序了。希望这些信息对你有帮助！

  ▶ 播放视频 查看详情
• 39

  Creating App Templates

  第 255 页

  让我们来聊聊如何在Salesforce中创建和使用应用程序模板。这个模板其实就是一个框架，它帮助引导和加载你的应用程序。通过这个模板，你还可以做一些在标准组件中通常不允许的事情，比如使用

  ▶ 播放视频 查看详情
• 40

  Setting Application Attributes via the Query String

  第 256 页

  让我们来聊聊这个有趣的功能。想象一下，你正在使用一个叫做“HelloWorld.app”的Salesforce应用程序。这个应用程序有两个属性，一个叫做“标题”，另一个叫做“消息”。现在，你希望当用户打开这个应用程序时，这些属性能够自动填充一些特定的值。 这里有一个小技巧，你可以通过浏览器的查询字符串来传递这些值。查询字符串就是你在浏览器地址栏中看到的问号后面的部分。比如，如果你在浏览器中输入这样的地址： ``` HelloWorld.app?标题=你好&amp;消息=世界 ``` 那么，当这个应用程序加载时，它会自动将“标题”属性设置为“你好”，将“消息”属性设置为“世界”。这是因为查询字符串中的参数名（“标题”和“消息”）与应用程序中的Aura属性名相匹配。 所以，简单来说，你只需要在浏览器的地址栏中添加一些参数，应用程序就会自动把这些参数的值赋给对应的属性。这样，你就可以轻松地通过URL来定制应用程序的初始状态了。是不是很方便呢？

  ▶ 播放视频 查看详情
• 41

  AwApp.app custom Aura Lightning Application

  第 257 页

  同学们，今天我们来聊聊如何在Salesforce中创建一个自定义的Aura Lightning应用程序，名字叫AwApp.app。这个应用程序会有一个很酷的功能，就是在页面的左侧会有一个属性调试器。这个调试器可以帮助我们查看和调试两个属性：listView和markersTitle。这两个属性会根据我们在浏览器地址栏输入的查询字符串来动态变化。 接下来，我们的AwApp.app会实例化一个叫做deliveryListMap的Lightning Web组件。这个组件会接收我们刚才提到的listView和markersTitle属性，并根据这些属性来展示相应的内容。 最后，我们还会创建一个模板组件。这个模板组件有两个主要功能：一是它会改变浏览器标签页的标题，让用户一眼就能知道当前页面的内容；二是它会阻止浏览器下载一个叫做reset.css的样式表文件，这样可以避免一些不必要的样式冲突。 简单来说，通过这个练习，你们将学会如何创建一个功能丰富的Aura应用程序，并且掌握如何通过属性调试器来调试和优化你们的应用。希望你们能在这个过程中学到很多实用的技巧！

  ▶ 播放视频 查看详情
• 42

  Define a Lightning Application. Set attribute values via the URL query string.

  第 258 页

  同学们，今天我们来学习如何定义和操作Lightning应用程序。首先，Lightning应用程序是Salesforce提供的一种现代化的用户界面框架，它允许我们创建动态、响应式的网页应用。 ，第一步：定义Lightning应用程序， 定义Lightning应用程序其实很简单。你只需要在Salesforce的开发者控制台中创建一个新的Lightning应用程序。这个应用程序会有一个主组件，我们称之为“光环组件”。这个组件是应用程序的核心，所有的功能和界面都会围绕它来构建。 ，第二步：初始化光环组件， 初始化光环组件意味着我们要设置组件的初始状态和属性。这些属性可以是文本、数字、布尔值等，它们决定了组件的行为和显示内容。比如，你可以设置一个属性来显示用户的名称，或者控制一个按钮是否可见。 ，第三步：从URL执行Lightning应用程序， 当你定义好应用程序并初始化了组件后，你可以通过URL来启动这个应用程序。Salesforce允许我们在URL中添加查询字符串参数，这些参数可以被应用程序读取并用来设置组件的属性。比如，你可以在URL中添加一个参数来指定用户的语言偏好，应用程序读取这个参数后，会自动调整界面语言。 ，第四步：修改查询字符串参数并查看影响， 最后，我们来练习一下如何通过修改URL中的查询字符串参数来影响应用程序的行为。你可以尝试在URL中添加或修改参数，然后刷新页面，看看应用程序的界面或功能有什么变化。这是一个非常实用的技巧，特别是在你需要快速测试不同设置时。 好了，这就是今天的内容。希望大家通过这个练习，能够更好地理解如何定义和操作Lightning应用程序。如果有任何问题，随时提问哦！

  ▶ 播放视频 查看详情
• 43

  Code Review - 259

  第 259 页

  让我们来聊聊这段代码审查的内容。即使你对Aura框架不太熟悉，AwApp.app这个文件的结构和逻辑应该是相对容易理解的。 首先，你会注意到在代码的顶部，有两个变量被声明了，分别是`listView`和`markersTitle`。这两个变量是通过``标签来定义的。这个标签的作用是告诉Aura框架，这两个变量是可以在组件中使用的属性。你可以把它们想象成是组件的“输入参数”，外部可以传递数据给它们。 接下来，你会看到代码中使用了`lightning:layout`和`lightning:layoutItem`这两个标签。这些标签的作用是帮助你在页面上布局内容，类似于HTML中的`div`标签，但它们是为Salesforce Lightning框架特别设计的。你可以把它们想象成是“布局管理器”，帮助你把页面上的元素排列得整整齐齐。 然后，代码中提到了“SDDS课程”。这部分可能是指一些特定的业务逻辑或者数据处理的代码。虽然这里没有详细展开，但你可以想象这部分代码是用来处理一些与课程相关的数据或者逻辑的。 最后，你会看到代码中实例化了一个名为`delivyListMap`的组件，并且传递了`listView`和`markersTitle`这两个属性给它。这就像是你在调用一个函数，并且传递了一些参数给它。`delivyListMap`组件会根据这些属性来展示相应的内容。 总的来说，这段代码的结构是清晰的，即使你对Aura框架不太熟悉，也能通过变量声明、布局标签和组件实例化这些常见的编程概念来理解它的逻辑。希望这个解释能帮助你更好地理解这段代码！

  ▶ 播放视频 查看详情
• 44

  Unit 3: Surfacing Lightning Web Components - 260

  第 260 页

  大家好，今天我们来聊聊Salesforce中的Lightning Web组件，也就是我们常说的LWC。这个单元的内容非常实用，特别是如果你想要在Salesforce中构建更加动态和用户友好的页面。 首先，我们来看看如何使用组件和应用程序构建器来构建Lightning页面。Lightning页面是Salesforce中非常强大的工具，它允许你通过拖放组件来快速构建页面。你可以选择不同的组件，比如表格、图表、按钮等，然后将它们放在页面上，就像拼图一样简单。 接下来，我们谈谈闪电体验的建筑组件记录页。这个功能让你可以在记录页面上添加自定义的Lightning组件，这样你就可以根据业务需求来定制页面的显示内容和功能。 然后，我们来看看如何推翻标准行动。在Salesforce中，标准行动是系统预设的一些操作，比如“新建”、“编辑”等。但有时候，这些标准行动可能不完全符合你的需求。这时，你就可以使用LWC来创建自定义的行动，替换或增强这些标准行动。 定义Lightning应用程序也是一个重要的部分。你可以创建一个包含多个Lightning组件的应用程序，这样用户就可以在一个统一的界面中完成多项任务。 如果你已经在使用Visual force页面，但想要加入一些Lightning的功能，那么你可以使用Lightning Out。这是一个允许你在Visual force页面中嵌入Lightning组件的技术。这样，你就可以在不完全重写页面的情况下，享受到Lightning带来的好处。 最后，如果你需要将LWC放在Visual force页面上，我们也会看看如何做到这一点。虽然这需要一些额外的步骤，但一旦设置完成，你就可以在传统的Visual force页面中使用现代的Lightning组件了。 总之，通过这些工具和技术，你可以大大提升Salesforce页面的用户体验和功能性。希望这些内容对你有所帮助，让我们继续深入学习吧！

  ▶ 播放视频 查看详情
• 45

  Using Lightning in Visualforce Pages with Lightning Out

  第 261 页

  让我们来聊聊如何在Visualforce页面中使用Lightning和Lightning Out。想象一下，你已经投入了很多时间和精力在Visualforce页面上，但现在你想要加入一些新的、更现代的功能。这时候，Lightning Web组件就能派上用场了。 你可以把Lightning Web组件看作是那些新潮的小工具，它们可以轻松地加入到你的Visualforce页面中，让你的页面既保留了原有的功能，又增加了新的亮点。这就像是给你的旧车装上了最新的导航系统，既保留了车的经典外观，又增加了现代科技感。 现在，说到Lightning Out，这是一个非常强大的功能。它允许你将Aura和Lightning Web组件嵌入到几乎任何网页中。当你在Visualforce页面中使用它时，事情会变得更加简单。比如，你不需要担心身份验证的问题，也不需要配置复杂的连接应用。而且，你不需要使用iframe，那些烦人的CORS问题也会自动解决。 所以，简单来说，使用Lightning和Lightning Out，你可以轻松地在你的Visualforce页面中加入新的功能，同时享受更简单的配置和更少的麻烦。这就像是给你的旧房子装上了智能家居系统，既保留了家的温馨，又增加了现代的便利。

  ▶ 播放视频 查看详情
• 46

  Making your Components Available for Invocation from Visualforce

  第 262 页

  让我们一步一步来理解如何使您的Lightning组件在Visualforce页面中可用。这个过程其实并不复杂，只要跟着步骤走，您很快就能掌握。 首先，我们需要创建一个特殊的Lightning应用程序，这个应用程序的作用是作为一个桥梁，让Visualforce页面能够调用和使用您的Lightning组件。这个应用程序和我们平时创建的Lightning应用程序有些不同，它不支持模板，也就是说，它不会显示任何界面元素。它的主要任务是通过标签来加载您希望在Visualforce中使用的组件。 举个例子，假设您有一个名为`deliveryListMap`的组件，您希望在Visualforce页面中使用它。那么，您需要创建一个新的Lightning应用程序，比如我们可以命名为`vfDependency.app`。在这个应用程序中，您会使用标签来指定`deliveryListMap`组件，以及任何其他这个组件可能依赖的组件，比如`Lightning:Badge`。 这里是一个简单的代码示例，展示了`vfDependency.app`可能的样子： ```html ``` 在这个例子中，`vfDependency.app`应用程序通过`extends=&quot;ltng:outApp&quot;`属性表明它是一个用于Lightning Out的应用程序。然后，通过标签，我们列出了所有需要在这个应用程序中加载的组件。这样，当Visualforce页面调用这个应用程序时，所有相关的组件都会被预先加载，从而提高效率和性能。 总结一下，使您的Lightning组件在Visualforce中可用的关键步骤是创建一个特殊的Lightning应用程序，这个应用程序通过标签来加载所有需要的组件。这样，您就可以在Visualforce页面中轻松地使用这些组件了。希望这个解释对您有帮助！如果有任何疑问，随时欢迎提问。

  ▶ 播放视频 查看详情
• 47

  Instantiating Lightning Web Components on a Visualforce Page

  第 263 页

  让我们来聊聊如何在Visualforce页面中实例化一个Lightning Web组件（LWC）。这个过程其实并不复杂，我会一步步带你了解。 首先，你需要知道，Visualforce页面是Salesforce中一种传统的页面构建方式，而Lightning Web组件则是更现代、更强大的UI构建工具。虽然它们属于不同的技术栈，但Salesforce提供了一种方式，让它们可以一起工作。 ### 第一步：加载Lightning的JavaScript库 在你的Visualforce页面中，首先需要加载Lightning的JavaScript库。这个库是让Visualforce页面能够识别和加载Lightning组件的基础。你可以通过以下代码来实现： ```html ``` 这行代码会自动加载Lightning所需的JavaScript文件，包括`lightning.out.js`，这是让Visualforce页面能够与Lightning组件通信的关键。 ### 第二步：创建一个容器 接下来，你需要在Visualforce页面中创建一个`<div>`标签，并给它一个唯一的`id`。这个`<div>`将作为你Lightning Web组件的容器。比如： ```html <div id="myLWCContainer"></div> ``` 这个`<div>`就是你的组件将要显示的地方。 ### 第三步：加载Lightning App 现在，你需要使用JavaScript来加载Lightning App。Lightning App是一个特殊的容器，它允许你在Visualforce页面中加载Lightning组件。你可以使用`$Lightning.use()`函数来实现这一点。这个函数会加载Lightning App，并将你的Lightning Web组件加载到内存中。 ```javascript $Lightning.use(&quot;c:MyLightningApp&quot;, function() { // 这里可以继续编写代码 }); ``` 这里的`c:MyLightningApp`是你Lightning App的名称，你需要确保这个App已经在你的Salesforce组织中创建好了。 ### 第四步：实例化Lightning Web组件 最后一步是将你的Lightning Web组件实例化到之前创建的`<div>`容器中。你可以使用`$Lightning.createComponent()`函数来实现这一点。这个函数会将你的组件渲染到指定的DOM容器中。 ```javascript $Lightning.createComponent(&quot;c:deliveryListMap&quot;, {}, &quot;myLWCContainer&quot;, function(cmp) { // 组件加载完成后的回调函数 }); ``` 在这个例子中，`c:deliveryListMap`是你的Lightning Web组件的名称，`{}`是传递给组件的属性（如果有的话），`&quot;myLWCContainer&quot;`是你之前创建的`<div>`的`id`。 ### 总结 通过以上四个步骤，你就可以在Visualforce页面中成功实例化一个Lightning Web组件了。整个过程其实就是在Visualforce页面中加载Lightning的JavaScript库，创建一个容器，加载Lightning App，最后将组件实例化到容器中。 希望这个解释对你有帮助！如果你有任何问题，随时问我哦！</div></div></div></div></div>

  ▶ 播放视频 查看详情
• 48

  DeliveryListVF Visualforce Page

  第 264 页

  同学们，今天我们来学习如何创建一个名为“DeliveryListVF”的Visualforce页面。这个页面将会展示我们的Delivery List Map组件，并且我们会做一些有趣的事情。 首先，我们会在页面上包含一个BlockTable。BlockTable是一个非常实用的组件，它可以帮助我们以表格的形式展示数据，看起来既整洁又专业。 接下来，我们会实例化一个标准组件，叫做“闪电徽章”。这个徽章是Salesforce自带的一个小图标，通常用来表示一些重要的状态或者标记。它会让我们的页面看起来更加生动和直观。 最后，我们还会实例化一个自定义组件，叫做“交付列表地图”。这个组件是我们自己创建的，用来展示交付列表的地图视图。通过这个地图，用户可以更直观地看到交付的位置和状态。 好了，这就是我们今天要做的内容。通过这个练习，你们将学会如何在Visualforce页面上集成不同的组件，让页面功能更加强大和用户友好。现在，让我们开始动手吧！

  ▶ 播放视频 查看详情
• 49

  Surface the deliveryListMap in Visualforce.

  第 265 页

  同学们，今天我们来学习如何在Visualforce页面中展示一个Delivery ListMap，并且通过一个练习来加深理解。这个练习是关于如何在Visualforce页面上实例化一个Lightning Web组件（LWC）。我们会分步骤来讲解，确保大家都能跟上。 ### 第一步：理解任务 我们的任务有两个主要部分： 1. ，定义一个应用程序将组件加载到内存中，：这意味着我们需要创建一个应用程序，它能够加载并管理我们需要的组件。 2. ，在Visualforce页面上实例化Lightning Web组件，：我们需要在Visualforce页面上展示一个Lightning Web组件。 ### 第二步：创建应用程序 首先，我们需要创建一个应用程序来加载我们的组件。这个应用程序可以是一个简单的Apex类，它负责初始化和管理我们的组件。 ```apex public class DeliveryApp { public List deliveries { get; set; } public DeliveryApp() { deliveries = [SELECT Id, Name, Status__c FROM Delivery__c]; } } ``` 在这个类中，我们定义了一个`deliveries`列表，它包含了所有的Delivery记录。构造函数中，我们从数据库中查询这些记录并加载到内存中。 ### 第三步：创建Visualforce页面 接下来，我们需要创建一个Visualforce页面来展示这些Delivery记录。我们可以使用`apex:page`标签来定义页面，并使用`apex:repeat`标签来遍历和展示`deliveries`列表。 ```html ``` 在这个页面中，我们使用了`apex:repeat`标签来遍历`deliveries`列表，并为每个Delivery记录创建一个区块来展示其名称和状态。 ### 第四步：实例化Lightning Web组件 现在，我们需要在Visualforce页面上实例化一个Lightning Web组件。首先，我们需要确保已经创建了一个LWC组件。假设我们有一个名为`deliveryList`的LWC组件。 在Visualforce页面中，我们可以使用`lightning:out`标签来嵌入LWC组件。 ```html ``` 在这个页面中，我们使用了`lightning:out`标签来嵌入`deliveryList`组件。这样，当页面加载时，LWC组件就会被实例化并展示在页面上。 ### 第五步：测试和验证 最后，我们需要测试我们的应用程序和页面，确保一切工作正常。你可以通过访问Visualforce页面的URL来查看结果，确保Delivery记录和LWC组件都正确展示。 ### 总结 通过这个练习，我们学习了如何在Visualforce页面中展示一个Delivery ListMap，并且实例化了一个Lightning Web组件。我们创建了一个应用程序来加载和管理组件，并在Visualforce页面上展示了这些组件。希望这个练习能帮助大家更好地理解如何在Salesforce中结合使用Visualforce和Lightning Web组件。 如果有任何问题，随时提问！

  ▶ 播放视频 查看详情
• 50

  Unit 3: Surfacing Lightning Web Components - 266

  第 266 页

  今天我们来聊聊Salesforce中的Lightning Web组件（LWC），这是构建现代、响应式用户界面的强大工具。我们将从基础开始，逐步深入到如何在Salesforce中使用这些组件来增强用户体验。 首先，，表面Lightning Web组件，，这是Salesforce提供的一种现代、轻量级的框架，用于构建高性能的Web组件。这些组件可以在Salesforce的Lightning Experience中使用，帮助开发者创建更加动态和互动的用户界面。 接下来，，使用组件和应用程序构建器构建Lightning页面，。Salesforce提供了一个名为Lightning App Builder的工具，它允许你通过拖放组件来构建页面。你可以选择不同的Lightning Web组件，比如按钮、表格、图表等，然后将它们添加到页面上，无需编写代码即可快速搭建功能丰富的页面。 然后，，闪电体验的建筑组件记录页，。在Lightning Experience中，每个记录页都可以通过添加不同的组件来定制。这些组件可以帮助用户更有效地查看和管理数据，比如显示相关的记录、图表或者执行特定的操作。 ，推翻标准行动，，在Salesforce中，你可以自定义标准操作，比如编辑、删除等，通过使用Lightning Web组件，你可以创建更符合业务需求的定制操作，提升用户体验。 ，定义Lightning应用程序，，你可以将多个Lightning页面组合成一个应用程序，这样用户就可以在一个统一的界面中访问所有相关的功能和信息。 ，在带有Lightning Out的Visualforce页面中使用Lightning，，如果你有现有的Visualforce页面，你可以通过Lightning Out技术将Lightning Web组件嵌入到这些页面中，这样你就可以在不完全重写页面的情况下，利用Lightning的强大功能。 最后，，其他支持体验，，Salesforce还支持其他类型的用户体验，比如移动应用、社区等，你都可以使用Lightning Web组件来增强这些平台的功能和外观。 通过这些工具和技术，你可以构建出既美观又功能强大的Salesforce应用，提升用户的整体体验。希望这些信息对你有所帮助，如果有任何问题，随时提问！

  ▶ 播放视频 查看详情
• 51

  Components in Community Builder

  第 267 页

  今天我们来聊聊Salesforce中的Community Builder和Lightning组件。想象一下，Community Builder就像是一个专门为社区设计的工具箱，而Lightning组件则是这个工具箱里的各种工具。 首先，Community Builder和Lightning App Builder有点像，但它们是针对不同场景的。Community Builder是专门用来构建和定制社区的，而Lightning App Builder则更多用于构建应用页面。它们都有自己的一套标准组件，就像不同的工具箱里有不同的工具一样。 但是，这里有个有趣的地方：虽然它们的标准组件集不同，但它们可以共享自定义组件。这就像是你可以在两个不同的工具箱里使用同一个你特别喜欢的工具。这样，你就可以在不同的地方使用同一个组件，非常方便。 最后，说到属性，这些属性可以在设计时暴露出来。这就像是你可以调整工具的大小、颜色等属性，让它们更适合你的需求。在Community Builder中，你也可以调整组件的属性，让它们更好地适应你的社区设计。 总的来说，Community Builder和Lightning组件让构建和定制社区变得简单而灵活。你可以轻松地使用和调整各种组件，打造出符合你需求的社区页面。希望这个解释能帮助你更好地理解它们的作用和关系！

  ▶ 播放视频 查看详情
• 52

  Components in Community Builder – Config file

  第 268 页

  同学们，今天我们来聊聊如何在Salesforce社区中使用Lightning Web组件，特别是如何配置一个叫做DeliveryListMap的组件。这个过程听起来可能有点复杂，但我会一步步带你们走，确保每个人都能跟上。 首先，我们不会从头开始创建一个社区来展示这个组件，但如果你们对这个过程特别感兴趣，我可以给你们一些基本的步骤来尝试。 1. ，启用社区，：首先，我们需要在Salesforce的设置中启用社区。进入“设置”，然后找到“社区设置”。在这里，你会看到一个复选框，勾选它来启用社区。接着，输入你的社区域名，然后点击保存。 2. ，创建社区，：保存后，点击“打开”按钮，这会带你到一个新标签页，显示“所有社区”的Salesforce设置。在这里，点击“创建新社区”。选择一个体验类型，比如“构建自己的体验”，然后点击“开始”。 3. ，命名社区，：给你的社区起个名字，比如“测试社区”，这里不需要添加可选的URL后缀。然后等待社区创建完成，这可能需要一些时间。 4. ，进入社区构建器，：社区创建好后，你会被带到社区页面。点击“我的工作区”下的“构建器”。 5. ，添加组件，：在构建器中，点击“Lightning Bolt”图标，找到“DeliveryListMap”组件，然后把它拖到页面上。 6. ，处理警告，：当你添加这个组件时，可能会收到一个警告，提示你需要将“https://maps.a.forceusercontent.com”这个URL加入到CSP可信站点的白名单中。点击“确定”继续。 7. ，白名单设置，：点击左侧的设置齿轮图标，向下滚动到“CSP错误”部分。找到“maps.a.forceusercontent.com”旁边的选项，点击“白名单URL”，然后再次确认。这个设置可能需要几分钟才能生效。 8. ，完成，：几分钟后，你的DeliveryListMap组件应该就能正常加载了。 这就是整个过程，虽然步骤有点多，但每一步都很重要。希望你们能跟上，如果有任何问题，随时提问。我们下次再见！

  ▶ 播放视频 查看详情
• 53

  Open Source Lightning Web Components

  第 269 页

  大家好，今天我们来聊聊Salesforce的一个非常酷的更新——Lightning Web Components（LWC）引擎的开源。这个决定对开发人员来说是个大好消息，为什么呢？我来给大家解释一下。 首先，开源意味着开发人员可以直接参与到LWC的未来发展中。你可以为它的路线图贡献自己的想法和代码，这不仅能帮助改进LWC，也能让你的声音被听到。 其次，通过查看和学习LWC的源代码，开发人员可以更深入地理解这个框架是如何工作的。这对于想要提升自己技术水平的开发者来说，是一个极好的学习机会。 再者，LWC的开源意味着无论你是在Salesforce平台上开发，还是在其他任何平台上，你都可以使用相同的JavaScript框架。这大大简化了开发过程，因为你不需要为了不同的平台学习不同的技术。 此外，开源还带来了透明度。所有的开发工作都是公开的，这意味着任何人都可以看到代码的进展和改变，这有助于建立信任和社区的支持。 最后，Salesforce通过开源LWC，也在影响Web标准和浏览器的发展方向。这意味着LWC不仅服务于Salesforce，还可能成为推动整个Web技术发展的力量。 如果你对这个话题感兴趣，可以查看Salesforce的官方公告和工程团队的更多信息。这些资源会给你提供更深入的了解和细节。 总之，LWC的开源是一个双赢的决定，既促进了技术的发展，也为开发者提供了更多的机会和资源。希望这能激发你对Salesforce开发的兴趣，也许你也能成为推动这一技术前进的一员！

  ▶ 播放视频 查看详情
• 54

  Base Components Recipes

  第 270 页

  今天我们来聊聊Salesforce的基本组件，也就是Base Components。这些组件就像是搭建Salesforce应用的小积木，每个小积木都有它特定的功能，可以帮助我们快速构建出漂亮又实用的页面和应用。 首先，你可以通过访问GitHub上的一个叫“base-components-recipes”的项目来查看这些基本组件的示例。这些示例都是以小片段的形式展示的，非常直观。每个示例都展示了如何使用这些基本组件来快速搭建页面和应用。你可以直接使用这些组件，也可以根据你的需求进行自定义。 这些基本组件的源代码可以在Salesforce的开发者文档网站上的组件库中找到。我们把基本组件转换成了.c命名空间，这样你就可以在你的项目中直接使用这些组件了。通过查看这些源代码，你不仅可以了解这些组件的内部工作原理，还可以基于这些源代码构建出符合你自己需求的新组件。有了这些源代码，你的创造力就可以无限发挥！ 虽然这些基本组件主要是为Salesforce平台设计的，但我们也考虑到了在非Salesforce场景中使用它们的可能性。目前，由于这些组件对Salesforce平台的依赖，有些组件在非Salesforce环境中可能无法正常工作。但我们的目标是让这些基础组件也能在非Salesforce的用例中发挥作用。为此，我们创建了一个叫做LWC Storybook PoC的框架，来展示未来这可能的样子。 如果你对这些更新感兴趣，别忘了点击GitHub上的“Watch”按钮，这样你就可以及时了解到最新的进展了。好了，这就是今天关于Salesforce基本组件的介绍，希望这些信息对你有帮助！

  ▶ 播放视频 查看详情
• 55

  Unit Summary

  第 271 页

  让我们来总结一下今天的内容。今天，我们主要学习了如何使用Lightning App Builder来构建Lightning Pages。这是一个非常直观的工具，因为它允许我们通过简单的拖放操作来设计页面，就像拼图一样简单。 我们还讨论了如何使你的Lightning Web组件在App Builder中可用。这需要你在组件的配置文件中设置一个标签，具体来说，就是添加`true`这一行代码。这样，你的组件就可以在App Builder中被选中并使用了。 另外，如果你的组件需要在不支持的环境中工作，比如快速操作，你可能需要将Lightning Web组件包装在一个Aura组件中。这就像给你的组件穿上了一件外套，让它能在更多的地方发挥作用。 我们还提到了如何设置组件的目标，这样它们就可以在App Launcher、Lightning Experience的自定义选项卡以及移动导航菜单中使用了。这就像是给你的组件设定了一个目的地，告诉它应该在哪里出现。 最后，我们简单介绍了如何在Visualforce页面中使用Lightning Web组件。这需要你将JavaScript与Lightning Out依赖项应用程序结合起来使用。这就像是在不同的技术之间搭建一座桥梁，让它们能够协同工作。 希望这些内容能帮助你更好地理解和使用Salesforce的Lightning组件。如果有任何问题，随时提问！

  ▶ 播放视频 查看详情
• 56

  Unit Review

  第 272 页

  让我们来聊聊Salesforce中的Lightning Web组件（LWC）和Aura组件的一些知识点。 首先，关于单位审查，你可以在照明组件选项卡中直接使用Lightning Web组件，这是真的。这意味着你可以直接在Salesforce的界面中使用这些现代化的组件来构建你的应用。 接下来，如果你有一些特定的需求，比如需要与一些旧的Salesforce功能或工具兼容，你可能需要考虑将Lightning Web组件包装在Aura组件中使用。这样做可以让你在保持新组件优点的同时，还能兼容那些尚未支持LWC的环境。 Aura接口是什么呢？简单来说，Aura接口是一组预定义的规则，它告诉Salesforce你的组件可以在哪些上下文中使用。比如，你可以通过实现特定的Aura接口，让你的组件能够在Lightning App Builder中使用。要将Aura接口添加到你的Aura组件中，你需要在组件的定义中使用`implements`属性，并列出你需要的接口。 关于接口的数量，你可以在Aura组件中添加多个接口，这是假的。实际上，你可以通过逗号分隔的方式，在`implements`属性中添加多个接口。 实现`force:appHostable`接口确实可以让你的Aura组件在Lightning App Builder中使用，这是真的。这为你的组件打开了更广泛的使用场景。 在记录详细信息页面上的自定义Lightning Web组件中访问当前的`recordId`，你不能通过声明一个名为`recordId`的`@Track`属性来自动注入该值，这是假的。正确的做法是使用`@api`属性来声明`recordId`，这样Salesforce会自动将当前的记录ID注入到你的组件中。 最后，从Winter &#39;20版本开始，你可以使用``值`Lightning__AppPage`来让你的LWC在Lightning App Builder、Lightning Experience等环境中使用。这是真的。同时，使用`implements`组件属性可以让你的组件在更多的Salesforce体验和工具中使用。 希望这些解释能帮助你更好地理解Salesforce中的这些概念！如果有任何疑问，随时欢迎提问。

  ▶ 播放视频 查看详情