创建一个类似的属性闪电组件

现在，您已经成功地掌握了Lightning组件的基础知识，现在是时候认真思考并构建一个真正有用的工具。我们将利用我们的知识，并使用Lightning组件替换VisualConfiguration类似的页面，它可以做同样的事情 – 还有更多！当你完成时，你会有一个闪电组件：

• 根据Salesforce Admin定义的搜索条件检索并显示数据。
• 使用系统事件导航到记录。
• 对记录上的CRUD操作使用force：recordData。
• 公开在App Builder中使用的设计参数。

第1部分 – 创建Apex类控制器

显然，我们的组件将需要来自Salesforce的数据，就像我们用这个组件替换的Visualforce页面一样。但是，Visualforce页面只能用硬编码的条件返回属性。我们的组件将（最终）允许我们的Salesforce Admin通过在组件添加到页面时定义搜索条件来确定要搜索的内容。所以让我们通过创建一个新的Apex类来接受搜索条件。

1. 在开发人员控制台中，选择 File > New > Apex Class. 命名类MyPropertyController，然后单击确定。
2. 将默认代码替换为：

   public with sharing class MyPropertyController {
       @AuraEnabled
       public static List<Property__c> getSimilarProperties (Id recordId, String searchCriteria, Decimal beds, Decimal price, Decimal priceRange ) {
            if (searchCriteria == 'Bedrooms') {
                return [
                    SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c
                    FROM Property__c WHERE Id != :recordId AND Beds__c = :beds
                ];
            } else {
                Decimal range;
                if (priceRange == null) {
                    range = 100000;
                } else {
                    range = priceRange;
                }
                return [
                    SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c
                    FROM Property__c WHERE Id != :recordId AND Price__c > :price - range AND Price__c < :price + range
                ];
            }
        }
   }
   

   您将已经识别出@AuraEnabled和静态签名，以便我们的Lightning组件可以调用getSimilarProperties方法。这个方法有四个参数：recordId，searchCriteria，床位和价格。 recordId将用于当前的Property记录。然后，该方法使用参数根据searchCriteria是否为Bedrooms来选择相似的属性。
3. 保存文件并关闭其在开发者控制台中的标签。

第2部分 – 创建类似的属性组件

1. 在开发者控制台中，选择File > New > Lightning Component.
2. 命名组件SimilarProperties，选择 Lightning Record Page, 然后单击 Submit.
3. 将d controller="MyPropertyController" 添加到 <aura:component> 标记中。

   就像我们在HelloWorld组件中指定的那样，我们将组件指向我们刚刚创建的Apex类。

4. 将以下代码粘贴到<aura：component>标签内的新组件中：

   <aura:attribute name="recordId" type="Id" />
   <aura:attribute name="similarProperties" type="Object[]" />
   <aura:attribute name="property" type="Property__c" />
   <aura:attribute name="remoteRecordId" type="Id" />
   <aura:attribute name="showDialog" type="String" default="false" />
   
   <force:recordData aura:id="propertyService"
                     recordId="{!v.recordId}"
                     targetRecord="{!v.property}"
                     recordUpdated="{!c.doInit}"
                     layoutType="FULL" />
   
   <lightning:card iconName="custom:custom85" title="Similar Properties">
       <div class="slds-p-left_medium slds-p-right_medium">
           <ul class="slds-list_vertical slds-has-dividers_top-space">
               <aura:iteration items="{!v.similarProperties}" var="item" indexVar="i">
                   <li class="slds-list__item">                   
                       {!item.Name}
                   </li>
               </aura:iteration>
           </ul>
       </div>
   </lightning:card>
   

   只有几行代码就有很多事情要做。你会注意到的第一件事是三个<aura：attribute>声明。因为我们选择了Lightning Record Page，所以组件还使用force：hasRecordId接口，该接口将自动检索当前Record页面的Id并将其存储在名为recordId的<aura：attribute>中。

   接下来，我们有一个名为similarProperties的属性，用于存储由Apex类返回的属性。这将采取JSON的形式，所以它的类型被设置为Object []。

   Summer 17发布的新功能之前在Developer Preview中名为force：recordPreview现在已经进入Beta版，并已重命名为<force：recordData>。 force：recordData自动检索由其recordId属性指定的记录，然后将该数据存储在由targetRecord属性定义的<aura：attribute>中。然后，force：recordData开始监听页面上其他组件所做更改，当它检测到更改时，它会触发由recordUpdated属性定义的JavaScript函数。

   该组件的UI由另一个名为<lightning：card>的基本闪电组件组成。该卡使用名为custom85的SLDS中的图标。惊喜，这是一个房地产标志！在卡的主体中，您会注意到一个包含列表项<li>的无序列表<ul>。该组件使用<aura：iteration>遍历类似属性属性中的记录，对于每个记录，它显示属性的名称{！item.Name}。

   最后，当组件加载时，它将recordId分配给force：recordData，然后像我们在HelloWorld组件中一样触发doInit函数。所以，我们需要创建这个功能。

