Lightning-覆盖标准按钮（5）

现在我们已经成功地重写了New按钮，只需要一点点工作，我们也可以重用组件来覆盖Edit按钮。这实际上有点愚蠢，因为当我们覆盖Edit按钮时，它也禁用标准记录页面的内联编辑能力。这意味着我们永远无法编辑对话框中的五个字段。但是，让我们这样做，因为它可能在另一个环境中有用。

创建代码来处理上下文

1. 在Developer Console中，切换到PropertyDialog组件。
2. 在force之前的新行上添加新的aura：属性：recordData：

   <aura:attribute name="modalContext" type="String" default="New" />
   

3. 将作为模式标题的<h2>标签更改为：

   <h2 class="slds-text-heading--medium">{!v.modalContext} Record</h2>
   

   通过将标题的上下文定义为aura：属性，当模式用于编辑记录时，我们可以轻松地将其从“新建”更改为“编辑”。

4. 切换到PropertyDialogController。
5. 在doInit：function（component，event，helper）{下面添加一个新行{并添加下面的代码：

   var recId = component.get("v.recordId");
   if (recId) {
       component.set("v.modalContext", "Edit");
   }
   

6. 在if语句中包装函数的其余部分：

   if (!recId) {
       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;
               }
           })
       ); 
   }
   

   现在，当组件加载时，它检查recordId的存在。当然，当它与New按钮一起使用时，没有recordId;因此，该功能创建新的记录。但是，如果recordId存在，modalContext属性设置为Edit。
7. 保存这两个文件。

预填充字段

当我们使用对话框编辑记录时，我们显然需要当前的字段值已经在对话框中（你不能编辑你看不到的东西）。

1. 切换回PropertyDialog组件。
2. 添加 value="{!v.propertyRecord.Name}", value="{!v.propertyRecord.Beds__c}", value="{!v.propertyRecord.Baths__c}", 和 value="{!v.propertyRecord.Price__c}" 到相应的lightning:input 标签.
3. 添加 value="{!v.propertyRecord.Status__c}" 到 lightning:select.

   你的代码应该是这样的：

   <lightning:input aura:id="propName" name="propName" label="Property Name" value="{!v.propertyRecord.Name}" required="true" class="slds-size--1-of-1 slds-p-horizontal_x-small" />
   <lightning:input aura:id="propBeds" name="propBeds" label="Beds" value="{!v.propertyRecord.Beds__c}" class="slds-size--1-of-2 slds-p-horizontal_x-small" />
   <lightning:input aura:id="propBaths" name="propBaths" label="Baths" value="{!v.propertyRecord.Baths__c}" class="slds-size--1-of-2 slds-p-horizontal_x-small" />
   <lightning:input aura:id="propPrice" name="propPrice" label="Price" value="{!v.propertyRecord.Price__c}" class="slds-size--1-of-2 slds-p-horizontal_x-small" />    
   <lightning:select aura:id="propStatus" name="propStatus" label="Status" value="{!v.propertyRecord.Status__c}" class="slds-size--1-of-2 slds-p-horizontal_x-small">
       <aura:iteration items="{!v.picklistValues}" var="item">
           <option value="{!item}">{!item}</option>
       </aura:iteration>
   </lightning:select>
   

4. 保存文件。

更新取消按钮

在财产记录页面上，当用户点击取消按钮，现在他们重新回到属性列表页面。让我们改变这一点，以便用户最终在财产记录页上。

1. 切换回PropertyDialogController。
2. 用以下代码替换cancelDialog函数：

   cancelDialog: function(component, event, helper) {
       var recId = component.get("v.recordId");
       if (!recId) {
           var homeEvt = $A.get("e.force:navigateToObjectHome");
           homeEvt.setParams({
               "scope": "Property__c"
           });
           homeEvt.fire();
       } else {
           helper.navigateTo(component, recId);
       }
   }
   

   再一次，我们检查一下recordId是否存在。如果是这样，我们知道我们正在一个记录页面，并将返回到该页面。
3. 保存文件。
4. 切换回您的组织并单击替代文本：设置图标并选择 Setup
5. 点击 Object Manager.
6. 点击 Property.
7. 点击 Buttons, Links, and Actions.
8. 点击 然后选择编辑。
9. 选择覆盖 Lightning Component Bundle.
10. 选择 c:PropertyDialog 作为要覆盖的包，然后单击保存。
11. 点击应用启动器图标，然后选择Dreamhouse Lightning。
12. 单击“属性”，然后单击任何属性名称以导航到其属性记录页面，然后刷新此页面。
13. 单击编辑按钮以在记录页面的上下文中测试对话框。

高五分！ 正如你刚刚学到的，使用Lightning组件覆盖标准动作和按钮是非常容易的。 当然，这样做有一些考虑，但这个过程本身是非常简单的。 现在，去超越！