0

I am just starting to take a stab at Lightning and I have been struggling all day on something I hope is actually super simple. I want to take input from a user, click submit, and save the data.

What I have so far (and to my understanding is the correct path) is a Lightning App that calls my component. My component calls the controller, and my controller calls Apex. The params are not being passed to the Real_Estate__c object. The object is being inserted but will null values. What am I doing wrong?

JS Controller:

({
"newHome" : function(cmp) {
    var action = cmp.get("c.newHomeAPEX");
    action.setParams({ "name" : cmp.get("v.houseNameInput"), "address" : cmp.get("v.houseAddressInput") });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            alert('it worked!');
        }
        else if (state === "INCOMPLETE") {
            alert('incomplete');
        }
        else if (state === "ERROR") {
            alert('error');
        }
    });

    $A.enqueueAction(action);
}        
})

APEX:

public class RealEstateClass {
@AuraEnabled
public static String newHomeAPEX(String name, String address){
    system.debug('values:: ' + name);
    Real_Estate__c re = new Real_Estate__c(Name = name, Street_Address__c = address);
    insert re;
    system.debug('re: ' + re);
    return ('Hello from the server, ' + name);
}
}

Lightning Component:

<aura:component controller="RealEstateClass" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >    
    Street Address: <ui:inputText class="form-control" aura:id="houseAddressInput" />
    Home Name: <ui:inputText class="form-control" aura:id="houseNameInput" />
    <ui:button label="Save" press="{!c.newHome}" class="btn" />
</aura:component>
  • Troubleshooting Lightning is hard. console.log(); is your friend. It's kind of like a system.debug(); statement but for javascript. – John Thompson Oct 30 '17 at 1:36
4

If you're going about it the way you are, you'd want to use Component#find and then Component#get to get the value:

action.setParams({ 
    "name" : cmp.find("houseNameInput").get("v.value"), 
    "address" : cmp.find("houseAddressInput").get("v.value") });

You use Component#find to get a component by aura:id, and then Component#get to get the value from the component.


As an alternative to this method, you can use two-way data binding:

<aura:component controller="RealEstateClass" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="streetAddress" type="String" />
    <aura:attribute name="homeName" type="String" />

    Street Address: <ui:inputText value="{!v.streetAddress}" class="form-control" aura:id="houseAddressInput" />
    Home Name: <ui:inputText value="{!v.homeName}" class="form-control" aura:id="houseNameInput" />
    <ui:button label="Save" press="{!c.newHome}" class="btn" />
</aura:component>

Which then allows you to call Component#get directly:

action.setParams({ 
    "name" : cmp.get("v.homeName"), 
    "address" : cmp.get("v.streetAddress") });
  • thank you! I am struggling with this change over to lightning big time :( Your snippet worked great! – Olivia Oct 30 '17 at 4:00

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.