• Diana Widjaja M
  • NEWBIE
  • 5 Points
  • Member since 2014


  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 5
    Replies
Hi,
I am going throught the example and I am at the first part where you should be able to save dating but it doe not save data and it does not give me an error.  I put an alert statement to make sure that the button is actually firing the code.  I have no idea if the object has data in it because all the Alert returns is "[object Object]"  It is not like in the Apex debugger where you can see the content of the object.  It feels like this java script frame work is a step back in time to me.  Not user friend development at all!

Below is part of the example where I put an alert statement that does pop up but like I said it doesn't show any content that the expense object would be holding.

Any ideas -- I have looked at this code over and over and over and over and I see it to be written as I see in the book!
 
upsertExpense : function(component, expense, callback) {    
        alert("upsertExpense before saveExpense call!");
    	var action = component.get("c.saveExpense"); 
        
        alert("upsertExpense after saveExpense action! " + expense);
        
        action.setParms({
            "expense": expense
        });
        if (callback) {
        	action.setCallback(this, callback);
        }
        $A.enqueueAction(action);

    },//Delimited for future code

Thanks in advance for your support.
Hi,

Completed the Expense tracker labs , but encountered following two issues

1. Submit button seems to be non responsive , nothing happens when you click it.
2. Event seems to fire but gives an exception "Internal server error". 

Anyone able to do this without any issues? If so please share code.
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?