5. 点击开发者控制台右侧栏中的CONTROLLER。
6. 用以下代码替换默认代码：

   ({
       doInit : function(component, event, helper) {
           var action = component.get("c.getSimilarProperties");
           action.setParams({
               recordId: component.get("v.recordId"),
               beds: component.get("v.property.fields.Beds__c.value"),
               price: component.get("v.property.fields.Price__c.value")
           });
           action.setCallback(this, function(response){
               var similarProperties = response.getReturnValue();
               component.set("v.similarProperties", similarProperties);
           });
           $A.enqueueAction(action);
       }
   })
   

   doInit函数应该看起来很熟悉，因为您已经在HelloWorld组件中看到了很多代码。新的部分是action.setParams部分。这就是我们如何传递参数给被调用的方法，在这种情况下是getSimilarProperties。当<force：recordData>将其记录存储在targetRecord属性中时，它将以ATTRIBUTE_NAME.fields.FIELD_NAME.value的格式存储它。
7. 保存文件。
8. 返回到“属性记录”页面，单击“设置”图标并选择“编辑页面”。
9. 找到定制组件下的SimilarProperties组件，并将其拖到右侧列顶部的页面上。
10. 点击保存，然后点击返回。

    该页面现在应该显示相似的属性（相同价格范围内的属性列表）。

现在让我们玩一下。

1. 双击属性记录的价格进行编辑。
2. 降价约$ 50,000，然后点击保存按钮。
   请注意，组件根据价格变化重新加载。如果你没有得到任何新的物业，再次改变价格。换句话说，force：recordData注意到价格变化并触发了它的recordUpdated函数，它在加载时调用的doInit函数。

第3部分 – 改进用户界面

在构建Lightning组件时，显然我们可以将所有标记放在一个组件中。但是，更好的做法是把事情分解成更小的组件，以包含在较大的组件中。这意味着这些子组件也可以用在其他组件中。

对于这一步，我们将创建一个组件来显示每条记录的更多信息。

1. 在开发者控制台中，选择 File > New > Lightning Component.
2. 将该组件命名为SimilarProperty，并取消选中所有复选框。
3. 将默认标记替换为以下内容：

   <aura:component>
       <aura:attribute name="propertyId" type="Id" />
       <aura:attribute name="targetFields" type="Property__c" />
       <aura:attribute name="showDialog" type="String" />
       <aura:attribute name="remoteRecordId" type="Id" />
   
       <force:recordData aura:id="propertyRecord"
                         recordId="{!v.propertyId}"
                         targetFields="{!v.targetFields}"
                         fields="Name, Beds__c, Baths__c, Price__c, Status__c, Thumbnail__c"
                         />
   
       <div class="slds-media">
           <div class="slds-media__figure">
               <img src="{!v.targetFields.Thumbnail__c}" class="slds-avatar_large slds-avatar_circle" alt="{!v.targetFields.Title_c}" />
           </div>
           <div class="slds-media__body">
               <div class="slds-grid">
                   <a onclick="{!c.navToRecord}">
                       <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.targetFields.Name}</h3>
                   </a>
                   <!-- Edit button goes here -->
               </div>
               <div aura:id="propertyDetails" class="slds-m-top_small">
                   <ul class="slds-grid slds-wrap">
                       <li class="slds-list__item slds-size_1-of-2"><span class="slds-text-color_weak slds-m-right_small">Beds:</span> {!v.targetFields.Beds__c}</li>
                       <li class="slds-list__item slds-size_1-of-2"><span class="slds-text-color_weak slds-m-right_small">Baths:</span> {!v.targetFields.Baths__c}</li>
                       <li class="slds-list__item slds-size_1-of-2"><span class="slds-text-color_weak slds-m-right_small">Price:</span> {!v.targetFields.Price__c}</li>
                       <li class="slds-list__item slds-size_1-of-2"><span class="slds-text-color_weak slds-m-right_small">Status:</span> {!v.targetFields.Status__c}</li>
                   </ul>
               </div>
           </div>
       </div>
   </aura:component>
   

   这个组件有几个<aura：attributes>，但是让我们从<force：recordData>对象开始。这个<force：recordData>看起来和我们主要组件中的一样，但是不是使用layoutType =“FULL”来获取对象的所有字段，现在我们只定义了我们感兴趣的字段字段属性。数据本身存储在targetFields属性中，我们用它来显示<li>元素中的数据。使用targetFields，更容易引用该字段的值。您只需使用格式targetFields.field_name而不是ATTRIBUTE_NAME.fields.FIELD_NAME.value。

   注意这个组件没有init事件处理程序。这是因为记录正在被<force：recordData>对象检索。

4. 保存文件。
5. 回到SimilarProperties.cmp组件。将<li>中的{！item.Name}替换为：

   <c:SimilarProperty propertyId="{!item.Id}" remoteRecordId="{!v.remoteRecordId}" showDialog="{!v.showDialog}" />
   

   在另一个组件中嵌入组件时，还可以设置该组件中任何<aura：attribute>的值。在这种情况下，正在设置<force：recordData>对象使用的propertyId，以及稍后将使用的一些属性。
6. 保存文件。
7. 返回到“财产记录详细信息”页面并刷新它。

其网格系统是SLDS非常酷的功能之一。看看床，浴场，价格和状态如何很好地排队？这是因为他们正在使用内置到SLDS的网格 – 由具有slds-grid类的任何元素指示。网格包含12列，您只需定义项目的大小和列数。对于这个组件，网格中的每个项目都有一个slds-size_1-of-2的类别，它转化为水平空间的50％。

第4部分 – 导航到一个类似的属性

在SimilarProperty组件中，地址（存储在名称字段中）是一个可点击的链接。 <a>元素有一个触发navToRecord函数的onclick事件。

1. 在Developer Console中打开SimilarProperty组件。
2. 点击CONTROLLER并将占位符代码替换为：

   ({
       navToRecord : function (component, event, helper) {
           var navEvt = $A.get("e.force:navigateToSObject");
           navEvt.setParams({
               "recordId": component.get("v.propertyId")
           });
           navEvt.fire();
       }
   })
   

   This is a very straightforward function. It simply declares a variable that instructs the Lightning Framework, that’s the $A, to call the e.force:navigateToSObject event. The Id of the property is passed as a parameter of the event.
3. 保存文件。
4. 返回到“属性记录详细信息”页面并刷新它。在“类似属性”组件中，单击属性的名称以导航到该属性记录页面。

第5部分 – 编辑类似的属性“到位”

我们将添加到组件的最后一点功能是允许用户在相似的属性列表中编辑其中一个属性，而无需实际导航到它。

1. 在开发者控制台中，返回到SimilarProperty组件标记。
2. 用下面的代码替换 <!-- Edit button goes here -->

   <lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />
   

   另一个基本闪电组件<lightning：buttonIcon>允许我们使用一个图标作为按钮。在这种情况下，它将使用SLDS图标实用程序部分的编辑图标，这是一支铅笔。当用户点击按钮时，editRecord函数将会触发。
3. 保存文件。
4. 在侧边栏中点击CONTROLLER，然后添加以下功能（再次注意添加一个逗号来分隔功能）：

   editRecord : function(component, event, helper) {
       var editRecordEvent = $A.get("e.force:editRecord");
       editRecordEvent.setParams({
           "recordId": component.get("v.propertyId")
       });
       editRecordEvent.fire();
   }
   

5. 保存文件。
6. 返回到“财产记录”页面并刷新它。
   
7. 在“类似属性”组件中，单击属性的编辑图标以便就地编辑该属性。

   将编辑保存到记录后，注意它在组件中更新，因为<force：recordData>对象正在监视记录的更改。

第6部分 – 创建一个自定义编辑表单

组件真的开始聚集在一起，但是我们将对用户编辑远程记录时显示的字段进行小小的更改。由于我们只在闪电组件中显示几个字段，因此我们只会在编辑器窗体中显示这些相同的字段。

1. 在开发者控制台中，创建一个名为SimilarPropertyEdit的新Lightning组件。再次，不要选中所有的框。
2. 用下列内容替换组件的内容：

   <aura:component>
       <aura:attribute name="showDialog" type="String" default="false" />
       <aura:attribute name="remoteRecordId" type="Id" />
       <aura:attribute name="selectedProperty" type="Property__c" />
       <aura:handler name="change" value="{!v.showDialog}" action="{!c.toggleDialog}" />
       <aura:handler name="change" value="{!v.remoteRecordId}" action="{!c.getRecord}" />
   
       <force:recordData aura:id="editRecord"
                            targetRecord="{!v.selectedProperty}"
                            fields="Id,Name,Beds__c,Baths__c,Price__c,Status__c"
                            mode="EDIT" />
   
       <div aura:id="editDialog" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal">
           <div class="slds-modal__container">
               <div class="slds-modal__header">
                   <button class="slds-button slds-modal__close " title="Close" onclick="{!c.toggleDialog}">
                       <lightning:icon iconName="utility:close" variant="bare" ></lightning:icon>
                       <span class="slds-assistive-text">Close</span>
                   </button>
                   <h2 class="slds-text-heading_medium">Edit Record</h2>
               </div>
               <div class="slds-modal__content slds-p-around_medium slds-grid slds-wrap slds-grid_align-spread">
                   <lightning:input aura:id="propName" name="propName" label="Property Name" required="true" value="{!v.selectedProperty.fields.Name.value}" class="slds-size_1-of-1 slds-p-horizontal_x-small" />
                   <lightning:input aura:id="propBeds" name="propBeds" type="number" label="Beds" value="{!v.selectedProperty.fields.Beds__c.value}" class="slds-size_1-of-2 slds-p-horizontal_x-small" />
                   <lightning:input aura:id="propBaths" name="propBaths" type="number" label="Baths" value="{!v.selectedProperty.fields.Baths__c.value}" class="slds-size_1-of-2 slds-p-horizontal_x-small" />
                   <lightning:input aura:id="propPrice" name="propPrice" type="number" label="Price" value="{!v.selectedProperty.fields.Price__c.value}" class="slds-size_1-of-2 slds-p-horizontal_x-small" />
                   <lightning:input aura:id="propStatus" name="propStatus" label="Status" value="{!v.selectedProperty.fields.Status__c.value}" class="slds-size_1-of-2 slds-p-horizontal_x-small" />
               </div>
               <div class="slds-modal__footer">
                   <button class="slds-button slds-button_neutral" onclick="{!c.toggleDialog}">Cancel</button>
                   <button class="slds-button slds-button_brand" onclick="{!c.saveRecord}">Save</button>
               </div>
           </div>
       </div>
       <div aura:id="overlay" class="slds-backdrop"></div>
   </aura:component>
   

   此组件的标记使用SLDS中的模式。而且，正如您以前所见，<force：recordData>正在检索我们希望能够编辑的字段。但是这个<force：recordData>的实例有两个不同之处。第一个区别是没有定义recordId属性。我们将根据用户选择的记录来动态分配该值。其次，该实例将其模式属性设置为EDIT。这使实例能够更新记录。该组件没有init处理程序，而是使用更改处理程序来监视remoteRecordId属性的更改。

   每个按钮都有一个onclick处理函数，我们需要为其编写函数。

