6

Currently working through the Create a Standalone Lightning App tutorial, which seems a good introduction to SFDC Lightning, but not entirely flawless.

I have this component

<aura:component controller="Sledgehammer.ExpenseController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="expenses" type="Sledgehammer.Expense__c" />
<aura:attribute name="newExpense" type="Sledgehammer.Expense__c"
                default="{
                         'sobjectType'                :'Sledgehammer__Expense__c',
                         'Name'                       :'',
                         'Sledgehammer__Amount__c'    :0,
                         'Sledgehammer__Client__c'    :'',
                         'Sledgehammer__Date__c'      :'',
                         'Sledgehammer__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.Sledgehammer__Amount__c}"     placeholder="20.80"     required="true" />
        <ui:InputText     aura:Id="client"     label="Client"       class="form-control" value="{!v.newExpense.Sledgehammer__Client__c}"     placeholder="ABC Co."                   />
        <ui:InputDateTime aura:Id="expdate"    label="Expense Date" class="form-control" value="{!v.newExpense.Sledgehammer__Date__c}"       displayDatePicker="true" />
        <ui:InputCheckbox aura:Id="reimbursed" label="Reimbursed?"  class="form-control" value="{!v.newExpense.Sledgehammer__Reimbursed__c}" />
        <ui:button label="Submit" press="{!c.createExpense}" />        
    </fieldset>
</form>

<!-- Expense Counters -->
<div class="row">
    <!-- Change the counter color to red if 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.expenseDisplayList}" var="expense">
        <Sledgehammer:expenseList expense="{!expense}"/>
    </aura:iteration>
</div>

which is indirectly associated with this Helper.js:

    ({

  getExpenseList: function(component) 
  {
        var action = component.get("c.getExpenseList");
        var self = this;
        action.setCallback(this, function(a) 
        {
            component.set("v.expenses", a.getReturnValue());
            self.updateTotal(component);
        });
        $A.enqueueAction(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.Sledgehammer__Amount__c;
      }
      //Update counters
      component.set("v.total", total);
      component.set("v.exp", expenses.length);
  },//Delimiter for future code

})

According to the tutorial text (not necessarily the code), if I understand it correctly, by this point, the Expense__c records should be listing within/by the <aura:iteration> element.

But, that doesn't seem to be happening.

As the totals are updating, I believe the AJAX and SOQL query in the controller ARE working, but I don't see any code which would cause the <aura:iteration> element to refresh or [re]render.

For whatever it is worth, as requested by @Vignex, here is also the expenseList component:

<aura:component>
<aura:attribute name="expense" type="Sledgehammer.Expense__c" />

<!-- Color the item blue if the expense is reimbursed -->
<div class="{!v.expense.Sledgehammer__Reimbursed__c == true ? 'listRecord recordLayout blue' : 'listRecord recordLayout white'}" >
    Test {!expense.id}
    <a aura:id="expense" href="{!'/'+v.expense.id}">
        <div class="itemTitle">{!v.expense.name}</div>
        <div class="recordItem">Amount:
            <ui:outputNumber value="{!v.expense.Sledgehammer__Amount__c}" format=".00" />
        </div>
        <div class="recordItem">Client:
            <ui:outputText value="{!v.expense.Sledgehammer__Client__c}" />
        </div>
        <div class="recordItem">Date:
            <ui:outputDateTime value="{!v.expense.Sledgehammer__Date__c}" />
        </div>
        <div class="recordItem">Reimbursed?
            <ui:inputCheckbox value="{!v.expense.Sledgehammer__Reimbursed__c}" click="{!c.update}" />
        </div>
    </a>
</div>

Am I correct that is missing? If so, how should I fix it? If not, what else may be (or is) wrong?

(FWIW, I have a colleague who is independently following the same tutorial and is also failing to get the expected result, so I suspect this reflects a defect within the tutorial itself... or possibly reflects an instability within Lightning which is still only in Beta.)

1 Answer 1

7

Please change

<aura:attribute name="expenses" type="Sledgehammer.Expense__c" />

to

<aura:attribute name="expenses" type="Sledgehammer.Expense__c[]" /> in your "form.cmp"

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .