How to Lightning Components - Part 3: Account Search

01_LightningAccountSearch.app

<aura:application>    
    <link rel="stylesheet" href="/resource/BootstrapSF1/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/resource/BootstrapSF1/dist/css/docs.min.css" />
    <script type="text/javascript" src="/resource/jQuery" />
    <script type="text/javascript" src="/resource/BootstrapSF1/dist/js/bootstrap.min.js" />
    <script type="text/javascript" src="/resource/BootstrapSF1/js/docs.js" />
    
    <!-- Header Component -->
    <devjp:LightningBootstrapSF1Header header="How to Lightning Component" detail="- Sample Application -"  />
    <div class="padding">
        <!-- Account Search Select List Size -->
        <devjp:LightningAccountSearchSelectListSizeComponent />
        <!-- Account Search Component -->
        <devjp:LightningAccountSearchComponent />
    </div>
</aura:application>

02_LightningAccountSearch.css

.THIS {
}
.THIS .padding {
    padding: 10px;
}

03_LightningAccountSearchSelectListSizeComponent.cmp

<aura:component>
    <aura:registerEvent name="selectLimitSize" type="devjp:LightningAccountSearchSelectListSizeEvent" />
    <div class="form-group padding">
        <div class="radio-inline">
            <input type="radio" value="1" name="selectListLimit" id="1" onchange="{!c.change}"></input>
            <label for="1">1件</label>
        </div>
        <div class="radio-inline">
            <input type="radio" value="5" name="selectListLimit" id="5" onchange="{!c.change}"></input>
            <label for="5">5件</label>
        </div>
        <div class="radio-inline">
            <input type="radio" value="10" name="selectListLimit" id="10" onchange="{!c.change}"></input>
            <label for="10">10件</label>
        </div>
        <div class="radio-inline">
            <input type="radio" value="100" name="selectListLimit" id="100" onchange="{!c.change}"></input>
            <label for="100">100件</label>
        </div>
    </div>
</aura:component>

04_LightningAccountSearchSelectListSizeComponentController.js

({
    change : function(component, event, helper) {
        // Select List Size
        helper.selectListSize(event);
    },
})

05_LightningAccountSearchSelectListSizeComponentHelper.js

({
	selectListSize : function(event) {
		var listSize = event.target.value;
        
        var evt = $A.get("e.devjp:LightningAccountSearchSelectListSizeEvent");
        evt.setParams({
            "listLimit": listSize
        });
        
        evt.fire();
	}
})

06_LightningAccountSearchComponent.cmp

<aura:component controller="devjp.LightningAccountSearchController">
    <aura:attribute name="accounts" type="Account[]" />
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    <aura:handler event="devjp:LightningAccountSearchSelectListSizeEvent" action="{!c.chengeListSize}"/>
    <!-- Account List -->
    <table class="table table-striped table-bordered table-condensed table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Account Number</th>
                <th>Phone</th>
                <th>NumberOfEmployees</th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.accounts}" var="a">
                <tr>
                    <td>{!a.Name}</td>
                    <td>{!a.AccountNumber}</td>
                    <td>{!a.Phone}</td>
                    <td>{!a.NumberOfEmployees}</td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

07_LightningAccountSearchComponentController.js

({
    doInit : function(component, event, helper) {
        // Account Search
        helper.getAccount(component);
    },
    chengeListSize : function(component, event, helper) {
        // Select Account List Size
        helper.selectAccountListSize(component, event);
    },
})

08_LightningAccountSearchComponentHelper.js

({
    getAccount : function(component) {
        var action = component.get("c.getAccounts");
        action.setCallback(this, function(data) {
            component.set("v.accounts", data.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    selectAccountListSize : function(component, event) {
        var listLimit = event.getParam("listLimit");
        
        var action = component.get("c.getSelectAccounts");
        action.setParams({
          "listLimit": listLimit
        });
        action.setCallback(this, function(data) {
            component.set("v.accounts", data.getReturnValue());
        });
        
        $A.enqueueAction(action);
    }
})

09_LightningAccountSearchController.cls

public with sharing class LightningAccountSearchController {
    
    @AuraEnabled
    public static List<Account> getAccounts() {
        return [
            SELECT
                 Id
                ,Name
                ,AccountNumber
                ,Phone
                ,NumberOfEmployees
            FROM
                Account
            ORDER BY Name ASC
            LIMIT 200
        ];
    }
    
        
    @AuraEnabled
    public static List<Account> getSelectAccounts(Integer listLimit) {
        return [
            SELECT
                 Id
                ,Name
                ,AccountNumber
                ,Phone
                ,NumberOfEmployees
            FROM
                Account
            ORDER BY Name ASC
            LIMIT:listLimit
        ];
    }
}

10_LightningAccountSearchSelectListSizeEvent.evt

<aura:event type="APPLICATION" description="Change List Size">
    <aura:attribute name="listLimit" type="Integer"/>
</aura:event>