分类： Lightning-覆盖标准按钮

当从Visualforce世界转移到Lightning组件时，开发人员面临的一个重大变化是如何与服务器通信。直到Summer ’17发布，这意味着创建一个Apex类来做任何事情，甚至是在Visualforce中“自动”处理的简单的CRUD交互。随着夏季’17发布和闪电数据服务的引入，这一切都改变了。因此，对于我们的组件，我们使用Lightning Data Service创建新的属性记录 – 无需编写Apex！

添加force:recordData

1. 在开发人员控制台的PropertyDialog组件中，在刚添加的aura：attribute和c：PickListValues之间添加以下内容：

   <aura:attribute name="propertyRecord" type="Property__c" />
   <force:recordData aura:id="forceRecord"
                   recordId="{!v.recordId}"
                   targetFields="{!v.propertyRecord}"
                   fields="Id,Name,Beds__c,Baths__c,Price__c,Status__c"
                   mode="EDIT" />
   

   Lightning Data Service使用名为force：recordData的对象在记录上执行CRUD交互。 force有几个其他的属性：recordData，但是为了我们的目的，我们只需要recordId，targetRecord，fields和mode。

   当值被分配给recordId属性时，在场景后面，Lightning Data Service将检索整个记录或请求的字段。结果字段存储在由targetFields属性定义的属性中;在这种情况下，propertyRecord。最后，mode属性定义了force：recordData的这个实例是处于VIEW模式还是EDIT模式。显然，由于我们正在创建一个记录，它需要处于编辑模式。

初始化新记录

1. 在force之后的新行添加以下内容：recordData标记：

   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
   

2. 单击侧面导航中的“控制器”以将控制器添加到组件。
3. 将默认函数myAction重命名为doInit，并将以下内容添加到函数中：

   component.find("forceRecord").getNewRecord(
           "Property__c",
           null,
           false,
           $A.getCallback(function() {
               var rec = component.get("v.propertyRecord");
               var error = component.get("v.recordError");
               if (error || (rec === null)) {
                   console.log("Error initializing record template: " + error);
                   return;
               }
           })
       );
   

   强制的getNewRecord：recordData有四个参数。第一个参数Property__c定义要创建记录的sObject的实体API名称。下一个参数是recordTypeId。我们将其设置为空，它只是说根据用户的配置文件使用默认的记录类型。第三个参数决定是否从客户端缓存加载记录模板。最后，回调检查是否有错误或者propertyRecord属性是否未被填充。

保存新记录

1. 在PropertyDialogController中添加一个名为saveRecord的新函数，并传递组件，事件，帮助器作为参数：

   saveRecord : function(component, event, helper) {
   }
   

   不要忘记逗号分隔功能！
2. 将以下内容添加到新功能中：

   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.propertyRecord.Name", component.find('propName').get("v.value"));    
   component.set("v.propertyRecord.Beds__c", propBeds);
   component.set("v.propertyRecord.Baths__c", propBaths);
   component.set("v.propertyRecord.Price__c", propPrice);
   component.set("v.propertyRecord.Status__c", component.find('propStatus').get("v.value"));
   
   var tempRec = component.find("forceRecord");
   tempRec.saveRecord($A.getCallback(function(result) {
       console.log(result.state);
       var resultsToast = $A.get("e.force:showToast");
       if (result.state === "SUCCESS") {
           resultsToast.setParams({
               "title": "Saved",
               "message": "The record was saved."
           });
           resultsToast.fire();                
       } else if (result.state === "ERROR") {
           console.log('Error: ' + JSON.stringify(result.error));
           resultsToast.setParams({
               "title": "Error",
               "message": "There was an error saving the record: " + JSON.stringify(result.error)
           });
           resultsToast.fire();
       } else {
           console.log('Unknown problem, state: ' + result.state + ', error: ' + JSON.stringify(result.error));
       }
   }));
   

   当我们保存记录时，我们确保字段类型的值是正确的。 Beds__c，Baths__c和Price__c都被设置为Property_c对象中的整数。因此，当我们从输入中获取值时，我们使用parseInt JavaScript方法将其从一个字符串转换为一个整数。一旦转换，我们更新propertyRecord属性中的值以及来自其他表单字段的值。

   接下来，我们使用tempRec的变量赋值来调用saveRecord的force：recordData方法，以将记录的新值保存回Salesforce。哦，我们是否提到过那是？真的，tempRec.saveRecord（），我们完成了！

   当然，在saveRecord方法的回调中还有更多。确保记录成功保存后，我们吐出一杯祝酒词，让用户知道保存是否奏效。

3. 保存PropertyDialogController.js并切换回PropertyDialog组件。
4. 将 onclick="{!c.saveRecord}" 添加到提交对话框的lightning:button   (标签为“submit”的按钮).
5. 保存文件。

导航到保存后的新记录

记录保存后，我们不希望对话框坐在那里。因此，我们可以选择：导航到“属性”列表或新创建的记录。让我们做一个行政决定，并导航到新创建的记录。

1. 在开发人员控制台中，单击侧面导航栏中的“助手”以将助手文件添加到组件。

   当您最初开始构建Lightning组件时，将所有JavaScript函数放在控制器文件中感觉很自然。但是，在控制器文件中，不能从另一个函数调用一个函数。所以，在我们的例子中，如果我们构建了一个导航到记录的函数，我们不能从saveRecord函数中调用它。这意味着我们必须将整个功能写入saveRecord函数。这很糟糕 – 这可能会导致我们在稍后的函数中重复我们的代码。因此，将任何可能需要调用多次或从另一个函数中调用的任何东西放到帮助程序文件中是一种更好的做法。

2. 将帮助程序文件的默认内容替换为：

   ({
       navigateTo: function(component, recId) {
           var navEvt = $A.get("e.force:navigateToSObject");
           navEvt.setParams({
               "recordId": recId
           });
           navEvt.fire();
       }
   })
   

   这个函数只是调用内置的平台事件force：navigateToSObject，传递我们从recordSave的回调中得到的recordId。
3. 保存文件。
4. 切换回PropertyDialogController.js。
5. 在resultsToast.fire（）之后的新行中添加以下内容：在回调的成功状态（在第40行附近）：

   var recId = result.recordId;
   helper.navigateTo(component, recId);
   

6. 保存文件，然后返回到您的组织并刷新属性详细信息页面。
7. 用这些值填写表单：
   • Name: 123 Main St.
   • Beds: 4
   • Baths: 3
   • Price: 500000
   • Status: Pre-Market
8. 点击提交。

你印象深刻吗？你只是保存了一个新的记录而不用写任何Apex代码去做！即使你是一个性格开朗的开发者，也会觉得非常神奇。接下来，让我们完成我们设定的操作并覆盖“新建”按钮。

通常，当我们考虑Lightning组件时，我们会考虑Lightning Experience中页面上的元素。换句话说，我们想到了前端设计 – 用户在页面上的交互。但是我们也可以构建根本没有任何前端标记的Lightning组件。但是你可能在想，为什么有人会那样做呢？因为我们也可以使用Lightning组件作为可重用的服务或服务组件。

在这一步结束之后，您将会：

• 了解服务组件的概念
• 检索选项列表值列表
• 传递两个组件之间的值

创建闪电组件

1. 在开发者控制台中，选择 File > New > Lightning Component.
2. 对于名称，输入： PickListValues 并单击 Submit.

   请注意，我们没有检查任何框，因为我们不打算将这个组件作为一个独立的组件在页面上使用。相反，我们将其用作PropertyDialog组件的子组件，或者将其用作需要选项列表值的任何其他组件的子项。

3. 将以下内容添加到<aura：component>标记内的组件中：

   <aura:attribute name="sObjectName" type="String" />
   <aura:attribute name="fieldName" type="String" />
   <aura:attribute name="picklistValues" type="Object" />
   

   因为这是一个服务组件，它唯一要做的就是存储一些值。在我们的情况下，我们想知道状态选项列表的值。我们将把它们作为值存储在<aura：attribute name =“picklistValues”/>中。
4. 保存文件。

检索选项列表值

1. 在开发者控制台中，点击 File > New > Apex Class.
2. 命名类： PickListController
3. 将以下内容添加到 class:

   @AuraEnabled        
   public static List<String> getPickListValuesIntoList(String objectType, String selectedField){
       List<String> pickListValuesList = new List<String>();
       Schema.SObjectType convertToObj = Schema.getGlobalDescribe().get(objectType);
       Schema.DescribeSObjectResult res = convertToObj.getDescribe();
       Schema.DescribeFieldResult fieldResult = res.fields.getMap().get(selectedField).getDescribe();
       List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
       for( Schema.PicklistEntry pickListVal : ple){
           pickListValuesList.add(pickListVal.getLabel());
       }     
       return pickListValuesList;
   }
   

   我们称之为Lightning组件的Apex方法，我们需要使用@AuraEnabled和静态签名。 getPickListValuesIntoList方法接受两个参数，objectType和selectedField。我们将ObjectType变量作为String传递，所以我们把String转换成Object，然后得到它的字段列表。然后我们检索选取列表值，为每个值添加标签，最后返回列表。
4. 保存文件。

把它连接起来

1. 在开发者控制台中，切换回PickListValues组件。
2. 将controller =“PickListController”access =“global”添加到<aura：component>标记。
3. 在aura属性之后的新行中，将以下内容添加到组件中：

   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
   

4. 保存文件。
5. 单击侧面导航中的“控制器”以将控制器添加到组件。
6. 将控制器中的代码替换为：

   ({
       doInit : function(component) {
           var action = component.get("c.getPickListValuesIntoList");
           action.setParams({
               objectType: component.get("v.sObjectName"),
               selectedField: component.get("v.fieldName")
           });
           action.setCallback(this, function(response) {
               var list = response.getReturnValue();
               component.set("v.picklistValues", list);
           })
           $A.enqueueAction(action);
       }
   })
   

   这个非常简单的函数调用我们刚刚创建的Apex类的getPickListValuesIntoList方法，然后将它们存储在picklistValues属性中。

7. 保存文件。

添加服务组件

1. 在Developer Console中，切换到PropertyDialog组件。
2. 在打开<aura：component>标记之后添加对PickListValues组件的引用：

   <aura:attribute name="picklistValues" type="Object" />
   <c:PicklistValues sObjectName="Property__c" fieldName="Status__c" picklistValues="{!v.picklistValues}" />
   

   当我们向另一个Lightning组件添加一个子组件时，我们也可以设置子组件中包含的属性。这些值可以是显式定义的，就像我们在这里做的那样，或者是根据绑定到父组件的属性来动态分配的。当Apex类返回值时，我们在子组件中设置picklistValues属性。然后，这个值将起泡到<c：PicklistValues>上的属性定义，该属性定义依次在父组件中设置。啊，数据绑定的美丽！
3. 将<lightning：select>中的<option value =“status”> Status </ option>替换为：

   <aura:iteration items="{!v.picklistValues}" var="item">
       <option value="{!item}">{!item}</option>
   </aura:iteration>
   

   现在，将使用picklistValues属性中的条目来动态填充<lightning：select>。
4. 保存该文件，然后刷新组织中的属性记录页面。

   如果一切顺利，而不是“状态”一词，正确的值显示在您的状态选项列表中。

   做得好！ 现在我们需要做的就是连接组件，以便能够保存新的属性记录。

介绍

在这个项目中，我们将介绍创建Lightning组件的过程，以便用作标准操作的重写。

在这个过程中，我们将完成以下工作：

• 创建一个闪电组件。
• 构建一个服务组件。
• 利用闪电数据服务来创建和编辑记录。
• 调查使用Lightning组件作为覆盖的含义。
• 使闪电组件具有上下文感知能力。

听起来很有趣？让我们开始吧！

安装Trailhead包并导入数据

我们要做的第一件事就是在Trailhead Playground中安装一个软件包，里面包含我们在这个项目中工作的应用程序和代码。

1. 将此Trailhead项目包安装到Trailhead游乐场。检查URL以确保您正在安装到正确的组织中。您需要您的动手组织用户名和密码才能安装此软件包。如果您正在使用Trailhead Playground，本文将向您介绍如何找到您的用户名并重置您的密码。如果您在AppExchange中安装软件包或应用程序时遇到问题，请按照本文中的步骤操作。
2. 安装软件包后，点击alt text：App Launcher图标，选择Dreamhouse Lightning。
3. 单击数据导入，然后初始化示例数据。这将导入您在此项目中使用的数据。
4. 点击设置图标，然后选择设置。
5. 在快速查找框中输入会话并选择会话设置。
6. 滚动到“缓存”部分，取消选中 Enable secure and persistent browser caching to improve performance.
7. 点击 Save.
8. 如果您正在使用Trailhead Playground进行此项目，那么您已经全部准备好了！如果您在此项目中使用开发人员版组织，请按照以下步骤打开“我的域”。

创建一个闪电组件

在这个项目中，我们修改了我们为DreamHouse Realty（一家位于波士顿的房地产公司）建造的DreamHouse应用程序。 DreamHouse Realty使用这个应用程序来管理房屋，经纪人和潜在客户的库存。每个属性记录包含近20个字段，其中大多数在标准的“创建属性”对话框中表示。我们已经被要求简化创建财产记录的过程，通过覆盖标准的新建按钮，并显示一个简单的形式只有少数必要的领域。

没问题！我们走吧。

1. 点击 选择Dreamhouse
2. 点击 Properties.
3. 点击 New.

   这是我们要覆盖的形式。对于我们的新形式，我们只打算使用名称字段，其实际上是地址，价格，卧室和浴室的数量以及状态。

4. 点击 Cancel.
5. 点击 然后选择开发者控制台。
6. 在开发者控制台中，选择 File > New > Lightning Component.
7. 给组件一个PropertyDialog的名字。
8. 在组件配置下，选择Lightning Record Page 然后单击 Submit.

   你想知道为什么我们为这个组件选择闪电记录页吗？那么即使我们打算使用这个组件作为重写，在开发过程中，将它添加到页面上会很有帮助，以便我们可以在构建它时看到它。大。现在让我们继续创建表单。

创建一个表单

1. 在您的新组件中，在<aura：component>标签之间添加以下内容：

   <lightning:input aura:id="propName" name="propName" label="Property Name" required="true" />
   <lightning:input aura:id="propBeds" name="propBeds" label="Beds" />
   <lightning:input aura:id="propBaths" name="propBaths" label="Baths" />
   <lightning:input aura:id="propPrice" name="propPrice" label="Price" />
   <lightning:select aura:id="propStatus" name="propStatus" label="Status">
           <option value="status">Status</option>
   </lightning:select>
   <lightning:button variant="neutral" label="Cancel" />
   <lightning:button variant="brand" label="Submit" />
   

   Base Lightning组件在17年冬季首次推出，每次发布都增加更多。使用它们来构建Lightning组件的最酷的事情之一是他们处理Salesforce闪电设计系统（SLDS）为我们创建相应的HTML和CSS。名称字段是属性记录中唯一必需的字段。因此，Name的输入使用required =“true”属性。您还可以为<lightning：input>指定一个类型，例如数字，电子邮件或密码。有关可能的类型的完整列表，请参阅“Lightning组件开发人员指南”。
2. 单击 File > Save 以保存组件。
3. 切换回您的组织并单击 Properties.
4. 点击任何属性名称以导航到其属性记录页面。
5. 点击 然后选择 Edit Page.
6. 在Lightning App Builder中，将PropertyDialog组件拖动到页面上，并将其放置在右侧列的顶部。

   放置组件的位置并不重要，因为我们只把它放在一个页面上，以便在开发过程中看到它。当我们准备使用它作为覆盖时，我们从页面中删除它。

7. 点击 Save.
8. 通过单击激活，应用程序默认值，然后指定为应用程序默认值来激活页面。 选择Dreamhouse Lightning作为应用程序，然后单击下一步，然后单击保存。
9. 点击返回以退出App Builder。

你开始一个伟大的开始！ 但可悲的是，你的形式并没有做任何事情，也不是很好。 我们需要把它连接起来，这样它可以保存一个新的记录和修复样式，但在我们做之前，我们需要解决状态选择列表。