3. 点击CONTROLLER并将占位符代码替换为：

   ({
       getRecord : function(component) {
           var tempRec = component.find("editRecord");
           tempRec.set("v.recordId", component.get("v.remoteRecordId"));
           tempRec.reloadRecord();
       },
       toggleDialog : function(component, event, helper) {
           helper.showHideModal(component);
       },
       saveRecord : function(component,event,helper) {
           var propBeds = parseInt(component.find('propBeds').get("v.value"), 10);
           var propBaths = parseInt(component.find('propBaths').get("v.value"), 10);
           var propPrice = parseInt(component.find('propPrice').get("v.value"), 10);
   
           component.set("v.selectedProperty.fields.Beds__c.value", propBeds);
           component.set("v.selectedProperty.fields.Baths__c.value", propBaths);
           component.set("v.selectedProperty.fields.Price__c.value", propPrice);
   
           var tempRec = component.find("editRecord");
           tempRec.saveRecord($A.getCallback(function(result){
               console.log(result.state);
               if (result.state === "SUCCESS" || result.state === "DRAFT") {
                   var event = $A.get("e.c:recordUpdated");
                   event.fire();
               } else if (result.state === "ERROR") {
                   console.log('Error: ' + JSON.stringify(result.error));
               } else {
                   console.log('Unknown problem, state: ' + result.state + ', error: ' + JSON.stringify(result.error));
               }
           }));       
           helper.showHideModal(component);
       }
   })
   

   当remoteRecordId改变时，getRecord函数将会触发。它将remoteRecordId的新值动态地分配给<force：recordData>的editRecord实例，这会触发请求字段的检索。

   toggleDialog函数正在调用位于Helper文件中的函数。 Helper文件只是一个JavaScript文件，我们在其中编写我们想要重用的函数。注意saveRecord函数的末尾还有一个对showHideModal函数的调用。在标记<aura：handler name =“change”value =“{！v.showDialog}”action =“{！c.toggleDialog}”/>时，会监视showDialog属性的更改，并在发生此功能时触发。

   saveRecord函数负责保存对该属性的任何更改。它首先将三个<lightning：input>实例中的字符串值用数值转换为整数。然后它更新<force：recordData>实例的targetRecord中的值。然后使用<force：recordData>的saveRecord方法将更改保存回Salesforce。如果保存更改成功，则会触发一个名为recordUpdated的事件，我们将在下一步创建。但首先，我们将showHideModal函数添加到Helper。

4. 单击HELPER将帮助器文件添加到组件。将占位符代码替换为：

   ({
       showHideModal : function(component) {
           var modal = component.find("editDialog");
           $A.util.toggleClass(modal, 'slds-fade-in-open');
           var overlay = component.find("overlay");
           $A.util.toggleClass(overlay, 'slds-backdrop_open');
           component.set("v.showDialog", "false");
       }
   })
   

   这个简单的函数在SLDS中打开和关闭一个CSS类来显示和/或隐藏模式。
5. 切换回SimilarProperties组件markup.
6. 在关闭</ lightning：card>标记之前添加一个新行（可能是第23行）：

   <c:SimilarPropertyEdit showDialog="{!v.showDialog}" remoteRecordId="{!v.remoteRecordId}" />
   

   注意我们将使用remoteRecordId属性动态地将recordId分配给组件的<force：recordData>实例。
7. 切换到SimilarProperty组件的控制器。
8. 将editRecord函数更新为：

       editRecord : function(component, event, helper) {
       var recId = component.get("v.propertyId");
       component.set("v.remoteRecordId", recId);
       component.set("v.showDialog", "true");
   }
   

   editRecord函数现在简单地将当前记录的Id分配给RemoteRecordId属性，SimilarPropertyEdit组件用来获取其数据。 showDialog属性设置为true，这将导致SimilarPropertyEdit组件中的toggleDialog函数触发，打开自定义窗体。

   最后，我们需要添加一个Lightning事件让页面上的其他组件知道我们已经更新了记录。

9. 在开发者控制台中，点击 File > New > Lightning Event.
10. 命名事件 recordUpdated.

    闪电事件触发任何其他组件可以侦听的事件。事实上，我们现在要让这个组件监听这个事件，这样我们可以在页面上有多个组件实例一起更新。

11. 切换回 SimilarProperties 组件。
12. 在最后一个<aura：attribute>之后添加一个新行并添加：

    <aura:handler event="c:recordUpdated" action="{!c.doInit}" />
    

    现在，当组件听到recordUpdated事件时，它将触发它的doInit函数。
13. 保存所有文件，File > Save All.
14. 重新加载属性页面，然后单击编辑图标查看新的自定义编辑表单。

第7部分 – 应用微调

你做了一个了不起的工作！但是作为一个用户，当组件第一次加载到页面上时，这是一点点震动。你最初看到的只是卡片的标题栏，然后内容进来。想象一下，如果有网络问题。用户甚至可能不知道他们应该有内容，和/或最新的内容是否已经加载。 Salesforce使用微调器来指示网络活动何时发生。让我们添加一个微调器来指示何时正在检索或刷新数据。

1. 在Developer Console中，打开主SimilarProperties组件。
2. 在标记（可能行25）底部的<c：SimilarPropertyEdit …组件上方添加一个新行，并将以下内容添加到新行中：

   <lightning:spinner aura:id="spinner" variant="brand" size="large"/>
   

3. 保存永远不会结束微调的文件。

   如果刷新“财产记录”页面，则会发现一些问题。首先，微调整个页面，其次，它永远不会消失！默认情况下，<lightning：spinner>对象覆盖整个页面。但是，我们可以将其限制为只包含SLDS中的类所在的组件。

4. 将class =“slds-is-relative”添加到<lightning：card>标记，使其看起来像这样：

   <lightning:card iconName="custom:custom85" title="Similar Properties" class="slds-is-relative">
   

5. 保存文件。
6. 单击STYLE将自定义CSS文件添加到SimilarProperties组件，并用下列内容替换默认内容：

   .THIS {
       min-height: 153px;
   }
   

   在Lightning组件中使用自定义CSS时，类.THIS将自动应用于包装组件的HTML元素。在这种情况下，这就是<lightning：card>。 min-height属性指定组件的最小高度。我们已经把它设置到一个财产记录的高度。
7. 保存文件。
8. 重新载入属性记录页面。

   您可以看到，微调控制器现在只覆盖组件，而作为加载到页面上的组件，在有数据之前，组件比之前更高。现在，我们只在数据加载时显示微调器。

9. 在开发者控制台中，点击CONTROLLER打开SimilarPropertiesController。
10. 将控制器代码更新为：

    ({
        doInit : function(component, event, helper) {
            var spinner = component.find("spinner");
            $A.util.removeClass(spinner, "slds-hide");
            var action = component.get("c.getSimilarProperties");
            action.setParams({
                recordId: component.get("v.recordId"),
                beds: component.get("v.property.fields.Beds__c.value"),
                price: component.get("v.property.fields.Price__c.value")
            });
            action.setCallback(this, function(response){
                var similarProperties = response.getReturnValue();
                component.set("v.similarProperties", similarProperties);
                $A.util.addClass(spinner, "slds-hide");
            });
            $A.enqueueAction(action);
        }
    })
    

    您刚刚添加了三行代码到控制器。第一行var spinner = component.find（“spinner”）;为微调器创建一个变量引用。 component.find（）方法用于查找标记中的元素。当我们创建<lightning：spinner>时，我们为其指定了一个“spinner”的aura：id。所以，我们说，进入标记，找到有光环的东西：微调的身份证。

    $ A.util.removeClass（s​​pinner，“slds-hide”）;指示框架（记住$ A？）使用其实用方法removeClass（）从微调框中删除slds-hide的CSS类。顾名思义，slds-hide类隐藏了它所放置的任何元素。因此，在slds-hide类被删除的情况下，在组件加载时，微调器将始终可见。在动作的回调中，我们添加了$ A.util.addClass（s​​pinner，“slds-hide”）;它只是把slds-hide类加回到微调器上。

11. 保存文件，然后刷新“属性记录”页面。

    现在，当我们加载数据时，微调器会短暂出现，一旦数据到达，就会消失。

第8部分 – 添加一个图标

当您创建Lightning组件时，您可以选择在Lightning App Builder中为该组件的名称旁边显示的组件创建一个图标。默认情况下，每个自定义组件都会得到一个带有白色闪电的蓝色方形图标。让我们给我们的组件自己的图标。

1. 在开发者控制台中，点击SVG
2. 在新的浏览器选项卡中，导航回SLDS站点。
3. 导航到该网站的图标部分。
4. 向下滚动以在图标的“自定义”部分中找到custom85。步骤5-13是信息性的只是因为在步骤14我们给你的图标的代码。但是，如果您想使用不同的图标，则需要执行以下步骤。
5. 通常情况下，您可以单击导航面板中的“下载”链接，然后向下滚动到“图标”部分，然后单击“下载”按钮。
6. 导航到下载的zip文件并解压后，打开文件夹，然后打开自定义文件夹。
7. 找到custom85.svg文件并在文本编辑器中打开它。
8. 复制SVG中的<path>标记。
9. 在开发者控制台中，切换到SimilarProperties.svg。
10. 将第二个<path>标签替换为您刚刚复制的标签。
11. 在刚刚粘贴的<path>开始处，在“d”属性之前添加fill =“＃fff”。
12. 将<svg>标签中的width =“120px”height =“120px”viewBox =“0 0 120 120”更改为：

    width="100px" height="100px" viewBox="0 0 100 100"
    

13. 将第一个<path>的填充更改为＃F26891。
    这是我们承诺的代码！
14. 选择全部，并使用以下命令替换Dev Console中的.svg文件：

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
            <path fill="#FFF" d="m78 24h-50v-2c0-1.1-0.9-2-2-2h-4c-1.1 0-2 0.9-2 2v56c0 1.1 0.9 2 2 2h4c1.1 0 2-0.9 2-2v-46h50c1.1 0 2-0.9 2-2v-4c0-1.1-0.9-2-2-2z m-4 14h-34c-3.3 0-6 2.7-6 6v22c0 3.3 2.7 6 6 6h34c3.3 0 6-2.7 6-6v-22c0-3.3-2.7-6-6-6z m-5.5 17h-2.5v10c0 0.6-0.4 1-1 1h-4c-0.6 0-1-0.4-1-1v-6c0-0.6-0.4-1-1-1h-4c-0.6 0-1 0.4-1 1v6c0 0.6-0.4 1-1 1h-4c-0.6 0-1-0.4-1-1v-10h-2.5c-0.5 0-0.7-0.6-0.3-0.9l11.2-10.9c0.4-0.3 0.9-0.3 1.3 0l11.2 10.9c0.3 0.3 0.1 0.9-0.4 0.9z"></path>
        </g>
    </svg>
    

15. 保存文件。
16. 返回到“属性记录”页面，单击“设置”图标，然后选择Edit Page.

    向下滚动到App Builder左侧栏中的自定义组件，欣赏你美丽的图标！

第9部分 – 添加设计参数

最后，我们将通过暴露在将组件添加到页面时可以更改的参数来使Admins爱我们。我们将给他们指定一个搜索条件的选项，以及按价格搜索的范围。我们也将确保你不会无意中将组件添加到不起作用的页面。例如，我们不想将“类似属性”组件添加到“联系人记录”页面。使用Design文件，我们可以指定组件可以使用的对象类型。因此，例如，在“联系人记录”页面上，组件将不会显示在Lightning App Builder的可用组件列表中。

1. 如果关闭了App Builder，请在“属性记录详细信息”页面上单击“设置”图标，然后选择Edit Page.
2. 移除SimilarProperties组件并保存页面（注意：如果跳过这一步，在将来的步骤中编辑设计文件时会出现错误）。

   为了限制组件可以放置的页面的类型，您必须首先从分配给它的任何布局中移除该组件。

3. 切换回开发者控制台，在SimilarProperties组件中，在最后一个<aura：attribute>之后添加一行，然后粘贴以下代码：

   <aura:attribute name="searchCriteria" type="String" default="Price" />
   <aura:attribute name="priceRange" type="String" default="100000" />
   

   为了在App Builder中公开参数，我们首先需要在组件本身中添加我们想要公开的<aura：attribute>。
4. 将<lightning：card>的title属性更改为title =“{！’”+ v.searchCriteria}“的相似属性。它现在应该是这样的：

   <lightning:card iconName="custom:custom85" title="{! 'Similar Properties by ' + v.searchCriteria}" class="slds-is-relative">
   

5. 保存文件。
6. 单击CONTROLLER，然后将调用修改为action.setParams（），如下所示，以传递searchCriteria和priceRange属性的值：

   action.setParams({
           recordId: component.get("v.recordId"),
           beds: component.get("v.property.fields.Beds__c.value"),
           price: component.get("v.property.fields.Price__c.value"),
           searchCriteria: component.get("v.searchCriteria"),
           priceRange: parseInt(component.get("v.priceRange"), 10)
       });
   

7. 保存文件。
8. 单击设计，用下面的代码替换默认的内容：

   <design:component label="Similar Properties">
       <sfdc:objects>
           <sfdc:object>Property__c</sfdc:object>
       </sfdc:objects>
       <design:attribute name="searchCriteria" label="Search By" datasource="Bedrooms, Price" default="Price" description="Search for similar houses based on what criteria?" />
       <design:attribute name="priceRange" label="Price Range" default="100000" description="When searching by Price, search using the price plus or minus this amount" />   
   </design:component>
   

   设计属性是在App Builder中公开的参数。对于每个设计属性，在组件中必须有与设计属性完全相同名称的对应aura属性。您要公开的设计参数可以是文本输入或选择列表。应该是选择列表的参数包括一个带逗号分隔的选项列表的数据源属性，您可以在<design：attribute name =“searchCriteria”>中看到。我们还为priceRange添加了一个属性。 Apex类将使用此值来搜索加或减这个值的属性。

   <sfdc：objects>列表定义了组件可以在其上使用的对象页面的类型。如果你想在Property__c页面以外的地方使用这个组件，你只需要在列表中添加一个新的<sfdc：object>。

9. 保存文件。 （注意：如果出现错误，请在App Builder中删除页面上的类似属性组件，然后保存。）
10. 如果关闭了App Builder，请在“属性记录详细信息”页面上单击“设置”图标，然后选择“编辑页面”。
11. 单击组件列表顶部的刷新图标。

    这将重新加载组件，以便我们获得所做的更改，例如添加设计文件。
    

12. 在“自定义组件”下，请注意组件的名称现在是“类似属性”（带有空格）。这是设计文件的标签。
13. 将组件拖回右侧列。请注意，右侧栏目包含搜索条件的设计参数。
14. 选择价格作为搜索条件，以75000作为价格范围。点击价格范围字段外部，让App Builder知道您已完成编辑字段。

    注意，在您进行更改时，App Builder正在刷新页面上的组件。

15. 将组件的第二个副本拖放到页面上，并将其放在页面上第一个组件的上方或下方。
16. 将搜索标准切换到 Bedrooms.
17. 单击保存，然后返回到“属性记录”页面。
18. 玩编辑卧室的价格或数量，并注意如何改变反映在组件的两个实例。

    祝贺您成为一名真正的Lightning组件开发人员。我可以说，你创造了一个惊人的组件！