Apex Code Development You need to sign in to do that
Don't have an account?
override a standard action lightning component trailhead module: Modal not working
In the Trailhead module called "Override A Standard Action with a Lightning Component", everything is going OK up till the point where we add SLDS styling to the cmp to make it a modal. They provide the code (see below), but for some reason, it's not displaying as modal for me. (Yes, I've refreshed, multiple times, even relaunching the playground.) Anybody else experiencing this?
<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>
I copied your code and It is working fine.
I think you would have missed extends="force:slds" in your application.
Here is the output:
Here is my application code:
<aura:application extends="force:slds"> <c:testComp /> </aura:application>The testComp component contains your code.
Hope this helps,
Sandeep
All Answers
I copied your code and It is working fine.
I think you would have missed extends="force:slds" in your application.
Here is the output:
Here is my application code:
<aura:application extends="force:slds"> <c:testComp /> </aura:application>The testComp component contains your code.
Hope this helps,
Sandeep