DEX470

课程介绍

让我们来聊聊如何在Salesforce的Lightning Web Components中使用第三方的JavaScript库。这个过程其实很简单，我会一步步带你了解。 首先，你需要从第三方库的官方网站下载你需要的JavaScript库。下载完成后，你需要将这个库上传到你的Salesforce组织中。这里有一个小细节要注意，你需要将这个库作为“静态资源”上传。这是因为Salesforce的Lightning Web Components有一个内容安全策略，要求所有的外部资源都必须通过这种方式来引入。 上传完成后，接下来就是在你的Lightning Web Component的JavaScript文件中使用这个库了。首先，你需要导入这个静态资源。你可以使用`@salesforce/resourceUrl/resourceName`这样的路径来导入，其中`resourceName`是你上传的静态资源的名称。 然后，为了加载这个库，你需要从`lightning/platformResourceLoader`模块中导入两个方法：`loadStyle`和`loadScript`。这两个方法可以帮助你加载CSS样式和JavaScript脚本。 简单来说，整个过程就是：下载库，上传为静态资源，然后在你的组件中导入并使用它。这样，你就可以在你的Lightning Web Components中愉快地使用第三方的JavaScript库了。希望这个解释对你有帮助！

课程章节

本课程共有 6 个章节

• 1

  Use a Third-Party JavaScript Library

  第 77 页

  今天我们来聊聊如何在Salesforce中使用第三方JavaScript库。这个话题其实挺有意思的，因为Salesforce本身已经提供了很多强大的功能，但有时候我们还需要借助一些外部的JavaScript库来实现更复杂的功能。 首先，什么是第三方JavaScript库呢？简单来说，就是别人已经写好的、可以帮助我们快速实现某些功能的代码集合。比如，你可能听说过jQuery、React、或者D3.js，这些都是非常流行的JavaScript库。 那么，如何在Salesforce中使用这些库呢？其实步骤并不复杂。 1. ，下载库文件，：首先，你需要从库的官方网站或者其他可靠来源下载这个库的JavaScript文件。通常，这些文件会以`.js`结尾。 2. ，上传到Salesforce，：接下来，你需要把这个文件上传到Salesforce的静态资源（Static Resources）中。静态资源是Salesforce提供的一个地方，专门用来存放像图片、CSS文件、JavaScript文件这样的静态文件。 3. ，在页面中引用，：上传完成后，你就可以在你的Visualforce页面或者Lightning组件中引用这个库了。引用的时候，只需要在页面的``标签或者Lightning组件的``标签中，加上这个库的路径就可以了。 4. ，使用库的功能，：最后，你就可以在你的JavaScript代码中使用这个库提供的功能了。比如，如果你用了jQuery，就可以直接使用`$`符号来操作DOM元素了。 举个例子，假设你下载了jQuery库，并且上传到了静态资源中，命名为`jquery.min.js`。那么在你的Visualforce页面中，你可以这样引用它： ```html ``` 在这个例子中，`{!$Resource.jquery_min_js}`就是引用静态资源的方式。`$(document).ready`是jQuery的一个常用方法，表示当页面加载完成后执行里面的代码。 好了，这就是如何在Salesforce中使用第三方JavaScript库的基本步骤。希望这个讲解对你有帮助！如果你有任何问题，随时可以问我。

  ▶ 播放视频 查看详情
• 2

  Creating the Interactive Map Component

  第 78 页

  同学们，今天我们要来做一个非常有趣的练习——创建一个交互式地图工具。这个工具将帮助我们在地图上拖动标记，然后自动更新熊的详细位置信息，包括它的纬度和经度。 首先，我们需要使用一个叫做LeafletJS的地图库。LeafletJS是一个非常轻量级但功能强大的JavaScript库，专门用来创建交互式地图。它支持各种地图服务，比如OpenStreetMap、Google Maps等，而且非常容易上手。 接下来，我们要做的是在熊的详细信息页面上嵌入这个地图。你可以想象一下，当你打开一个熊的详细信息页面时，页面上会显示一张地图，地图上有一个标记，代表这只熊的位置。你可以拖动这个标记到新的位置，然后地图会自动更新这只熊的纬度和经度信息。 具体来说，我们会这样做： 1. ，引入LeafletJS库，：首先，我们需要在页面上引入LeafletJS的库文件。你可以通过CDN链接来快速引入，或者下载到本地使用。 2. ，创建地图容器，：在页面上创建一个`<div>`元素，作为地图的容器。这个容器会显示地图，并且我们可以设置它的大小和样式。 3. ，初始化地图，：使用LeafletJS的API来初始化地图。你可以设置地图的中心点、缩放级别等参数。比如，我们可以把地图的中心点设置为这只熊的当前位置。 4. ，添加标记，：在地图上添加一个标记，代表这只熊的位置。这个标记是可以拖动的，用户可以通过拖动它来改变熊的位置。 5. ，更新位置信息，：当用户拖动标记时，我们需要监听标记的移动事件，并实时更新熊的纬度和经度信息。这些信息可以显示在页面上，或者通过API保存到数据库中。 6. ，保存数据，：最后，当用户完成拖动并确认位置后，我们可以通过调用Salesforce的API，将新的位置信息保存到Salesforce的数据库中。 通过这个练习，你不仅会学会如何使用LeafletJS创建交互式地图，还会掌握如何在Salesforce中集成外部JavaScript库，并通过API与Salesforce进行数据交互。 好了，这就是我们今天的主要内容。接下来，我会一步步带你们完成这个练习，确保每个人都能掌握这些技能。如果有任何问题，随时提问哦！</div>

  ▶ 播放视频 查看详情
• 3

  Interactive Map Component – JavaScript File

  第 79 页

  让我们来聊聊如何在Salesforce中使用JavaScript文件来更新交互式地图组件中的熊的位置。这个过程其实挺简单的，我会一步步带你了解。 首先，我们需要使用Salesforce提供的UI API中的`updateRecord`方法。这个方法可以帮助我们更新记录，比如在这个例子中，就是更新熊的位置。 要使用`updateRecord`，我们需要准备一个叫做`recordInvestment`的对象。这个对象里面包含了一些属性字段，这些字段实际上是字段的API名称和它们对应的值的映射。简单来说，就是告诉Salesforce我们要更新哪些字段，以及这些字段的新值是什么。 在这个例子中，我们要更新的字段是纬度和经度，因为我们要改变熊的位置。同时，因为我们是在更新一个已经存在的记录，所以我们还需要传递这个记录的ID。这样Salesforce就知道我们要更新的是哪一条记录了。 总结一下，使用`updateRecord`方法的步骤是这样的： 1. 创建一个`recordInvestment`对象。 2. 在这个对象中设置好要更新的字段和它们的新值，比如纬度和经度。 3. 传递记录的ID，这样Salesforce就知道你要更新哪条记录了。 这样，当你在JavaScript文件中调用`updateRecord`方法时，Salesforce就会根据你提供的信息，更新地图上熊的位置了。希望这个解释能帮助你理解这个过程！如果有任何问题，随时问我哦。

  ▶ 播放视频 查看详情
