📢 Attention Salesforce Certified Trailblazers! Maintain your credentials and link your Trailhead and Webassessor accounts by December 6th. Learn more.
close
Start tracking your progress
Trailhead Home
Trailhead Home

Override a Standard Action with a Lightning Component

We’ve finally arrived! It’s time to use our new Lightning component as a standard button override. This is actually quite simple to do, and can be done with almost any Lightning component that you create. There are a few considerations, but we'll tackle those shortly.

Add the Override Interface

  1. On the property record page in your org, click alt text: Setup Icon and select Edit Page.
  2. Click on our new Lightning component to select it, then click alt text: Delete component to remove it from the page.
  3. Click Save and then Back to return to your property detail page.

    We’re now ready to use the component as a button override, so there’s no need for it to be on the page anymore.

  4. In the Developer Console, switch back to the PropertyDialog component.

  5. Add lightning:actionOverride to the list of interfaces in the aura:component tag. It should now look like this:

    <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" access="global" >
    
  6. Save the file.

    It doesn't matter what order the interfaces appear in. lightning:actionOverride is the magic interface that instructs Lightning Experience to let us use this component to override a standard button or action.

Set Up the Override

  1. Back in your org, click alt text: Setup Icon and select Setup.
  2. Click Object Manager.
  3. Click Property.
  4. Click Buttons, Links, and Actions.
  5. Click alt text: Dropdown menu icon next to New and select Edit.
  6. Select Lightning Experience Override as Lightning Component.
  7. Select c:PropertyDialog as the bundle to override with.

    alt text: Override with Lightning Component

    The select list will list all of the components in your org that have the lightning:actionOverride interface declaration.

  8. Click Save.

  9. Click alt text: App Launcher icon and select Dreamhouse Lightning, then click Properties.

  10. Refresh this page, and then click New to create a new property.

    And there it is! You've overridden the standard New button on the Property object with a Lightning component.

Note: If you don’t see your new form, then you may need to refresh your page again. Click Properties, refresh the page, and then click New.

Add SLDS Styling to Our Lightning Component

Between friends, you have to admit, the component isn’t very pretty. When you use a Lightning component as an override, it fills the entire page. So let's add a little SLDS magic to make it look better.

  1. In the Developer Console, replace the entire code for the PropertyDialog component with:

    <aura:component implements="lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId" access="global">
        <aura:attribute name="picklistValues" type="Object" />
        <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" />
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
        <c:PickListValues sObjectName="Property__c" fieldName="Status__c" picklistValues="{!v.picklistValues}" />
    
        <div aura:id="editDialog" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                    <div class="slds-modal__header">
                        <h2 class="slds-text-heading--medium">New Record</h2>
                </div>
                <div class="slds-modal__content slds-p-around--medium slds-grid slds-wrap ">
                    <lightning:input aura:id="propName" name="propName" label="Property Name" required="true" class="slds-size--1-of-1 slds-p-horizontal_x-small" />
                    <lightning:input aura:id="propBeds" name="propBeds" label="Beds" class="slds-size--1-of-2 slds-p-horizontal_x-small" />
                    <lightning:input aura:id="propBaths" name="propBaths" label="Baths" class="slds-size--1-of-2 slds-p-horizontal_x-small" />
                    <lightning:input aura:id="propPrice" name="propPrice" label="Price" class="slds-size--1-of-2 slds-p-horizontal_x-small" />    
                    <lightning:select aura:id="propStatus" name="propStatus" label="Status" 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>
                </div>
                <div class="slds-modal__footer">                
                    <lightning:button variant="neutral" label="Cancel" />
                    <lightning:button variant="brand" label="Submit" onclick="{!c.saveRecord}" />
                </div>
            </div>
        </div>
        <div aura:id="overlay" class="slds-backdrop slds-backdrop--open"></div>
    </aura:component>
    

    Using the markup for a modal from the Salesforce Lightning Design System makes the page look a lot better.

  2. Save the file.

  3. In your org, refresh the properties page to see the new model. If you're not already on the form, and then click New to see it.

alt text: New record dialog

Now doesn’t that look better?

Enable the Cancel Button

  1. In Developer Console, within the PropertyDialog component, add an onclick handler onclick="{!c.cancelDialog}" to the Cancel button.
  2. Save the file.
  3. Switch to the PropertyDialogController and add the following code to create a new cancelDialog function that takes component and helper as parameters (don't forget the comma):

    cancelDialog : function(component, helper) {
    }
    
  4. Add the following to the function:

    var homeEvt = $A.get("e.force:navigateToObjectHome");
    homeEvt.setParams({
        "scope": "Property__c"
    });
    homeEvt.fire();
    

    Similar to the navigateTo function that we created, this function is simply invoking the navigateToObjectHome event, sending the user back to the main Properties page.

  5. Save the file.

  6. In your org, refresh the properties page, then click Cancel.

You’re back at the property home page.