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 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 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 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 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"
                          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 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");
        "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.

  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる