DEX601

Unit 5 Implementing Navigation and Layouts

首页/ 认证培训/ DEX601/ Unit 5 Implementing Navigation and Layouts

课程介绍

今天我们来讲讲Salesforce中的“实施导航和布局”。这个部分其实很简单，但非常重要，因为它直接影响到用户在使用Salesforce时的体验。 首先，我们来说说“导航”。你可以把Salesforce的导航想象成一个地图，帮助用户快速找到他们需要的功能或信息。在Salesforce中，导航栏通常位于页面的顶部或左侧，用户可以通过点击不同的标签或菜单项来访问不同的模块，比如“客户”、“机会”或者“报告”。 接下来是“布局”。布局决定了页面上各个元素的排列方式。你可以把它想象成房间里的家具摆放，合理的布局能让房间看起来更整洁，使用起来也更方便。在Salesforce中，布局可以定制，你可以决定哪些字段、按钮或相关列表显示在页面上，以及它们的位置。比如，你可以把最重要的信息放在页面的顶部，方便用户一眼就能看到。 总结一下，导航和布局是Salesforce用户体验的核心部分。通过合理的导航设计，用户可以快速找到他们需要的内容；而通过优化布局，你可以确保用户在使用系统时感到舒适和高效。希望这些内容对你有帮助！

课程章节

本课程共有 70 个章节

  • 1

    Unit 5 Implementing Navigation and Layouts

    第 335 页

    今天我们来讲讲Salesforce中的“实施导航和布局”。这个部分其实很简单，但非常重要，因为它直接影响到用户在使用Salesforce时的体验。 首先，我们来说说“导航”。你可以把Salesforce的导航想象成一个地图，帮助用户快速找到他们需要的功能或信息。在Salesforce中，导航栏通常位于页面的顶部或左侧，用户可以通过点击不同的标签或菜单项来访问不同的模块，比如“客户”、“机会”或者“报告”。 接下来是“布局”。布局决定了页面上各个元素的排列方式。你可以把它想象成房间里的家具摆放，合理的布局能让房间看起来更整洁，使用起来也更方便。在Salesforce中，布局可以定制，你可以决定哪些字段、按钮或相关列表显示在页面上，以及它们的位置。比如，你可以把最重要的信息放在页面的顶部，方便用户一眼就能看到。 总结一下，导航和布局是Salesforce用户体验的核心部分。通过合理的导航设计，用户可以快速找到他们需要的内容；而通过优化布局，你可以确保用户在使用系统时感到舒适和高效。希望这些内容对你有帮助！

    查看详情
  • 2

    Unit 5: Implementing Navigation and Layouts

    第 336 页

    让我们开始单元5的学习。这个单元非常有趣，因为它会教你如何让你的Salesforce应用更加用户友好和直观。我们会学习如何实现垂直导航，如何把数据整齐地展示在表格里，还会学习如何使用按钮和图标来帮助用户更好地在应用里导航。此外，我们还会学习如何创建一个能适应不同屏幕大小的布局，如何实现弹出菜单，以及如何将信息分组到手风琴布局中。 首先，我们会学习如何使用Lightning组件来实现垂直导航。垂直导航是一种常见的导航方式，它可以帮助用户快速找到他们需要的功能或信息。 接下来，我们会学习如何将结构化的数据输出到表格中。这不仅能帮助用户更清晰地查看数据，还能提高数据的可读性和可操作性。 然后，我们会学习如何实现按钮组。按钮组是一组相关的按钮，它们可以帮助用户执行一系列相关的操作。我们还会学习如何使用图标来增强按钮的功能和视觉效果。 在构建响应式布局的部分，我们会学习如何使用网格系统来创建一个能适应不同设备和屏幕大小的布局。这意味着无论用户是在手机、平板还是电脑上使用你的应用，他们都能获得良好的用户体验。 最后，我们会学习如何实施手风琴布局。手风琴布局是一种非常有效的方式来组织和展示信息，它可以让用户根据需要展开或收起信息，从而保持页面的整洁和有序。 通过这些学习，你将能够创建一个既美观又实用的Salesforce应用，让用户在使用时感到既方便又愉快。

    查看详情
  • 3

    Topics

    第 337 页

    同学们，今天我们来聊聊如何在Salesforce中使用组件来添加导航项。这个组件非常有用，特别是在你需要创建一个垂直导航栏的时候。 首先，是一个Lightning组件，它允许你在页面上创建一个垂直排列的导航菜单。这个菜单通常用于帮助用户在不同的页面或部分之间快速切换。 接下来，我们来看看如何添加导航项。每个导航项都是一个组件。你可以在标签内部添加多个标签，每个标签代表一个导航项。 每个都有几个重要的属性： - `label`：这是导航项显示的文字。 - `name`：这是导航项的唯一标识符，通常用于在代码中引用这个项。 - `onclick`：这是一个事件处理器，当用户点击这个导航项时会触发。 举个例子，如果你想创建一个包含“主页”、“关于我们”和“联系我们”三个导航项的垂直导航栏，你可以这样写： ```html ``` 在这个例子中，每个导航项都有一个标签和一个名称，并且当用户点击时，会调用相应的控制器方法。 最后，别忘了查看学生指南中的幻灯片，那里有更多的示例和详细说明，可以帮助你更好地理解和应用这个组件。 好了，这就是今天的内容。希望你们能通过这个简单的介绍，掌握如何在Salesforce中使用来添加导航项。如果有任何问题，随时提问！

    查看详情
  • 4

    Introducing <lightning:verticalNavigation>

    第 338 页

    今天我们来聊聊Salesforce中的一个组件，叫做``。这个组件非常有用，特别是在你需要创建一个垂直的链接列表时。 想象一下，你有一个网页，上面有很多不同的部分或者页面，你想让用户能够轻松地从一个部分跳到另一个部分。这时候，``就派上用场了。它可以帮助你创建一个垂直排列的链接列表，用户点击这些链接，就可以直接跳转到页面的不同部分，或者直接跳转到另一个页面。 这个组件特别适合用来展示一层深度的链接，也就是说，它不会展示太复杂的层级结构，而是简单明了地展示链接。 另外，``还有一个很酷的功能，就是支持溢出部分的折叠和展开。这意味着，如果你的链接列表很长，超出了页面的显示范围，用户可以通过点击来展开或折叠这些链接，这样页面看起来就不会太拥挤。 不过，有一点需要注意，这个组件不会根据用户的屏幕大小自动调整。也就是说，如果你在不同的设备上查看这个组件，它的大小和布局可能不会自动适应屏幕的变化。 最后，如果你想使用这个组件的溢出功能，你必须使用`lightning:verticalNavigationOverFlow`来创建它。这个子组件可以帮助你更好地控制链接的显示和隐藏。 总的来说，``是一个非常实用的组件，特别适合用来创建简洁、直观的导航链接列表。希望这个介绍能帮助你更好地理解和使用它！

    查看详情
  • 5

    Using <lightning:verticalNavigation>

    第 339 页

    让我们来简单理解一下这段代码。这段代码是用来在Salesforce的Lightning框架中创建一个垂直导航栏的。垂直导航栏就是那种从上到下列出选项的菜单，用户可以通过点击这些选项来导航到不同的页面或功能。 首先，我们有一个``标签，这是Salesforce Lightning组件的基本结构。所有的Lightning组件都需要放在这个标签里面。 接下来，我们使用了``标签来创建一个垂直导航栏。这个标签有一个属性叫做`selectedItem`，它用来指定默认选中的导航项。在这个例子中，默认选中的是`recent`，也就是“最近”这个选项。 然后，我们有一个``标签，它用来定义一个导航部分。在这个例子中，这个部分的标签是“Reports”，也就是“报告”的意思。在这个部分里，我们有两个导航项：一个是“Recent”（最近），另一个是“All Reports”（所有报告）。这两个导航项分别用``标签来定义，每个标签都有一个`label`属性来显示文本，和一个`name`属性来唯一标识这个项。 最后，我们还有一个``标签，它用来定义当导航项太多时，超出部分如何显示。在这个例子中，我们有两个额外的导航项：“Regional Sales East”（东部地区销售）和“Regional Sales West”（西部地区销售）。这两个项也会在导航栏中显示，但如果导航栏空间不够，它们会被折叠到一个“更多”选项里。 总结一下，这段代码创建了一个垂直导航栏，包含一个“报告”部分，里面有两个选项：“最近”和“所有报告”，以及两个额外的地区销售选项。默认情况下，“最近”这个选项是被选中的。 希望这个解释能帮助你理解这段代码的作用！如果有任何问题，随时问我哦！

    查看详情
  • 6

    Configuring Vertical Navigation

    第 340 页

    今天我们来聊聊Salesforce中的垂直导航配置。首先，我们有一个叫做“紧凑型”的布尔选项。这个选项的作用是，如果你设置为“true”，那么导航项之间的间隔就会变小，看起来更紧凑。默认情况下，这个选项是“false”，也就是说，导航项之间会有一定的间隔。 接下来是“OnSelect”这个功能。当你在导航中选择一个项目时，这个功能就会被触发。它会传递一个事件参数，这个参数包含了所选项目的“名称”。这样，你就可以根据用户的选择来执行相应的操作。 还有一个叫做“SelectedItem”的字符串属性。这个属性是用来指定哪个导航项应该被激活的。你只需要把想要激活的导航项的名称赋值给这个属性就可以了。 再来说说“阴影”这个布尔选项。如果你的垂直导航是放在一个有阴影的背景上，你可以把这个选项设置为“true”，这样导航看起来会更清晰。默认情况下，这个选项是“false”。 最后，我们有一个“标题”属性。这个属性是用来设置工具提示的。当用户把鼠标移动到导航项上时，就会显示这个工具提示，帮助用户更好地理解每个导航项的功能。 好了，这就是关于Salesforce垂直导航配置的一些基本内容。希望这些信息对你有帮助！

    查看详情
  • 7

    Adding Navigation Items

    第 341 页

    今天我们来聊聊如何在Salesforce的Lightning Experience中添加导航项。这个过程其实很简单，就像给你的手机应用添加一个新的快捷方式一样。 首先，我们需要了解几个关键概念： 1. ，垂直导航部分，：这就像是你应用中的一个菜单栏，所有的导航项都会显示在这里。 2. ，垂直导航项，：这是菜单栏中的每一个选项，比如“主页”、“报告”等。 接下来，我们来看看如何具体操作： - ，标签（必需），：这是导航项显示的名字，比如“销售仪表板”。 - ，姓名（必填），：这是导航项的内部名称，用于在系统中识别这个项。 - ，标题，：这是当用户鼠标悬停在导航项上时显示的提示信息。 - ，href，：这是导航项点击后跳转的链接地址。 - ，类，：这里可以添加一些自定义的CSS类，来改变导航项的外观。 如果你想在导航项旁边显示一个小徽章，比如未读消息的数量，你可以使用： - ，垂直导航项目徽章，：这里你可以设置徽章的样式。 - ，徽章计数，：这是徽章上显示的数字，比如未读消息的数量。 - ，辅助文本，：这是徽章旁边显示的额外信息，比如“新消息”。 最后，如果你想在导航项前面加一个图标，可以使用： - ，垂直导航项目图标，：选择你想要的图标。 - ，图标名称，：这是图标的名称，比如“home”代表家。 通过这些步骤，你就可以在Salesforce的Lightning Experience中轻松添加和管理导航项了。希望这能帮助你更好地定制你的Salesforce界面！

    查看详情
  • 8

    Including Dynamic Information in the Name Attribute

    第 342 页

    让我们来简单理解一下这段代码的作用和逻辑。 首先，这段代码是在Salesforce的Lightning组件中使用的，主要目的是在一个垂直导航栏中动态显示一些认证信息，并且当用户点击某个认证时，能够获取到该认证的详细信息。 ### 1. ，动态生成导航项， ```html ``` - 这里我们有一个``，它表示一个垂直导航栏的某个部分，标签是“Certification”。 - 在它里面，我们使用了``来遍历一个叫做`certifications`的列表。这个列表里存放了所有的认证信息。 - 对于每一个认证（`cert`），我们创建一个``，也就是一个导航项。这个导航项的`label`显示的是认证的名称（`cert.Name`），而`name`属性则是一个组合值，包含了认证的ID和名称，用逗号分隔开（`cert.Id + &#39;,&#39; + cert.Name`）。 ### 2. ，处理用户点击事件， ```javascript var selectionName = Events.getParam（&#39;名称&#39;）; … //如果我们应该处于认证模式 component.set（&#39; v. viewMode &#39;，&#39; certification &#39;）; var key = selectionName.split（&#39;，&#39;）; component.set（&#39; v. certification Id &#39;，key[0]）; component.set（&#39; v. certification Label &#39;，key[1]）; //如果结束 … ``` - 当用户点击某个导航项时，系统会触发一个事件，并且传递一个参数`名称`，这个参数就是我们在`name`属性中设置的组合值（`cert.Id + &#39;,&#39; + cert.Name`）。 - 我们通过`Events.getParam(&#39;名称&#39;)`来获取这个参数，然后把它赋值给`selectionName`。 - 接下来，我们判断当前是否处于“认证模式”。如果是，我们就进入处理逻辑。 - 我们使用`split(&#39;,&#39;)`方法将`selectionName`拆分成两部分：`key[0]`是认证的ID，`key[1]`是认证的名称。 - 最后，我们将这两个值分别设置到组件的属性中：`v.certificationId`和`v.certificationLabel`。这样，我们就可以在组件的其他地方使用这些值来加载相应的认证信息。 ### 3. ，总结， - 这段代码的核心思想是通过动态生成导航项，并且在用户点击时获取相应的认证信息。 - 通过将认证的ID和名称组合在一起，我们可以在用户点击时轻松地拆分出这两个信息，并且根据这些信息来加载相应的内容。 希望这个解释能帮助你更好地理解这段代码的逻辑！如果有任何问题，随时问我哦！

    查看详情
  • 9

    Exercise 5-1: Implementing Vertical Navigation

    第 343 页

    同学们，今天我们来做一个练习，叫做“实施垂直导航343”。这个练习的目的是让我们学会如何在Salesforce中创建和使用自定义组件，特别是用于导航的自定义组件。 首先，我们来看一下这个练习的几个关键部分： 1. ，Aw讲师自定义组件，：这是我们要创建的第一个组件。这个组件将用于展示讲师的相关信息，比如讲师的名字、课程等。我们可以在这个组件中添加一些字段和按钮，让讲师能够快速访问他们的课程和资料。 2. ，学生浏览器自定义组件，：接下来，我们要创建一个用于学生的组件。这个组件将帮助学生浏览他们的课程、作业和成绩。我们可以在这个组件中添加一些链接和按钮，让学生能够轻松找到他们需要的信息。 3. ，StudentDetails自定义组件，：这个组件是用来展示学生的详细信息，比如学生的名字、班级、成绩等。我们可以在这个组件中添加一些图表和表格，让信息更加直观和易于理解。 4. ，Aw讲师导航，：这是我们要创建的一个导航组件。这个组件将帮助讲师在不同的页面之间快速切换。我们可以在这个组件中添加一些链接和按钮，让讲师能够轻松访问他们的课程、学生信息和设置。 5. ，新定制组件，：最后，我们要创建一个全新的自定义组件。这个组件可以根据我们的需求来设计，比如展示一些统计数据、通知或者其他的功能。 在创建这些组件的过程中，我们会使用Salesforce的Lightning App Builder工具。这个工具非常强大，可以帮助我们轻松地拖拽和放置各种组件，然后进行自定义设置。 好了，现在大家应该对这个练习有了一个基本的了解。接下来，我会一步步带领大家完成这个练习。如果有任何问题，随时提问哦！

    查看详情
  • 10

    Pull the list of certifications and dynamically generate navigation links.

    第 344 页

    同学们，今天我们来学习如何在Salesforce中实现一个垂直导航功能，这个功能会动态地展示一个认证列表。听起来是不是很有趣？我们一步步来，确保每个人都能跟上。 首先，我们需要创建一个Apex类。这个类的任务是去检索所有的认证信息。想象一下，这个类就像是一个勤劳的小蜜蜂，飞出去采集花蜜（也就是我们的认证数据），然后带回来给我们使用。 接下来，我们要创建一个导航组件。这个组件就像是一个导航员，它会告诉用户：“嘿，这里有一些认证，你可以点击查看详情哦！”这个组件会使用我们刚才那个Apex类采集回来的数据。 然后，我们要实现一个功能，让用户可以领取这些证书。这就像是在线购物，用户看到喜欢的商品（在这里是证书），就可以点击领取，加入到自己的账户中。 动态生成垂直导航是这个练习的关键部分。我们要确保每当有新的认证加入时，导航栏能够自动更新，不需要我们手动去添加链接。这就像是一个自动更新的菜单，总是显示最新的选项。 最后，我们需要部署这个组件，并修改布局，确保它在页面上看起来既美观又实用。这就像是我们把新买的家具摆放到家里，确保每样东西都放在最合适的位置。 整个练习预计需要45分钟，所以大家要集中注意力，跟着步骤一步步来。如果在过程中有任何疑问，随时提问，我会在这里帮助大家。好了，我们开始吧！

    查看详情
  • 11

    Unit 5: Implementing Navigation and Layouts - 345

    第 345 页

    同学们，今天我们来聊聊单元5的内容，这个单元主要是关于如何在Salesforce中实现导航和布局的。听起来有点技术性，但其实很简单，我会用最通俗的语言来讲解。 首先，我们会学习如何使用“闪电”组件来实现垂直导航。想象一下，这就像是在你的应用里建一个侧边栏，用户可以轻松地点击不同的选项来跳转到他们想去的地方。 接下来，我们会看看如何将数据以表格的形式展示出来。这就像是把一堆杂乱的信息整理成一张清晰的表格，让用户一目了然。 然后，我们会学习如何实现按钮组。这就像是给你的应用添加一些快捷按钮，用户点击这些按钮就可以快速执行某些操作，比如保存、删除或者提交表单。 再往后，我们会探讨如何构建响应式布局。这意味着你的应用可以在不同的设备上，比如手机、平板或者电脑上，都能很好地显示和使用。这就像是给你的应用穿上了一件“弹性”的衣服，无论怎么拉伸都能保持美观。 最后，我们会学习如何实施手风琴布局。这种布局方式可以让信息以折叠的方式展示，用户点击某个标题，相关的信息就会展开，再次点击就会收起。这就像是一个可以折叠的文件夹，既节省空间又方便查找。 好了，这就是单元5的主要内容。听起来是不是很有趣？我们一步步来，慢慢掌握这些技能，你的Salesforce应用就会变得越来越强大和用户友好了。加油！

    查看详情
  • 12

    Topics - 346

    第 346 页

    同学们，今天我们来聊聊Salesforce中的组件。这个组件非常强大，可以帮助我们在页面上展示和管理数据表格。让我们一步步来看看怎么使用它。 首先，，引入，。这个组件是Salesforce Lightning框架的一部分，所以你只需要在你的Lightning组件中引用它就可以了。就像这样： ```html ``` 接下来，，配置网格行为，。你可以通过设置一些属性来控制表格的行为。比如，`keyField`是用来指定每一行的唯一标识符的，这样系统就知道哪一行被选中了。`onrowselection`和`onsort`是用来处理行选择和列排序的事件。 然后，，定义网格列，。你需要定义一个列的数组，告诉表格每一列显示什么数据。比如： ```javascript columns: [ { label: &#39;Name&#39;, fieldName: &#39;name&#39;, type: &#39;text&#39; }, { label: &#39;Age&#39;, fieldName: &#39;age&#39;, type: &#39;number&#39; }, { label: &#39;Email&#39;, fieldName: &#39;email&#39;, type: &#39;email&#39; } ] ``` 这里，`label`是列的标题，`fieldName`是对应数据的字段名，`type`是数据类型。 接着，，网格数据，。你需要准备一个数据数组，这个数组中的每个对象都代表一行数据。比如： ```javascript data: [ { id: &#39;1&#39;, name: &#39;John Doe&#39;, age: 30, email: &#39;john@example.com&#39; }, { id: &#39;2&#39;, name: &#39;Jane Smith&#39;, age: 25, email: &#39;jane@example.com&#39; } ] ``` 然后，，处理网格行选择，。当用户选择某一行时，你可以通过`onrowselection`事件来处理。比如： ```javascript handleRowSelect: function(component, event, helper) { var selectedRows = event.getParam(&#39;selectedRows&#39;); // 处理选中的行 } ``` 最后，，实现网格列排序，。你可以通过`onsort`事件来处理列的排序。比如： ```javascript handleSort: function(component, event, helper) { var fieldName = event.getParam(&#39;fieldName&#39;); var sortDirection = event.getParam(&#39;sortDirection&#39;); // 根据fieldName和sortDirection对数据进行排序 } ``` 好了，这就是的基本使用方法。希望你们能通过这个组件更好地管理和展示数据。如果有任何问题，随时问我哦！

    查看详情
  • 13

    Introducing <lightning-datatable>

    第 347 页

    今天我们来聊聊Salesforce中的``组件。这个组件非常强大，它可以帮助我们在页面上以表格的形式展示数据。想象一下，你有一堆数据，比如客户信息、销售记录等，``就能帮你把这些数据整齐地排列在表格里，方便查看和管理。 首先，``会根据你提供的数据类型，自动调整每一列的显示方式。比如，如果某一列是日期类型，它会自动按照日期的格式显示；如果是数字类型，它可能会显示为带有千位分隔符的数字。 这个组件还支持很多实用的功能。比如，你可以调整列的大小，让表格看起来更舒服；你可以选择某一行，进行进一步的操作；你还可以点击列头，按照大小写顺序对数据进行排序。如果你有很多数据，``还支持无限滚动，这样你就不用担心数据太多，页面加载不完了。 更棒的是，它还支持内联编辑。也就是说，你可以在表格里直接修改数据，而不需要跳转到其他页面。不过，需要注意的是，这个功能在移动设备上是不支持的。 在使用``时，你需要在初始化的时候提供三个关键属性：`data`、`columns`和`keyField`。`data`就是你要展示的数据，`columns`定义了每一列的属性，比如列名、数据类型等，而`keyField`则是用来唯一标识每一行的字段。 总的来说，``是一个非常灵活且功能丰富的组件，能大大提升你在Salesforce中处理数据的效率。希望这个介绍能帮助你更好地理解和使用它！

    查看详情
  • 14

    Specifying Rows and Columns

    第 348 页

    让我们来聊聊这个Salesforce的Lightning组件——`lightning:datatable`。这个组件非常强大，可以帮助我们在页面上展示表格数据，并且还能进行一些交互操作。 首先，我们来看一下这段代码的基本结构： ```html ``` ### 1. ，将每一行与唯一的id关联， - `keyField=&quot;id&quot;`：这个属性是用来指定每一行的唯一标识符。在这里，我们用的是`id`字段。也就是说，每一行数据都会有一个唯一的`id`，这样组件就能准确地识别每一行。 ### 2. ，填充行数据， - `data=&quot;{!v.mydata}&quot;`：这个属性是用来绑定表格的行数据。`v.mydata`是一个数组，数组中的每个对象代表一行数据。比如，如果你有一个客户列表，`v.mydata`可能就是包含每个客户信息的数组。 ### 3. ，填充列数据， - `columns=&quot;{!v.mycolumns}&quot;`：这个属性是用来绑定表格的列数据。`v.mycolumns`是一个数组，数组中的每个对象代表一列。每个列对象通常会包含列的标签（label）、字段名（fieldName）等信息。比如，你可能有一列显示客户名称，另一列显示客户邮箱。 ### 4. ，选择行时执行功能， - `onrowselection=&quot;{!c.getSelectedName}&quot;`：这个属性是用来绑定一个事件处理函数。当用户选择某一行时，这个函数就会被触发。`c.getSelectedName`是你在控制器中定义的一个方法，用来处理用户选择的行数据。比如，你可以在这个方法中获取用户选择的客户信息，并进行一些操作。 ### 5. ，复选框列， - 默认情况下，`lightning:datatable`会显示一个复选框列，用户可以通过这个复选框来选择多行。如果你不想显示这个复选框列，可以通过设置`hideCheckboxColumn`属性来隐藏它。 ### 总结 - `keyField`：确保每一行都有一个唯一的标识符。 - `data`：绑定行数据，展示在表格中。 - `columns`：绑定列数据，定义表格的列。 - `onrowselection`：当用户选择某一行时，触发相应的事件处理函数。 通过这个组件，你可以轻松地在Salesforce页面上展示和操作表格数据。希望这个解释对你有帮助！如果有任何问题，随时问我哦！

    查看详情
  • 15

    Grid Column Data Types

    第 349 页

    今天我们来聊聊Salesforce中的网格列数据类型，特别是编号349的这部分内容。想象一下，你正在使用Salesforce的Lightning组件来创建一个数据表。这个数据表就像是一个电子表格，每一列都有特定的数据类型，这些数据类型决定了数据在表格中如何显示和格式化。 比如说，如果你有一列是日期类型，那么这一列的所有单元格都会按照日期的格式来显示数据，比如“2023-04-01”。如果你有一列是货币类型，那么数据就会显示为货币格式，比如“$100.00”。 每个数据类型在Salesforce中都有一个对应的基本Lightning组件。这些组件就像是预制的积木块，帮助你快速搭建出符合你需求的数据表。比如，日期类型的数据会使用一个专门处理日期的Lightning组件，这个组件知道如何正确地显示和格式化日期数据。 所以，当你为数据表的列选择数据类型时，你实际上是在告诉Salesforce：“嘿，这一列的数据是这样的类型，请用对应的组件来显示它。”这样，你的数据表不仅看起来更专业，而且数据的展示也会更加准确和一致。 希望这个解释能帮助你更好地理解Salesforce中的网格列数据类型。如果你有任何问题，随时问我哦！

    查看详情
  • 16

    Configuring Grid Columns

    第 350 页

    让我们来聊聊这段代码。这段代码是用来配置一个网格的列，网格就是那种看起来像表格的东西，用来展示数据。我们这里要配置的是网格的列，也就是表格的每一列显示什么内容。 首先，我们有一个函数叫做“初始化”，这个函数会在网格加载的时候自动运行。在这个函数里，我们使用了一个叫做`cmp.set`的方法来设置网格的列。 我们设置了四列： 1. ，第一列，：显示“机会名称”。这里的“机会名称”是从数据中提取的一个字段，类型是“文本”，也就是说这里会显示一些文字信息。 2. ，第二列，：显示“信心”。这个“信心”也是一个字段，但它的类型是“百分比”，所以这里会显示一个百分比的值，比如50%。 3. ，第三列，：显示“数量”。这个“数量”字段的类型是“货币”，而且我们还特别指定了货币的代码是“EUR”，也就是欧元。所以这里会显示一个金额，比如100欧元。 4. ，第四列，：显示“联系电话”。这个字段的类型是“电话”，所以这里会显示一个电话号码。 简单来说，这段代码就是告诉网格：“嘿，你要显示四列数据，分别是机会名称、信心、数量和联系电话，而且数量和联系电话要按特定的格式显示。” 这样，当网格加载的时候，它就会按照这个配置来显示数据了。希望这个解释对你有帮助！

    查看详情
  • 17

    Specifying Grid Rows

    第 351 页

    让我们来聊聊这段代码。这段代码是用在Salesforce的Lightning组件中的，主要是用来设置一个网格（Grid）的数据。你可以把它想象成一个表格，里面有几行数据，每一行代表一个机会（Opportunity）。 首先，`cmp.set(&#39;v.mydata&#39;, [...]);` 这行代码的意思是，我们要把一些数据设置到一个叫做 `mydata` 的变量里。这个变量是我们在Lightning组件中定义的，用来存储数据。 接下来，我们来看一下这个数据的内容。数据是一个数组，数组里的每一个元素都是一个对象，代表一个机会。每个对象都有几个属性： 1. `id`：这是每个机会的唯一标识符，就像每个人的身份证号一样。 2. `机会名称`：这是机会的名字，比如“无花果叶软件”和“Quip”。 3. `信心`：这是一个数字，表示我们对这个机会的信心程度。比如0.2表示20%的信心，0.78表示78%的信心。 4. `金额`：这是这个机会的金额，比如25000和740000。 5. `联系人`：这是与这个机会相关的联系人的电子邮件地址。 6. `电话`：这是联系人的电话号码。 所以，这段代码的作用就是把两个机会的数据设置到 `mydata` 变量里，这样我们就可以在Lightning组件中使用这些数据来显示一个网格了。 希望这个解释对你有帮助！如果有任何问题，随时问我哦。

    查看详情
  • 18

    Handling Grid Row Selection

    第 352 页

    让我们来聊聊如何在Salesforce中处理网格行的选择。假设你有一个表格，里面有很多行数据，用户可以选择其中的一行或多行。你想要知道用户选择了哪些行，并且显示这些行的某些信息，比如机会名称（Opportunity Name）。 首先，我们来看一下这个函数的代码： ```javascript getSelectedName: function(cmp, Events) { var selectedRST = Events.getParam(&#39;selectedHandler&#39;); // 显示所选行的字段名称 for (var i = 0; i &lt; selectedRST.length; i++) { alert(&quot;您选择了：&quot; + selectedRST[i].opportunityName); } } ``` ### 1. ，函数定义， - `getSelectedName` 是这个函数的名字。它接收两个参数：`cmp` 和 `Events`。 - `cmp` 通常代表组件（Component），而 `Events` 是用来处理事件的。 ### 2. ，获取选中的行， - `var selectedRST = Events.getParam(&#39;selectedHandler&#39;);` - 这行代码的作用是从事件中获取用户选中的行。`selectedHandler` 是一个参数，它包含了用户选择的行数据。 ### 3. ，遍历选中的行， - `for (var i = 0; i &lt; selectedRST.length; i++) { ... }` - 这里我们使用一个 `for` 循环来遍历所有选中的行。`selectedRST` 是一个数组，里面包含了用户选择的每一行的数据。 ### 4. ，显示选中的信息， - `alert(&quot;您选择了：&quot; + selectedRST[i].opportunityName);` - 在循环中，我们使用 `alert` 函数来显示每一行的 `opportunityName` 字段。`opportunityName` 是每一行数据中的一个字段，表示机会的名称。 ### 5. ，总结， - 这个函数的作用是：当用户选择表格中的某些行时，它会遍历这些行，并弹出提示框显示每一行的机会名称。 ### 6. ，注意事项， - 确保 `selectedHandler` 参数确实包含了用户选择的行数据。 - `opportunityName` 是假设的字段名，实际使用时需要根据你的数据结构来调整。 希望这个解释能帮助你理解如何处理网格行的选择。如果有任何问题，随时问我！

    查看详情
  • 19

    Refreshing the List of Certifications on Navigation Selection

    第 353 页

    让我们来聊聊如何在Salesforce中实现“刷新认证列表”的功能。想象一下，你有一个导航菜单，里面列出了不同的认证项目。每当你在导航菜单中选择一个认证项目时，系统会自动更新显示已获得该认证的学生列表。 首先，我们需要理解几个关键点： 1. ，认证ID（Certification Id），：每个认证项目都有一个唯一的ID，就像每个人的身份证号码一样。这个ID帮助我们识别和区分不同的认证项目。 2. ，导航选择，：当你在导航菜单中选择一个认证项目时，系统会捕捉到这个选择，并获取对应的认证ID。 3. ，更改处理程序，：这是一个触发器，当认证ID发生变化时，它会自动触发一些操作。在这里，它的作用是强制刷新“CertificationStudentList”组件。 4. ，CertificationStudentList组件，：这是一个显示已获得某个认证的学生列表的组件。每当认证ID发生变化时，这个组件会重新加载数据，显示新的学生列表。 举个例子，假设你在导航菜单中选择了“Salesforce管理员认证”，系统会获取这个认证的ID，然后触发更改处理程序。这个处理程序会告诉“CertificationStudentList”组件：“嘿，认证ID变了，快去刷新一下学生列表！”于是，组件会重新加载数据，显示所有已获得“Salesforce管理员认证”的学生。 这个过程就像你在餐厅点菜，菜单上有不同的菜品（认证项目），你选择了一道菜（认证ID），厨房（更改处理程序）收到订单后，会准备相应的食材（刷新学生列表），最后服务员（CertificationStudentList组件）把菜端到你面前。 希望这个解释能帮助你更好地理解如何在Salesforce中实现“刷新认证列表”的功能。如果有任何问题，随时问我！

    查看详情
  • 20

    Implementing Grid Column Sorting

    第 354 页

    让我们来聊聊这段代码。这段代码是用于在Salesforce的Lightning组件中实现网格列的排序功能。想象一下，你有一个表格，里面有很多数据，用户点击表头的时候，数据可以按照那一列进行排序，这就是这段代码的作用。 首先，我们来看一下这段代码的结构。它定义了一个叫做`updateColumnSorting`的函数，这个函数会在用户点击表头进行排序的时候被调用。 在这个函数里，我们首先通过`e.getParam`方法获取了两个参数：`fieldName`和`sortDirection`。`fieldName`就是用户点击的那一列的名称，而`sortDirection`则是排序的方向，可能是升序（从小到大）或者降序（从大到小）。 接下来，我们使用`c.set`方法将这两个值设置到组件的属性中。`c`代表的是组件的上下文，`v.sortedBy`和`v.sortedDirection`是组件的两个属性，分别用来存储当前排序的列和排序的方向。 最后，我们调用了一个叫做`h.sortData`的方法。这个方法会根据我们传递的`fieldName`和`sortDirection`来对数据进行排序。`h`代表的是帮助器（helper），它通常包含一些辅助函数，用来处理数据或者执行一些逻辑操作。 总结一下，这段代码的作用就是当用户点击表头进行排序时，获取用户点击的列和排序方向，然后更新组件的状态，并调用帮助器中的排序函数来对数据进行排序。这样，用户就能看到按照他们选择的列和方向排序后的数据了。 希望这个解释能帮助你理解这段代码的作用！如果有任何问题，随时问我哦！

    查看详情
  • 21

    Implementing Grid Column Sorting - 355

    第 355 页

    今天我们来聊聊如何在Salesforce中实现表格列的排序功能。这个功能在很多应用中都很常见，比如你有一个数据表格，点击表头的时候，数据可以按照这一列进行升序或降序排列。 首先，我们来看一下代码的结构。这段代码主要包含两个函数：`sortData` 和 `sortBy`。 ### 1. `sortData` 函数 这个函数的作用是处理表格数据的排序。它接收三个参数： - `cmp`：这是当前组件的引用，我们可以通过它来获取和设置数据。 - `fieldName`：这是你要排序的列名。 - `sortDirection`：这是排序的方向，可以是 `asc`（升序）或 `desc`（降序）。 在函数内部，我们首先通过 `cmp.get(&quot;v.data&quot;)` 获取当前表格中的数据。然后，我们根据 `sortDirection` 来判断是否需要反转排序顺序。如果 `sortDirection` 不是 `asc`，我们就设置 `reverse` 为 `true`，表示需要降序排列。 接下来，我们调用 `data.sort` 方法，并传入 `sortBy` 函数来对数据进行排序。排序完成后，我们通过 `cmp.set(&quot;v.data&quot;, data)` 将排序后的数据重新设置回组件中。 ### 2. `sortBy` 函数 这个函数的作用是定义排序的逻辑。它接收三个参数： - `field`：这是你要排序的列名。 - `reverse`：这是一个布尔值，表示是否需要反转排序顺序。 - `primer`：这是一个可选参数，用于对数据进行预处理（比如将字符串转换为小写）。 在函数内部，我们首先定义了一个 `key` 函数。这个函数的作用是从每一行数据中提取出你要排序的列的值。如果提供了 `primer` 函数，我们会对提取的值进行预处理。 接下来，我们根据 `reverse` 的值来决定排序的方向。如果 `reverse` 是 `false`，我们就按升序排列；如果是 `true`，我们就按降序排列。 最后，我们返回一个比较函数，这个函数会接收两行数据 `a` 和 `b`，并根据 `key` 函数提取的值进行比较。如果 `a` 大于 `b`，返回正值；如果 `a` 小于 `b`，返回负值；如果相等，返回 `0`。 ### 总结 通过这两个函数的配合，我们就可以实现表格列的排序功能。`sortData` 负责处理数据的获取和设置，而 `sortBy` 负责定义具体的排序逻辑。这样，当用户点击表头时，表格中的数据就会按照指定的列进行排序。 希望这个解释能帮助你理解如何在Salesforce中实现表格列的排序功能。如果有任何问题，欢迎随时提问！

    查看详情
  • 22

    Exercise 5-2: Using lightning:datatable

    第 356 页

    同学们，今天我们来学习如何使用Salesforce的闪电组件——`lightning:datatable`。这个组件非常强大，可以帮助我们在页面上展示和管理数据表格。我们将通过一个具体的例子来学习如何创建一个自定义组件，展示认证学生的列表。 ### 1. 创建自定义组件 首先，我们需要创建一个新的自定义组件。假设我们的组件叫做`AwInstructorStudentList`。这个组件将用来展示通过认证的学生列表。 ### 2. 使用`lightning:datatable` 在自定义组件中，我们将使用`lightning:datatable`来展示数据。这个组件有几个关键的属性： - ，data，：这是我们要展示的数据，通常是一个数组。 - ，columns，：这是表格的列定义，告诉表格每一列显示什么数据。 - ，keyField，：这是每一行的唯一标识符，通常是记录的ID。 ### 3. 定义列和数据 假设我们有一个学生列表，每个学生有姓名、认证状态和认证日期。我们可以这样定义列和数据： ```html ``` 在控制器中，我们可以这样定义`columns`和`studentData`： ```javascript ({ doInit: function(component, event, helper) { component.set(&#39;v.columns&#39;, [ { label: &#39;姓名&#39;, fieldName: &#39;name&#39;, type: &#39;text&#39; }, { label: &#39;认证状态&#39;, fieldName: &#39;status&#39;, type: &#39;text&#39; }, { label: &#39;认证日期&#39;, fieldName: &#39;certificationDate&#39;, type: &#39;date&#39; } ]); component.set(&#39;v.studentData&#39;, [ { id: &#39;1&#39;, name: &#39;张三&#39;, status: &#39;已认证&#39;, certificationDate: &#39;2023-10-01&#39; }, { id: &#39;2&#39;, name: &#39;李四&#39;, status: &#39;未认证&#39;, certificationDate: &#39;2023-10-02&#39; }, { id: &#39;3&#39;, name: &#39;王五&#39;, status: &#39;已认证&#39;, certificationDate: &#39;2023-10-03&#39; } ]); } }) ``` ### 4. 导航和布局 为了让这个组件在页面上更好地展示，我们可以使用`lightning:navigation`来实现页面之间的跳转，或者使用`lightning:layout`来调整组件的布局。 ### 5. 总结 通过这个练习，我们学会了如何使用`lightning:datatable`来展示数据表格，并且创建了一个自定义组件来展示认证学生的列表。这个组件可以很容易地集成到Salesforce的页面中，帮助我们更好地管理和展示数据。 希望这个练习对你们有帮助！如果有任何问题，随时问我哦！

    查看详情
  • 23

    Unit 5: Implementing Navigation and Layouts - 358

    第 358 页

    让我们开始单元5的学习。这个单元主要是关于如何在Salesforce中实现导航和布局，让用户在使用你的应用程序时能够更加顺畅和直观。 首先，我们会学习如何使用“闪电”框架来实现，垂直导航，。垂直导航是一种常见的导航方式，通常显示在页面的左侧，帮助用户快速找到他们需要的功能或信息。你可以把它想象成一个菜单栏，点击不同的选项，页面内容就会相应变化。 接下来，我们会学习如何将，结构化数据输出到表格，中。表格是一个非常直观的方式来展示数据，比如客户信息、订单记录等。通过“闪电”框架，你可以轻松地将数据以表格的形式呈现出来，并且支持排序、筛选等功能，让用户更容易找到他们需要的信息。 然后，我们会学习如何，实现按钮组，。按钮是用户与应用程序交互的重要工具。你可以通过按钮组将相关的操作按钮放在一起，比如“保存”、“取消”、“编辑”等。这样用户在使用时会更方便，操作也更直观。 接下来是，构建响应式布局，。响应式布局的意思是，你的页面可以根据用户使用的设备（比如手机、平板、电脑）自动调整布局，确保在不同设备上都能有良好的显示效果。我们会使用网格系统来实现这一点，网格系统就像是一个灵活的框架，帮助你轻松地调整页面的布局。 最后，我们会学习如何，实施手风琴布局，。手风琴布局是一种将信息分组展示的方式，用户可以点击某个标题来展开或收起相关内容。这种方式非常适合展示大量信息，同时保持页面的整洁和简洁。 总结一下，在这个单元中，你将学会如何通过垂直导航、数据表、按钮组、响应式布局和手风琴布局来优化你的应用程序，让用户在使用时更加方便和高效。这些技能将帮助你创建出更加专业和用户友好的Salesforce应用。 接下来，我们会在每个小节中详细讲解这些内容，确保你能够掌握每一个步骤。准备好了吗？让我们开始吧！

    查看详情
  • 24

    Topics - 359

    第 359 页

    同学们，今天我们来聊聊Salesforce中的SDS类和标记，以及如何使用这个组件。 首先，SDS类，也就是Salesforce Design System的类，它提供了一套标准的样式和组件，帮助我们快速构建符合Salesforce设计规范的界面。使用SDS类，可以让我们的应用看起来更加专业，用户体验也更好。 接下来是，这是一个非常实用的组件，它允许我们将多个按钮组合在一起，形成一个按钮组。这样不仅可以让界面看起来更加整洁，还能提高用户的操作效率。比如，你可以将“保存”、“取消”、“删除”这些常用的操作按钮放在一个按钮组里，用户一眼就能找到他们需要的功能。 在使用这些组件和类的时候，记得参考学生指南中的幻灯片，那里有更详细的步骤和示例，可以帮助你更好地理解和应用这些知识。 好了，今天的课程就到这里，希望大家能够掌握这些内容，并在实际项目中灵活运用。如果有任何问题，随时提问哦！

    查看详情
  • 25

    Using <lightning:buttonGroup>

    第 360 页

    让我们来聊聊如何在Salesforce的Lightning框架中使用``和``组件来创建一个按钮组。这个功能非常实用，尤其是在你需要让用户在一组相关的操作中进行选择时。 首先，我们来看一下代码的基本结构。你可以在你的Lightning组件中使用``标签来包裹一组``。这样，这些按钮就会自动组合在一起，形成一个按钮组。 ```html ``` 在这个例子中，我们创建了三个按钮，分别标记为“查看地图”、“步行方向”和“行驶方向”。每个按钮都有一个`onclick`事件，这个事件会触发一个名为`myAction`的控制器方法。`aura:id`属性用于在控制器中唯一标识每个按钮。 `variant`属性定义了按钮的样式。在这个例子中，第一个按钮使用了`brand`样式，这通常用于主要的操作按钮，而其他两个按钮使用了`neutral`样式，这适用于次要的操作。 你还可以通过设置``来动态控制哪个按钮被选中。例如： ```html ``` 这个属性可以用来跟踪当前选中的按钮ID，你可以在控制器中根据这个属性来执行不同的逻辑。 最后，如果你更喜欢使用HTML和SLDS（Salesforce Lightning Design System）类，你也可以直接使用``标签来实现类似的效果，但使用``和``组件会更加方便，因为它们已经为你处理了很多样式和交互的细节。 希望这个解释能帮助你理解如何在Salesforce Lightning中使用按钮组。如果你有任何问题，随时问我！

    查看详情
  • 26

    Creating Mutual Exclusivity Behavior - (Controller)

    第 361 页

    让我们来聊聊这段代码。想象一下，你有一排按钮，你希望每次只能有一个按钮被选中，就像单选按钮那样。这段代码就是用来实现这个功能的。 首先，我们有一个函数叫做`myAction`，它会在你点击按钮时被触发。这个函数会做几件事情： 1. ，获取当前选中的按钮，：通过`component.get(&#39;v.selectedButtonId&#39;)`，我们可以知道之前哪个按钮是被选中的。这个按钮的ID被存储在`selectedBdn`变量里。 2. ，重置按钮样式，：接下来，我们找到这个之前被选中的按钮，并把它的样式从“选中状态”改回“普通状态”。这里我们用`component.find(selectedBdn).set(&quot;v.variant&quot;, &quot;neutral&quot;)`来实现。`v.variant`是按钮的一个属性，用来控制它的外观。 3. ，设置新的选中按钮，：然后，我们通过`event.getSource().getLocalId()`来获取你刚刚点击的那个按钮的ID，并把它存到`v.selectedButtonId`里。这样，我们就知道现在哪个按钮是被选中的了。 4. ，更新新按钮的样式，：最后，我们找到这个新选中的按钮，并把它的样式改成“选中状态”，也就是`brand`。这样，这个按钮就会看起来像是被选中了。 总结一下，这段代码的作用就是确保每次只有一个按钮能被选中，并且选中的按钮会有不同的样式来显示它是被选中的状态。这样，用户就能清楚地知道他们选择了哪个选项。 希望这个解释能帮助你理解这段代码的工作原理！如果有任何问题，随时问我哦！

    查看详情
  • 27

    Mutual Exclusivity Behavior – Another Option

    第 362 页

    今天我们来聊聊如何在Salesforce的Lightning组件中实现相互排他性行为。相互排他性行为，简单来说，就是在一组选项中，你只能选择其中一个，不能同时选择多个。这在我们日常的界面设计中非常常见，比如选择性别、选择支付方式等。 在Salesforce的Lightning组件中，我们可以使用`lightning:radioGroup`这个组件来实现这个功能。这个组件会生成一组单选按钮，用户只能选择其中的一个选项。 我们来看一下代码示例： ```html ``` 在这段代码中，`lightning:radioGroup`组件的`type`属性设置为`&quot;button&quot;`，这意味着单选按钮会以按钮的形式显示。`name`属性是这组单选按钮的名称，`label`属性是这组按钮的标签，显示在按钮组的上方。 `options`属性绑定了一个变量`v.options`，这个变量是一个数组，数组中的每个元素代表一个选项。每个选项有两个属性：`tag`和`value`。`tag`是显示给用户看的文本，`value`是这个选项的实际值。 接下来，我们在JavaScript控制器中设置`v.options`的值： ```javascript cmp.set(&#39;v.options&#39;, [ {tag: &quot;酒店&quot;, value: &quot;1&quot;}, {tag: &quot;警告&quot;, value: &quot;2&quot;}, {tag: &quot;培训中心&quot;, value: &quot;3&quot;}, {tag: &quot;学生&quot;, value: &quot;4&quot;} ]); ``` 在这段代码中，我们设置了四个选项：酒店、警告、培训中心和学生。每个选项都有一个对应的值，分别是1、2、3和4。 当用户选择一个选项时，`lightning:radioGroup`组件会自动处理相互排他性行为，确保用户只能选择一个选项。 好了，这就是如何在Salesforce的Lightning组件中使用`lightning:radioGroup`实现相互排他性行为的方法。希望这个解释对你有帮助！如果有任何问题，随时问我哦！

    查看详情
  • 28

    Exercise 5-3: Using <lightning:buttonGroup>

    第 363 页

    同学们，今天我们来学习如何使用Salesforce中的组件。这个组件非常有用，它可以帮助我们在页面上创建一组按钮，这些按钮可以一起工作，形成一个按钮组。 首先，我们需要在自定义组件中引入。这个组件是Salesforce Lightning框架的一部分，所以我们可以直接在组件中使用它。 接下来，我们可以在组件中定义按钮组。每个按钮都可以有自己的标签和点击事件。比如，我们可以创建一个包含“保存”和“取消”按钮的按钮组。当用户点击“保存”按钮时，我们可以触发一个保存数据的操作；当用户点击“取消”按钮时，我们可以取消当前的操作。 在定义按钮组时，我们还可以设置按钮的样式和排列方式。比如，我们可以让按钮水平排列，或者垂直排列。我们还可以设置按钮的大小和颜色，以适应不同的页面设计需求。 最后，我们需要在页面上使用这个自定义组件。我们可以将组件拖放到页面的任何位置，然后调整它的属性，以满足我们的需求。 总之，是一个非常强大的工具，它可以帮助我们快速创建功能丰富的按钮组。通过今天的练习，希望大家能够掌握如何使用这个组件，并在实际项目中灵活运用。

    查看详情
  • 29

    Add a button group to the CertificationStudentList card.

    第 364 页

    让我们来聊聊这个话题。Greg Diercks提到的这个问题，其实是在讨论如何在Salesforce中更高效地删除记录。他提出的方法确实是一个很好的实践，因为它减少了不必要的数据库查询，从而提高了代码的效率。 首先，我们来看一下Greg提供的代码。这段代码的目的是删除一组认证学生的记录。通常，我们可能会先查询出这些记录，然后再删除它们。但Greg的方法更聪明，他直接创建了一个包含要删除记录ID的列表，然后一次性删除这些记录。这样做的好处是，我们不需要先查询出这些记录，从而减少了数据库的负担。 具体来说，Greg的代码做了以下几件事： 1. 他定义了一个名为`deleteStudentCertification`的Aura Enabled方法，这个方法接受一个包含认证ID的列表作为参数。 2. 然后，他创建了一个新的`Certification_Held__c`对象列表`certsToEdit`。 3. 接下来，他遍历传入的认证ID列表，为每个ID创建一个新的`Certification_Held__c`对象，并将ID赋值给这个对象的`Id`字段，然后将这个对象添加到`certsToEdit`列表中。 4. 最后，他使用`delete`语句一次性删除`certsToEdit`列表中的所有记录，并返回`true`表示删除成功。 这种方法的好处是，它避免了在删除之前进行查询，从而减少了数据库的负载。在Salesforce开发中，减少查询次数是一个重要的优化手段，因为每次查询都会消耗一定的资源。通过这种方式，我们可以更高效地处理数据，特别是在处理大量数据时，这种优化尤为重要。 所以，Greg的建议是非常有价值的，我们在编写Salesforce代码时，应该时刻考虑如何减少不必要的查询，以提高代码的性能和效率。

    查看详情
  • 30

    Unit 5: Implementing Navigation and Layouts - 365

    第 365 页

    同学们，今天我们来聊聊单元5的内容，这个单元主要是关于如何在Salesforce中实现导航和布局的。听起来有点技术性，但别担心，我会用简单的方式来解释。 首先，我们会学习如何使用“闪电”组件来实现垂直导航。垂直导航就是那种在页面左侧或右侧的菜单，用户可以通过点击不同的选项来浏览不同的页面或功能。这个功能非常实用，尤其是在你的应用有很多不同的部分时。 接下来，我们会看看如何将数据输出到表格中。想象一下，你有一堆数据，比如客户信息或销售数据，你需要以一种清晰、有序的方式展示给用户。使用“闪电”的数据表组件，你可以轻松地做到这一点。 然后，我们会讨论如何实现按钮组。按钮组就是一组按钮，用户可以通过点击这些按钮来执行不同的操作。比如，你可能有一组按钮，分别用于“编辑”、“删除”和“查看详情”。 我们还会学习如何构建响应式布局。响应式布局意味着你的应用界面可以根据用户设备的屏幕大小自动调整。这样，无论用户是在手机、平板还是电脑上使用你的应用，都能有良好的体验。 最后，我们会实施手风琴布局。手风琴布局是一种可以展开和折叠的内容区域，用户可以根据需要查看或隐藏信息。这种布局非常适合用来展示大量信息，同时保持页面的整洁。 好了，这就是单元5的主要内容。听起来是不是很有趣？通过这些技能，你将能够创建出既美观又实用的Salesforce应用。接下来，我们会一步步深入每个主题，确保你能够掌握这些技能。准备好了吗？让我们开始吧！

    查看详情
  • 31

    Topics - 366

    第 366 页

    同学们，今天我们来聊聊Salesforce中的网格系统。网格系统是一个非常强大的工具，它可以帮助我们更好地组织和展示数据。首先，我们要学会如何配置网格的行为。你可以通过调整网格的设置，比如行高、列宽，甚至是网格的排序和过滤功能，来让数据展示得更符合你的需求。 接下来，我们来看看如何配置列属性。每一列都可以设置不同的属性，比如数据类型、格式、是否可编辑等。这些设置可以帮助你更精确地控制数据的展示和交互方式。 最后，我们还会用到“盒子”这个概念。在Salesforce中，盒子可以用来封装一组相关的字段或组件，使得页面布局更加整洁和有序。你可以通过拖拽的方式，轻松地将字段或组件放入盒子中，然后调整它们的位置和大小。 在学习这些内容的时候，别忘了查看学生指南中的幻灯片，那里有更详细的步骤和示例，可以帮助你更好地理解和掌握这些功能。好了，现在让我们开始动手实践吧！

    查看详情
  • 32

    About the SLDS Grid System

    第 367 页

    今天我们来聊聊Salesforce的Lightning Design System中的SDDS网格系统367。这个系统是基于Flexbox技术构建的，非常灵活，而且它是移动优先的，这意味着它首先考虑的是在移动设备上的表现，然后才是在桌面设备上。这种设计理念确保了无论用户使用什么设备，都能获得良好的体验。 这个网格系统是设备不可知的，也就是说，它不依赖于特定的设备或浏览器，可以在各种设备上保持一致的表现。它提供了一个脚手架系统，帮助开发者快速搭建页面布局。 在这个系统中，有一系列的助手类，这些类允许你改变网格的外观和行为。比如，你可以使用这些助手类来调整网格的对齐方式、元素的排列顺序、内容的流动方向，以及元素之间的填充空间等。 这个网格系统是基于960网格系统（960.gs）的，这是一个经典的网页设计框架，它提供了一个12列的网格布局，帮助设计师和开发者创建结构化的、响应式的网页设计。 总的来说，SDDS网格系统367是一个非常强大的工具，它可以帮助你在Salesforce平台上创建出既美观又功能强大的用户界面。通过使用这个系统，你可以确保你的应用在不同的设备上都能提供一致的用户体验。

    查看详情
  • 33

    Grid System Building Blocks

    第 368 页

    今天我们来聊聊Salesforce中的网格系统构建模块，特别是如何使用``和``来创建一个灵活的布局。 首先，想象一下你有一个大盒子，这个盒子就是我们的``。这个盒子可以水平排列里面的小盒子，这些小盒子就是``。每个小盒子代表一列，里面可以放任何你想要的内容。 在这个例子中，我们有两个小盒子，也就是两列。我们使用了`horizontalAlign=&quot;space&quot;`这个属性，它会让这两列在水平方向上均匀分布，也就是说，它们之间会有相等的空间。 每个``都有一个`flexibility=&quot;grow&quot;`的属性，这意味着它们会根据可用空间自动调整大小。如果屏幕变宽了，这两列也会变宽；如果屏幕变窄了，它们也会相应地缩小。 所以，这段代码的意思是：我们有一个大盒子，里面有两个小盒子，它们会根据屏幕的大小自动调整宽度，并且在水平方向上均匀分布。第一个小盒子里写着“这是第1列”，第二个小盒子里写着“这是第2列”。 希望这个解释能帮助你更好地理解如何使用``和``来创建一个灵活的网格布局。如果你有任何问题，随时问我！

    查看详情
  • 34

    Grid System Building Blocks - Using SLDS

    第 369 页

    让我们来聊聊Salesforce Lightning设计系统（SLDS）中的网格系统构建块。想象一下，你正在搭建一个乐高模型，每个乐高积木都是你布局中的一部分。在SLDS中，这些“积木”就是网格系统，它们帮助你在页面上排列和组织内容。 现在，当你使用``这样的组件时，它就像是一个预制的乐高框架，帮你快速搭建起一个基本的布局结构。但是，这并不意味着你不需要再添加任何东西了。实际上，``并不是SLDS类的完整抽象层。也就是说，它并没有包含所有你可能需要的样式和布局选项。 所以，在大多数情况下，你可能还需要手动添加一些SLDS类到你的布局中。这就像是在你的乐高模型上添加一些额外的装饰品，让整个模型看起来更加完美和符合你的需求。 举个例子，如果你想要调整某个元素的间距或者对齐方式，你可能需要在HTML标记上直接应用SLDS类，比如`slds-p-around_medium`来添加中等大小的内边距，或者`slds-align_absolute-center`来让元素在容器中绝对居中。 总之，虽然``提供了一个很好的起点，但为了达到更精细的布局效果，手动添加SLDS类是非常必要的。这就像是在乐高模型上添加那些小细节，让你的作品更加出色和个性化。

    查看详情
  • 35

    Configuring Grid Behavior - <lightning:layout> Attributes

    第 370 页

    今天我们来聊聊Salesforce中的Lightning组件布局，特别是关于“配置格网行为”的一些属性。这些属性可以帮助我们更好地控制页面上的元素如何排列和对齐。 首先，我们来看，HorizontalAlign，，这是一个字符串类型的属性。它决定了布局中的项目如何在水平方向上展开。你可以选择让它们居中显示，或者均匀地分布空间，甚至可以让它们靠左或靠右对齐。想象一下，这就像是在安排一排椅子，你可以选择让它们都集中在中间，或者均匀地分散开来。 接下来是，垂直对齐，，这也是一个字符串类型的属性。它控制的是项目在垂直方向上的对齐方式。你可以选择让它们从顶部开始排列，或者居中，或者靠近底部，甚至可以让它们拉伸以填满整个空间。这就像是在调整书架上的书，你可以选择让它们都对齐顶部，或者让它们均匀地填满整个书架的高度。 然后是，多行，，这是一个布尔型的属性。它决定了当子项的总宽度超过了布局的宽度时，是否应该换行。如果设置为True，那么超出的项目会自动换到下一行。默认情况下，这个值是False，也就是说，项目不会换行，而是可能会被截断或者溢出。这就像是在整理一排放不下的书，你可以选择让它们继续在同一行挤一挤，或者让它们换到下一行去。 最后，我们还有一个属性，它允许你将布局项拉到布局的边界，并且可以设置填充的大小。填充的大小可以是小、中或大。这就像是在调整图片的边框，你可以选择让图片紧贴边框，或者留出一些空间。 这些属性都非常实用，可以帮助你在Salesforce的Lightning页面上创建出既美观又功能强大的布局。希望这些解释能帮助你更好地理解和使用这些布局属性。如果有任何疑问，随时提问哦！

    查看详情
  • 36

    Configuring Grid Behavior – SLDS Classes

    第 371 页

    今天我们来聊聊Salesforce Lightning Design System（SLDS）中的网格行为配置，特别是那些帮助我们控制布局的SLDS类。这些类非常有用，可以帮助我们在不同的屏幕尺寸和设备上创建响应式的布局。 首先，我们来看几个关键的SLDS类： 1. ，SLDS-WRAP，：这个类允许列在超过其父级宽度的100%时进行换行。也就是说，如果内容太多，它会自动换到下一行，这样就不会溢出父容器。 2. ，SLDS-NOWRAP，：与SLDS-WRAP相反，这个类会将列保持在一行上，即使内容很多。它会允许列拉伸并填充父级宽度的100%。 接下来，我们有一些根据视区宽度来调整布局的类： - ，SLDS-NOWRAP--Small，：当视区宽度大于480px时，这个类允许列拉伸并填充父窗口宽度的100%。 - ，SLDS-NOWRAP--Medium，：当视区宽度大于768px时，这个类允许列拉伸并填充父窗口宽度的100%。 - ，SLDS-NOWRAP--Large，：当视区宽度大于1024px时，这个类允许列拉伸并填充父窗口宽度的100%。 这些类帮助我们根据不同的屏幕尺寸来调整布局，确保内容在不同设备上都能很好地展示。 接下来是几个关于对齐和分布的类： - ，SLDS-GRID_FRAME，：这个类使网格拉伸到视区宽度和高度的100%，非常适合全屏布局。 - ，SLDS-GRID_VERTICAL，：这个类垂直堆叠列，而不是水平堆叠。适合需要垂直排列内容的场景。 - ，SLDS-GRID_ALIGN-CENTER，：这个类将列与中心轴对齐，并沿每个方向扩展，使内容居中显示。 - ，SLDS-GRID_ALIGN-SPREAD，：这个类将列先左、右对齐，然后居中对齐。它们之间的空间是相等的，适合需要均匀分布内容的场景。 - ，SLDS-GRID_ALIGN-SPACE，：这个类将列均匀分布，周围空间相等，适合需要等距排列内容的场景。 最后，我们提到的是组件。这个组件为上述SLDS网格类提供了一个抽象层，使得在Lightning组件中使用这些布局变得更加简单和直观。 在接下来的课程中，我们将通过实际的例子来展示如何使用组件以及如何将SLDS类应用到标记中，来定义常见的布局。这样，你就可以在实际项目中灵活运用这些工具，创建出既美观又实用的界面了。 希望这些内容对你有帮助，如果有任何问题，随时提问哦！

    查看详情
  • 37

    See <lightning:layout> in Action

    第 372 页

    同学们，今天我们来聊聊Salesforce中的``组件。这个组件非常有用，特别是在你需要设计页面布局的时候。它可以帮助你轻松地安排和组织页面上的元素。 首先，我们来看一下``的基本用法。你可以把它想象成一个容器，里面可以放很多小盒子（也就是子组件）。这些小盒子会按照你设定的规则排列在页面上。 在组件库中，我们提供了一些示例布局，你可以参考这些布局来获取灵感。比如，你可以看到如何将按钮、文本框、图片等元素整齐地排列在页面上。这些示例可以帮助你快速上手，理解如何在实际项目中使用``。 接下来，我们来说说`MultipleSYS`这个属性。这个属性决定了当子项（也就是那些小盒子）超出了布局的宽度时，会发生什么。如果`MultipleSYS`设置为`true`，那么超出的子项会自动换到下一行。这就像你在写文章时，如果一行写满了，文字会自动换到下一行一样。如果`MultipleSYS`设置为`false`（这是默认值），那么超出的子项就不会换行，它们会继续挤在同一行里。 所以，当你设计页面时，可以根据需要来设置`MultipleSYS`属性。如果你希望页面上的元素能够自动换行，保持整洁，那就把它设为`true`。如果你希望所有元素都挤在一行里，那就保持默认的`false`。 好了，今天的内容就到这里。希望你们对``有了更清晰的理解。如果有任何问题，随时问我哦！

    查看详情
  • 38

    Defining a Horizontal Box Layout

    第 373 页

    让我们来聊聊这个代码片段。这个代码片段展示了一个在Salesforce Lightning框架中使用的水平框布局。简单来说，它就像是一个容器，里面放了两个小盒子，这两个小盒子会水平排列。 首先，我们有一个``标签，这个标签是用来创建一个布局容器的。在这个标签里，我们设置了一个属性叫做`horizontalAlign=&quot;space&quot;`。这个属性的意思是，我们希望容器里的两个小盒子在水平方向上均匀分布，也就是说，它们之间会有相等的空间。 接下来，我们有两个``标签，每个标签代表一个小盒子。这两个小盒子都有一个属性叫做`flexibility=&quot;grow&quot;`，这意味着它们会根据可用空间自动调整大小。还有一个属性是`padding=&quot;around-small&quot;`，这个属性给每个小盒子周围添加了一些小的内边距，让内容看起来不那么拥挤。 第一个小盒子里写着“这是第1列”，第二个小盒子里写着“这是第2列”。这两个小盒子会水平排列，并且它们之间的空间是均匀分布的。 总的来说，这个代码片段创建了一个简单的水平布局，里面有两个会自动调整大小的小盒子，它们之间会有均匀的空间分布。希望这个解释能帮助你更好地理解这个布局的工作原理！

    查看详情
  • 39

    Defining a Horizontal Box Layout with SLDS

    第 374 页

    让我们来聊聊如何使用Salesforce Lightning Design System（SLDS）中的类来定义一个水平箱布局。这个布局可以帮助我们在页面上并排显示内容，就像你在代码中看到的那样。 首先，我们有一个`<div>`元素，它使用了`slds-grid`类。这个类告诉浏览器，我们要创建一个网格布局。网格布局是一种非常灵活的方式，可以让我们在页面上排列内容，无论是水平还是垂直。 在这个网格内部，我们有两个`<div>`元素，每个都使用了`slds-col`类。这个类表示这些`<div>`是网格中的列。默认情况下，这些列会平均分配可用空间，所以它们会并排显示，每个占据大约一半的宽度。 所以，这段代码的效果就是创建了一个包含两列的布局，第一列显示“这是第1列”，第二列显示“这是第2列”。这两列会水平排列，占据页面的宽度。 这类似于你在表格中看到的行和列，但更加灵活和现代化。你可以根据需要添加更多的列，或者调整列的宽度，来创建复杂的布局。希望这个解释对你有帮助！</div></div></div>

    查看详情
  • 40

    Defining a Vertical Box Layout - <lightning:layout>

    第 375 页

    让我们来聊聊如何在Salesforce的Lightning组件中使用垂直框布局，也就是``这个标签。 首先，``是一个非常强大的工具，它可以帮助我们在页面上安排内容的布局。今天我们要讲的是如何让内容从上到下垂直排列。 在这个例子中，我们使用了``标签，并且给它添加了一个类叫做`slds-grid_vertical`。这个类的作用就是告诉布局，我们要把内容垂直排列，而不是水平排列。 接下来，我们在``里面放了两个``标签。每个``代表一个内容块。第一个``里面写着“这是第一排”，第二个写着“这是第二排”。 当我们运行这段代码时，页面上会显示两行文字，第一行是“这是第一排”，第二行是“这是第二排”。这两行文字会从上到下垂直排列，就像你在图29中看到的那样。 所以，简单来说，如果你想在Salesforce的Lightning组件中创建一个垂直排列的布局，你可以使用``标签，并给它加上`slds-grid_vertical`这个类。然后，在``里面放上你的内容块，每个内容块用``包裹起来。这样，你的内容就会按照你希望的顺序，从上到下整齐地排列出来了。 希望这个解释对你有帮助！如果你有任何问题，随时问我哦。

    查看详情
  • 41

    Defining a Vertical Box Layout - SLDS

    第 376 页

    让我们来聊聊这个垂直框布局。在Salesforce的Lightning Design System（SLDS）中，我们有一种非常方便的方式来创建垂直排列的布局，这就是使用`slds-grid_vertical`类。 想象一下，你有一个盒子，你想在里面放几个小盒子，这些小盒子要一个接一个地垂直排列。这时候，你就可以用`slds-grid_vertical`来实现这个效果。 在你的代码中，你首先创建了一个大的`div`，并给它加上了`slds-grid`和`slds-grid_vertical`这两个类。`slds-grid`告诉浏览器这是一个网格布局，而`slds-grid_vertical`则告诉浏览器这个网格是垂直排列的。 然后，在这个大`div`里面，你又放了两个小`div`，每个小`div`都加上了`slds-col`类。`slds-col`表示这是一个列，它会自动占据父容器中的可用空间。 所以，最终的效果就是，这两个小`div`会一个在上，一个在下，垂直排列在大`div`里面。第一个小`div`会显示“这是第1列”，第二个小`div`会显示“这是第2列”。 另外，你提到的“SDS样式类”可能是一个笔误，应该是“SLDS样式类”。SLDS是Salesforce Lightning Design System的缩写，它提供了一系列的CSS类，帮助我们快速构建符合Salesforce风格的界面。 希望这个解释能帮助你理解垂直框布局的概念。如果你有任何问题，随时问我哦！

    查看详情
  • 42

    Centering Columns - <lightning:layout>

    第 377 页

    同学们，今天我们来聊聊Salesforce中的``组件，特别是如何使用`horizontalAlign=&quot;center&quot;`来让内容在页面上居中显示。 首先，``是一个非常强大的布局组件，它可以帮助我们在页面上轻松地排列和组织内容。你可以把它想象成一个灵活的网格系统，可以让你把内容放在页面的任何位置。 在这个例子中，我们使用了`horizontalAlign=&quot;center&quot;`这个属性。这个属性的作用是什么呢？简单来说，它会让所有在``里面的内容在水平方向上居中显示。也就是说，无论你有多少内容，它们都会自动对齐到页面的中间位置。 接下来，我们来看一下代码的具体结构： ```html 这是1号上校 这是2号上校 ``` 在这段代码中，我们有两个``，它们分别包含了“这是1号上校”和“这是2号上校”这两个文本内容。由于我们在``中设置了`horizontalAlign=&quot;center&quot;`，所以这两个文本内容会在页面上水平居中显示。 总结一下，``是一个非常实用的布局工具，而`horizontalAlign=&quot;center&quot;`则是一个简单但强大的属性，可以帮助你轻松实现内容的居中显示。希望这个例子能帮助大家更好地理解如何使用这些工具来构建美观的页面布局。 如果有任何问题，随时提问哦！

    查看详情
  • 43

    Centering Columns - SLDS

    第 378 页

    让我们来聊聊这个代码片段。这个代码是用来在Salesforce Lightning Design System（SLDS）中创建一个居中的网格布局的。想象一下，你有一个页面，你想在上面放两列内容，而且你希望这两列在页面上居中显示，左右两边留出相等的空间。这就是我们要做的事情。 首先，我们有一个`div`，它使用了`slds-grid`类。这个类告诉浏览器，我们要创建一个网格布局。然后，我们还加上了`slds-grid_frame`和`slds-grid_align-center`这两个类。`slds-grid_frame`是用来给网格添加一些内边距，让它看起来更舒服。而`slds-grid_align-center`则是让整个网格在页面上居中显示。 接下来，我们在网格里面放了两个`div`，每个`div`都使用了`slds-col`类。这个类表示这是一个网格中的列。第一个`div`里面写着“这是第1列”，第二个`div`里面写着“这是第2列”。这样，我们就有了两列内容，它们会在页面上居中显示，左右两边留出相等的空间。 简单来说，这个代码就是用来创建一个居中的两列布局，让页面看起来更整齐、更专业。希望这个解释对你有帮助！

    查看详情
  • 44

    Adjusting Column Padding with <lightning:layoutItem>

    第 379 页

    同学们，今天我们来聊聊如何在Salesforce的Lightning组件中调整布局的衬垫（padding）。衬垫就是元素内部内容与边框之间的空间，调整它可以让页面看起来更舒服。 首先，我们来看一个例子。在这个例子中，我们使用了``和``来创建三个不同的布局项，每个布局项都有不同的衬垫设置。 ```html 这是1号上校 这是2号上校 这是3号上校 ``` 在这个代码中，我们为每个``设置了不同的`padding`属性： 1. ，horizontal-small，：这是最小的衬垫，适合内容较少的布局项。 2. ，horizontal-medium，：中等大小的衬垫，适合内容适中的布局项。 3. ，horizontal-large，：最大的衬垫，适合内容较多的布局项。 通过调整这些衬垫，我们可以让页面上的元素看起来更加整齐和美观。你可以根据需要选择不同的衬垫大小，来达到最佳的视觉效果。 希望这个解释对你们有帮助！如果有任何问题，随时问我哦！

    查看详情
  • 45

    Adding Space Between Columns - <lightning:layoutitem>

    第 380 页

    同学们，今天我们来聊聊如何在Salesforce的Lightning组件中添加列之间的空间。这个技巧在布局设计时非常有用，可以让你的页面看起来更加整洁和专业。 首先，我们来看一下代码的基本结构。我们使用了一个``标签，它就像一个容器，里面可以放多个``。每个``代表一个列，你可以把它们想象成页面上的一个个小格子。 在这个例子中，我们有三个列，分别叫做“1号上校”、“2号上校”和“3号上校”。每个列都使用了不同的类来调整它们之间的空间。 - 第一个列使用了`class=&quot;slds-col--padded slds-grid_pull-padded&quot;`，这个类会给列添加一些内边距（padding），让内容看起来不那么拥挤。 - 第二个列使用了`class=&quot;slds-col--padded&quot;`，这个类同样添加了内边距，但没有使用`pull-padded`，所以它的空间会稍微小一些。 - 第三个列使用了`class=&quot;slds-col--padded-large slds-grid_pull-padded-large&quot;`，这个类添加了更大的内边距，适合需要更多空间的列。 通过这些类，你可以灵活地调整列之间的空间，让页面布局更加符合你的需求。记住，合理使用空间可以让你的页面看起来更加美观和易于阅读。 好了，这就是今天的内容。希望你们能理解并应用到自己的项目中。如果有任何问题，随时问我哦！

    查看详情
  • 46

    Specifying Columns with Relative Sizing - Lightning

    第 381 页

    今天我们来聊聊如何在Salesforce的Lightning组件中使用相对大小的列。这个功能非常有用，尤其是在你需要创建一个响应式的页面布局时。 首先，我们来看一下这段代码。我们有一个``标签，它包裹了整个布局。这个布局被分成了三行，每一行都有不同的内容。 第一行，我们有一个``，它的`size`属性被设置为12。这意味着这个元素会占据整个行的宽度。这里我们放了一个“报头”，也就是页面的标题部分。 第二行，我们有三列。第一列的`size`是3，表示它占据行的25%宽度；第二列的`size`是6，占据50%的宽度；第三列的`size`也是3，同样占据25%的宽度。这里我们分别放了“NAV”（导航）、“身体”（主要内容）和“一边”（侧边栏）。 第三行，我们又有一个``，它的`size`也是12，意味着它也会占据整个行的宽度。这里我们放了一个“底部对齐”，通常是页面的页脚部分。 通过这种方式，你可以轻松地控制页面中各个部分的大小和布局，使得页面在不同的设备上都能有良好的显示效果。希望这个解释对你有帮助！如果有任何问题，随时问我哦！

    查看详情
  • 47

    Specifying Columns with Relative Sizing - SLDS

    第 382 页

    让我们来聊聊如何使用Salesforce Lightning Design System（SLDS）中的相对大小列来布局你的页面。这个功能非常强大，可以让你轻松地创建响应式的页面布局。 首先，我们来看一下你提供的代码示例。在这个例子中，我们使用了一个`div`元素，并给它添加了`slds-grid`和`slds-wrap`类。这两个类的作用是创建一个网格布局，并允许内容在需要时换行。 接下来，我们有几个不同的部分，每个部分都使用了`slds-col`类来表示这是一个列。然后，我们使用了`slds-size_a-of-b`类来定义每个列的宽度。这里的`a`表示这个列占用的宽度比例，`b`表示总列数。在这个例子中，总列数是12。 让我们具体看看每个部分： 1. ，报头，：`slds-size_1-of-1` 表示这个列占用整个宽度，也就是12列中的12列。所以报头会占据整个页面的宽度。 2. ，NAV，：`slds-size_3-of-12` 表示这个列占用12列中的3列。所以NAV会占据页面宽度的四分之一。 3. ，身体，：`slds-size_6-of-12` 表示这个列占用12列中的6列。所以身体部分会占据页面宽度的一半。 4. ，一边，：`slds-size_3-of-12` 表示这个列占用12列中的3列。所以这一边会占据页面宽度的四分之一。 5. ，页脚，：`slds-size_1-of-1` 表示这个列占用整个宽度，也就是12列中的12列。所以页脚会占据整个页面的宽度。 通过这种方式，你可以非常灵活地调整每个部分的宽度，确保页面布局既美观又实用。你可以根据需要调整`a`和`b`的值，来创建不同的布局效果。 希望这个解释对你有帮助！如果你有任何问题，随时问我哦。

    查看详情
  • 48

    Responsive, Relative Column Sizing

    第 383 页

    同学们，今天我们来聊聊一个非常实用的功能——响应式布局。想象一下，你正在用手机浏览网页，突然切换到平板电脑，页面内容会自动调整，以适应不同的屏幕大小，这就是响应式布局的魅力。 首先，我们来看“响应灵敏”。这个词听起来有点技术性，但其实很简单。它意味着页面能够根据你使用的设备，自动调整布局和内容的大小。比如，你在手机上看到的页面可能是一列显示，而在电脑上，页面可能会分成多列，这样阅读起来更加舒适。 接下来是“相对列大小383”。这个数字组合可能看起来有点复杂，但其实它代表的是页面布局中列的比例。在这个例子中，383表示页面被分成了三列，其中第一列占3份，第二列占8份，第三列占3份。这种比例分配可以帮助页面在不同设备上保持美观和功能性。 然后是“宽页面宽度”和“窄页面宽度”。这两个概念很容易理解。宽页面宽度通常用于桌面设备，页面内容会横向展开，充分利用屏幕空间。而窄页面宽度则适用于手机等小屏幕设备，页面内容会纵向排列，方便用户上下滚动浏览。 最后，我们来说说“布局动态响应可用空间以拆分到多行”。这句话的意思是，页面布局会根据可用屏幕空间的大小，动态调整内容的排列方式。如果屏幕空间足够大，内容可能会在一行内显示；如果空间有限，内容就会自动拆分成多行，确保用户能够清晰地看到所有信息。 总结一下，响应式布局是一个非常智能的设计方式，它让我们的网页能够在不同的设备上都能提供良好的浏览体验。通过理解这些基本概念，我们可以更好地设计和优化我们的网页，让用户无论在哪里，都能享受到最佳的浏览效果。希望今天的讲解对你们有所帮助！

    查看详情
  • 49

    Implementing Responsive Relative Column Sizing

    第 384 页

    让我们来聊聊如何在Salesforce的Lightning组件中使用响应式布局。想象一下，你正在设计一个网页，这个网页需要在不同的设备上都能很好地显示，比如手机、平板和电脑。这就是响应式设计的魅力所在。 首先，我们使用``标签来创建一个布局容器。这个容器可以包含多个``，每个``代表布局中的一个部分，比如头部、导航栏、主体内容、侧边栏和页脚。 在这个例子中，我们设置了几个``，并为它们指定了不同设备上的大小。例如，第一个``的`size`属性设置为12，这意味着在大多数设备上，它将占据整个宽度。接下来的两个``在小型设备（如手机）上各占6个单位宽度，在中型设备（如平板）上各占4个单位宽度。最后一个``在小型设备上占6个单位宽度，在中型设备上占4个单位宽度，但在大型设备上，它将占据整个宽度。 如果不指定`size`属性，那么组件将无法根据设备的不同调整大小。通过设置`smallDeviceSize`、`mediumDeviceSize`和`largeDeviceSize`属性，我们可以确保布局在不同设备上都能保持良好的显示效果。 总之，使用``和``，我们可以轻松创建出既美观又实用的响应式布局，让用户无论使用什么设备都能享受到良好的浏览体验。

    查看详情
  • 50

    Implementing Responsive, Relative Column Sizing - SLDS

    第 385 页

    今天我们来聊聊如何在Salesforce Lightning Design System（SLDS）中实施响应式的相对列大小调整。这个功能非常有用，尤其是在我们需要让网页布局适应不同大小的屏幕时。 首先，我们有两个关键的类名需要了解：`slds-medium-size_a-of-b` 和 `slds-large-size_a-of-b`。这里的“a”和“b”是占位符，你需要根据实际情况替换成具体的数字。比如，`slds-medium-size_1-of-2` 表示在中等大小的屏幕上，这个列将占据父容器的一半宽度。 - `slds-medium-size_a-of-b`：这个类名用于当屏幕宽度超过768像素时。你可以通过设置“a”和“b”的值来定义列在中等屏幕上的相对大小。例如，`slds-medium-size_1-of-3` 表示列宽为父容器的三分之一。 - `slds-large-size_a-of-b`：这个类名用于当屏幕宽度超过1024像素时。同样，你可以通过调整“a”和“b”的值来定义列在大屏幕上的相对大小。例如，`slds-large-size_2-of-5` 表示列宽为父容器的五分之二。 为了确保你的网格布局能够响应不同的屏幕尺寸，你需要在你的HTML元素上附加这些样式类。例如，如果你有一个div元素，你可能会这样写： ```html <div class="slds-grid"> <div class="slds-col slds-medium-size_1-of-2 slds-large-size_1-of-3"> </div> <div class="slds-col slds-medium-size_1-of-2 slds-large-size_2-of-3"> </div> </div> ``` 在这个例子中，当屏幕宽度超过768像素但小于1024像素时，第一个div将占据一半的宽度，第二个div也将占据一半的宽度。当屏幕宽度超过1024像素时，第一个div将占据三分之一的宽度，第二个div将占据三分之二的宽度。 通过这种方式，你可以轻松地创建出能够适应不同屏幕尺寸的响应式布局，确保你的应用在各种设备上都能提供良好的用户体验。希望这个解释对你有帮助！如果有任何问题，随时问我。

    查看详情
  • 51

    Implementing Responsive, Relative Column Sizing - SLDS - 386

    第 386 页

    让我们来聊聊如何在Salesforce Lightning Design System (SLDS) 中使用响应式的相对列大小调整。这个功能非常有用，因为它可以帮助你的网页布局在不同的设备上都能很好地显示，无论是手机、平板还是桌面电脑。 首先，我们来看一下你提供的代码。这个代码使用了SLDS的网格系统来创建一个响应式的布局。网格系统是SLDS中用来创建页面布局的工具，它可以帮助你轻松地安排页面上的元素。 在这个例子中，我们有一个包含五个部分的布局：报头、导航栏、主体内容、侧边栏和页脚。每个部分都被包裹在一个`div`标签中，并且使用了`slds-col`类来指定它们都是网格的列。 接下来，我们使用了`slds-size_x-of-y`类来定义每个列在不同屏幕大小下的宽度。这里的`x`和`y`是数字，表示列的大小。例如，`slds-size_6-of-12`意味着这个列在默认情况下占据网格的6份，总共有12份，也就是一半的宽度。 为了使得布局能够响应不同的屏幕大小，我们还使用了`slds-small-size_x-of-y`和`slds-medium-size_x-of-y`类。这些类定义了在较小的屏幕（如手机）和中等大小的屏幕（如平板）上，列应该如何调整大小。例如，`slds-medium-size_4-of-12`意味着在屏幕宽度超过768px时，这个列应该占据4份，也就是三分之一的宽度。 最后，我们还使用了`slds-large-size_x-of-y`类来定义在更大的屏幕上（如桌面电脑）列的大小。这个类的工作方式与前面的类相同，只是它适用于屏幕宽度超过1024px的情况。 通过这种方式，你可以确保你的网页布局在不同的设备上都能提供良好的用户体验。记住，响应式设计是现代网页设计的一个重要方面，它可以帮助你的网站吸引更多的访问者，并提高用户的满意度。

    查看详情
  • 52

    Creating Independently Scrolling Regions

    第 387 页

    今天我们来聊聊如何在Salesforce中创建一个独立的滚动区域。这个功能特别有用，尤其是在移动设备和Lightning Experience中，因为它支持原生的滚动行为，让用户体验更加流畅。 首先，我们来看一下代码的基本结构。我们使用了一个叫做`ui:scrollerWrapper`的组件来包裹我们想要滚动的内容。这个组件会自动处理滚动逻辑，你只需要把内容放进去就可以了。 ```html ``` 接下来，我们需要通过CSS来控制这个滚动区域的大小。这里我们给`ui:scrollerWrapper`组件添加了一个类名`scrollerSize`，然后在CSS中定义了这个类的高度为300像素。 ```css /， CSS ，/ .THIS.scrollerSize { height: 300px; } ``` 这样，当你在页面上使用这个组件时，它就会显示为一个高度为300像素的滚动区域，用户可以通过触摸或鼠标滚轮来滚动查看里面的内容。 总结一下，创建独立滚动区域的步骤很简单：首先用`ui:scrollerWrapper`包裹内容，然后通过CSS设置滚动区域的高度。这样，无论是在移动设备还是Lightning Experience中，用户都能享受到流畅的滚动体验。 希望这个解释对你有帮助！如果有任何问题，随时问我哦。

    查看详情
  • 53

    Creating a Scrollable Datatable

    第 388 页

    同学们，今天我们来聊聊如何在Salesforce的Lightning框架中创建一个可滚动的数据表。这个功能非常实用，尤其是当你需要展示大量数据时。 首先，数据表的宽度和高度是由它的容器元素决定的。也就是说，如果你把数据表放在一个`<div>`标签里，那么这个`<div>`的大小就会决定数据表的大小。 接下来，如果你想显示的数据行数超过了这个容器能容纳的行数，那么数据表会自动添加一个滚动条。这样，用户就可以通过滚动来查看所有的数据了。 具体怎么做呢？你可以像这样写代码： ```html <div style="height: 300px;"> </div> ``` 在这个例子中，我们设置了一个高度为300像素的`<div>`容器。然后，我们把Lightning的数据表组件放在这个容器里。如果数据表中的行数超过了这个高度能显示的行数，数据表就会自动出现滚动条。 这样，用户就可以轻松地滚动查看所有的数据了。是不是很简单呢？希望这个解释对你们有帮助！如果有任何问题，随时问我哦。</div></div></div>

    查看详情
  • 54

    Unit 5: Implementing Navigation and Layouts - 390

    第 390 页

    同学们，今天我们来聊聊如何在Salesforce中实现导航和布局。这个单元的内容非常实用，能帮助你们更好地设计和优化用户界面。 首先，我们来看看，垂直导航，。垂直导航是一种常见的导航方式，通常用于在页面的左侧或右侧显示菜单项。通过使用Salesforce的，Lightning组件，，我们可以轻松地实现这种导航方式。垂直导航不仅能让用户快速找到他们需要的功能，还能让页面看起来更加整洁和有序。 接下来是，数据表，。在Salesforce中，我们经常需要展示大量的结构化数据。使用，Lightning数据表，，我们可以将这些数据以表格的形式清晰地展示出来。数据表不仅支持排序、筛选等功能，还能让用户轻松地查看和操作数据。 然后，我们来说说，按钮组，。按钮组是一组相关的按钮，通常用于执行相似的操作。通过将按钮组合在一起，我们可以让用户更方便地找到他们需要的操作。在Salesforce中，我们可以使用，Lightning按钮组，来实现这一功能，并且可以根据需要自定义按钮的样式和行为。 再来看，响应式布局，。随着移动设备的普及，响应式布局变得越来越重要。通过使用，网格系统，，我们可以创建出能够自动适应不同屏幕尺寸的布局。这样，无论用户是在电脑、平板还是手机上访问你的应用，都能获得良好的体验。 最后，我们谈谈，手风琴布局，。手风琴布局是一种将信息分组展示的方式，用户可以通过点击标题来展开或折叠内容。这种布局非常适合展示大量信息，同时保持页面的简洁。在Salesforce中，我们可以使用，Lightning手风琴组件，来实现这一功能。 总结一下，这个单元的内容涵盖了垂直导航、数据表、按钮组、响应式布局和手风琴布局。掌握这些技能后，你将能够创建出更加用户友好、功能强大的Salesforce应用。希望你们在学习过程中能够多加练习，把这些知识应用到实际项目中。加油！

    查看详情
  • 55

    Topics - 391

    第 391 页

    同学们，今天我们来聊聊Salesforce中的手风琴组件。手风琴，听起来是不是很有趣？其实，它在Salesforce里是一种非常实用的界面元素，可以帮助我们更好地组织和展示信息。 首先，什么是手风琴呢？简单来说，手风琴就像是一个可以折叠和展开的菜单。你可以点击一个标题，它就会展开显示更多的内容，再点击一下，它又会折叠起来。这样，页面看起来就非常整洁，用户也可以根据自己的需要查看信息。 接下来，我们来看看如何配置手风琴。在Salesforce中，你可以通过Lightning App Builder来添加和配置手风琴组件。你只需要拖放手风琴组件到页面上，然后就可以开始定义它的各个部分了。 定义手风琴部分也很简单。你可以为每个部分设置一个标题，然后在这个标题下添加你想要的任何内容，比如文本、图片、甚至是其他组件。这样，每个部分都可以独立地展开和折叠，用户可以根据需要查看不同的信息。 最后，我们来谈谈实施菜单。手风琴组件非常适合用来创建多层次的菜单。你可以把主要的菜单项放在手风琴的标题部分，然后在每个标题下添加子菜单项。这样，用户就可以通过点击不同的标题来查看不同的子菜单，非常方便。 好了，这就是关于手风琴组件的基本介绍。希望你们能通过这个简单的讲解，对手风琴有一个初步的了解。记得，实践是最好的学习方式，所以不妨自己动手试试看，配置一个属于你自己的手风琴组件吧！ 提醒一下，别忘了在学生指南中找到相关的幻灯片，那里有更多的详细信息和步骤指导。祝你们学习愉快！

    查看详情
  • 56

    About the Accordion

    第 392 页

    今天我们来聊聊Salesforce中的Accordion 392组件。这个组件非常实用，它可以帮助我们把相关的内容分组放在一个容器里，这样页面看起来会更加整洁有序。 首先，Accordion 392有一个很酷的特性，叫做`allowMultipleSectionsOpen`。这个属性可以让你决定是否允许同时打开多个部分。如果你设置为`true`，那么用户可以同时展开多个部分；如果设置为`false`，那么一次只能展开一个部分，展开新的部分时，之前展开的部分会自动折叠起来。 当你点击一个部分时，它会展开显示里面的内容，再次点击时，它就会折叠起来，隐藏内容。这种展开和折叠的效果非常直观，用户操作起来也很方便。 最后，每个部分里面可以放一个或多个LWC（Lightning Web Components）组件。这意味着你可以根据需要在每个部分里放置不同的内容或功能模块，灵活性非常高。 总结一下，Accordion 392是一个非常好用的组件，它可以帮助你更好地组织页面内容，提升用户体验。希望这个解释对你有帮助！

    查看详情
  • 57

    Configuring the Accordion

    第 393 页

    今天我们来聊聊如何在Salesforce中使用Lightning组件来配置一个Accordion（手风琴）布局。Accordion是一种常见的UI元素，它允许用户点击不同的部分来展开或收起内容，非常适合用来展示分块的信息。 首先，我们来看一下代码的基本结构。这段代码使用了``标签来创建一个Accordion组件。在这个组件内部，我们定义了三个``，每个Section代表一个可以展开或收起的部分。 - 第一个Section的`name`是&quot;ContactInfo&quot;，标签（`label`）显示为&quot;Contact Info&quot;。在这个部分里，我们放置了联系信息。 - 第二个Section的`name`是&quot;Profile&quot;，标签显示为&quot;Profile&quot;。这里我们放置了用户资料。 - 第三个Section的`name`是&quot;Groups&quot;，标签显示为&quot;Group Membership&quot;。这部分用来展示团体会员资格。 注意到``标签中有一个属性`activeSectionName=&quot;Profile&quot;`，这个属性用来设置默认展开的Section。在这里，我们设置的是&quot;Profile&quot;部分默认展开。 通过这样的配置，用户可以在页面上看到一个整洁的Accordion布局，点击不同的标签就可以展开或收起相应的内容。这种方式不仅节省了页面空间，还能让用户更专注于他们感兴趣的部分。 希望这个解释能帮助你理解如何在Salesforce中配置Accordion组件。如果有任何疑问，随时欢迎提问！

    查看详情
  • 58

    Defining Accordion Sections

    第 394 页

    我们来聊聊这段代码。这段代码是用来创建一个手风琴（Accordion）组件的。手风琴组件在网页上很常见，它允许用户点击不同的标题来展开或收起内容区域，就像手风琴的折叠效果一样。 首先，我们有一个``标签，这是手风琴组件的容器。在这个容器里，我们定义了三个部分，每个部分都用``标签来表示。 第一个部分，``，它的标题是“Accordion Title A”，名字是“A”。在这个部分里，有一段文字“这是A部分的内容区域”。此外，这里还有一个按钮菜单，通过``标签实现。这个按钮菜单有一个选项“Menu Item One”，点击它会触发一些操作。 第二个部分，``，标题是“Accordion Title B”，名字是“B”。这里的内容是“这是B部分的内容区域”。 第三个部分，``，标题是“Accordion Title C”，名字是“C”。内容区域是“这是C部分的内容区域”。 总结一下，这段代码创建了一个有三个部分的手风琴组件，每个部分都有自己的标题和内容。用户可以通过点击标题来展开或收起对应的内容区域。希望这个解释能帮助你理解这段代码的作用！

    查看详情
  • 59

    Implementing Menus

    第 395 页

    今天我们来聊聊如何在Salesforce中使用``组件来创建一个带有按钮和弹出菜单的界面。这个组件非常实用，可以帮助我们在页面上展示一个按钮，点击后会出现一个下拉菜单，用户可以选择不同的操作。 首先，我们来看一下代码的结构： ```html ``` ### 1. `` 组件 这个组件是核心，它定义了一个按钮菜单。我们给它设置了一些属性： - `alternativeText=&quot;More options&quot;`：这是当用户将鼠标悬停在按钮上时显示的提示文本，告诉用户这个按钮是用来展示更多选项的。 - `onselect=&quot;{! c.doSomething }&quot;`：这是当用户从菜单中选择一个选项时触发的事件处理函数。`c.doSomething` 是我们在控制器中定义的一个方法，用来处理用户的选择。 - `iconName=&quot;utility:add&quot;`：这是按钮上显示的图标。这里我们使用了Salesforce提供的`utility:add`图标，表示“添加”操作。 ### 2. `` 组件 在``里面，我们定义了三个菜单项，分别是“Create”、“Update”和“Delete”。每个菜单项都有两个属性： - `label`：这是菜单项显示的文字，用户会看到“Create”、“Update”和“Delete”这三个选项。 - `value`：这是菜单项的值，当用户选择一个选项时，这个值会被传递给`onselect`事件处理函数。比如，如果用户选择了“Create”，那么`value`的值就是`1`。 ### 3. 事件处理 当用户从菜单中选择一个选项时，`onselect`事件会被触发，调用`c.doSomething`方法。在这个方法里，我们可以根据用户选择的`value`值来执行不同的操作。比如，如果`value`是`1`，我们可以执行创建操作；如果是`2`，执行更新操作；如果是`3`，执行删除操作。 ### 总结 通过这个简单的代码，我们可以在Salesforce页面上创建一个带有按钮和下拉菜单的组件。用户点击按钮后，会弹出一个菜单，选择不同的选项会触发相应的事件处理函数。这个组件非常适合用来展示一些常用的操作，比如创建、更新和删除等。 希望这个解释对你有帮助！如果有任何问题，随时问我哦！

    查看详情
  • 60

    Configuring <lightning:buttonMenu>

    第 396 页

    今天我们来聊聊Salesforce中的``组件。这个组件非常有用，特别是在你需要创建一个带有下拉菜单的按钮时。让我们一步步来看看它的主要属性和功能。 首先，``组件有几个重要的属性，可以帮助你定制按钮的行为和外观。 1. ，accesskey，：这是一个字符串属性，允许你为按钮指定一个快捷键。这样，用户可以通过按下这个快捷键来快速激活或聚焦到这个按钮上。 2. ，替代文本，：这也是一个字符串属性，用于为按钮提供辅助文本。这个文本通常用于屏幕阅读器，帮助视力障碍的用户理解按钮的功能。 3. ，类，：这个属性允许你为按钮添加额外的CSS类。这样，你可以自定义按钮的外观，使其与你的应用程序的整体风格保持一致。 4. ，残疾，：这是一个布尔属性。如果你将其设置为`true`，那么这个按钮菜单将被禁用。禁用的菜单用户无法打开，通常用于表示当前不可用的操作。 5. ，图标名称，：这是一个字符串属性，用于指定按钮上显示的图标。图标的格式通常是`utility:down`，表示使用Salesforce的实用图标库中的“向下”图标。默认情况下，这个值就是`utility:down`。 6. ，onblur，：这是一个事件处理程序，当按钮失去焦点时触发。你可以在这里定义一些操作，比如关闭菜单或者显示一些提示信息。 7. ，OnFocus，：这也是一个事件处理程序，当按钮获得焦点时触发。你可以在这里定义一些操作，比如打开菜单或者显示一些提示信息。 8. ，OnSelect，：这是一个事件处理程序，当用户从菜单中选择一个选项时触发。你可以在这里定义一些操作，比如根据用户的选择执行特定的功能。 总的来说，``是一个非常灵活的组件，通过合理配置这些属性，你可以创建出既美观又功能强大的按钮菜单。希望这些信息对你有帮助，如果你有任何问题，随时问我！

    查看详情
  • 61

    Configuring <lightning:buttonMenu> - 397

    第 397 页

    今天我们来聊聊Salesforce中的``组件。这个组件非常实用，可以帮助我们在页面上创建一个带有下拉菜单的按钮。接下来，我会用简单易懂的语言，带你了解它的几个重要属性。 首先，我们来看，大小，这个属性。你可以通过设置`size`属性来调整按钮的大小。它有几种选项，比如`xx-small`、`x-small`、`medium`（中号）和`large`（大号）。如果你不设置这个属性，默认会是中号大小。 接下来是，tabindex，。这个属性决定了当用户使用键盘的Tab键在页面上导航时，这个按钮的顺序。你可以给它一个数字，数字越小，越早被选中。 然后是，标题，。这个属性可以让你为按钮添加一个工具提示。当用户把鼠标悬停在按钮上时，会显示你设置的提示文字，帮助用户理解按钮的作用。 再来说说，变体，。这个属性可以改变按钮的外观。它有几种选项，比如`bare`（裸露）、`container`（容器）、`border`（边界）、`brand`（品牌）、`bare-inverse`（裸露反向）和`border-inverse`（反向边界）。如果你不设置这个属性，默认会是`border`样式。 接下来是，可见，。这个属性控制菜单是否默认打开。如果你设置为`true`，菜单会一开始就显示出来；如果设置为`false`，菜单默认是关闭的。默认值是`false`。 然后是，正在加载，。这个属性可以让你在菜单加载时显示一个旋转的加载图标。如果你设置为`true`，用户会看到一个加载中的状态，表示菜单正在加载数据。默认值是`false`。 最后是，加载状态替代文本，。当菜单处于加载状态时，你可以通过这个属性设置一条消息，告诉用户当前正在加载中。比如你可以写“正在加载，请稍候…”，这样用户就知道发生了什么。 好了，以上就是关于``组件的一些重要属性的简单介绍。希望这些内容能帮助你更好地理解和使用这个组件。如果你有任何问题，随时问我哦！

    查看详情
  • 62

    Configuring <lightning:buttonMenu> - 398

    第 398 页

    今天我们来聊聊Salesforce中的一个小功能——``组件的一个属性，叫做`isDraft`。 想象一下，你正在使用一个按钮菜单，这个菜单可以展开显示多个选项。有时候，你可能需要告诉用户，这个菜单里的内容还没有最终确定，还处于“草稿”状态。这时候，`isDraft`属性就派上用场了。 `isDraft`是一个布尔值，也就是说，它只有两个可能的值：`true`（真）或者`false`（假）。默认情况下，它的值是`false`，也就是说，菜单不会显示任何草稿的提示。但是，如果你把这个值设置为`true`，那么菜单的触发器旁边就会显示一个小小的草稿指示器，告诉用户这里的内容还在草稿阶段。 不过，光显示一个草稿指示器还不够，用户可能想知道为什么这个菜单是草稿状态。这时候，你就需要用到另一个属性，叫做`草稿替代文本`。这个属性是一个字符串，你可以在这里写一段简短的描述，解释为什么这个菜单是草稿状态。比如，你可以写“内容还在审核中”或者“等待最终确认”之类的。 总结一下，`isDraft`属性用来控制是否显示草稿指示器，而`草稿替代文本`则用来解释为什么显示这个指示器。这两个属性一起使用，可以帮助用户更好地理解菜单的状态。 希望这个解释对你有帮助！如果有任何问题，随时问我哦！

    查看详情
  • 63

    Configuring Menu Items

    第 399 页

    让我们来聊聊Salesforce中的`lightning:menuProject`组件。这个组件其实是一个菜单项，它通常用在`lightning:buttonMenu`里面，也就是我们常说的按钮菜单。你可以把它想象成一个下拉菜单中的一个选项。 这个`lightning:menuProject`组件有几个很酷的特性。首先，它可以保存状态，也就是说，它可以记住用户是否选中了它。比如，你可以设置一个菜单项，用户点击后，它会保持“选中”状态，直到用户再次点击它取消选中。 其次，这个菜单项还可以包含图标。图标可以让菜单项看起来更直观，用户一眼就能知道这个选项是做什么的。比如，你可以放一个信封图标来表示“收件箱”，或者放一个齿轮图标来表示“设置”。 接下来，我们来看看`lightning:menuProject`的一些常用属性： 1. ，label，：这是菜单项的文本标签，也就是用户看到的文字。比如“收件箱”或者“设置”。 2. ，iconName，：这是菜单项的图标名称。Salesforce提供了一系列的标准图标，你可以直接使用这些图标的名称来显示对应的图标。 3. ，checked，：这是一个布尔值，表示菜单项是否被选中。如果设置为`true`，菜单项会显示为选中状态；如果设置为`false`，则显示为未选中状态。 4. ，disabled，：这也是一个布尔值，表示菜单项是否被禁用。如果设置为`true`，用户将无法点击这个菜单项。 5. ，value，：这是菜单项的值，通常用于在用户选择菜单项时传递一些数据。 6. ，onclick，：这是一个事件处理函数，当用户点击菜单项时会触发这个函数。你可以在这个函数里写一些逻辑，比如更新页面内容或者调用其他方法。 这些属性可以帮助你灵活地配置`lightning:menuProject`组件，让它更好地适应你的应用场景。你可以根据实际需求来设置这些属性，让菜单项既美观又实用。 希望这些解释能帮助你更好地理解和使用`lightning:menuProject`组件！如果你有任何问题，随时问我哦！

    查看详情
  • 64

    <lightning:menuitem> Attributes

    第 400 页

    今天我们来聊聊Salesforce Lightning中的``组件。这个组件非常有用，它可以帮助我们在Lightning应用中创建菜单项。让我们一起来看看它的各个属性，这样你就能更好地理解和使用它了。 首先，我们有一个叫做`accessKey`的属性。这个属性是一个字符串，它允许你指定一个快捷键，用户可以通过这个快捷键来激活或聚焦到这个菜单项上。比如说，你可以设置`accessKey`为“A”，那么用户按下“Alt+A”就可以直接选中这个菜单项。 接下来是`checked`属性，这是一个布尔值。如果你不设置这个属性，那么这个菜单项是不能被选中的。如果你把它设置为`True`，那么菜单项的左边会显示一个复选标记，表示它被选中了。如果你设置为`False`，虽然不会显示复选标记，但菜单项仍然会留出空间，以备将来可能需要显示复选标记。这个属性特别适合用在多选菜单中。 然后是`class`属性，这也是一个字符串。除了组件本身的基类外，你还可以通过这个属性为外部元素添加一个CSS类，这样你就可以自定义菜单项的样式了。 `disabled`属性也是一个布尔值。如果你把它设置为`True`，那么这个菜单项就会被禁用，用户将无法点击或打开它。默认情况下，这个属性是`False`，也就是说菜单项是启用的。 `iconName`属性是一个字符串。如果你提供了这个属性，那么菜单项的右侧会显示一个图标。你可以通过这个属性来指定图标的名称。 `label`属性是一个字符串，它定义了菜单项上显示的文本内容。比如说，你可以设置`label`为“保存”，那么用户就会在菜单上看到“保存”这个选项。 `onblur`和`onfocus`是两个动作属性。`onblur`是当菜单项失去焦点时触发的操作，而`onfocus`是当菜单项获得焦点时触发的操作。你可以通过这些属性来定义一些交互行为。 `tabindex`属性是一个整数，它定义了当用户使用Tab键在页面上导航时，这个菜单项的顺序。你可以通过设置这个属性来控制用户按下Tab键时，焦点会按照什么顺序移动到各个菜单项上。 `title`属性是一个字符串，它定义了菜单项上的工具提示文本。当用户把鼠标悬停在菜单项上时，会显示这个工具提示。 `value`属性是一个字符串，它表示与菜单项关联的值。这个值可以用来在后台处理用户的选择。 最后是`active`属性，这是一个动作属性。当这个菜单项变为活动状态时，会触发这个操作。你可以通过这个属性来定义一些特定的行为，比如当用户选中这个菜单项时，执行某些操作。 好了，这就是``组件的主要属性。通过这些属性，你可以灵活地创建各种菜单项，满足不同的业务需求。希望这些解释对你有帮助！如果你有任何问题，随时问我哦。

    查看详情
  • 65

    Defining Menu Items

    第 401 页

    让我们一起来看一下这个Salesforce的Lightning组件示例。这个例子展示了一个带有图标的多项选择菜单，我们可以把它想象成一个披萨配料选择器。 首先，我们有一个``标签，这是我们的菜单按钮。它有几个属性： - `alternativeText=&quot;Select Pizza Toppings&quot;`：这是当用户将鼠标悬停在按钮上时显示的提示文本，告诉用户这个按钮是用来选择披萨配料的。 - `onselect=&quot;{!c.onMenuSelect}&quot;`：这是当用户选择一个菜单项时，会触发的控制器方法。你可以在这个方法里处理用户的选择。 - `iconName=&quot;utility:add&quot;`：这是按钮上显示的图标，这里是一个加号图标，表示添加配料。 接下来，我们有几个``标签，这些是菜单项，也就是用户可以选择的披萨配料。每个菜单项都有以下属性： - `label`：这是菜单项显示的文字，比如“Tomatoes”就是“西红柿”。 - `value`：这是菜单项的值，当用户选择这个菜单项时，这个值会被传递给控制器方法。 - `checked`：这个属性决定菜单项是否默认被选中。`true`表示默认选中，`false`表示默认不选中。 - `iconName`：这是菜单项旁边显示的图标。比如“utility:favorite”是一个心形图标，表示用户喜欢的配料。 - `disabled`：这个属性决定菜单项是否可以被选择。`true`表示不可选择，`false`表示可以选择。 在这个例子中，我们有五个菜单项： 1. 西红柿（Tomatoes）：默认选中，旁边有一个心形图标。 2. 洋葱（Onion）：默认选中，旁边也有一个心形图标。 3. 多力多滋（Doritos）：默认不选中，没有图标。 4. 水牛城鸡肉（Buffalo Chicken）：默认不选中，旁边有一个点赞图标。 5. 鹿肉（Venison）：默认不选中，并且不可选择。 所以，这个菜单按钮可以让用户选择他们喜欢的披萨配料，并且有一些配料是默认选中的，还有一些是不可选择的。希望这个解释能帮助你理解这个Lightning组件的用法！

    查看详情
  • 66

    Handling Menu Selections

    第 402 页

    让我们来聊聊如何在Salesforce中处理菜单选择。想象一下，你有一个菜单，用户可以从这个菜单中选择不同的选项。你想要知道用户选择了哪个选项，对吧？这时候，你可以通过访问一个叫做`server.decision.menuProject`的值属性来获取用户的选择。 简单来说，`server.decision.menuProject`就像是一个小盒子，里面装着用户选择的菜单项。你只需要打开这个小盒子，看看里面装的是什么，就能知道用户选择了哪个菜单项。 举个例子，假设你有一段代码，像这样： ```javascript var selectedMenuItem = server.decision.menuProject; ``` 这行代码的意思就是，你把`server.decision.menuProject`这个盒子里的东西拿出来，放到一个叫`selectedMenuItem`的变量里。这样，`selectedMenuItem`就保存了用户选择的菜单项。 接下来，你可以根据`selectedMenuItem`的值来做一些事情，比如显示不同的内容，或者执行不同的操作。 总结一下，通过访问`server.decision.menuProject`，你可以轻松地获取用户选择的菜单项，然后根据这个选择来做相应的处理。是不是很简单呢？

    查看详情
  • 67

    Creating Dividers and Subheadings

    第 403 页

    今天我们来聊聊如何在Salesforce的Lightning组件中使用`lightning:menuDivider`和`lightning:menuSubheader`这两个子组件来创建菜单中的分隔符和副标题。 首先，想象一下你有一个菜单，里面有几个选项。有时候，你可能希望在菜单项之间添加一些视觉上的分隔，或者为某些菜单项添加一个小的标题，这样用户就能更清楚地看到菜单的结构。 ### 使用`lightning:menuDivider`创建分隔符 `lightning:menuDivider`这个组件就是用来在菜单项之间添加一条分隔线的。默认情况下，这条分隔线的上下会有一些空间，这样看起来不会太拥挤。但如果你觉得这些空间有点大，想要让分隔线更紧凑一些，你可以使用`variant=&quot;tighter&quot;`这个属性。这样一来，分隔线上下方的空间就会减少，看起来更紧凑。 ### 使用`lightning:menuSubheader`创建副标题 接下来是`lightning:menuSubheader`，这个组件是用来在菜单项列表中创建一个小标题的。你可以通过`label`属性来指定这个标题的文本。比如，你可以在某些相关的菜单项前面加上一个副标题，帮助用户更好地理解这些选项的用途。 ### 示例代码 让我们来看一个简单的例子： ```html ``` 在这个例子中，我们创建了一个按钮菜单，里面有两个菜单项。在第一个菜单项后面，我们添加了一个分隔符，并且使用了`variant=&quot;tighter&quot;`来让分隔符更紧凑。然后，我们添加了一个副标题，标题的文本是“Menu sub heading”。最后，我们又添加了第二个菜单项。 ### 总结 通过使用`lightning:menuDivider`和`lightning:menuSubheader`，你可以轻松地在菜单中添加分隔符和副标题，让菜单的结构更加清晰，用户体验更好。希望这个讲解对你有帮助！如果你有任何问题，随时问我哦！

    查看详情
  • 68

    Exercise 5-5: Implementing an Accordion Layout

    第 404 页

    同学们，今天我们来做一个有趣的练习，叫做“实施手风琴布局404”。这个练习的目的是让我们学会如何在Salesforce中创建一个手风琴式的布局，这种布局可以让用户点击某个部分时，展开或收起内容，非常实用。 首先，我们需要创建一个自定义组件，叫做“Aw讲师自定义组件”。这个组件将作为我们手风琴布局的基础。在这个组件中，我们会定义一些基本的样式和结构，比如每个部分的标题和内容区域。 接下来，我们创建另一个自定义组件，叫做“StudentDetails自定义组件”。这个组件将用来展示每个学生的详细信息。在这个组件中，我们可以添加一些字段，比如学生的姓名、年龄、成绩等。 然后，我们将这两个组件结合起来，创建一个新的组件，叫做“学生详情手风琴”。在这个组件中，我们会使用“Aw讲师自定义组件”作为每个手风琴的头部，而“StudentDetails自定义组件”则作为展开后的内容部分。这样，当用户点击某个学生的头部时，就会展开显示该学生的详细信息。 最后，我们将这个“学生详情手风琴”组件添加到我们的页面布局中，这样用户就可以在页面上看到并使用这个手风琴布局了。 通过这个练习，我们不仅学会了如何创建和使用自定义组件，还掌握了如何实现一个动态的手风琴布局。希望你们都能顺利完成这个练习，并在实际项目中运用这些技能。如果有任何问题，随时提问，我会在这里帮助你们。加油！

    查看详情
  • 69

    Unit Summary

    第 406 页

    大家好，今天我们来聊聊Salesforce中的一些实用组件和布局技巧。首先，我们有一个叫做`lightning:verticalNavigator`的组件，它可以帮助我们输出一组链接，而且这些链接还可以嵌套一层，非常适合用来做导航菜单。 接下来是`lightning:datable`，这个组件可以在页面上展示一个数据网格。你可以在这个网格里看到数据，而且还可以调整列的大小，甚至对数据进行排序，非常方便。 如果你有一堆按钮需要展示，`按钮组`这个功能就派上用场了。它可以帮助你把按钮组织得井井有条，让用户操作起来更加直观。 再来说说布局，Salesforce使用了基于Flexbox的Lightning Design System网格。这个网格系统非常灵活，支持移动优先的设计，而且不管在什么设备上都能很好地工作。它基于12列的布局，可以帮助你轻松创建响应式的页面布局，确保你的应用在各种设备上都能完美显示。 如果你想在页面上添加一个下拉菜单，可以使用`lightning:buttonMenu`组件。这个组件可以让你轻松实现一个下拉菜单，用户点击后可以看到更多的选项。 最后，`lightning:accordion`这个组件也非常有用。它可以把内容分成多个部分，用户可以点击展开或折叠这些部分，非常适合用来展示大量信息时节省空间。 好了，今天的分享就到这里，希望这些组件和技巧能帮助你在Salesforce开发中更加得心应手！

    查看详情
  • 70

    Unit Review

    第 407 页

    让我们来简单聊聊这段代码和`MaxRowselect`属性的使用。 首先，这段代码是一个典型的HTML结构，使用了Salesforce的Lightning Design System（SLDS）来布局页面。你可以看到，整个页面被分成了几个部分，每个部分都有不同的宽度和内容。 - ，报头，：这部分占据了整个页面的宽度（`slds-size--1-of-1`），也就是说，它会横跨整个页面。 - ，内容a，：这部分也占据了整个宽度，所以它会显示在报头的下方。 - ，内容b和内容c，：这两部分各自占据了页面的一半宽度（`slds-size--6-of-12`），所以它们会并排显示在内容a的下方。 - ，空白区域，：最后有一个空白区域（`slds-size--1-of-3`），占据了页面的三分之一宽度，但里面没有内容。 现在，关于`MaxRowselect`属性。这个属性通常用于控制在一个表格或列表中，用户最多可以选择多少行数据。比如，如果你设置`MaxRowselect=&quot;5&quot;`，那么用户最多只能选择5行数据。 不过，在这段代码中，并没有直接使用`MaxRowselect`属性。如果你需要在某个表格或列表中使用它，你可以在相应的组件中添加这个属性，来控制用户的选择行为。 总结一下，这段代码主要是展示了如何使用SLDS来布局页面，而`MaxRowselect`属性则是用来控制用户选择数据的数量。希望这个解释对你有帮助！如果有更多问题，随时问我哦。

    查看详情
返回课程目录

📋 课程信息

Unit 5 Implementing Navigation and Layouts
  • 所属目录：DEX601
  • 课程名称：Unit 5 Implementing Navigation and Layouts
  • 章节数量：70 个

🔗 相关链接