使用Lightning Web组件构建Bear-tracking应用程序 – 处理单个记录

你会做什么

熊熊游乐园管理员需要您的帮助来追踪在公园里游荡的熊。他们已经在Salesforce中输入了一些信息，但是他们需要您为他们提供定制的应用程序体验。

创建Bear位置组件

1. 在VS Code中，右键单击该lwc文件夹，然后单击SFDX：Create Lightning Web Component。
2. 命名组件bearLocation。
3. 编辑bearLocation.js-meta.xml文件，并替换<isExposed>false</isExposed>为这些行。

   <isExposed>true</isExposed>
   <targets>
   	<target>lightning__RecordPage</target>
   </targets>
   <targetConfigs>
   	<targetConfig targets="lightning__RecordPage">
   		<objects>
   			<object>Bear__c</object>
   		</objects>
   	</targetConfig>
   </targetConfigs>

   这样可以确保您的组件只能放置在Bear记录页面上。

4. 将内容替换为bearLocation.html以下标记。

   <template>
   	<lightning-card title={cardTitle} icon-name="standard:address">
   		<lightning-map map-markers={mapMarkers} zoom-level="12"></lightning-map>
   	</lightning-card>
   </template>

   代码重点：

   • 我们根据cardTitle表达式显示带有动态标题的卡片组件。
   • 该卡包含一个地图组件，其标记由定义mapMarkers。
5. 用以下内容替换的内容bearLocation.js。

   import { LightningElement, api, wire } from 'lwc';
   import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
   // Set Bear object fields
   const NAME_FIELD = 'Bear__c.Name';
   const LOCATION_LATITUDE_FIELD = 'Bear__c.Location__Latitude__s';
   const LOCATION_LONGITUDE_FIELD = 'Bear__c.Location__Longitude__s';
   const bearFields = [
   	NAME_FIELD,
   	LOCATION_LATITUDE_FIELD,
   	LOCATION_LONGITUDE_FIELD
   ];
   export default class BearLocation extends LightningElement {
     @api recordId;
     name;
     mapMarkers = [];
     @wire(getRecord, { recordId: '$recordId', fields: bearFields })
     loadBear({ error, data }) {
       if (error) {
         // TODO: handle error
       } else if (data) {
         // Get Bear data
         this.name =  getFieldValue(data, NAME_FIELD);
         const Latitude = getFieldValue(data, LOCATION_LATITUDE_FIELD);
         const Longitude = getFieldValue(data, LOCATION_LONGITUDE_FIELD);
         // Transform bear data into map markers
         this.mapMarkers = [{
           location: { Latitude, Longitude },
           title: this.name,
           description: `Coords: ${Latitude}, ${Longitude}`
         }];
       }
     }
     get cardTitle() {
       return (this.name) ? `${this.name}'s location` : 'Bear location';
     }
   }

   代码重点：

   • 我们导入了一个getRecord适配器，该适配器使我们能够使用Lightning Data Service检索记录而无需编写Apex。
   • 我们导入一个getFieldValue辅助函数来检索字段值。
   • 我们Bear__c在bearFields常量中汇编来自对象的硬编码字段名称的列表。请注意，这种方法不支持参照完整性。在编译时无法检查对象和字段的存在。这意味着Bear__c即使在您的代码中使用了它，也可以删除它的任何字段。我们在下一个组件中使用另一种支持引用完整性的方法。
   • recordId装饰为的属性会@api自动接收当前记录ID。
   • 我们@wire在loadBear函数上使用装饰器来获取数据和错误，然后将它们传递给函数。@wire配置为getRecord使用某些参数调用适配器功能。这些参数是记录ID和我们希望检索的记录字段列表。感谢@wire装饰器，loadBear当组件加载或记录id更改时，它会自动调用。
   • 在此组件的第一个版本中，我们不处理错误。我们暂时跳过。
   • 如果没有错误，我们将保存熊的名称并使用熊的坐标构建地图标记。
6. 将更新的代码部署到组织。右键单击默认文件夹，然后单击SFDX：将源部署到组织。

将Bear位置组件添加到Bear Record页面

现在我们已经实现了组件，让我们将其添加到页面中以对其进行查看。

1. 在您的组织中，导航至Bears标签并打开任何记录。
2. 单击设置（ ），然后选择编辑页面。
3. 在“定制组件”下，找到您的bearLocation组件并将其拖到右侧列的顶部。
4. 点击保存。
5. 由于这是我们第一次修改标准Bear记录页面，因此我们需要激活更新的页面，以便我们的用户可以看到我们所做的事情。点击激活。
6. 单击应用程序默认选项卡。
7. 点击分配为应用默认值。
8. 检查Ursus公园。
9. 单击下一步，下一步，然后单击保存。
10. 单击上一步返回到Bear记录页面并检查您的工作。

做得好！现在，我们可以在地图上看到熊。让我们继续自定义熊记录页面。

创建Bear Supervisor组件

公园护林员被分配来监督特定的熊。如果发现熊做了鲁doing的事情，公园员工必须能够迅速联系到熊的主管。您将在熊记录页面上添加熊主管卡来提供帮助。

1. 在VS Code中，右键单击该lwc文件夹，然后单击SFDX：Create Lightning Web Component。
2. 命名组件bearSupervisor。
3. 编辑bearSupervisor.js-meta.xml文件，并替换<isExposed>false</isExposed>为这些行。

   <isExposed>true</isExposed>
   <targets>
   	<target>lightning__RecordPage</target>
   </targets>
   <targetConfigs>
   	<targetConfig targets="lightning__RecordPage">
   		<objects>
   			<object>Bear__c</object>
   		</objects>
   	</targetConfig>
   </targetConfigs>

   这使您的组件可以放置在Bear记录页面上。

4. 将以下内容替换为bearSupervisor.html：

   <template>
   	<lightning-card title="Supervisor" icon-name="standard:people">
   		<div class="slds-var-m-around_medium">
   			<!-- Show supervisor when bear is loaded -->
   			<template if:true={bear.data}>
   				<lightning-record-form
   					object-api-name="Contact"
   					record-id={supervisorId}
   					layout-type="Compact">
   				</lightning-record-form>
   			</template>
   			<!-- Data failed to load -->
   			<template if:true={bear.error}>
   				<div class="slds-text-color_error">
   					An error occurred while loading the bear record
   				</div>
   			</template>
   		</div>
   	</lightning-card>
   </template>

   代码重点：

   • if:true加载熊数据后，我们使用指令有条件地呈现主管。
   • 我们使用来显示主管（联系人）记录的紧凑视图lightning-record-form。
   • 如果无法加载Bear记录if:true，则使用指令和error属性有条件地呈现错误消息。
5. 将以下内容替换为bearSupervisor.js：

   import { LightningElement, api, wire } from 'lwc';
   import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
   // Import Bear object fields
   import SUPERVISOR_FIELD from '@salesforce/schema/Bear__c.Supervisor__c';
   const bearFields = [SUPERVISOR_FIELD];
   export default class BearSupervisor extends LightningElement {
   	@api recordId; // Bear Id
   	@wire(getRecord, { recordId: '$recordId', fields: bearFields })
     bear;
   	get supervisorId() {
   		return getFieldValue(this.bear.data, SUPERVISOR_FIELD);
   	}
   }

   代码重点：

   • 我们Bear__c.Supervisor__c通过模式导入来导入字段，而不是像以前在熊位置组件中那样使用硬编码字符串。这种方法的主要好处是可以确保引用完整性。
   • 我们使用@wire装饰器和getRecord适配器检索熊记录。
   • 我们公开一个supervisorId表达式。该表达式使用该getFieldValue函数来检索主管字段的值。
6. 将更新的代码部署到组织。右键单击默认文件夹，然后单击SFDX：将源部署到组织。

将Bear Supervisor组件添加到Bear Record页面

让我们将新组件添加到熊记录页面。

1. 在您的组织中，通过单击“熊”选项卡并单击任何熊来导航到熊记录页面。在熊记录页面中，单击设置（ ），然后选择编辑页面。
2. 在“定制组件”下，找到您的bearSupervisor组件并将其拖动到bearLocation组件下。
3. 单击保存并返回以返回到记录页面并检查您的工作。

这就是步骤。我们已经看到了Lightning Web组件如何使用@wire适配器处理单个记录。现在让我们进入记录列表。