Salesforce developer

Editor's Notes

1. public with sharing class ContactListController { @AuraEnabled public static List<Contact> findAll() { return [SELECT id, name, phone FROM Contact LIMIT 50]; } @AuraEnabled public static List<Contact> findByName(String searchKey) { String name = '%' + searchKey + '%'; return [SELECT id, name, phone FROM Contact WHERE name LIKE :name LIMIT 50]; } @AuraEnabled public static Contact findById(String contactId) { return [SELECT id, name, title, phone, mobilephone, Account.Name FROM Contact WHERE Id = :contactId]; } }
2. <aura:component implements="force:appHostable"> <p>ContactList goes here</p> </aura:component>
3. <aura:component implements="force:appHostable"> <p>ContactList goes here</p> </aura:component>
4. ({ doInit : function(component, event) { var action = component.get("c.findAll"); action.setCallback(this, function(a) { component.set("v.contacts", a.getReturnValue()); }); $A.enqueueAction(action); } })
5. What you will learn Create custom Lightning Events Communicate between components using events <aura:event type="APPLICATION"> <aura:attribute name="searchKey" type="String"/> </aura:event>
6. <aura:component> <div> <input type="text" class="form-control" placeholder="Search" onkeyup="{!c.searchKeyChange}"/> </div> </aura:component>
7. ({ searchKeyChange: function(component, event, helper) { var myEvent = $A.get("e.c:SearchKeyChange"); myEvent.setParams({"searchKey": event.target.value}); myEvent.fire(); } })
8. .THIS { width: 100%; padding: 8px; } .THIS input { width: 100%; padding: 8px; -webkit-appearance: none; border: solid 1px #dddddd; }
9. <aura:handler event="c:SearchKeyChange" action="{!c.searchKeyChange}"/>
10. searchKeyChange: function(component, event) { var searchKey = event.getParam("searchKey"); var action = component.get("c.findByName"); action.setParams({ "searchKey": searchKey }); action.setCallback(this, function(a) { component.set("v.contacts", a.getReturnValue()); }); $A.enqueueAction(action); }
11. <aura:component implements="force:appHostable"> <c:SearchBar/> <c:ContactList/> </aura:component>