+ Start a Discussion
Nyjil Joshi 7Nyjil Joshi 7 

Lightning - Expense tracker - Not working as expected


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.
Diana Widjaja MDiana Widjaja M
Hi Nyjil, 
Are you seeing any errors in the browser console or Logs tab of your Dev Console? If you leave the fields empty and hit the Submit button, does your app warns you of an empty amount field per #2 of https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/qs_aotp_app_step5_cmp_detail.htm (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/qs_aotp_app_step5_cmp_detail.htm" target="_blank)? That would at least tell if createExpense in formController.js is being called correctly before you check your code in formHelper.js. You might also want to check that upsertExpense in formHelper is calling your Apex controller correctly since the server trip has to happen first before that record is displayed.
Nyjil Joshi 7Nyjil Joshi 7
Hi Diana, Really appreciate your help here. I did check out what you mentioned 1. I removed value from amount and clicked on "Submit" - no response , it slike the button click is not happening at all. Possibly this is where the issue is.  My code on form.cmp , i didnt get any error when i saved so all seems to be in order. The application is displayed for data entry with list of records displayed. But Submit button does not respond. 2. Regarding second issue when i check / uncheck "ReImbursed" check box it gives error "Internal server error"
Diana Widjaja MDiana Widjaja M
That's strange that nothing seems to happen when you click the button. Let's make sure that your button is wired up correctly to createExpense in formController.js. Your button should be wired up to the controller using press="{!c.createExpense}". Assuming you have the code from the Quick Start, you should have set these attributes in form.cmp (np refers to your namespace):
<aura:attribute name="expenses" type="np.Expense__c[]"/>
<aura:attribute name="newExpense" type="np.Expense__c"
             default="{ 'sobjectType': 'np__Expense__c',
                         'Name': '',
                         'np__Amount__c': 0,
                         'np__Client__c': '', 
                         'np__Date__c': '',
                         'np__Reimbursed__c': false
createExpense in formController.js should look like this:
createExpense : function(component, event, helper) {
    // get the value in the amount field
    var amtField = component.find("amount");
    var amt = amtField.get("v.value");
    // display an error if amount is not a number or blank 
    if (isNaN(amt)||amt==''){
        amtField.setValid("v.value", false);
        amtField.addErrors("v.value", [{message:"Enter an expense amount."}]);
    else {
        // clear the error
        amtField.setValid("v.value", true);
        var newExpense = component.get("v.newExpense");
        helper.createExpense(component, newExpense);

 Is your code finding the "amount" field at this point?  You can try to add console.log(amt) after amtField.get("v.value") to see if the value is being captured. This field should correspond to aura:id on the ui:inputNumber component in form.cmp.
<ui:inputNumber aura:id="amount" label="Amount" 
                    placeholder="20.80" required="true"/>

If your createExpense code in formController.js is correct, it should call helper.createExpense in formHelper.js.
createExpense: function(component, expense) {
      this.upsertExpense(component, expense, function(a) {
        var expenses = component.get("v.expenses");

        // update the list of records in the UI
        component.set("v.expenses", expenses);
        // update the counters
This helper then gets the saveExpense Apex controller, which saves the new record, and updates the app UI via 
component.set("v.expenses", expenses); in helper.createExpense.
    public static Expense__c saveExpense(Expense__c expense) {
        upsert expense;
        return expense;
Hope this helps you find the problem. It would be easier for you to debug the event error if you get this record creation part fixed first. Good luck!

i have the same Problem. My Button dont fired.
When I turn on the console.log(amt) after amtField.get("Value") nothing happens. Why?


Emma BruceEmma Bruce
I had this issue but it was because I didn't have the controller attibute set in my component.
<aura:component controller="NewExpense" implements="forceCommunity:availableForAllPageTypes" access="global" >

Susan StevensonSusan Stevenson
Hi All,

I'm getting this issue at present - when I remove the expense name, the validation fires but the button doesn't seem to actually do anything other than that (even when all fields are legitimately completed).  Should I be getting redirected? I cannot see any items in my expenses object in SF.

I have copied the code several times and still end up with the same.. 

Emma, your solution did not work either :-(

tim james 9tim james 9
Hi all - I was having a similar (non) issue, until I looked in the browser console. 

I am using Safari (so, sue me!) I copied and pasted the code, and clicked the button - nothing happened. The Name field validation error appeared when I didn't enter a value.

I didn't realise that I had the console set to display "errors", as soon as I switched it to "logs" I could see the JSON object.
[Log] Create expense: {"sobjectType":"Expense__c","Name":"Test 1","Amount__c":100,"Client__c":"","Date__c":"2017-05-31","Reimbursed__c":false}

[Log] Expenses before 'create': []

[Log] Expenses after 'create': [{"sobjectType":"Expense__c","Name":"Test 1","Amount__c":100,"Client__c":"","Date__c":"2017-05-31","Reimbursed__c":false}]

I guess when you read the trailhead:
"First, let’s create a place to “store” new expenses. We’ll simply create a local-only array of expenses to hold them. At the top of expenses component markup, right before the newExpense attribute, add a new expenses attribute, which will hold an array of expense objects."

So we aren't really doing anything dynamic yet - I guess the button isn't supposed to 'work' just yet - maybe the next module.