• Kris Hankins 7
  • NEWBIE
  • 0 Points
  • Member since 2014

  • Chatter
    Feed
  • 0
    Best Answers
  • 1
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 0
    Replies
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. 

formController.js....
 
({
	doInit : function(component, event, helper) {
        
        //Update expense counters
        helper.getExpenses(component);
		},
    
    
    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."}]);
				}
        	else{
            	amtField.setValid("v.value", true);
            	var newExpense = component.get("v.newExpense");
            	helper.createExpense(component, newExpense);
        		}
		},
    
})

formHelper.js.....
 
({
	getExpenses: function(component) {
        var action = component.get("c.getExpenses");
        var self = this;
        action.setCallback(this, function(a){
            conpoment.set("v.expenses", a.getReturnValue());
        	self.updateTotal(component);
                           });
    		$A.equenceAction(action);
		},
 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");
    	expenses.push(a.getReturnValue());
    	component.set("v.expenses", expenses);
    	this.updateTotal(component);
		});
	},
        
    upsertExpense : function(component, expense, callback){
    	var action = component.get("c.saveExpense");
		action.setParams({
    		"expense": expense
		});
		if (callback) {    
    		action.setCallback(this, callback);
			}
	$A.equenceAction(action);
},
      
    
      
})

MIDAS.app.....
 
<aura:application>
    <link href='/resource/bootstrap/' rel="stylesheet"/>
    <div class="container">
    	<h1>Add Expense</h1>
        <ascotest:form/>
    </div>
</aura:application>

form.cmp....
 
<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 -->
    <form>
    	<fieldset>
            <ui:inputText aura:id="expname" label="Expense Name" 
                          class="form-control"
                          value="{!v.newExpense.name}"
                          placeholder="My Expense" required="true"/>
            <ui:inputNumber aura:id="amount" label="Amount"
                            class="form-control"
                            value="{!v.newExpense.ascotest__Amount__c}"
                            placeholder="20.80" required="true"/>
            <ui:inputText aura:id="client" label="Client"
                            class="form-control"
                            value="{!v.newExpense.ascotest__Client__c}"
                          placeholder="ABC Co."/>
            <ui:inputDateTime aura:id="expdate" label="Expense Date"
                              class="form-control"
                              value="{!v.newExpense.ascotest__Date__c}"
                              displayDatePicker="true"/>
            <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed"
                              value="{!v.newExpense.ascotest__Reimbursed__c}"/>
            <ui:button label ="Submit" press="{!c.createExpense}"/>         
                    
         </fieldset>
    </form>
    
    <!--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>
        
    	<div class="alert alert-success">
        <h3>No. of Expenses</h3><ui:outputNumber value="{!v.exp}"/>
        </div>
    </div>
    
    <!-- Display expense records -->
    <div class="row">
    
    	<aura:iteration items="{!v.expenses}" var="expense">
            <ascotest:expenseList expense="{!expense}"/>
        </aura:iteration>   
    </div>        
    
</aura:component>

ExpenseController.apxc...
 
public class ExpenseController {
    
    @AuraEnabled
    public static List<Expense__c> getExpenses(){
        
        return [SELECT id, name, amount__c, client__c, date__c,
               reimbursed__c, createdDate FROM Expense__c];
    }
    
    @AuraEnabled
    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? 
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. 

formController.js....
 
({
	doInit : function(component, event, helper) {
        
        //Update expense counters
        helper.getExpenses(component);
		},
    
    
    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."}]);
				}
        	else{
            	amtField.setValid("v.value", true);
            	var newExpense = component.get("v.newExpense");
            	helper.createExpense(component, newExpense);
        		}
		},
    
})

formHelper.js.....
 
({
	getExpenses: function(component) {
        var action = component.get("c.getExpenses");
        var self = this;
        action.setCallback(this, function(a){
            conpoment.set("v.expenses", a.getReturnValue());
        	self.updateTotal(component);
                           });
    		$A.equenceAction(action);
		},
 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");
    	expenses.push(a.getReturnValue());
    	component.set("v.expenses", expenses);
    	this.updateTotal(component);
		});
	},
        
    upsertExpense : function(component, expense, callback){
    	var action = component.get("c.saveExpense");
		action.setParams({
    		"expense": expense
		});
		if (callback) {    
    		action.setCallback(this, callback);
			}
	$A.equenceAction(action);
},
      
    
      
})

MIDAS.app.....
 
<aura:application>
    <link href='/resource/bootstrap/' rel="stylesheet"/>
    <div class="container">
    	<h1>Add Expense</h1>
        <ascotest:form/>
    </div>
</aura:application>

form.cmp....
 
<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 -->
    <form>
    	<fieldset>
            <ui:inputText aura:id="expname" label="Expense Name" 
                          class="form-control"
                          value="{!v.newExpense.name}"
                          placeholder="My Expense" required="true"/>
            <ui:inputNumber aura:id="amount" label="Amount"
                            class="form-control"
                            value="{!v.newExpense.ascotest__Amount__c}"
                            placeholder="20.80" required="true"/>
            <ui:inputText aura:id="client" label="Client"
                            class="form-control"
                            value="{!v.newExpense.ascotest__Client__c}"
                          placeholder="ABC Co."/>
            <ui:inputDateTime aura:id="expdate" label="Expense Date"
                              class="form-control"
                              value="{!v.newExpense.ascotest__Date__c}"
                              displayDatePicker="true"/>
            <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed"
                              value="{!v.newExpense.ascotest__Reimbursed__c}"/>
            <ui:button label ="Submit" press="{!c.createExpense}"/>         
                    
         </fieldset>
    </form>
    
    <!--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>
        
    	<div class="alert alert-success">
        <h3>No. of Expenses</h3><ui:outputNumber value="{!v.exp}"/>
        </div>
    </div>
    
    <!-- Display expense records -->
    <div class="row">
    
    	<aura:iteration items="{!v.expenses}" var="expense">
            <ascotest:expenseList expense="{!expense}"/>
        </aura:iteration>   
    </div>        
    
</aura:component>

ExpenseController.apxc...
 
public class ExpenseController {
    
    @AuraEnabled
    public static List<Expense__c> getExpenses(){
        
        return [SELECT id, name, amount__c, client__c, date__c,
               reimbursed__c, createdDate FROM Expense__c];
    }
    
    @AuraEnabled
    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?