trailhead

Make the Component Context-Aware

Now that we've successfully overridden the New button, with only a little bit of work, we can reuse the component to override the Edit button as well. This is actually a little silly, because when we override the Edit button, it also disables the inline editing ability on the standard record page. This means that we'd never be able to edit anything but the five fields in the dialog. But let's do it anyway because it could be useful in another context.

Create Code to Handle Context

  1. In the Developer Console, switch to the PropertyDialog component.
  2. Add a new aura:attribute on a new line before force:recordData.

    <aura:attribute name="modalContext" type="String" default="New" />
    
  3. Change the <h2> tag that is the title of the modal to the following.

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

    By defining the context of the title as an aura:attribute, we can easily change it from New to Edit when the modal is used to edit a record.

  4. Switch to the PropertyDialogController.

  5. Add a new line just under doInit : function(component, event, helper) { and add the following code.

    var recId = component.get("v.recordId");
    if (recId) {
        component.set("v.modalContext", "Edit");
    }
    
  6. Wrap the rest of the function in an if statement.

    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;
                }
            })
        );
    }
    

    Now when the component is loaded, it checks for the presence of recordId. Of course, when it’s used with the New button, there’s no recordId; therefore, the function creates the new record. But if the recordId exists, the modalContext attribute is set to Edit.

  7. Save both files.

Prepopulate Fields

When we use the dialog to edit a record, we obviously need the current field values to already be in the dialog (you can’t edit what you can’t see).

  1. Switch back to the PropertyDialog component.
  2. Add value="{!v.propertyRecord.Name}", value="{!v.propertyRecord.Beds__c}", value="{!v.propertyRecord.Baths__c}", and value="{!v.propertyRecord.Price__c}" to the respective lightning:input tags.
  3. Add value="{!v.propertyRecord.Status__c}" to the lightning:select.

    Your code should look like this.

    <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. Save the file.

Update the Cancel Button

On a property record page, when the user clicks the Cancel button, right now they redirect back to the property list page. Let’s change this, so that users end up on the property record page instead.

  1. Switch back to PropertyDialogController.
  2. Replace the cancelDialog function with the following code.

    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);
        }
    }
    

    Once again, we're checking to see if a recordId exists. If it does, we know we’re on a record page and will return to that page.

  3. Save the file.

  4. Switch back to your org and click alt text: Setup Icon and select Setup

  5. Click Object Manager.

  6. Click Property.

  7. Click Buttons, Links, and Actions.

  8. Click alt text: Dropdown menu icon for the Edit action and select Edit.

  9. Select Lightning Experience Override as Lightning Component.

  10. Select c:PropertyDialog as the bundle to override with and click Save.

  11. Click alt text: App Launcher icon and select Dreamhouse Lightning.

  12. Click Properties, then click any property name to navigate to its property record page, and then refresh this page.

  13. Click Edit to test out the dialog in the context of a record page.

High fives all around! As you’ve just learned, it’s incredibly easy to override Standard Actions and Buttons with a Lightning component. Sure, there are some considerations when doing this, but the process itself is really straightforward. Now, go forth and override!

retargeting