Create Component
Components are the building blocks of an app. They can be wired up to a model to load your data. The component you create in this step provides a form that takes in user input about an expense, such as expense amount and date.
- Click File > New > Aura Component.
- Enter
form
for the Name field in the New Aura Bundle popup window. This creates a new Aura component,form.cmp
. - In the source code editor, enter this code.
<aura:component><!-- Attributes for Expense Counters --><aura:attribute name="total" type="Double" default="0.00" /><aura:attribute name="exp" type="Double" default="0" /><!-- Input Form using Aura Components --><form> <fieldset> <ui:inputText aura:id="expname" label="Expense Name" class="form-control" placeholder="My Expense" required="true"/> <ui:inputNumber aura:id="amount" label="Amount" class="form-control" placeholder="0" required="true"/> <ui:inputText aura:id="client" label="Client" class="form-control" placeholder="ABC Co."/> <ui:inputDateTime aura:id="expdate" label="Expense Date" class="form-control" displayDatePicker="true"/> <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"/> <ui:button class="btn" label="Submit" press="{!c.newExpense}"/> </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 Data from Model --><div class="row"> <aura:iteration items="{!m.expenses}" var="expense"> <p>{!expense.expname}, {!expense.client}, {!expense.amount}, {!expense.expdate}, {!expense.reimbursed}</p> </aura:iteration></div></aura:component>
Code Highlights
<ui:button class="btn" label="Submit" press="{!c.newExpense}"/>
Aura components provide a rich set of attributes and browser event support. For example, thepress
event inui:button
enables you to wire up an action (c.newExpense
) when the button is pressed.- The c. in
{!c.newExpense}
represents the client-side JavScript controller action that runs when the Submit button is clicked, which creates a new expense. - The attributes and expressions here will become clearer as you build the app. For example,
{!v.exp}
evaluates the number of expenses in the model and{!v.total}
evaluates the total amount.
Add Styles
Click STYLE in the sidebar to create a new resource named form.css. Enter these CSS rule sets.
.THIS .uiInput { margin: 10px;}.THIS form { width: 100%;}.THIS .form-control { display: block; width: 90%; padding: 10px 15px; font-size: 15px; line-height: 1.4; color: #2c3e50; background-color: #ffffff; background-image: none; border: 1px solid #dce4ec; border-radius: 4px;}.THIS .uiCheckbox { margin-left: 20px;}.THIS .btn, .THIS .btn:active { display: inline-block; margin: 0px 10px 20px 1%; font-weight: normal; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid #bbc0c4; border-radius: 5px; background: #ffffff; box-shadow: none; padding: 10px 15px; font-size: 15px; line-height: 1.4; border-radius: 4px; text-shadow: none;}.THIS .row { width: 100%; margin-bottom: 20px;}.THIS .alert { padding: 15px; margin: 20px; border: 1px solid transparent; border-radius: 4px; width: 45%; line-height: 18px; text-align: center;}.THIS .alert-danger { background-color: #e74c3c; border-color: #e74c3c;}.THIS .alert-success { background-color: #18bc9c; border-color: #18bc9c; color: #ffffff;}.THIS .blue { background: #7BBCE8;}.THIS .white { background: #ffffff;}.THIS .uiInput.uiInputDateTime { position: relative;}.THIS .uiInputDateTime+.datePicker-openIcon { display: inline-block; left: 90%; top: 25px; background-position: center;}
Add To expenseTracker.app
Add the component to the app. In expenseTracker.app, add the new component to the markup.
Replace namespace with the name of your registered namespace.
<aura:application><div class="container"> <h1>Add Expense</h1> <namespace:form /></div></aura:application>
Test The App
Save your changes and click Update Preview in the sidebar to preview your app. Alternatively, reload your browser.
Note: In this step, the component you created doesn’t display any data since you haven’t created the model yet.
You created a component that provides an input form and view of your expenses. Next, you’ll set up the model to load expense data in the component, which uses <aura:iteration>
to iterate through a list of items provided by the model using the expression {!m.expenses}
.