Override a Standard Action with an Aura Component

We’ve finally arrived! It’s time to use our new Aura component as a standard button override. This is actually quite simple to do, and can be done with almost any Aura 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 the gear alt text: Setup Icon and select Edit Page.
  2. Click on our new Lightning component to select it, then click the trash can 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:componenttag. 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 the Setup gear alt text: Setup Icon and select Setup.
  2. Click Object Manager.
  3. Click Property.
  4. Click Buttons, Links, and Actions.
  5. Click the down arrow 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 Aura 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 the App Launcher 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 Aura component

Between friends, you have to admit, the component isn’t very pretty. When you use an Aura 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 PropertyDialogcomponent 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"
                          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 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>
                <div class="slds-modal__footer">                
                    <lightning:button variant="neutral" label="Cancel" />
                    <lightning:button variant="brand" label="Submit" onclick="{!c.saveRecord}" />
        <div aura:id="overlay" class="slds-backdrop slds-backdrop--open"></div>
    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 PropertyDialogControllerand 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");
        "scope": "Property__c"
    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.

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities