现在，我们已经为服务器上的指标徽章奠定了基础，让我们开始有趣的部分：为ZBS用户显示指标。

创建一个徽章组件

我们已经建立了一个外部组件来保存指标，但是仍然需要用一些东西来填充它。让我们构建一个Lightning组件，用于显示各个指示器标志。

1. 1. 在开发人员控制台中，选择“文件”>“新建”>“闪电组件”
   2. 命名组件IndicatorBadge，然后单击提交
   3. 用以下代码替换生成的代码：

      <aura:component >
        <aura:attribute name="badge" type="Object" />
        <lightning:icon iconName="{!v.badge.icon}" class="{! 'slds-box slds-box_x-small slds-align_absolute-center slds-size__1-of-1 '+v.badge.color}" alternativeText="{!v.badge.label}" />
      </aura:component>
   4. 单击右侧组件面板中的“样式”，然后用以下代码替换内容：

      .THIS.DeepPink {
        background-color: deeppink;
      }
      .THIS.DeepSkyBlue{
        background-color: deepskyblue;
      }
      .THIS.LimeGreen{
        background-color: limegreen;
      }
      .THIS.Gold{
        background-color: gold;
      }
      .THIS.Red{
        background-color: red;
      }
      .THIS.RosyBrown{
        background-color: rosybrown;
      }
      .THIS.Tomato{
        background-color: tomato;
      }
      .THIS.Turquoise{
        background-color: darkturquoise;
      }
      .THIS.Violet{
        background-color: violet;
      }
      .THIS.YellowGreen{
        background-color: yellowGreen;
      }
      .THIS{
        height: 3rem;
        width: 3rem;
      }

代码重点：

• IndicatorBadge.css标记允许我们将指标的背景颜色与自定义元数据类型的“徽章颜色”字段的选择列表值进行匹配。它还使用一些相对大小来使我们的徽章保持方形。
• 所述IndicatorBadge使用lightning:icon碱组件来创建单独的图标的徽章。该组件可让您轻松触碰所有的Lightning Design System图标。我们正在将指标徽章记录的名称（使用自定义元数据记录中的MasterLabel字段值）alternativeText传递到属性中，以向可能正在使用辅助技术的ZBS用户提供一致的信息。

修改指标徽章标记并优化逻辑

我们需要更新我们的IndicatorBadges组件以嵌入我们的新IndicatorBadge组件，并确保我们的控制器和助手已经过优化以处理新功能。

1. 导航到IndicatorBadges组件。替换<!--Indicator Badge here-->为以下代码：

   <c:IndicatorBadge badge="{!thisBadge}" />

   复制
2. 现在，我们也需要更新控制器和辅助逻辑。
3. 单击右侧组件面板中的“ CONTROLLER”，然后将内容替换为以下代码：

   ({
     doInit : function(component, event, helper) {
       var recId = component.get("v.recordId");
       var sObj = component.get("v.sObjectName");
       if(sObj){
         helper.getLabelForRecord(component, sObj);
         helper.getBadgesForRecord(component, recId, sObj);
       }
     },
     //future code here
   })
4. 单击右侧组件面板中的HELPER并替换//future code here为以下代码：

    getBadgesForRecord : function(component, recId, sObj) {
       var action = component.get("c.getIndicators");
       action.setParams({
         recId : recId,
         objectName : sObj
       });
       action.setCallback(this, function(response){
         var state = response.getState();
         if(state === "SUCCESS"){
           var badges = response.getReturnValue();
           component.set("v.badgeList", badges);
         } else if (state === "ERROR"){
           console.log('Error: ' + JSON.stringify(response.error));
         } else {
           console.log('Unknown problem, state: ' + state + ', error: ' + JSON.stringify(response.error));
         }
       });
       $A.enqueueAction(action);
     },
     //future code here
5. 我们还需要更新getLabelForRecord方法以响应控制器中的更改。用以下代码替换现有的方法标记：

    getLabelForRecord : function(component, sObj){
       if(!component.get("v.objLabel")){
         var action = component.get("c.getSObjectLabel");
         action.setParams({
           sObjName : sObj
         });
         action.setCallback(this, function(response){
           var state = response.getState();
           if(state === "SUCCESS"){
             var label = response.getReturnValue();
             component.set("v.objLabel", label);
           } else if(state === "ERROR"){
             console.log('Error: ' + JSON.stringify(response.error));
           } else {
             console.log('Unknown problem, state: '+ state + ', error: ' + JSON.stringify(response.error));
           }
         });
         $A.enqueueAction(action);
       }
     },
