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.)

7

Please change

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

to

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.