5
  1. Controller that takes the user input for the billing street
  2. send it to the Apex Controller which returns the same thing back
  3. Hides the section
  4. 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

enter image description here

Entered Value

enter image description here

After button click

enter image description here

On Edit Click

enter image description here

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.....

3
  • 1
    Your post has drastically reduced my fledgling interest to convert our SF from Classic to Lightning. Looks like we will further delay our lightning implementation by few more months :) – Varun Jan 11 '17 at 2:36
  • Looks like the only way so fare is liberal use of $A.util.toggleClass(ele,'sods-hide') and replacing the renderIf with regular divs......Ugh.... – Eric Jan 11 '17 at 2:56
  • @ZenSeeker - Don't give up. Its really cool and fun to learn (frustrating at times). It seems very fickle too but when it works it is pretty cool. Once I get it down I will prefer it to VF any day.... – Eric Jan 11 '17 at 6:45
8

I was able to reproduce the issue, its seems like you are using the deprecated aura:renderIf instead of recommended aura:if.

aura:renderIf is Deprecated. Use aura:if instead.

Using aura:if will fix your issue.

6
  • Using auraIf yields Cannot read property 'set' of undefined for me. Will check into it more. Maybe it is the beta component being used with a depreciated component – Eric Jan 11 '17 at 3:54
  • @Eric I ran your code in my dev org(winter'17) using a lightning app with the above mentioned fix, the code worked fine. – Praveen Jan 11 '17 at 3:57
  • Yea, the above is so you could reproduce it. It is not my exact code. Right now I cannot use aura:if. Caught between rock and hard place..... – Eric Jan 11 '17 at 3:58
  • 5
    BTW This is what i LOVE about this place. Something that took me all day (learning curve) is solved within an hour by someone who has seen it before. I would have still been working on this until who knows when. A BIG Thank You!!!! – Eric Jan 11 '17 at 4:35
  • 2
    Glad I could help :-). Just doing my part for this awesome community. – Praveen Jan 11 '17 at 4:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.