课程介绍
今天我们来聊聊Salesforce中的“实施导航和布局”。这部分内容其实非常实用，因为它直接关系到我们如何在Salesforce中高效地找到信息，以及如何让界面更符合我们的工作习惯。 首先，我们来说说“导航”。在Salesforce中，导航就像是你手机上的主屏幕，它帮助你快速找到你想要的应用、记录或者报告。Salesforce提供了一个叫做“App Launcher”的工具，你可以把它想象成一个快捷菜单，里面列出了所有你可以访问的应用。你只需要点击这个菜单，就能快速跳转到你需要的应用，非常方便。 接下来是“布局”。布局决定了你在Salesforce中看到的页面是什么样子的。比如，当你打开一个客户记录时，你会看到哪些字段，这些字段是怎么排列的，这些都是由布局来控制的。Salesforce允许我们自定义这些布局，这样我们就可以根据自己的工作需求，把最重要的信息放在最显眼的位置。 举个例子，如果你是一个销售代表，你可能希望在你的客户记录页面上，客户的联系信息和最近的交易记录能够一目了然。那么，你就可以通过调整布局，把这些信息放在页面的顶部。 总的来说，实施导航和布局的目的，就是让Salesforce用起来更加顺手，帮助我们更快地找到需要的信息，提高工作效率。希望这些内容对你有帮助，如果你有任何问题，随时可以问我哦！
课程章节
本课程共有 36 个章节
-
1
Unit 4 Implementing Navigation and Layouts
第 273 页今天我们来聊聊Salesforce中的“实施导航和布局”。这部分内容其实非常实用，因为它直接关系到我们如何在Salesforce中高效地找到信息，以及如何让界面更符合我们的工作习惯。 首先，我们来说说“导航”。在Salesforce中，导航就像是你手机上的主屏幕，它帮助你快速找到你想要的应用、记录或者报告。Salesforce提供了一个叫做“App Launcher”的工具，你可以把它想象成一个快捷菜单，里面列出了所有你可以访问的应用。你只需要点击这个菜单，就能快速跳转到你需要的应用，非常方便。 接下来是“布局”。布局决定了你在Salesforce中看到的页面是什么样子的。比如，当你打开一个客户记录时，你会看到哪些字段，这些字段是怎么排列的，这些都是由布局来控制的。Salesforce允许我们自定义这些布局，这样我们就可以根据自己的工作需求，把最重要的信息放在最显眼的位置。 举个例子，如果你是一个销售代表，你可能希望在你的客户记录页面上，客户的联系信息和最近的交易记录能够一目了然。那么，你就可以通过调整布局，把这些信息放在页面的顶部。 总的来说，实施导航和布局的目的，就是让Salesforce用起来更加顺手，帮助我们更快地找到需要的信息，提高工作效率。希望这些内容对你有帮助，如果你有任何问题，随时可以问我哦！
-
2
Unit 4: Implementing Navigation and Layouts
第 274 页让我们来聊聊第四单元的内容。这个单元非常有趣，因为我们即将让我们的应用程序看起来和感觉上更像一个真正的单页面应用程序，也就是SPA。想象一下，你打开一个网页，所有的内容都在一个页面上动态加载，不需要刷新整个页面，这就是SPA的魅力所在。 首先，我们会创建一个垂直的导航菜单。这个菜单会放在页面的左侧，就像你在很多现代应用中看到的那样。通过这个菜单，你可以轻松地在不同的模式之间切换。比如，你可能有一个模式是查看所有认证学生的列表，另一个模式可能是查看某个特定学生的详细信息。 说到学生列表，我们会有一个专门的模式来展示这些数据。在这个模式下，你会看到一个数据表，里面列出了所有已经通过认证的学生。这个表格会非常直观，你可以轻松地查看每个学生的姓名、认证状态等信息。 最后，我们还会通过响应式设计来美化我们的布局。这意味着无论你是在电脑上、平板上还是手机上查看这个应用，它都会自动调整布局，确保你总是能获得最佳的浏览体验。这样，无论你在哪里，都能轻松地使用我们的应用程序。 总之，这个单元会让我们的应用程序变得更加动态和用户友好。通过垂直导航菜单、数据表和响应式设计，我们将一步步接近一个真正的SPA体验。
-
3
Introducing <lightning-vertical-navigation>
第 275 页今天我们来聊聊Salesforce中的组件。这个组件非常有用，它可以帮助我们在应用程序中创建一个垂直的链接列表。这些链接可以引导用户跳转到另一个页面，或者在同一页面的不同部分之间切换。 首先，这个导航列表只有一层深度，这意味着它不会有多级嵌套的链接。这样的设计使得导航更加直观和简洁，用户可以一目了然地看到所有可选的链接。 其次，这个组件支持一个叫做“溢出”的功能。这意味着如果链接太多，超出了显示区域，我们可以创建一个可折叠的部分。用户可以通过点击来展开或收起这部分链接，这样既节省了空间，又保持了页面的整洁。 需要注意的是，这个溢出部分必须使用来创建。而且，这个导航组件不会根据浏览器窗口的大小自动调整，所以我们在设计时要考虑到这一点，确保在不同设备上都能有良好的用户体验。 最后，我们通常使用这个垂直导航组件来在不同的应用程序模式之间进行切换。比如，你可能有一个设置页面，里面有多个设置选项，使用这个组件可以让用户轻松地在这些选项之间导航。 总结一下，是一个简单但功能强大的组件，它帮助我们创建了一个清晰、易于管理的垂直导航列表，让用户能够轻松地在应用程序的不同部分之间切换。希望这个解释对你有帮助！
-
4
Using Navigation Items
第 276 页同学们，今天我们来聊聊Salesforce中的Lightning垂直导航组件。这个组件非常有用，它可以帮助我们在应用中创建一个清晰、易于导航的侧边栏。让我们一起来看看这个组件的四个主要部分，以及它们各自的作用。 1. ，闪电垂直导航（Lightning Vertical Navigation），：这是整个导航组件的主容器。你可以把它想象成一个大的盒子，里面装着所有的导航项。这个组件有一个属性叫做`selected-item`，用来指定当前选中的导航项。比如，在我们的代码中，`selected-item="Recent"`表示当前选中的是“最近”这个导航项。 2. ，闪电垂直导航项（Lightning Vertical Navigation Item），：这是导航栏中的一个个单独的、可点击的项。每个项都有一个`label`属性，用来显示在导航栏中的文字，比如“最近”或“所有报告”。还有一个`name`属性，用来唯一标识这个项。比如，`name="Recent"`表示这个项的名字是“最近”。 3. ，闪电垂直导航部分（Lightning Vertical Navigation Section），：这是一个标准的分段，用来将相关的导航项分组。比如，在我们的代码中，所有与“报告”相关的导航项都被放在了一个部分里，标签是“报告”。这个部分是不可折叠的，也就是说，它总是展开的，用户不能折叠它。 4. ，闪电垂直导航溢出（Lightning Vertical Navigation Overflow），：这是一个可折叠的部分，通常用来放置一些不那么常用的导航项。比如，在我们的代码中，“区域销售东”和“区域销售西”这两个项被放在了溢出部分。用户可以根据需要展开或折叠这个部分。 总结一下，，闪电垂直导航，是主容器，，闪电垂直导航项，是单个的导航项，，闪电垂直导航部分，用来分组，，闪电垂直导航溢出，用来放置可折叠的项。通过这四个部分，我们可以创建一个功能强大且易于使用的导航栏。 同学们，你们现在能理解这四个部分的作用了吗？如果有任何问题，随时问我哦！
-
5
Adding Navigation Items to Sections and Overflows
第 277 页让我们来聊聊如何在Salesforce的Lightning组件中添加导航项目到区段和溢出部分。这个过程其实很简单，就像在菜单中添加选项一样。 首先，我们有一个叫做`lightning-vertical-navigation`的组件，你可以把它想象成一个垂直的菜单栏。在这个菜单栏里，我们可以添加不同的部分，每个部分都有自己的标签和内容。 1. ，创建导航区段，：我们使用`lightning-vertical-navigation-section`来创建一个新的区段。比如，我们可以创建一个标签为“报告”的区段。 2. ，添加导航项目，：在每个区段内，我们可以添加多个`lightning-vertical-navigation-item`，这些就是具体的菜单项。每个项目都需要一个`label`（标签）和`name`（名称）。标签是用户看到的文字，而名称则是我们用来识别这个项目的内部标识。 3. ，设置默认选中项，：如果我们想让某个项目在页面加载时默认被选中，我们可以使用`selected-item`属性，并将其值设置为对应项目的`name`。 4. ，处理溢出内容，：如果菜单项太多，我们可以使用`lightning-vertical-navigation-overflow`来包裹那些不常用的项目。这些项目会在用户需要时显示出来，比如通过点击一个“更多”按钮。 举个例子，如果我们有一个报告区段，里面有两个项目：“最近”和“所有报表”，我们可以这样设置： ```html ``` 在这个例子中，“最近”项目会默认被选中，而“区域销售东部”和“区域销售西部”则会被放在溢出部分，只有当用户需要时才会显示。 希望这个解释能帮助你理解如何在Salesforce中设置垂直导航菜单。如果有任何问题，随时问我哦！
-
6
Handling Navigation Item Selection
第 278 页让我们来聊聊如何在Salesforce的闪电组件中处理导航项的选择。想象一下，你有一个垂直导航菜单，用户点击了其中的一个选项。你希望当用户点击某个选项时，系统能够做出相应的反应。这就是我们要用到的`onselect`事件。 首先，你需要在你的闪电组件中定义一个`onselect`事件处理器。这个处理器就像是一个小助手，它会监听用户的选择动作。当用户点击了导航菜单中的某个选项时，这个助手就会跳出来，告诉你：“嘿，用户刚刚选择了这个选项！” 在上面的示例中，我们简单地将用户选择的选项名称存储在一个叫做`selectedName`的局部变量中。这就像是你把用户的选择记在了一张小纸条上，方便以后查看。 但在实际的应用场景中，你可能会想要做更多的事情。比如，你可能需要根据用户的选择来执行一些特定的逻辑。比如，如果用户选择了“设置”选项，你可能需要跳转到设置页面；如果选择了“报告”，你可能需要加载相关的报告数据。 所以，`onselect`事件处理器不仅仅是一个记录员，它还可以是一个决策者。你可以在这个处理器中编写逻辑，根据用户的选择来决定接下来要做什么。这样，你的应用就能更加智能地响应用户的操作了。 总结一下，`onselect`事件处理器是你在闪电组件中处理用户导航选择的好帮手。它不仅能记录用户的选择，还能根据选择执行相应的逻辑，让你的应用更加灵活和智能。
-
7
Including Dynamic Information in the Name Attribute
第 279 页让我们来聊聊这个功能。想象一下，你有一个导航菜单，就像你手机上的应用列表一样。在这个菜单里，我们想要展示一些动态信息，比如你获得的所有认证。这些认证信息不是固定的，而是从数据库中实时获取的。 这些认证信息会放在一个可以折叠的部分里，就像你手机上的文件夹，点击一下就能展开看到里面的内容。当你点击某个认证项时，我们希望不仅能显示它的名字，还能知道它的唯一标识（ID）。为了做到这一点，我们会把这两个信息（名字和ID）组合在一起，形成一个叫做`compoundKey`的属性。 这个`compoundKey`属性会被用在`lightning-verty-navigation-items`组件中，作为每个认证项的名称。这样，当你点击某个认证时，系统就能知道具体是哪一个，并且可以显示相关的详细信息。 简单来说，就是通过动态获取的认证信息，创建一个可以点击的列表，点击后能显示具体信息。这样设计既方便又实用，对吧？
-
8
Exercise 4-1: Implementing a Vertical Navigation
第 280 页同学们，今天我们来做一个有趣的练习，叫做“实现垂直导航”。这个练习的目的是让我们在Salesforce应用中创建一个垂直导航菜单，这个菜单会显示一系列的认证列表。听起来是不是很酷？那我们一步步来。 首先，我们会引入一个新的组件，叫做`aw-navigation`。这个组件的作用就是生成一个菜单，菜单里面会列出所有的认证。你可以想象一下，就像你在手机上看到的那些应用菜单一样，只不过我们这个是垂直排列的。 接下来，我们需要创建一个Apex类。Apex类是Salesforce中的一种编程语言，我们可以用它来写一些逻辑代码。在这个类里，我们会写一个方法，这个方法的作用就是从数据库中检索出所有的认证列表。这样，我们的菜单就能显示这些认证了。 然后，我们会把`aw-navigation`组件添加到`layoutManager`中。`layoutManager`是Salesforce中用来管理页面布局的工具。我们会在`layoutManager`中添加一列，这一列就是用来显示我们的垂直导航菜单的。 最后，我们还会在`layoutManager`中添加一个`viewMode`。这个`viewMode`的作用是让我们能够切换应用程序右侧显示的内容。比如说，你可以通过点击菜单中的某个认证，右侧就会显示这个认证的详细信息。 好了，这就是我们今天要做的练习。通过这个练习，你会学到如何在Salesforce中创建一个垂直导航菜单，并且通过Apex类来获取数据。希望你们都能顺利完成这个练习，加油！
-
9
Pull the list of certifications and dynamically generate navigation links.
第 281 页同学们，今天我们来学习如何在Salesforce中实现一个动态的垂直导航功能。这个功能可以帮助用户根据不同的认证动态生成导航链接，非常实用。我们将会分成几个步骤来完成这个任务，整个过程大约需要45分钟。 ### 第一步：创建Apex类来检索认证 首先，我们需要创建一个Apex类，这个类的主要任务是去检索所有的认证信息。我们可以通过SOQL查询来获取这些数据。比如，我们可以查询`Certification__c`对象，这个对象存储了所有的认证信息。在Apex类中，我们会定义一个方法，比如叫做`getCertifications`，它会返回一个认证列表。 ```apex public class CertificationController { @AuraEnabled public static List getCertifications() { return [SELECT Id, Name FROM Certification__c ORDER BY Name]; } } ``` ### 第二步：创建导航组件 接下来，我们需要创建一个Lightning组件来显示这些认证信息。这个组件将会使用Apex类中获取的数据来动态生成导航链接。我们可以使用`lightning:verticalNavigation`组件来实现垂直导航。 ```html ``` ### 第三步：领取证书 在组件初始化的时候，我们需要调用Apex类中的方法来获取认证数据，并将这些数据绑定到组件的属性上。我们可以在组件的控制器中实现这个逻辑。 ```javascript ({ doInit: function(component, event, helper) { var action = component.get("c.getCertifications"); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { component.set("v.certifications", response.getReturnValue()); } }); $A.enqueueAction(action); } }) ``` ### 第四步：动态生成垂直导航 现在，当组件加载时，它会自动调用Apex类中的方法，获取认证数据，并动态生成垂直导航链接。用户可以看到所有的认证名称，并且可以点击这些链接来查看详细信息。 ### 第五步：处理导航选择 当用户点击某个导航链接时，我们可以通过事件处理来捕获这个选择，并执行相应的操作。比如，我们可以导航到某个特定的页面，或者显示某个认证的详细信息。 ### 第六步：部署该组件 完成以上步骤后，我们需要将这个组件部署到Salesforce中。你可以通过Salesforce的开发者控制台或者使用Salesforce DX来部署这个组件。 ### 第七步：修改布局 最后，我们需要将这个组件添加到某个页面的布局中。你可以通过Salesforce的页面布局编辑器，将这个组件拖放到页面的某个区域，比如侧边栏。 ### 总结 通过以上步骤，我们就实现了一个动态的垂直导航功能。这个功能不仅提升了用户体验，还使得页面更加灵活和动态。希望你们能够通过这个练习，更好地理解如何在Salesforce中实现动态导航功能。如果有任何问题，随时提问！
-
10
Unit 4: Implementing Navigation and Layouts - 282
第 282 页同学们，今天我们来聊聊如何在Salesforce中实施导航和布局，特别是使用闪电垂直导航和闪电数据表。这些工具可以帮助我们更有效地管理和展示数据，同时提升用户体验。 首先，我们来谈谈，闪电垂直导航，。这是一种非常直观的导航方式，它允许用户在页面的左侧看到一个垂直的菜单栏。这个菜单栏可以包含多个选项，用户点击任何一个选项，页面就会跳转到相应的内容区域。这种方式非常适合那些需要快速在不同模块间切换的用户。 接下来是，闪电数据表，。这是一个非常强大的组件，它可以帮助我们在页面上展示大量的数据。你可以想象一下，如果你的页面上有一个表格，里面有很多行和列的数据，使用闪电数据表，你可以轻松地对这些数据进行排序、筛选，甚至进行批量操作。这个组件是开箱即用的，意味着你不需要做太多的配置就可以开始使用它。 然后我们来看看，实现按钮组，。按钮组是一组相关的按钮，它们通常执行相似或相关的操作。在Salesforce中，你可以很容易地创建按钮组，并将它们放置在页面的任何位置。这些按钮可以帮助用户快速执行常见的操作，比如保存、删除或编辑记录。 最后，我们来讨论一下，构建响应式布局，。响应式布局意味着你的页面可以根据用户设备的屏幕大小自动调整布局。这对于确保你的应用在各种设备上都能提供良好的用户体验非常重要。在Salesforce中，你可以使用一些内置的工具和组件来创建响应式布局，确保你的应用在手机、平板和桌面电脑上都能很好地工作。 总结一下，这个单元我们将学习如何使用闪电垂直导航来优化用户的导航体验，使用闪电数据表来高效地展示和管理数据，实现按钮组来提升操作的便捷性，以及构建响应式布局来确保应用在不同设备上的良好表现。希望这些内容能帮助你们更好地理解和应用Salesforce的这些强大功能。
-
11
Introducing <lightning-datatable>
第 283 页今天我们来聊聊一个非常实用的Salesforce组件——。这个组件可以帮助我们在页面上展示表格数据，特别适合用来显示学生列表这样的信息。 首先，想象一下，你有一个页面，上面列出了各种认证课程。当用户点击其中一个认证时，我们希望能够展示出所有已经获得这个认证的学生名单。这时候，就派上用场了。 这个组件有几个基础功能，我们来简单了解一下： 1. ，显示表格数据，：你可以把学生的信息，比如姓名、学号、成绩等，以表格的形式展示出来。 2. ，列显示因数据类型而异，：不同的数据类型，比如文本、数字、日期等，在表格中会有不同的显示方式。 3. ，初始化填充，：你可以在表格初始化的时候，通过设置数据、列和keyField属性来填充表格内容。 4. ，移动设备不支持，：需要注意的是，这个组件在移动设备上可能无法正常使用。 接下来，我们来看看它支持的一些高级功能： - ，列的格式和格式化，：你可以根据数据类型来调整列的显示格式，比如日期可以显示为“年-月-日”的格式。 - ，调整列的大小，：用户可以根据需要调整列的宽度，方便查看数据。 - ，行选择，：用户可以选择表格中的某一行，进行进一步的操作。 - ，按大小写顺序对列进行排序，：点击列头，可以按照字母顺序或数字大小对数据进行排序。 - ，无限滚动，：如果数据很多，表格可以支持无限滚动，用户不需要翻页就能查看更多数据。 - ，内联编辑，：用户可以直接在表格中编辑数据，非常方便。 总的来说，是一个非常强大的工具，可以帮助我们高效地展示和管理表格数据。希望这些信息对你有帮助，如果你有任何问题，随时问我！
-
12
Example <lightning-datatable> JavaScript Code
第 284 页让我们来一步步解析这段代码，确保大家都能理解。 首先，我们来看一下这段代码的整体结构。这是一个用于展示如何在Lightning Web Components (LWC) 中使用 `` 的示例。`` 是Salesforce提供的一个非常强大的组件，用于在页面上展示表格数据。 ### 1. 导入必要的模块 ```javascript import { LightningElement, track } from 'lwc'; ``` 这里我们从 `lwc` 模块中导入了 `LightningElement` 和 `track`。`LightningElement` 是所有LWC组件的基类，而 `track` 是一个装饰器，用于跟踪属性的变化，以便在属性变化时自动更新UI。 ### 2. 定义列和数据 ```javascript const columns = [ { label: 'Opportunity Name', fieldName: 'OpportunityName', type: 'text' }, { label: '联系人电话', fieldName: 'Phone', type: 'phone' }, ]; const data = [ { id: 'a', OpportunityName: 'CloudHub', Phone: '2352235235', TrendIcon: 'utility:close' }, { id: 'b', OpportunityName: 'Quip', Phone: '2352235235', TrendIcon: 'utility:up' } ]; ``` 这里我们定义了两个常量：`columns` 和 `data`。 - `columns` 是一个数组，定义了表格的列。每一列都有一个 `label`（显示在表头的文本）、`fieldName`（对应数据中的字段名）和 `type`（字段的类型，比如 `text` 或 `phone`）。 - `data` 是一个数组，包含了表格中要显示的数据。每个对象代表一行数据，字段名必须与 `columns` 中定义的 `fieldName` 匹配。 ### 3. 创建组件类 ```javascript export default class DatatableExample extends LightningElement { @track data = data; @track columns = columns; } ``` 这里我们创建了一个名为 `DatatableExample` 的组件类，它继承自 `LightningElement`。我们使用 `@track` 装饰器来跟踪 `data` 和 `columns` 这两个属性，这样当它们发生变化时，UI会自动更新。 ### 4. 使用 `` 在HTML模板中，我们可以这样使用 ``： ```html ``` - `data` 属性绑定到我们在JavaScript中定义的 `data` 数组。 - `columns` 属性绑定到 `columns` 数组。 - `key-field` 是一个唯一标识符字段，用于标识每一行数据。 ### 5. 总结 - ，列定义，：`columns` 数组定义了表格的列及其属性。 - ，数据定义，：`data` 数组包含了表格中要显示的数据。 - ，跟踪属性，：使用 `@track` 装饰器来确保数据变化时UI自动更新。 - ，HTML模板，：在模板中使用 `` 来展示数据。 ### 6. 注意事项 - ，硬编码数据，：在这个例子中，数据是硬编码的。在实际应用中，数据通常会从Apex控制器或外部API获取。 - ，常量声明，：由于JavaScript中类成员不能声明为 `const`，所以我们在类外部声明了 `columns` 和 `data`，然后在类中引用它们。 希望这个解释能帮助大家更好地理解如何在LWC中使用 ``。如果有任何问题，欢迎随时提问！
-
13
Specifying Rows and Columns
第 285 页同学们，今天我们来聊聊Salesforce中的收件箱和列键字段。这两个东西在我们的练习中非常重要，它们是必需的。收件箱和列键字段的作用是帮助我们识别每一行的唯一ID，这样我们就能准确地处理每一行数据了。 在我们的练习中，我们会使用一个经过认证的学生列表作为行数据。这意味着我们会有一系列学生的信息，每个学生都有一个唯一的ID，这样我们就能确保每个学生的信息都是独一无二的，不会混淆。 接下来，我们会硬编码列配置。这是什么意思呢？简单来说，就是我们会手动设置每一列显示哪些信息。比如，我们可能会设置一列显示学生的名字，另一列显示他们的成绩，这样我们就能一目了然地看到每个学生的相关信息。 现在，我们来谈谈复选框列。复选框列是一个非常灵活的工具，你可以通过两种方式来操作它。第一种方式是使用`hideCheckboxStream`属性来隐藏它。如果你觉得复选框列在这个场景下不需要，或者会干扰用户的操作，你就可以选择隐藏它。 第二种方式是通过将最大行选择设置为1，将复选框列转变为一个Radio按钮。Radio按钮和复选框的区别在于，Radio按钮只允许你选择一项，而复选框可以多选。所以，如果你希望用户只能选择一个学生，而不是多个，你就可以使用这种方式。 好了，这就是我们今天的内容。希望你们能理解收件箱和列键字段的重要性，以及如何灵活地使用复选框列。如果有任何问题，随时问我！
-
14
Grid Column Data Types
第 286 页同学们，今天我们来聊聊Salesforce中的Lightning Data Table，特别是关于网格列数据类型的部分。想象一下，你在Excel中有一列数据，你可以选择这列，然后给它设置不同的格式，比如货币、日期等。在Salesforce的Lightning Data Table中，我们也需要做类似的事情，就是告诉表格如何展示每一列的数据。 在Lightning Data Table中，我们有很多内置的选项来格式化列数据，这些选项利用了Salesforce的Lightning Web组件。比如说，你可以设置一列显示为货币格式，或者日期格式，甚至更复杂的自定义格式。 如果你想要实现一些特别的自定义单元格展示方式，比如在单元格里显示图标或者按钮，你可以参考Salesforce官方文档中的“创建自定义数据类型”部分。这部分内容会教你如何扩展Lightning Data Table的功能，实现你自己的数据展示方式。 所以，如果你在项目中遇到需要自定义单元格展示的需求，记得查看这个文档，它会给你很多灵感和帮助。希望这能帮助你们更好地理解和使用Lightning Data Table。如果有任何问题，随时提问哦！
-
15
Handling Row Selection
第 287 页让我们来聊聊如何在Salesforce的闪电数据表中处理行选择。想象一下，你有一个数据表，里面展示了很多行数据。现在，你想要让用户能够选择其中的一行或多行，然后根据他们的选择来启用或禁用一些按钮。这听起来是不是很实用呢？ 首先，我们需要在数据表中添加一个叫做`onrowselection`的属性。这个属性就像是一个监听器，它会时刻关注用户选择了哪些行。然后，我们需要把这个属性连接到我们的控制器中的一个操作。这个操作就是我们处理用户选择的地方。 在控制器中，我们可以编写一个方法来处理这些选择。这个方法会检查用户选择了多少行。如果用户没有选择任何行，也就是说选中的行数为零，那么我们就需要把那些按钮的`disable`属性设置为`true`，这样按钮就会被禁用，用户就不能点击它们了。 但是，如果用户选择了一行或多行，那么我们就需要把`disable`属性设置为`false`，这样按钮就会被启用，用户就可以点击它们来执行相应的操作了。 简单来说，通过这种方式，我们可以确保只有当用户选择了数据表中的行时，相关的按钮才会变得可用。这样不仅提高了用户体验，也确保了操作的准确性。希望这个解释能帮助你理解如何在Salesforce中处理行选择！
-
16
layout-manager custom component
第 288 页今天我们来聊聊如何在Salesforce中创建一个自定义组件，并且把它部署到布局管理器里。这个组件叫做“certified-student-list”，听起来是不是很酷？它的作用是展示通过某个认证的学生列表。 首先，我们需要创建这个组件。在Salesforce中，自定义组件是用Lightning Web Components（LWC）来构建的。我们给这个组件起个名字，就叫“certified-student-list”。这个名字很直观，一看就知道它是用来展示通过认证的学生列表的。 接下来，我们要在布局管理器中部署这个组件。布局管理器是Salesforce中用来管理页面布局的工具。我们可以把自定义组件拖放到页面的任何位置，就像搭积木一样简单。 在部署组件的时候，我们需要传递两个属性：certification Id和certification Name。这两个属性是从导航中点击的证书名称解析出来的。也就是说，当我们点击某个证书名称时，系统会自动解析出这个证书的ID和名称，然后传递给我们的组件。 这个组件还有一个很厉害的功能，就是它会使用带有证书Id的反应变量的有线服务。这是什么意思呢？简单来说，就是每当证书ID发生变化时，组件会自动更新数据集。比如，如果我们从导航中选择了另一个证书，组件会立即显示新证书对应的学生列表，而不需要我们手动刷新页面。 总结一下，我们今天学习了如何创建一个名为“certified-student-list”的自定义组件，并在布局管理器中部署它。这个组件可以接收证书ID和名称，并且能够自动更新数据。是不是很简单呢？希望你们都能掌握这个技能，加油！
-
17
Unit 4: Implementing Navigation and Layouts - 290
第 290 页同学们，今天我们来学习单元4的内容，主要是关于如何在Salesforce中使用闪电组件来优化我们的页面布局和导航。我们会涉及到几个关键点：使用闪电垂直导航、闪电数据表、实现按钮组，以及构建响应式布局。 首先，我们来谈谈，闪电垂直导航，。这是一种在页面上垂直排列的导航菜单，非常适合用于展示多个选项或功能。你可以通过简单的拖放操作来设置它，使得用户能够轻松地在不同的页面或功能之间切换。 接下来是，闪电数据表，。这是一个非常强大的工具，可以帮助我们以表格的形式展示数据。数据表不仅支持排序、筛选，还可以进行编辑。今天，我们还会特别向数据表中添加一个删除功能。这意味着用户可以直接在表格中删除不需要的记录，操作简单直观。 然后是，实现按钮组，。按钮组是一组相关的按钮，它们通常执行相似或相关的操作。通过将按钮组合在一起，我们可以使界面更加整洁，用户操作也更加高效。 最后，我们会学习如何，构建响应式布局，。响应式布局意味着你的页面能够自动调整其布局以适应不同大小的屏幕，无论是桌面、平板还是手机。这对于提升用户体验非常重要，尤其是在移动设备使用越来越普遍的今天。 好了，这就是我们今天要学习的主要内容。接下来，我会一步步带大家操作，确保每个人都能掌握这些技能。准备好了吗？让我们开始吧！
-
18
Using <lightning-button-group>
第 291 页同学们，今天我们来聊聊如何在Salesforce的Lightning组件中使用``来创建一个按钮组。这个按钮组会放在我们之前提到的`certifiedStudentList`组件的右上角，里面会有三个按钮：电子邮件、发送证书和删除。 首先，我们来看一下这三个按钮的功能： 1. ，电子邮件，按钮暂时不会做任何事情，但稍后我们会添加一个提示，告诉用户这个功能目前不可用。 2. ，发送证书，按钮也是一样，暂时没有功能，稍后会有提示说明。 3. ，删除，按钮则会实际执行操作，删除证书持有记录。 在之前我们构建闪电垂直导航时，我们为整个菜单分配了一个控制器操作。但这次有点不同。对于``，我们不会在容器级别分配控制器，而是为每个按钮单独分配控制器操作。 虽然我们可以为每个按钮提供不同的控制器功能，但通常我们会像在这个例子中一样，为多个按钮分配相同的控制器操作，并通过按钮的某些属性来区分是哪个按钮被点击了。这里我们不会使用按钮的标签来区分，因为标签可能会根据用户的需求变化。 特别要注意的是，不要使用常规的`id`属性来标识按钮。因为在模板渲染时，`id`值可能会被转换为全局唯一值。相反，我们可以使用元素的`class`属性或者`data-*`属性，比如`data-id`。在这个例子中，我们使用了一个名为`data-btn-id`的属性。 在幻灯片中，为了简洁，我们用了`btn1`、`btn2`、`btn3`作为`data-btn-id`的值，但在实际代码中，我们会使用更有意义的名称。 最后，我建议大家熟悉一下`Data-*`属性，以及如何通过`DataSets`属性来访问它们。这里有一个链接，大家可以参考：[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset)。 好了，这就是今天的内容。希望大家能够理解并应用到实际的项目中去。如果有任何问题，随时提问！
-
19
Mutual Exclusivity Behavior
第 292 页同学们，今天我们来聊聊如何在Salesforce中实现一个按钮组，这个按钮组有一个特别的要求，就是“相互排他性”。这是什么意思呢？简单来说，就是在这个按钮组里，你一次只能选择一个按钮，不能同时选多个。 实现这个功能，我们有两种方法。第一种方法稍微复杂一点，我们需要使用一个普通的闪电按钮组，就像我们之前看到的那样。然后，我们需要编写一些逻辑，根据你之前点击的按钮来切换按钮的状态。这种方法需要我们手动控制按钮的选中状态，所以相对来说会复杂一些。 第二种方法就简单多了，我们可以使用一个叫做“闪电无线电组”的组件。这个组件本身就支持相互排他性，也就是说，你只需要把它放在页面上，它就会自动处理按钮的选中状态，你不需要写额外的代码。就像我们在这张幻灯片上看到的那样，使用起来非常方便。 在接下来的课程中，当我们定义`tripReportFormAdvanced`时，我们会使用这个闪电无线电组。不过现在，你们只需要知道有这么一个东西存在，以后我们会详细讲解如何使用它。 好了，这就是今天的内容，希望你们能理解相互排他性按钮组的概念，以及实现它的两种方法。如果有任何问题，随时问我哦！
-
20
Imperative Apex
第 293 页让我们来聊聊如何在Salesforce中使用Apex方法，特别是当我们不能使用Wire服务的时候。首先，Wire服务是一个非常方便的工具，它可以帮助我们轻松地从Apex类获取数据，但有时候，我们需要调用一些不能通过Wire服务来调用的Apex方法，比如那些包含DML操作（如插入、更新、删除数据）的方法。 在这种情况下，我们需要“强制调用”这些Apex方法。强制调用听起来可能有点复杂，但其实很简单。首先，我们需要像导入网络服务一样导入这个Apex方法。然后，我们直接调用这个方法，并使用JavaScript的Promise来处理返回的结果。 Promise是JavaScript中处理异步操作的一种方式。当我们调用Apex方法时，我们可以使用`.then()`来处理成功的情况，用`.catch()`来处理错误。这样，我们就可以根据方法执行的结果来决定接下来做什么。 举个例子，假设我们有一个按钮，点击这个按钮会删除一些学生的认证信息。当这个按钮被点击时，我们会调用一个名为`onDelete`的方法，并传入需要删除的认证ID列表。如果删除操作成功，我们会调用另一个方法`renhApex`来处理后续的逻辑；如果失败，我们会捕获错误，并将错误信息存储在一个属性中，然后根据这个错误信息来决定如何处理这个错误。 这就是如何在Salesforce中强制调用Apex方法的基本流程。希望这能帮助你更好地理解这个过程！
-
21
Refreshing Wired Data
第 294 页让我们来聊聊如何在Salesforce中使用有线服务（Wire Service）来获取认证列表，以及如何让这个服务自我更新。 首先，我们知道，有线服务是一种非常强大的工具，它可以帮助我们自动获取和显示数据。在我们的例子中，我们使用了一个反应变量`certificationId`来获取认证列表。但是，当我们删除一个认证时，用户界面上的数据就变得过时了，我们需要一种方法来刷新这些数据。 通常，我们可以通过更改反应变量的值来强制有线服务自我刷新。但在我们的场景中，`certificationId`并没有改变。那么，我们该怎么办呢？ 这里，我们可以使用Salesforce框架提供的一个名为`refreshApex`的方法。这个方法可以帮助我们刷新有线服务的数据，而不需要改变反应变量的值。 使用`refreshApex`的步骤如下： 1. ，导入方法，：首先，我们需要从框架中导入`refreshApex`方法。这不是我们自己写的，而是框架内置的。 2. ，指定要刷新的连接，：在一个页面上，我们可能有多个有线连接。因此，当我们调用`refreshApex`时，我们需要指定要刷新的连接。如果连接的是一个属性，我们只需要将这个属性传递给`refreshApex`。如果连接的是一个方法，就像我们在例子中所做的，我们需要做一些额外的工作。 3. ，定义方法签名，：当我们定义有线方法时，我们使用`(Result)`语法，而不是`({Error, Data})`。这就是为什么我们使用`wire_getCertifiedStudents(Result)`而不是`wire_getCertifiedStudents({error, data})`的原因。 4. ，存储结果引用，：我们需要声明一个私有属性，并用它来存储对有线服务结果的引用。在我们的例子中，这个属性叫做`_wiredStudentResult`。 5. ，调用`refreshApex`，：最后，我们调用`refreshApex`，并传入我们之前定义的私有属性。 通过这种方式，我们可以确保在删除认证后，用户界面上的数据能够及时更新。 另外，教师提到，如果我们让Apex方法`DeleteStudentCertification`返回更新的结果集，我们可能可以省去一些往返行程。这是一个很好的讨论点，因为它涉及到如何优化我们的代码和减少不必要的服务器请求。 希望这个解释对你有帮助！如果你有任何问题，随时问我。
-
22
Exercise 4-3: Implementing <lightning-button-group>
第 295 页让我们一步一步来完成这个练习。首先，我们要创建一个新的``，这个按钮组将会放在一个显示认证学生列表的闪电卡的操作插槽里。这个按钮组的作用是让用户能够对选中的学生执行一些操作，比如删除他们的认证记录。 接下来，我们需要确保这个按钮组在用户没有选择任何学生时是禁用的。也就是说，只有当用户至少选择了一行学生记录时，按钮组才会变得可用。这样可以防止用户在没有选择任何学生的情况下误操作。 然后，我们会使用Apex来强制删除所选学生的`certification_hold`记录。Apex是Salesforce的一种编程语言，它可以帮助我们在后台执行一些复杂的操作，比如删除记录。 最后，为了确保用户界面能够及时反映出这些变化，我们会使用`refreshApex`来更新界面。`refreshApex`是一个非常有用的工具，它可以帮助我们在数据发生变化后，自动刷新页面上的数据，让用户看到最新的信息。 总结一下，这个练习的目的是让你学会如何在Salesforce中使用``，并通过Apex和`refreshApex`来实现一些动态的、交互式的功能。希望你能通过这个练习，更好地理解这些概念，并在实际项目中应用它们。
-
23
Add a button group to the certifiedStudentList card.
第 296 页同学们，今天我们来学习如何在Salesforce中将按钮组添加到certifiedStudentList卡上。这个练习的目的是让我们能够更好地管理和操作认证学生列表中的数据。我们将通过几个步骤来完成这个任务。 首先，我们需要将收件箱按钮添加到认证学生列表中。这个按钮将允许我们查看与每个学生相关的消息或通知。添加按钮的过程很简单，我们只需要在Lightning组件中找到按钮组件，然后将其拖放到certifiedStudentList卡上即可。 接下来，我们需要根据网格行的选择来启用或禁用收件箱按钮。这意味着，只有当我们在列表中选择了一个学生时，收件箱按钮才会变为可用状态。这个功能可以通过编写一些简单的JavaScript代码来实现，我们会在代码中检查是否有行被选中，然后相应地设置按钮的状态。 然后，我们需要定义一个Apex方法来处理删除证书的操作。Apex是Salesforce的一种编程语言，它允许我们在服务器端执行复杂的逻辑。在这个方法中，我们将编写逻辑来删除选中的学生的证书。 最后，我们需要处理删除按钮的操作，并在删除后刷新数据。这意味着，当我们点击删除按钮时，系统会调用我们之前定义的Apex方法来删除证书，并在删除完成后，自动刷新页面上的数据，以反映最新的状态。 整个练习预计需要25分钟完成。通过这个练习，我们不仅能够学习如何在Salesforce中添加和管理按钮组，还能掌握如何通过Apex方法来处理数据操作。希望大家能够认真完成这个练习，加深对Salesforce开发的理解。如果有任何问题，随时提问，我会在这里帮助大家。
-
24
Challenge 3: Create a Contact Directory
第 297 页同学们，今天我们来挑战一个非常实用的任务——创建一个联系人目录的场景。这个任务会帮助我们更好地理解如何在Salesforce中使用Lightning Web Components（LWC）来处理和展示数据。 首先，我们需要创建一个新的LWC组件，命名为`challenge_contactDirector`。这个组件的主要功能是展示所有联系人的姓名、电子邮件地址和电话号码。为了展示这些信息，我们会使用一个非常强大的组件——`lightning-datatable`。 ### 第一步：创建组件 1. 打开你的Salesforce开发者控制台。 2. 创建一个新的Lightning Web Component，命名为`challenge_contactDirector`。 ### 第二步：编写HTML模板 在HTML文件中，我们会使用`lightning-datatable`来展示数据。这个组件非常适合用来展示表格数据，并且自带排序、分页等功能。 ```html ``` ### 第三步：编写JavaScript文件 在JavaScript文件中，我们需要定义表格的列和数据。我们会从Salesforce中获取联系人的数据，并将其展示在表格中。 ```javascript import { LightningElement, wire } from 'lwc'; import getContacts from '@salesforce/apex/ContactController.getContacts'; export default class ChallengeContactDirector extends LightningElement { columns = [ { label: 'Name', fieldName: 'Name' }, { label: 'Email', fieldName: 'Email', type: 'email' }, { label: 'Phone', fieldName: 'Phone', type: 'phone' } ]; @wire(getContacts) contacts; } ``` ### 第四步：编写Apex控制器 为了从Salesforce中获取联系人数据，我们需要编写一个Apex控制器。这个控制器会返回所有联系人的信息。 ```java public with sharing class ContactController { @AuraEnabled(cacheable=true) public static List getContacts() { return [SELECT Id, Name, Email, Phone FROM Contact]; } } ``` ### 第五步：配置组件 最后，我们需要将这个组件添加到我们的挑战库中，这样我们就可以在页面上看到它了。 1. 打开你的挑战库页面。 2. 添加一个新的组件，选择我们刚刚创建的`challenge_contactDirector`组件。 ### 总结 通过这个挑战，我们学会了如何使用`lightning-datatable`来展示数据，并且通过Apex控制器从Salesforce中获取数据。这个技能在实际开发中非常有用，因为很多场景都需要展示和处理数据。 希望你们都能顺利完成这个挑战！如果有任何问题，随时问我。加油！
-
25
Unit 4: Implementing Navigation and Layouts - 298
第 298 页同学们，今天我们来聊聊如何在Salesforce中实施导航和布局，特别是使用闪电体验的一些功能。我会尽量用简单的话来解释，这样你们听起来也会觉得轻松。 首先，我们来说说“闪电垂直导航”。这个功能就像是你手机上的菜单栏，但是它是垂直排列的。你可以把它放在页面的左边，这样用户就可以很容易地找到他们需要的功能。设置这个导航很简单，你只需要在Salesforce的设置中选择“闪电体验”，然后添加你想要的菜单项就可以了。 接下来是“闪电数据表”。这个功能非常强大，它可以帮助你在页面上展示数据，就像Excel表格一样。你可以选择哪些字段要显示，还可以对数据进行排序和过滤。这样，用户就可以快速找到他们需要的信息。 然后是“实现按钮组”。按钮组就是一组按钮，你可以把它们放在页面的顶部或者底部。这些按钮可以用来执行各种操作，比如保存、删除或者发送邮件。你可以根据用户的需要来定制这些按钮，让他们的工作更加高效。 最后，我们来说说“构建响应式布局”。这个功能确保你的页面在不同的设备上都能很好地显示，无论是在电脑上还是在手机上。Salesforce的闪电体验已经内置了响应式设计，所以你只需要确保你的布局和组件是兼容的就可以了。 好了，今天的课程就到这里。希望你们能够理解这些概念，并在实际操作中运用它们。如果有任何问题，随时问我哦！
-
26
See <lightning-layout> in Action
第 299 页同学们，今天我们来聊聊Salesforce中的组件。这个组件非常有用，特别是在你需要创建一个灵活且响应式的页面布局时。 首先，允许你轻松地排列和组织页面上的元素。你可以把它想象成一个灵活的容器，里面可以放置各种子组件，比如按钮、文本框、图片等等。 在我们的组件库中，有很多示例布局，你可以参考这些布局来获取灵感。比如，如果你想要创建一个两列的布局，你可以在示例中找到相应的代码，然后根据你的需求进行调整。 接下来，我们来说说MultipleSYS属性。这个属性决定了当子项的总宽度超过了布局的宽度时，是否将这些子项换行。如果MultipleSYS设置为true，那么当子项超出布局宽度时，它们会自动换到下一行。如果设置为false（这是默认值），子项则会尝试挤在同一行，可能会导致布局看起来有些拥挤。 举个例子，假设你有一个，里面放了五个按钮。如果MultipleSYS设置为true，当屏幕宽度不足以放下所有按钮时，多出来的按钮会自动换到下一行。这样，你的页面看起来会更加整洁和有序。 希望这个解释能帮助你们更好地理解和使用组件。如果有任何问题，随时问我哦！
-
27
Using the <lightning-layout> Grid System
第 300 页让我们来聊聊如何使用Salesforce的来实现响应式设计。想象一下，你正在设计一个网站，你希望它在手机、平板和电脑上都能看起来很棒。这就是响应式设计的魅力所在——它能让你的网站自动适应不同的屏幕大小。 在Salesforce中，就像是一个灵活的网格系统。你可以把它想象成一个可以伸缩的架子，根据屏幕的大小，架子上的物品会自动调整位置。比如，当你在手机上查看时，导航栏和内容可能会堆叠在一起，一行接一行。但在电脑上，它们可能会并排显示，充分利用屏幕的宽度。 使用，你可以定义不同的布局规则，告诉它在大屏幕、中屏幕或小屏幕上应该如何排列内容。这样，无论用户是在用手机浏览，还是在用大屏幕显示器，你的网站都能提供最佳的浏览体验。 所以，简单来说，就是帮助你轻松实现响应式设计的工具，让你的网站无论在什么设备上都能看起来既专业又美观。
-
28
Implementing Responsive Relative Column Sizing
第 301 页让我们来聊聊如何在Salesforce的Lightning组件中实现响应式的列大小调整。这其实是一个很实用的功能，尤其是在设计适应不同屏幕尺寸的页面时。 首先，我们使用``这个标签来定义布局中的每一列。为了让这些列能够根据不同的设备屏幕大小自动调整，我们可以设置几个属性：`small-device-size`、`medium-device-size`和`large-device-size`。这些属性分别对应小屏幕、中等屏幕和大屏幕的列大小。 这里有几个关键点需要注意： 1. ，大小属性的必要性，：如果你想使用小、中、大设备的大小设置，那么你必须先设置一个基础的大小属性。这个大小属性可以被看作是默认的或最小的尺寸。 2. ，尺寸的继承性，：如果你设置了小设备的大小，但没有设置中或大设备的大小，那么在小设备（屏幕宽度大于等于480px）及以上，都会使用小设备的大小设置。同理，如果设置了中等设备大小但没有设置大设备大小，那么在中等设备（屏幕宽度大于等于768px）及以上，都会使用中等设备的大小设置。 举个例子，如果你有一个列，你希望它在小屏幕上占3个单位，在中等屏幕上占6个单位，在大屏幕上占12个单位，你可以这样设置： ```html ``` 这样，当用户在不同的设备上查看时，这个列的大小就会自动调整，以适应屏幕的大小，从而提供更好的用户体验。 希望这个解释能帮助你理解如何在Salesforce中实现响应式布局。如果有任何疑问，随时欢迎提问！
-
29
Implementing Responsive, Relative Column Sizing (SLDS Markup)
第 302 页让我们来聊聊如何使用Salesforce Lightning Design System（SLDS）来实现响应式的列大小调整。这个功能可以帮助你的网页在不同的设备上都能很好地显示，无论是手机、平板还是电脑。 首先，我们来看一个基本的HTML结构，它使用了SLDS的网格系统。这个网格系统允许我们定义不同屏幕大小下的列宽。 ```html <div class="slds-grid slds-wrap"> Header Nav <div class="slds-col slds-size_6-of-12 slds-medium-size_8-of-12">Body</div> Sidebar Footer </div> ``` 在这个例子中，我们有一个包含头部、导航、主体、侧边栏和页脚的布局。我们使用了`slds-grid`和`slds-wrap`来创建一个可以换行的网格布局。 - `slds-size_1-of-1` 表示这个元素在默认情况下占据整个宽度。 - `slds-size_6-of-12` 表示在较小的屏幕上，这个元素占据一半的宽度。 - `slds-medium-size_4-of-12` 表示在中等大小的屏幕上（宽度大于768px），这个元素占据三分之一的宽度。 - `slds-medium-size_8-of-12` 表示在中等大小的屏幕上，这个元素占据三分之二的宽度。 通过这种方式，你可以为不同的屏幕尺寸定义不同的列宽，从而实现响应式设计。这样，无论用户是在手机上浏览还是在电脑上浏览，你的网页都能提供最佳的显示效果。 希望这个解释对你有帮助！如果你有任何问题，随时问我。
-
30
Conditional Column Reordering – What is it?
第 303 页让我们来聊聊条件列重新排序这个功能。想象一下，你在手机上查看一个网页，但是内容显示得不太理想，比如学生的详细信息被挤到了页面的最下方，而你其实希望它能在更显眼的位置显示。这时候，条件列重新排序就能派上用场了。 条件列重新排序是Salesforce Lightning App Builder中的一个功能，它允许你根据用户使用的设备类型（比如手机、平板或电脑）来调整页面上列的显示顺序。这样，无论用户是在手机上浏览还是在电脑上查看，页面都能以最合适的方式呈现，提升用户体验。 具体到你的例子，如果你发现学生详细信息在手机上显示得不太理想，你可以使用条件列重新排序功能，调整这些信息在移动设备上的显示顺序。比如，你可以把学生详细信息移到页面的顶部，这样用户在手机上浏览时，第一眼就能看到这些重要信息，而不是需要滚动到页面底部。 总之，条件列重新排序是一个非常实用的工具，它能帮助你优化页面布局，确保无论用户使用什么设备，都能获得最佳的浏览体验。
-
31
Conditional Column Reordering – What is it? - 304
第 304 页今天我们来聊聊Salesforce中的一个小技巧，叫做“条件列重新排序”。这个功能特别有用，尤其是在我们需要根据不同设备的屏幕大小来调整页面布局的时候。 想象一下，你有一个页面，上面显示了一些学生的详细信息。在电脑上，这些信息可能从左到右排列得很好，但在手机上，由于屏幕比较窄，你可能希望某些信息能显示在更显眼的位置，比如顶部。这时候，“条件列重新排序”就能派上用场了。 具体怎么做呢？我们可以使用Salesforce Lightning设计系统（SLDS）提供的一个叫做`slds-order--x`的类。这个类允许我们根据屏幕的大小来调整列的显示顺序。比如，如果你想让某个列在手机上显示在最上面，你可以给这个列加上`slds-order--1`的类，这样它就会在手机上排到第一位了。 但是，这里有一个需要注意的地方，就是无障碍访问的问题。虽然我们可以在视觉上重新排列这些列，但如果要确保页面对于使用屏幕阅读器的用户也是友好的，我们可能需要避免这样做。因为屏幕阅读器是按照HTML代码的顺序来读取内容的，如果我们只是视觉上调整了顺序，可能会让使用屏幕阅读器的用户感到困惑。 所以，在使用这个技巧的时候，我们要权衡一下视觉效果和用户体验，确保我们的页面既美观又实用。 最后，如果你想要更深入地了解这个功能，可以访问Salesforce Lightning设计系统的官方网站，那里有更详细的文档和示例。 好了，这就是关于“条件列重新排序”的简单介绍。希望这个小技巧能帮助你在Salesforce开发中更加得心应手！
-
32
Conditional Column Reordering – Implementation
第 305 页让我们来聊聊如何在Salesforce的Lightning设计系统中使用条件列重新排序。这个功能特别有用，当你想在不同的屏幕尺寸下改变列的显示顺序时。 首先，想象一下你有三个列：列1、列2和列3。在大多数情况下，你可能希望它们按照1-2-3的顺序显示。但是，当屏幕尺寸变小，比如在手机上查看时，你可能希望它们按照1-3-2的顺序显示，这样可能更符合用户的阅读习惯。 为了实现这一点，我们可以使用Lightning设计系统中的SLDS-Order类。具体来说，你可以给每个列分配一个类，比如`class="slds-order--1"`、`class="slds-order--2"`和`class="slds-order--3"`。这些类会告诉系统在不同的屏幕尺寸下如何重新排列这些列。 例如，如果你想让列在达到某个屏幕尺寸（我们称之为“中断点”）之前按照1-3-2的顺序排列，之后按照1-2-3的顺序排列，你可以这样设置： - 列1：`class="slds-order--1"` - 列2：`class="slds-order--3"` - 列3：`class="slds-order--2"` 这样，当屏幕尺寸小于中断点时，列会按照1-3-2的顺序排列；当屏幕尺寸大于或等于中断点时，列会按照1-2-3的顺序排列。 需要注意的是，SLDS的重新排序功能最多可以处理12列，超过这个数量就不行了。这个限制在Lightning设计系统的响应式布局选项表中有详细说明。 如果你想了解更多，可以访问Lightning设计系统的官方网站，那里有详细的文档和示例。特别是关于“条件列重新排序”和“响应式布局选项”的部分，会给你更多的信息和灵感。 希望这个解释对你有帮助！如果你有任何问题，随时问我。
-
33
Creating Independently Scrolling Regions
第 306 页让我们来聊聊如何在Salesforce中创建一个独立的滚动区域。想象一下，你有一个很长的学生列表，如果一次性全部显示出来，页面会变得非常长，用户需要不停地滚动页面才能看到所有内容。这显然不是个好主意，对吧？ 所以，我们可以通过添加一个滚动条来解决这个问题。具体怎么做呢？我们可以把学生列表放在一个特定的区域里，然后给这个区域设置一个固定的高度。这样，当列表内容超过这个高度时，滚动条就会自动出现，用户就可以在这个区域内滚动查看所有学生信息了。 具体步骤是这样的： 1. ，包裹学生瓷砖，：首先，我们需要把显示学生信息的“瓷砖”（也就是每个学生的信息块）放在一个`<div>`标签里。这个`<div>`就像是一个容器，把所有的学生信息都装在里面。 2. ，设置固定高度，：接下来，我们需要给这个`<div>`设置一个固定的高度。你可以通过CSS来实现这一点。比如，你可以定义一个CSS类，设置`height: 300px;`，这样这个区域的高度就被固定为300像素了。 3. ，启用滚动条，：最后，为了让这个区域能够滚动，我们需要给这个`<div>`添加一个特殊的CSS类，叫做`slds-scrollable`。这个类是Salesforce Lightning设计系统（SLDS）提供的，它会自动为这个区域添加滚动条。 总结一下，我们通过把学生列表放在一个固定高度的`<div>`里，并添加`slds-scrollable`类，就可以轻松地创建一个带有滚动条的区域了。这样，用户就可以在一个小区域内滚动查看所有学生信息，而不需要滚动整个页面了。是不是很简单呢？</div></div></div></div></div>
-
34
scrollbar
第 307 页同学们，今天我们来学习如何在Salesforce的Lightning组件中添加滚动条，并且让这个滚动条能够根据不同的设备尺寸自动调整，这就是我们常说的响应式设计。 首先，我们来看如何添加滚动条。在Salesforce的Lightning组件中，如果你想在某个区域添加滚动条，你可以使用`lightning-layout`和`lightning-layout-item`这两个组件。你只需要在`lightning-layout-item`上设置一个固定的高度，然后当内容超出这个高度时，滚动条就会自动出现。 接下来，我们来说说响应式设计。响应式设计的意思就是，你的网页或者应用能够根据用户使用的设备（比如手机、平板、电脑）自动调整布局和样式。在Salesforce的Lightning组件中，我们可以通过在`lightning-layout-item`上添加设备尺寸属性来实现这一点。比如，你可以设置在小屏幕上显示一个布局，在大屏幕上显示另一个布局。 具体怎么做呢？你可以在`lightning-layout-item`上使用`size`属性，并且根据不同的设备尺寸设置不同的值。比如，你可以设置`size="12"`在手机上，这样每个`lightning-layout-item`就会占据整个屏幕宽度；而在桌面上，你可以设置`size="6"`，这样每个`lightning-layout-item`就只会占据一半的屏幕宽度。 这样，无论用户是在手机上还是在电脑上查看你的应用，都能有一个良好的用户体验。这就是我们今天要学习的内容，希望大家能够掌握如何在Salesforce的Lightning组件中添加滚动条和实现响应式设计。
-
35
Unit Summary
第 309 页让我们来总结一下这一单元的内容，我会尽量用简单易懂的语言来解释。 首先，我们学习了，Lightning Vertical Navigation，。这个功能可以帮助我们创建一组可以嵌套一层深度的链接。想象一下，就像你在一个文件夹里放了一些文件，然后还可以在这些文件里再放一些子文件。这样，用户就可以更方便地找到他们需要的内容。 接下来，我们介绍了，Lightning Datatable，。这是一个非常强大的工具，可以让我们在网格中展示数据。你可以想象它就像一个电子表格，数据整齐地排列在行和列中。而且，用户还可以调整表格的大小，甚至对数据进行排序，这样他们就能更轻松地找到自己想要的信息。 我们还学习了，按钮组，。按钮组的作用是帮助我们组织和分组用户的操作。你可以把它想象成一个工具箱，里面有很多不同的工具，每个工具都有特定的用途。通过按钮组，我们可以把相关的操作放在一起，让用户更容易找到和使用它们。 然后，我们谈到了，Lightning Design System的网格系统，。这个系统是基于，Flexbox，的，它提供了一个非常灵活的布局方式。你可以把它想象成一个乐高积木系统，你可以根据需要自由地组合和排列这些积木，来创建你想要的布局。这个系统是，移动优先，的，也就是说，它会优先考虑在移动设备上的显示效果，同时也能很好地适应其他设备。 最后，我们学习了，SIDS网格和容器，。这些工具帮助我们创建，响应式布局，，也就是说，无论用户是在手机、平板还是电脑上查看，页面都能自动调整，确保内容显示得恰到好处。这个网格系统是基于，12列布局，的，你可以把它想象成一个有12个格子的棋盘，你可以根据需要把内容放在这些格子里，确保页面看起来既整齐又美观。 好了，这就是这一单元的主要内容。希望这些解释能帮助你更好地理解这些概念。如果你有任何问题，随时问我！
-
36
Unit Review
第 310 页同学们，今天我们来聊聊如何在Salesforce中有效地使用一些前端技术来提升用户体验。首先，我们来看一下如何使用`MaxRowselect`属性。这个属性通常用于表格或者列表组件中，它允许你限制用户一次可以选择的行数。比如，如果你设置`MaxRowselect="5"`，那么用户最多只能选择5行数据。这个功能在需要限制用户选择数量的场景中非常有用。 接下来，我们谈谈如何将相关的操作分组在一起。这里我们可以使用，闪电按钮组，（Lightning Button Group）。这个组件允许你将多个按钮组合在一起，形成一个逻辑上的操作组。比如，你可以将“编辑”、“删除”、“查看详情”这些操作按钮放在一个按钮组里，这样用户就可以一目了然地看到所有相关的操作选项。 在控制器中，我们通常会处理按钮点击事件。控制器动作可以接受一个事件作为参数。通过`Event.target`，你可以获取到触发事件的按钮的引用。如果你想为按钮添加一些自定义数据，可以使用`data-*`属性。比如，你可以给按钮添加一个`data-id`属性，然后在控制器中通过`event.target.getAttribute('data-id')`来获取这个值。当然，你也可以直接访问按钮的标签，比如`event.target.label`，来获取按钮上显示的文字。 最后，我们来讨论一下如何创建一个固定高度的容器分区，并且让这个分区可以滚动。首先，你需要创建一个固定高度的容器分区。你可以通过CSS来设置这个分区的高度，比如`height: 300px;`。然后，为了让这个分区的内容可以滚动，你可以给这个分区添加一个`overflow-y: auto;`的样式。这样，当内容超出分区的高度时，用户就可以通过滚动来查看所有内容。 总结一下，今天我们学习了如何使用`MaxRowselect`属性来限制用户选择的行数，如何使用闪电按钮组来组织相关操作，如何在控制器中处理按钮点击事件，以及如何创建一个固定高度且可滚动的容器分区。希望这些内容对你们有所帮助！
📋 课程信息
- 所属目录：DEX602
- 课程名称：Unit 4 Implementing Navigation and Layouts
- 章节数量：36 个