- Controller that takes the user input for the billing street
- send it to the Apex Controller which returns the same thing back
- Hides the section
- Shows a different section, then on click of a button shows the previous section
Result: Input fields no longer have the value, placeholder is gone, object still has correct values....It only happen when the section is hidden....
App
<aura:application description="myProblemApp" access="PUBLIC" extends="ltng:outApp"> <aura:dependency resource="c:myProblemComponent"/> </aura:application>
Component
<aura:component description="myProblemComponent" controller="myProblemController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="theAccount" access="public" default="{'sobjectType' : 'Account'}" type="Account" required="true"/>
<aura:attribute name="isEdit" access="public" type="Boolean" default="true"/>
<aura:renderIf isTrue="{!v.isEdit}">
<fieldset class="slds-form--compound">
<legend class="slds-form-element__label slds-text-title--caps">Address</legend>
<div class="slds-form-element__group">
<div class="slds-form-element__row">
<lightning:input aura:id="bAddress" name="bAddress" label="Address"
placeholder="Enter Billing Address"
type="String"
value="{!v.theAccount.BillingStreet}"
required="true"/>
</div>
</div>
</fieldset>
<div class="slds-align--absolute-center">
<lightning:button aura:id="save_btn" label="Save Billing Address" name="baButton" variant="brand"
onclick="{!c.upsertAccount}" disabled="false"/>
</div>
<aura:set attribute="else">
<article class="slds-card slds-card--compact">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-contact"
title="description of icon when needed">
<c:svgIcon category="standard" size="small" name="contact"
svgPath="/resource/AppFrontier_Assets/assets/icons/standard-sprite/svg/symbols.svg#user"/>
</span>
</div>
<div class="slds-media__body">
<h2>
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate">
<span class="slds-text-heading--small">Card Header</span>
</a>
</h2>
</div>
</header>
<div class="slds-no-flex">
<button type="button" onclick="{!c.editAddress}" class="slds-button slds-button--neutral">Edit
</button>
</div>
</div>
<div class="slds-card__body">
<div class="slds-grid slds-grid--align-center">
Card Body (custom goes in here)
</div>
</div>
<div class="slds-card__footer">Email</div>
</article>
</aura:set>
</aura:renderIf>
</aura:component>
JS Controller
({
doInit: function (component, event, helper) {
},
upsertAccount: function (component, event, helper) {
var action = component.get("c.upsertTheAccount");
var a = component.get("v.theAccount");
component.find('save_btn').set('v.disabled', true);
action.setParams({
"acc": JSON.stringify(a) //Need to stringify this or we get Unable to read sObject Error
});
action.setCallback(this, function (response) {
var state = response.getState();
if (state == "SUCCESS" && component.isValid()) {
var r = response.getReturnValue();
component.set("v.theAccount", r);
component.set('v.isEdit',false);
}
else {
console.log("failed ::: " + response.getError()[0].message); // Unable to read sObject
}
component.find('save_btn').set('v.disabled', false);
});
$A.enqueueAction(action);
},
editAddress : function(component){
console.log(component.get('v.theAccount'));
component.set('v.isEdit',true);
}
})
Apex Controller
public class myProblemController {
@AuraEnabled
public static Account upsertTheAccount(string acc) {
Account a = (Account)json.deserialize(acc,Account.class);
return a;
}
}
Apex Page
<apex:page id="myProblemPage" showHeader="false" sideBar="false" standardStylesheets="false">
<apex:includeLightning/>
<script>
$Lightning.use("c:myProblemApp", function () {
$Lightning.createComponent(
"c:myProblemComponent",
{},
"the_content",
function (cmp) {
});
});
</script>
<div id="the_content">
</div>
</apex:page>
Screens
On Load
Entered Value
After button click
On Edit Click
Now, i MUST be doing something fundementally wrong here cause this is such a basic scenario that if I am having this much trouble I find it hard to believe anyone can get anything done with lightning. I have spent my whole day trying to get this working but I can't.
I am leaning on you all for assistance....Otherwise, I give up.....
$A.util.toggleClass(ele,'sods-hide')
and replacing the renderIf with regular divs......Ugh....