<!--ExpenseCounters--> <div class="containerslds-p-top--medium"> <div class="row"> <div class="slds-title"> <!-- Make your counter rec if total amount is more than 100 --> <div class="{!v.total>=100 ? 'slds-notifyslds-notify--toastslds-theme--error slds-theme--alert-texture' : 'slds-notifyslds-notify--toastslds-theme--alert-texture'}"> <p class="slds-tile__titleslds-truncate">Total Expenses</p> $ <ui:outputNumber class="slds-truncate" value="{!v.total}" format=".00"/>
The error seems that you are not defining the component and app properly. Please check that.
Thanks,
Neetu
Please check apand Component code:
<aura:application >
<!-- Define Design System Static Resources 0.9.0 -->
<ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
<div class="slds">
<div class="slds-page-header">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<p class="slds-text-heading--label">Expenses</p>
<div class="slds-grid">
<div class="slds-grid slds-type-focus slds-no-space">
<h1 class="slds-text-heading--medium slds-truncate" title="My Expenses">My Expenses</h1>
</div>
</div>
</div>
</div>
</div>
<div class="slds-col--padded slds-p-top--large">
<ias31:form/>
</div>
</div>
</aura:application>
----------------------------
Component--
<aura:component implements="force:appHostable" controller="ias31.ExpenseController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
<aura:attribute name="expenses" type="ias31.Expense__c[]"/>
<aura:attribute name="newExpense" type="ias31__Expense__c"
default="{'sobjectType':'ias31__Expense__c',
'Name':'',
'ias31__Amount__c':0,
'ias31__Client__c':'',
'ias31__Date__c':'',
'ias31__Reimbursed__c':false }"/>
<!--AttributesforExpenseCounters-->
<aura:attribute name="total" type="Double" default="0.00"/>
<aura:attribute name="exp" type="Double" default="0"/>
<!-- Input form using components -->
<div class="container">
<form class="slds-form-stacked">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputText aura:id="expname" label="Expense Name"
class="slds-input"
labelclass="slds-form-element__label"
value="{!v.newExpense.Name}"
required="true"/>
</div>
</div>
<div class="slds-form-elementslds-is-required">
<div class="slds-form-element__control">
<ui:inputNumber aura:id="amount" label="Amount"
class="slds-input"
labelclass="slds-form-element__label"
value="{!v.newExpense.ias31__Amount__c}"
placeHolder="20.80"
required="true"/>
</div>
</div>
<div class="slds-form-elementslds-is-required">
<div class="slds-form-element__control">
<ui:inputText aura:id="client" label="Client"
class="slds-input"
labelclass="slds-form-element__label"
value="{!v.newExpense.ias31__Client__c}"
placeHolder="ABC Co."
/>
</div>
</div>
<div class="slds-form-elementslds-is-required">
<div class="slds-form-element__control">
<ui:inputDateTime aura:id="expdate" label="ExpenseDate"
class="slds-input"
labelclass="slds-form-element__label"
value="{!v.newExpense.ias31__Date__c}"
displayDatePicker="true"
/>
</div>
</div>
<div clas="slds-form-element">
<ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
class="slds-checkbox"
labelClass="slds-form-element__label"
value="{!v.newExpense.ias31__Reimbursed__c}"/>
<ui:button label="submit"
class="slds-buttonslds-button--neutral"
labelClass="label"
press="{!c.createExpense}"/>
</div>
</form>
</div><!--- from ends -->
<!--ExpenseCounters-->
<div class="containerslds-p-top--medium">
<div class="row">
<div class="slds-title">
<!-- Make your counter rec if total amount is more than 100 -->
<div class="{!v.total>=100
? 'slds-notifyslds-notify--toastslds-theme--error
slds-theme--alert-texture'
: 'slds-notifyslds-notify--toastslds-theme--alert-texture'}">
<p class="slds-tile__titleslds-truncate">Total Expenses</p>
$ <ui:outputNumber class="slds-truncate" value="{!v.total}" format=".00"/>
</div>
</div>
<div class="slds-tile ">
<div class="slds-notifyslds-notify--toast slds-theme--alert-texture">
<p class="slds-tile__title slds-truncate">No. of Expenses</p>
<ui:outputNumber class="slds-truncate" value="{!v.exp}"/>
</div>
</div>
</div>
</div>
<!--Displayexpenserecords-->
<div class="containerslds-p-top--medium">
<div id="list" class="row">
<aura:iteration items="{!v.expenses}" var="expense">
<p>{!expense.Name},{!expense.ias31__Client__c},
{!expense.ias31__Amount__c},
{!expense.ias31__Date__c},
{!expense.ias31__Reimbursed__c}</p>
</aura:iteration>
</div>
</div>
</aura:component>
Please let me know if there is any bug