+ Start a Discussion
Kris Hankins 7Kris Hankins 7 

Unable to get Lightning quick start app to execute

I am going through the LightningComponents Developer Guide from DF'14 and after getting through the quick start section on setting up the expense app everything looks correct but it will not function correctly. The browser page for the app displays, I can enter the data into the fields, but there is an issue with the button click function. If I click the button with a null Amount__c value in place it does process the error, which is telling me it is calling the createExpense function and the if-else statement inside that function. Still, when I enter correct data, nothing is saved or listed. I'm including the code from the formControlle.js as I have it in the console. 

	doInit : function(component, event, helper) {
        //Update expense counters
    createExpense  : function(component, event, helper){
    	var amtField = component.find("amount");
    	var amt = amtField.get("v.value");
    		if (isNaN(amt) || amt==''){
    			amtField.setValid("v.value", false);
    			amtField.addErrors("v.value", [{message:"Enter an expense amount."}]);
            	amtField.setValid("v.value", true);
            	var newExpense = component.get("v.newExpense");
            	helper.createExpense(component, newExpense);

	getExpenses: function(component) {
        var action = component.get("c.getExpenses");
        var self = this;
        action.setCallback(this, function(a){
            conpoment.set("v.expenses", a.getReturnValue());
 updateTotal : function(component){
    var expenses = component.get("v.expenses");
    var total = 0;
    for(var i = 0; i<expenses.length; i++){
        var e = expenses[i];
        total += e.ascotest__Amount__c;
    //Update counters
    component.set("v.total", total);
    component.set("v.exp", expenses.length);
    createExpense : function(component, expense){
    	this.upsertExpense(component, expense, function(a){
    	var expenses = component.get("v.expenses");
    	component.set("v.expenses", expenses);
    upsertExpense : function(component, expense, callback){
    	var action = component.get("c.saveExpense");
    		"expense": expense
		if (callback) {    
    		action.setCallback(this, callback);

    <link href='/resource/bootstrap/' rel="stylesheet"/>
    <div class="container">
    	<h1>Add Expense</h1>

<aura:component controller="ascotest.ExpenseController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="expenses" type="ascotest.Expense__c[]"/>
    <aura:attribute name="newExpense" type="ascotest.Expense__c"
                     default="{ 'sobjectType': 'ascotest__Expense__c',
                              'Name': '',
                              'ascotest__Amount__c': 0,
                              'ascotest__Client_c': '',
                              'ascotest__Date__c': '',
                              'ascotest__Reimbursed__c': false
    <!-- Attributes for Expense Counters-->
    <aura:attribute name="total" type="Double" default="0.00" />
    <aura:attribute name="exp" type="Double" default="0" />
    <!--Input Form using components -->
            <ui:inputText aura:id="expname" label="Expense Name" 
                          placeholder="My Expense" required="true"/>
            <ui:inputNumber aura:id="amount" label="Amount"
                            placeholder="20.80" required="true"/>
            <ui:inputText aura:id="client" label="Client"
                          placeholder="ABC Co."/>
            <ui:inputDateTime aura:id="expdate" label="Expense Date"
            <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed"
            <ui:button label ="Submit" press="{!c.createExpense}"/>         
    <!--Expense Counters-->
	<div class="row">
        <!--Change the counter color to red if the total amount is more than 100 -->
        <div class="{!v.total >= 100 ? 'alert alert-danger' : 'alert alert-success'}">
        <h3>Total Expenses</h3>$<ui:outputNumber value="{!v.total}" format=".00"/>
    	<div class="alert alert-success">
        <h3>No. of Expenses</h3><ui:outputNumber value="{!v.exp}"/>
    <!-- Display expense records -->
    <div class="row">
    	<aura:iteration items="{!v.expenses}" var="expense">
            <ascotest:expenseList expense="{!expense}"/>

public class ExpenseController {
    public static List<Expense__c> getExpenses(){
        return [SELECT id, name, amount__c, client__c, date__c,
               reimbursed__c, createdDate FROM Expense__c];
    public static Expense__c saveExpense(Expense__c expense) {
        	upsert expense;
        	return expense;


Only things I left out of the post are the .css files. 

I created a dev org pre-'15 release so I know the org supports Lightning. I have enabled Lightning components in the org. I have checked the code against the guide about 5 times now. Everything is identical except the namespace I added. 

Has anyone else ran into this yet? 
Diana Widjaja MDiana Widjaja M
In formHelper.js, there seems to be a typo in your code (line 9 and 41). Has that been corrected? It should read $A.enqueueAction(action). 
Source: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/qs_aotp_app_step3_model.htm