+ Start a Discussion
vleandrovleandro 

Input data using forms: Lightning Components Basics

I'm following the sample code in this particular Trailhead.   I've even "copied" the code itself, and still when I go into Preview and try and create an expense; nothing happens.  No data is being posted back to Expense__c.

Even the debug shows the data is getting captured

User-added image

If that's hard to read its:
Create expense: {"sobjectType":"Expense__c","Name":"Test","Amount__c":100,"Client__c":"ABC","Date__c":"2016-11-02","Reimbursed__c":false}
components/c/expenses.js:44 Expenses before 'create': []
components/c/expenses.js:47 Expenses after 'create': [{"sobjectType":"Expense__c","Name":"Test","Amount__c":100,"Client__c":"ABC","Date__c":"2016-11-02","Reimbursed__c":false}]

I've got to be missing something somewhere.

Here's the code:

expensesApp.app
<aura:application extends="force:slds">
    
    <!-- This component is the real "app -->
    <c:expenses /> 
	
</aura:application>

expenses.cmp
<aura:component >
	
    <aura:attribute name="expenses" type="Expense__c[]"/>
    
    <aura:attribute name="newExpense" type="Expense__c"
     default="{ 'sobjectType': 'Expense__c',
                    'Name': '',
                    'Amount__c': 0,
                    'Client__c': '',
                    'Date__c': '',
                    'Reimbursed__c': false }"/>
    
    <!-- PAGE HEADER -->
    <div class="slds-page-header" role="banner">
    	<div class="slds-grid">
        	<div class="slds-col">
            	<p class="slds-text-heading--label">Expenses</p>
                <h1 class="slds-text-heading--medium">My Expenses</h1>
            </div>
        </div>
    </div>
    <!-- / PAGE HEADER -->
    <div class="slds-col slds-col--padded slds-p-top--large">
    
        <div aria-labelledby="newexpenseform">
        
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
            
                <legend id="newexpenseform" class="slds-text-heading--small slds-p-vertical--medium">
                	Add Expense
                </legend>
                
                <!-- CREATE NEW EXPENSE FORM -->
                <form class="slds-form--stacked">
                
                    <div class="slds-form-element slds-is-required">
                    	<div class="slds-form-element__control">
                        	<ui:inputText aura:id="expname" label="Expense Name" 
                            	class="slds-input" 
                                labelClass="slds-form-element__label"
                                value="{!v.newExpense.Name}"
                                required="true" />
                        </div>
                    </div>
                    
                    <div class="slds-form-element slds-is-required">
                    	<div class="slds-form-element__control">
                        	<ui:inputNumber aura:id="amount" label="Amount"
                            	class="slds-input"
                                labelClass="slds-form-element__label"
                                value="{!v.newExpense.Amount__c}"
                                required="true" />
                        </div>
                    </div>
                    
                    <div class="slds-form-element">
                    	<div class="slds-form-element__control">
                        	<ui:inputText aura:id="client" label="Client"
                            	class="slds-input"
                                labelClass="slds-form-element__label"
                                value="{!v.newExpense.Client__c}"
                                placeholder="ABC Co." />
                        </div>
                    </div>
                    
                    <div class="slds-form-element">
                    	<div class="slds-form-element__control">
                        	<ui:inputDate aura:id="expdate" label="Expense Date"
                            	class="slds-input"
                                labelClass="slds-form-element__label"
                                value="{!v.newExpense.Date__c}"
                                displayDatePicker="true" />
                        </div>
                    </div>
                    
                    <div class="slds-form-element">
                    	<ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
                        	class="slds-checkbox"
                            labelClass="slds-form-element__label"
                            value="{!v.newExpense.Reimbursed__c}" />
                    </div>
                    
                    <div class="slds-form-element">
                    	<ui:button label="Create Expense"
                        	class="slds-button slds-button--brand"
                            press="{!c.clickCreateExpense}" />
                    </div>
                    
                </form>
                <!-- / CREATE NEW EXPENSE FORM -->
                
            </fieldset>
            <!-- / BOXED AREA -->
        </div>
    </div>
    <!-- / NEW EXPENSE FORM -->
    
</aura:component>

expensesController.js
({
    clickCreateExpense: function(component, event, helper) {

        // Simplistic error checking
        var validExpense = true;

        // Name must not be blank
        var nameField = component.find("expname");
        var expname = nameField.get("v.value");
        if ($A.util.isEmpty(expname)){
            validExpense = false;
            nameField.set("v.errors", [{message:"Expense name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }

        // ... hint: more error checking here ...

        // If we pass error checking, do some real work
        if(validExpense){
            // Create the new expense
            var newExpense = component.get("v.newExpense");
            console.log("Create expense: " + JSON.stringify(newExpense));
            helper.createExpense(component, newExpense);
        }
    }
})

expensesHelper.js
({
    createExpense: function(component, expense) {
        var theExpenses = component.get("v.expenses");
 
        // Copy the expense to a new object
        // THIS IS A DISGUSTING, TEMPORARY HACK
        var newExpense = JSON.parse(JSON.stringify(expense));
 
        console.log("Expenses before 'create': " + JSON.stringify(theExpenses));
        theExpenses.push(newExpense);
        component.set("v.expenses", theExpenses);
        console.log("Expenses after 'create': " + JSON.stringify(theExpenses));
    }
})

Thanks to all. 
Best Answer chosen by vleandro
vleandrovleandro
I think (looking for validation) that the following statement is what is confusing me.

"Reload and run the app, add at least two expenses, and look at the structure of theExpenses. Now comment out the component.set() line, and do it again."

I think I'm still not wired up to actually "commit" the data to the database (so to speak), but the example is simply having me run two tests to verify the code in debug.