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

DEX602 - Unit 3 Surfacing Lightning Web Components

📄 第 225 页 🎬 视频课程

课程章节介绍

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