Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Step 4: Create a Nested Component

As your component grows, you want to break it down to maintain granularity and encapsulation. This step walks you through creating a component with repeating data and whose attributes are passed to its parent component. You’ll also add a client-side controller action to load your data on component initialization.

The following flowchart shows the flow of data in your app when you create a new expense. The data is captured when you click the Submit button in the component form.cmp, processed by your JavaScript code and sent to the server-side controller to be saved as a record. Data from the records is displayed in the nested component you are creating in this step.Data is captured by the form and processed by client- and server-side controllers.

  1. Click File | New | Lightning Component.
  2. Enter expenseList in the New Lightning Bundle window. This creates a new component, expenseList.cmp.
  3. In expenseList.cmp, enter this code.
    Replace namespace with the name of your registered namespace.
    1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component>
2  <aura:attribute name="expense" type="namespace.Expense__c"/>
3
4  <!-- Color the item blue if the expense is reimbursed -->
5  <div class="{!v.expense.namespace__reimbursed__c == true 
6                   ? 'listRecord recordLayout blue' : 'listRecord recordLayout white'}">
7    <a aura:id="expense" href="{!'/' + v.expense.id}">
8      <div class="itemTitle">{!v.expense.name}</div>
9      <div class="recordItem">Amount: 
10          <ui:outputNumber 
11           value="{!v.expense.namespace__amount__c}" format=".00"/>
12      </div>
13      <div class="recordItem">Client: 
14          <ui:outputText 
15           value="{!v.expense.namespace__client__c}"/>
16      </div>
17      <div class="recordItem">Date: 
18          <ui:outputDateTime
19           value="{!v.expense.namespace__date__c}" />
20      </div>
21      <div class="recordItem">Reimbursed? 
22          <ui:inputCheckbox 
23           value="{!v.expense.namespace__reimbursed__c}" click="{!c.update}"/>
24      </div>
25    </a>
26  </div>
27</aura:component>

    Instead of using {!expense.namespace__Amount__c}, you’re now using {!v.expense.namespace__Amount__c}. This expression accesses the expense object and the amount values on it. Note that only custom fields must be prefixed with namespaces. expense is of type Expense__c. For non-primitive types, use the format myNamespace.myApexClass.

    Additionally, href="{!'/' + v.expense.id}" uses the expense ID to set the link to the detail page of each expense record.

  4. Click STYLE in the sidebar and enter these CSS rule sets. 
    1swfobject.registerObject("clippy.codeblock-1", "9");.THIS.recordLayout {
2    list-style: none;
3    padding: 14px;
4    margin: 10px;
5    border-bottom:1px solid #cfd4d9;
6}
7
8.THIS.listRecord {
9    margin: 14px;
10    border-radius: 5px;
11    border: 1px solid #cfd4d9;
12    position: relative;
13}
14
15.THIS .uiOutputText {
16    line-height: 1.1em;
17}
18
19.THIS .itemTitle {
20    font-size: 15px;
21    padding-bottom: 3px; 
22    overflow: hidden;
23    text-overflow: ellipsis;
24    white-space: nowrap;
25}
26
27.THIS .recordItem {
28    text-overflow: ellipsis;
29    white-space: nowrap;
30}
31
32.THIS a:hover {
33    text-decoration: none;
34    background-color: #235636;
35}
  5. In form.cmp, update the aura:iteration tag to use the new nested component, expenseList. Locate the existing aura:iteration tag. 
    1swfobject.registerObject("clippy.codeblock-2", "9");    <aura:iteration items="{!v.expenses}" var="expense">
2        <p>{!expense.name}, {!expense.namespace__Client__c}, {!expense.namespace__Amount__c}, {!expense.namespace__Date__c}, {!expense.namespace__Reimbursed__c}</p>
3    </aura:iteration>

    Replace it with an aura:iteration tag that uses the expenseList component. Replace namespace with the name of your registered namespace.

    1swfobject.registerObject("clippy.codeblock-3", "9");    <aura:iteration items="{!v.expenses}" var="expense">
2      <namespace:expenseList expense="{!expense}"/>
3    </aura:iteration>
4

    Notice how the markup is simpler as you’re just passing each expense record to the expenseList component, which handles the display of the expense details.

  6. Save your changes and reload your browser.
You created a nested component and pass its attributes to a parent component. Next, you’ll learn how to process user input and update the expense object.

Beyond the Basics

When you create a component, you are providing the definition of that component. When you put the component in another component, you are create a reference to that component. This means that you can add multiple instances of the same component with different attributes. For more information about component attributes, see Component Composition.