6. 您完成的帮助程序现在应如下所示：

   ({
     getLabelForRecord : function(component, sObj){
       if(!component.get("v.objLabel")){
         var action = component.get("c.getSObjectLabel");
         action.setParams({
           sObjName : sObj
         });
         action.setCallback(this, function(response){
           var state = response.getState();
           if(state === "SUCCESS"){
             var label = response.getReturnValue();
             component.set("v.objLabel", label);
           } else if(state === "ERROR"){
             console.log('Error: ' + JSON.stringify(response.error));
           } else {
             console.log('Unknown problem, state: '+ state + ', error: ' + JSON.stringify(response.error));
           }
         });
         $A.enqueueAction(action);
       }
     },
     getBadgesForRecord : function(component, recId, sObj) {
       var action = component.get("c.getIndicators");
       action.setParams({
         recId : recId,
         objectName : sObj
       });
       action.setCallback(this, function(response){
         var state = response.getState();
         if(state === "SUCCESS"){
           var badges = response.getReturnValue();
           component.set("v.badgeList", badges);
         } else if (state === "ERROR"){
           console.log('Error: ' + JSON.stringify(response.error));
         } else {
           console.log('Unknown problem, state: ' + state + ', error: ' + JSON.stringify(response.error));
         }
       });
       $A.enqueueAction(action);
     },
     //future code here
   })
7. 单击文件>全部保存。
8. 在Salesforce中，单击“帐户”选项卡，然后选择“ API First Communications”记录。我们的帐户指标变得更加令人兴奋，不是吗？

   

9. 单击“联系人”选项卡，然后从“最近查看的联系人”相关列表中选择Gerta Pickles，然后刷新浏览器。哇！现在我们到了某个地方。

   

代码重点：

• 在doInit我们的控制文件的方法正在打电话给两个不同的功能：getLabelForRecord和getBadgesForRecord。仅通过利用帮助程序类在Lightning中支持这种级别的复杂性（即，同步调用多个函数）。
• 我们正在对服务器进行两次调用（而不是将所有操作组合到一个调用中），以使组件的标题标记正确显示，即使记录中没有要显示的指标也是如此。
• 为了不对服务器进行不必要的调用，我们修改了getLabelForRecordhelper方法，仅在objLabel尚未使用有效数据填充属性时才调用服务器。
• 我们使用aura：iteration，并将整个Indicator对象传递给我们的IndicatorBadge组件，而不是分解单个属性。因为我们将@AuraEnabled标记添加到了指标内部类的属性中，所以我们可以在组件内部使用点表示法并引用这些值。

指示器徽章所有事情！

我们已将组件添加到“客户”和“联系人”记录页面上。让我们真正地动态起来，并将组件添加到ZBSLightning应用程序的所有记录页面中。因为有了徽章，一切都会变得更好。

1. 在Salesforce中，从应用启动器（）中找到并选择ZBSLightning，然后单击“显示”选项卡。从列表中选择“不为空”。（如果“最近查看”列表中没有记录，请更改为“所有节目”列表。）
2. 单击齿轮图标（），然后选择“编辑页面”以打开Lightning App Builder。
3. 将IndicatorBadges自定义组件从“闪电组件”列表拖到页面上，并将其放在右列中。
4. 点击保存。
5. 点击激活。
6. 点击分配为组织默认值，然后单击下一步，然后保存。
7. 单击以退出Lightning App Builder并返回到记录主页。
   只需添加我们的组件，看看我们从该记录中发现了什么！这个节目有很多事情：这是ZBS Audience Favorite（我们决定在设置“ Audience Favorite”自定义元数据记录时显示为番茄色温度计/ custom97 SLDS图标），还有Vlog（我们将其设置为紫罗兰色电视）。而且我们可以立即看到这一点，而不必深入任何领域。让我们继续加油ZBS。
8. 在Salesforce中，单击“联合组织”选项卡。从列表中选择任何记录。（如果“最近查看”列表中没有记录，请更改为“所有联合组织”列表。）
9. 单击齿轮图标（），然后选择“编辑页面”以打开Lightning App Builder。
10. 将IndicatorBadges自定义组件从“闪电组件”列表拖到页面上，并将其放在右列中。
11. 点击保存。
12. 点击激活。
13. 点击分配为组织默认值，然后单击下一步，然后保存。
14. 单击以退出Lightning App Builder并返回到记录主页。

注意到任何指标吗？单击详细信息选项卡（如果尚未激活该选项卡），然后查看该IsActive字段的值。如果未选中该框，则我们的组件应该为空。在此对象上下文中，我们看到我们的组件不仅传达有关记录的复杂细节。它还可以帮助繁忙的ZBS用户注意到简单但关键的数据质量问题。

但是，如果用户更改了记录中的某些数据并且我们需要显示不同的指标，那么在当前状态下，我们的组件会发生什么变化？（提示：没有。）让我们在下一步中修复它。

现在，我们已经为服务器上的指标徽章奠定了基础，让我们开始有趣的部分：为ZBS用户显示指标。

创建一个徽章组件

我们已经建立了一个外部组件来保存指标，但是仍然需要用一些东西来填充它。让我们构建一个Lightning组件，用于显示各个指示器标志。

1. 1. 在开发人员控制台中，选择“文件”>“新建”>“闪电组件”
   2. 命名组件IndicatorBadge，然后单击提交
   3. 用以下代码替换生成的代码：

      <aura:component >
        <aura:attribute name="badge" type="Object" />
        <lightning:icon iconName="{!v.badge.icon}" class="{! 'slds-box slds-box_x-small slds-align_absolute-center slds-size__1-of-1 '+v.badge.color}" alternativeText="{!v.badge.label}" />
      </aura:component>
   4. 单击右侧组件面板中的“样式”，然后用以下代码替换内容：

      .THIS.DeepPink {
        background-color: deeppink;
      }
      .THIS.DeepSkyBlue{
        background-color: deepskyblue;
      }
      .THIS.LimeGreen{
        background-color: limegreen;
      }
      .THIS.Gold{
        background-color: gold;
      }
      .THIS.Red{
        background-color: red;
      }
      .THIS.RosyBrown{
        background-color: rosybrown;
      }
      .THIS.Tomato{
        background-color: tomato;
      }
      .THIS.Turquoise{
        background-color: darkturquoise;
      }
      .THIS.Violet{
        background-color: violet;
      }
      .THIS.YellowGreen{
        background-color: yellowGreen;
      }
      .THIS{
        height: 3rem;
        width: 3rem;
      }

代码重点：

• IndicatorBadge.css标记允许我们将指标的背景颜色与自定义元数据类型的“徽章颜色”字段的选择列表值进行匹配。它还使用一些相对大小来使我们的徽章保持方形。
• 所述IndicatorBadge使用lightning:icon碱组件来创建单独的图标的徽章。该组件可让您轻松触碰所有的Lightning Design System图标。我们正在将指标徽章记录的名称（使用自定义元数据记录中的MasterLabel字段值）alternativeText传递到属性中，以向可能正在使用辅助技术的ZBS用户提供一致的信息。

修改指标徽章标记并优化逻辑

我们需要更新我们的IndicatorBadges组件以嵌入我们的新IndicatorBadge组件，并确保我们的控制器和助手已经过优化以处理新功能。

1. 导航到IndicatorBadges组件。替换<!--Indicator Badge here-->为以下代码：

   <c:IndicatorBadge badge="{!thisBadge}" />

   复制
2. 现在，我们也需要更新控制器和辅助逻辑。
3. 单击右侧组件面板中的“ CONTROLLER”，然后将内容替换为以下代码：

   ({
     doInit : function(component, event, helper) {
       var recId = component.get("v.recordId");
       var sObj = component.get("v.sObjectName");
       if(sObj){
         helper.getLabelForRecord(component, sObj);
         helper.getBadgesForRecord(component, recId, sObj);
       }
     },
     //future code here
   })
4. 单击右侧组件面板中的HELPER并替换//future code here为以下代码：

    getBadgesForRecord : function(component, recId, sObj) {
       var action = component.get("c.getIndicators");
       action.setParams({
         recId : recId,
         objectName : sObj
       });
       action.setCallback(this, function(response){
         var state = response.getState();
         if(state === "SUCCESS"){
           var badges = response.getReturnValue();
           component.set("v.badgeList", badges);
         } else if (state === "ERROR"){
           console.log('Error: ' + JSON.stringify(response.error));
         } else {
           console.log('Unknown problem, state: ' + state + ', error: ' + JSON.stringify(response.error));
         }
       });
       $A.enqueueAction(action);
     },
     //future code here