• 4

  6. Use а Third-party JavaScript Library

  第 81 页

  让我们来聊聊如何在Salesforce中使用第三方JavaScript库，特别是LeafletJS，来创建一个交互式地图。这个地图将替换我们熊详细信息页面上的熊位置地图，并且你可以通过拖放地图上的标记来更新熊的纬度和经度。 首先，我们需要将LeafletJS库上传到Salesforce中作为静态资源。静态资源是Salesforce中用来存储像图片、样式表或JavaScript文件等资源的地方。上传后，我们就可以在我们的Lightning Web组件中引用这个库了。 接下来，我们会创建一个新的Lightning Web组件，这个组件将包含我们的交互式地图。在这个组件中，我们会使用LeafletJS来初始化地图，并在地图上放置一个标记来表示熊的位置。这个标记是可以拖动的，所以用户可以通过拖动标记来更新熊的位置。 然后，我们会用这个新的交互式地图组件替换掉原来的熊位置组件。这样，当用户查看熊的详细信息时，他们就会看到这个新的、可以交互的地图。 最后，我们会确保当用户拖动标记时，熊的纬度和经度信息会相应地更新。这意味着我们需要编写一些代码来捕捉标记的拖动事件，并更新Salesforce中熊记录的位置信息。 总结一下，通过这个课程，你将学会如何在Salesforce中使用第三方JavaScript库来增强你的应用功能。你将创建一个可以交互的地图，让用户能够直观地更新熊的位置信息。这不仅提高了用户体验，也使得数据更新变得更加直观和便捷。

  ▶ 播放视频 查看详情
• 5

  End of Day Challenge: Old Bears

  第 82 页

  今天我们来聊聊Salesforce中的“一天结束挑战”，也就是我们常说的“老熊日终战”。这个挑战主要是帮助大家更好地理解如何在一天的工作结束时，有效地使用Salesforce来总结和规划。 首先，想象一下你是一个忙碌的销售代表，一天下来，你可能接触了很多客户，处理了很多任务。这时候，Salesforce就成了你的好帮手。你可以用它来记录今天的所有活动，比如打了哪些电话，发了哪些邮件，见了哪些客户。这样，你就能清楚地知道今天都做了些什么。 接下来，你可以利用Salesforce的报表功能，快速生成今天的销售数据报告。看看今天达成了多少销售额，完成了多少目标，还有哪些任务没有完成。这样，你就能对今天的工作有一个全面的了解。 最后，别忘了利用Salesforce的任务管理功能，为明天的工作做好准备。你可以设置提醒，安排会议，甚至提前准备好明天要联系的客户名单。这样，明天一早，你就能迅速进入工作状态，不会手忙脚乱。 总之，Salesforce就像你的私人助理，帮助你在一天结束时，高效地总结和规划。希望这个小挑战能帮助你更好地利用Salesforce，提升工作效率。加油，老熊日终战，你一定能行！

  ▶ 播放视频 查看详情
• 6

  End of Day Challenge: Old Bears

  第 83 页

  同学们，今天我们要来做一个有趣的挑战，叫做“老熊挑战”。这个挑战的目的是让你们运用我们在课堂上学到的一些技巧，来创建一个特别的Salesforce组件。这个组件会显示公园里最老的三只熊的名字和年龄。听起来很有趣吧？ 首先，我们需要创建一个新的Lightning组件，我们叫它“oldBears”。这个组件可以放在Lightning主页上，它会显示三只最老的熊的信息。注意哦，我们这次不会使用之前学过的Bear Tile组件，而是直接用文本来显示这些信息。而且，这个组件不会受到页面上名称搜索过滤器的影响。 接下来，我们需要使用一些特定的工具和方法来完成这个挑战。我们会用到一个叫做“老熊”的Lightning卡，一个名为“oldBears”的有线属性，以及一个在BearController类中新的Apex方法，这个方法叫做“getOldBears”。这个方法会使用一个SOQL查询来从数据库中获取最老的三只熊的信息。这个查询是这样的：选择名字和年龄，从熊的表中，按照年龄排序，限制只取前三只。 最后，我们需要把这个“oldBears”组件放在Ursus Park主页的Bear Map上方。这样，当用户访问这个页面时，他们就能一眼看到这些老熊的信息了。 这个挑战不仅可以帮助你们巩固今天学到的知识，还能让你们在实际操作中更好地理解Salesforce的组件和Apex方法的使用。如果你们今天有时间，可以在课堂上完成这个挑战；如果没有，也可以作为家庭作业来完成，这样可以帮助你们更好地掌握这些技能。 好了，现在你们可以开始动手了，记得在EXFiles\Challenges文件夹里找到解决方案哦。祝你们好运，期待看到你们的成果！

  ▶ 播放视频 查看详情