5. 我们还需要更新getLabelForRecord方法以响应控制器中的更改。用以下代码替换现有的方法标记：

    getLabelForRecord : function(component, sObj){
       if(!component.get("v.objLabel")){
         var action = component.get("c.getSObjectLabel");
         action.setParams({
           sObjName : sObj
         });
         action.setCallback(this, function(response){
           var state = response.getState();
           if(state === "SUCCESS"){
             var label = response.getReturnValue();
             component.set("v.objLabel", label);
           } else if(state === "ERROR"){
             console.log('Error: ' + JSON.stringify(response.error));
           } else {
             console.log('Unknown problem, state: '+ state + ', error: ' + JSON.stringify(response.error));
           }
         });
         $A.enqueueAction(action);
       }
     },
6. 您完成的帮助程序现在应如下所示：

   ({
     getLabelForRecord : function(component, sObj){
       if(!component.get("v.objLabel")){
         var action = component.get("c.getSObjectLabel");
         action.setParams({
           sObjName : sObj
         });
         action.setCallback(this, function(response){
           var state = response.getState();
           if(state === "SUCCESS"){
             var label = response.getReturnValue();
             component.set("v.objLabel", label);
           } else if(state === "ERROR"){
             console.log('Error: ' + JSON.stringify(response.error));
           } else {
             console.log('Unknown problem, state: '+ state + ', error: ' + JSON.stringify(response.error));
           }
         });
         $A.enqueueAction(action);
       }
     },
     getBadgesForRecord : function(component, recId, sObj) {
       var action = component.get("c.getIndicators");
       action.setParams({
         recId : recId,
         objectName : sObj
       });
       action.setCallback(this, function(response){
         var state = response.getState();
         if(state === "SUCCESS"){
           var badges = response.getReturnValue();
           component.set("v.badgeList", badges);
         } else if (state === "ERROR"){
           console.log('Error: ' + JSON.stringify(response.error));
         } else {
           console.log('Unknown problem, state: ' + state + ', error: ' + JSON.stringify(response.error));
         }
       });
       $A.enqueueAction(action);
     },
     //future code here
   })
7. 单击文件>全部保存。
8. 在Salesforce中，单击“帐户”选项卡，然后选择“ API First Communications”记录。我们的帐户指标变得更加令人兴奋，不是吗？

   

9. 单击“联系人”选项卡，然后从“最近查看的联系人”相关列表中选择Gerta Pickles，然后刷新浏览器。哇！现在我们到了某个地方。

   

代码重点：

• 在doInit我们的控制文件的方法正在打电话给两个不同的功能：getLabelForRecord和getBadgesForRecord。仅通过利用帮助程序类在Lightning中支持这种级别的复杂性（即，同步调用多个函数）。
• 我们正在对服务器进行两次调用（而不是将所有操作组合到一个调用中），以使组件的标题标记正确显示，即使记录中没有要显示的指标也是如此。
• 为了不对服务器进行不必要的调用，我们修改了getLabelForRecordhelper方法，仅在objLabel尚未使用有效数据填充属性时才调用服务器。
• 我们使用aura：iteration，并将整个Indicator对象传递给我们的IndicatorBadge组件，而不是分解单个属性。因为我们将@AuraEnabled标记添加到了指标内部类的属性中，所以我们可以在组件内部使用点表示法并引用这些值。

指示器徽章所有事情！

我们已将组件添加到“客户”和“联系人”记录页面上。让我们真正地动态起来，并将组件添加到ZBSLightning应用程序的所有记录页面中。因为有了徽章，一切都会变得更好。

1. 在Salesforce中，从应用启动器（）中找到并选择ZBSLightning，然后单击“显示”选项卡。从列表中选择“不为空”。（如果“最近查看”列表中没有记录，请更改为“所有节目”列表。）
2. 单击齿轮图标（），然后选择“编辑页面”以打开Lightning App Builder。
3. 将IndicatorBadges自定义组件从“闪电组件”列表拖到页面上，并将其放在右列中。
4. 点击保存。
5. 点击激活。
6. 点击分配为组织默认值，然后单击下一步，然后保存。
7. 单击以退出Lightning App Builder并返回到记录主页。
   只需添加我们的组件，看看我们从该记录中发现了什么！这个节目有很多事情：这是ZBS Audience Favorite（我们决定在设置“ Audience Favorite”自定义元数据记录时显示为番茄色温度计/ custom97 SLDS图标），还有Vlog（我们将其设置为紫罗兰色电视）。而且我们可以立即看到这一点，而不必深入任何领域。让我们继续加油ZBS。
8. 在Salesforce中，单击“联合组织”选项卡。从列表中选择任何记录。（如果“最近查看”列表中没有记录，请更改为“所有联合组织”列表。）
9. 单击齿轮图标（），然后选择“编辑页面”以打开Lightning App Builder。
10. 将IndicatorBadges自定义组件从“闪电组件”列表拖到页面上，并将其放在右列中。
11. 点击保存。
12. 点击激活。
13. 点击分配为组织默认值，然后单击下一步，然后保存。
14. 单击以退出Lightning App Builder并返回到记录主页。

注意到任何指标吗？单击详细信息选项卡（如果尚未激活该选项卡），然后查看该IsActive字段的值。如果未选中该框，则我们的组件应该为空。在此对象上下文中，我们看到我们的组件不仅传达有关记录的复杂细节。它还可以帮助繁忙的ZBS用户注意到简单但关键的数据质量问题。

但是，如果用户更改了记录中的某些数据并且我们需要显示不同的指标，那么在当前状态下，我们的组件会发生什么变化？（提示：没有。）让我们在下一步中修复它。

尽管我们使用Lightning组件显示指示器标志（并且在以后的步骤中，我们甚至使用Lightning Data Service来获得没有Apex的记录级数据），但这并不意味着我们不需要Apex。实际上，我们需要使用一些Apex来使我们的指标徽章记录以及其他信息可供我们的Lightning组件使用。

在此步骤中，我们将创建一个可感知对象的Lightning组件，使其可在Lightning App Builder中使用，并使用Apex为该组件提供一个动态的，可感知对象的标签。

创建一个指标徽章组件

1. 点击齿轮图标（），然后选择开发者控制台。
2. 在开发人员控制台中，选择“文件”>“新建”>“ Lightning Component”。
3. 命名组件IndicatorBadges，选择“闪电记录页面”，然后选择“提交”。
4. 用以下代码替换组件的内容：

   <aura:component implements="force:hasRecordId,force:hasSObjectName,flexipage:availableForRecordHome">
     <aura:attribute name="objLabel" type="String" />
     <aura:attribute name="badgeList" type="Object[]"/>
     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
     <lightning:card iconName="standard:coaching" title="{! v.objLabel +' Indicators'}" class="slds-text-title_caps">
       <div class="slds-p-left--medium slds-p-right--medium">
         <lightning:layout verticalAlign="stretch" horizontalAlign="start" multipleRows="true" pullToBoundary="small">
           <aura:iteration items="{!v.badgeList}" var="thisBadge" aura:id="theList">
             <lightning:layoutItem size="2" padding="horizontal-small">
               <!--put Indicator Badge here-->
             </lightning:layoutItem>
           </aura:iteration>
         </lightning:layout>
       </div>
     </lightning:card>
   </aura:component>
5. 单击文件>保存。

代码重点：

• 当您创建一个Lightning组件并选中Available for Record Pages复选框时，开发人员控制台提供了两个界面（即force:hasRecordId和flexipage:availableForRecordHome接口）。我们添加了第三个接口force:hasSObjectName，以使我们的组件能够感知对象和记录。
• 我们使用Lightning基本组件为最终将成为指标徽章项目的列表创建标题和整洁的布局。我们为该组件提供了一个可识别的图标（“ standard：coaching”）和动态标题，以便用户知道他们正在查看的指示符。

创建指标徽章控制器类

在动态标题中，我们要显示用户期望的对象的名称-force:hasSObjectName接口未提供该值（标签字段）（可以访问对象的API名称）。要访问组件中Label字段的值，我们需要使用Apex。

1. 在开发者控制台中，单击文件>新建> Apex类。
2. 命名Apex类INDICATOR_Controller。
3. 修改类，如下所示：

   public class INDICATOR_Controller {
     @AuraEnabled
     public static String getSObjectLabel(String sObjName){
       String label = Schema.getGlobalDescribe().get(sObjName).getDescribe().getLabel();
       return label;
     }
   }
4. 单击文件>保存。
5. 修改IndicatorBadges组件，使其包含在对我们的Apex控制器的引用，方法是将其添加controller="INDICATOR_Controller" access="public"到该组件的第一行中>。
6. 您的组件标记现在应如下所示：

   <aura:component implements="force:hasRecordId,force:hasSObjectName,flexipage:availableForRecordHome" controller="INDICATOR_Controller" access="public">
     <aura:attribute name="objLabel" type="String" />
     <aura:attribute name="badgeList" type="Object[]"/>
     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
     <lightning:card iconName="standard:coaching" title="{! v.objLabel +' Indicators'}" class="slds-text-title_caps">
       <div class="slds-p-left--medium slds-p-right--medium">
         <lightning:layout verticalAlign="stretch" horizontalAlign="start" multipleRows="true" pullToBoundary="small">
           <aura:iteration items="{!v.badgeList}" var="thisBadge" aura:id="theList">
             <lightning:layoutItem size="2" padding="horizontal-small">
               <!--Indicator Badge here-->
             </lightning:layoutItem>
           </aura:iteration>
         </lightning:layout>
       </div>
     </lightning:card>
   </aura:component>
7. 单击右侧组件面板中的“ CONTROLLER”，然后将内容替换为以下代码：

   ({
     doInit : function(component, event, helper) {
       var sObj = component.get("v.sObjectName");
       if(sObj){
         helper.getLabelForRecord(component, sObj);
       }
     },
     //future code here
   })
8. 点击HELPER在右侧的组件面板，并替换此代码的内容：

   ({
     getLabelForRecord : function(component, sObj){
       var action = component.get("c.getSObjectLabel");
       action.setParams({
         sObjName : sObj
       });
       action.setCallback(this, function(response){
         var state = response.getState();
         if(state === "SUCCESS"){
           var label = response.getReturnValue();
           component.set("v.objLabel", label);
         } else if(state === "ERROR"){
           console.log('Error: ' + JSON.stringify(response.error));
         } else {
           console.log('Unknown problem, state: '+ state + ', error: ' + JSON.stringify(response.error));
         }
       });
       $A.enqueueAction(action);
     },
     //future code here
   })
9. 单击文件>全部保存。

代码重点：

• 我们使用“ INDICATOR_”作为Apex的类名称前缀，以支持我们的Indicator Badge应用程序和Lightning组件。随着我们的代码变得越来越复杂（将在下一步中执行），此模式将有助于将ZBS代码库保持为清晰的功能组。
• 通过将controller=属性添加到标记中，我们更新了Lightning组件以了解基于Apex的控制器。
• 我们组件的客户端控制器具有doInit执行基本健全性检查的功能（确保组件具有有效的API名称以传递给服务器），然后将对服务器的调用和对帮助者的响应处理的协调工作移交给其他人。这种使客户端控制器更简单，将复杂性交给助手的模式在生产就绪的组件中更为典型。我们将在下一步中了解原因。
• 在我们的Apex控制器中，getSObjectLabel方法使用从Lightning组件传入的对象的API名称来获取更加用户友好的SObject Label。我们通过使用Schema类和相关方法来获取此信息。
• 使用Schema方法返回的值不仅显示用户期望的标准对象和自定义对象的对象名称，还以该用户的语言环境设置确定的语言显示信息。（如果存在翻译版本。）

向Lightning Experience中的页面添加指示器徽章

在继续之前，我们需要做的最后一件事是将进行中的指标徽章组件放入Lightning Experience中的某些记录页面上。

1. 在Salesforce中，单击“帐户”选项卡。单击任何记录名称。（如果“最近查看”列表中没有记录，请更改为“所有帐户”列表。）
2. 单击齿轮图标（），然后选择“编辑页面”以打开Lightning App Builder。
3. 将IndicatorBadges自定义组件从“闪电组件”列表拖到页面上，并将其放在“活动”和“颤动”选项卡上方的右列中。
   
4. 点击保存。
5. 点击激活。
6. 点击分配为组织默认值，然后单击下一步，然后保存。
7. 单击以退出Lightning App Builder并返回到记录主页。
   
   那里！我们可以看到指标徽章组件，并且它了解它应该向我们显示“帐户指标”。让我们将组件放在另一个对象的页面上，看看是否发现任何更改。
8. 单击联系人选项卡，然后选择任何记录。（同样，如果“最近查看”列表中没有记录，请更改为“全部”列表视图。）
9. 重复步骤2-7。

晕！在该Contact对象上，我们可以看到该force:hasSObjectName接口和我们的Apex代码的结合，正如该组件告诉我们的那样，我们正在查看“联系指示器”。（现在，减去指标。）我们使组件能够在不同的上下文中正确运行，并开始使用与sObject无关的设计模式。挺棒的。