Last active
June 25, 2017 15:51
-
-
Save sfdcale/32cbdd081a729f7b8007536680ef1411 to your computer and use it in GitHub Desktop.
Lightning Assistive search explained in this article (http://www.jitendrazaa.com/blog/salesforce/lightning-component-for-wikipedia-search/) updated for account search
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component controller="AccSearchController" implements="force:appHostable,flexipage:availableForAllPageTypes"> | |
| <aura:attribute name="accSearchText" type="String"/> | |
| <aura:attribute name="resultLimit" type="Integer" default="4"/> | |
| <div class="slds-card"> | |
| <div class="slds-card__header slds-grid"> | |
| <div class="slds-media slds-media--center slds-has-flexi-truncate"> | |
| <div class="slds-media__figure"> | |
| <lightning:icon iconName="custom:custom68"></lightning:icon> | |
| </div> | |
| <div class="slds-media__body"> | |
| <h2 class="slds-text-heading--small slds-truncate">Account Search</h2> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slds-card__body slds-box slds-theme--default"> | |
| <div class="slds-grid slds-wrap"> | |
| <div class="slds-col slds-size--10-of-12"> | |
| <ui:inputText value="{!v.accSearchText}" placeholder="Hit enter button to search" class="slds-input" keyup="{!c.searchAccs}"/> | |
| </div> | |
| <div class="slds-col slds-size--2-of-12"> | |
| <button class="slds-m-left--small slds-button slds-button--icon-border-filled slds-button--icon-small" onclick="{!c.searchAccsOnButton}"> | |
| <lightning:icon iconName="utility:search"></lightning:icon> | |
| <span class="slds-assistive-text">Settings</span> | |
| </button> | |
| </div> | |
| <div class="slds-col slds-size--10-of-12 slds-p-top--large"> | |
| <ul id="resultPlaceHolder" class="slds-list--vertical slds-has-cards slds-has-inline-block-links--space"> | |
| <!-- This is placeholder to render Account Search results --> | |
| </ul> | |
| </div> | |
| <div class="slds-col slds-size--2-of-12"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </aura:component> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <design:component> | |
| <design:attribute name="resultLimit" label="Result Limit" description="Total number of results to display" /> | |
| </design:component> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public class AccSearchController { | |
| @AuraEnabled | |
| public static String searchAccounts(String searchText, Integer limitInt){ | |
| Integer limitInteger = Integer.valueOf(limitInt); | |
| List<Account> accList = Database.query('SELECT Id,Name FROM Account WHERE Name LIKE ' + '\'%' + searchText + '%\'' + ' LIMIT ' + limitInteger); | |
| return JSON.serialize(accList); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| searchAccs : function(component, event, helper) { | |
| if(event.getParams().keyCode == 13){ | |
| helper.accSearch(component.get('v.accSearchText'),component, helper); | |
| } | |
| }, | |
| searchAccsOnButton : function(component, event, helper){ | |
| helper.accSearch(component.get('v.accSearchText'),component, helper); | |
| } | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| accSearch : function(txtToSearch , component, helper) { | |
| var action = component.get('c.searchAccounts'); | |
| var resLimit = component.get('v.resultLimit'); | |
| action.setParams({ | |
| searchText : txtToSearch, | |
| limitInt : resLimit | |
| }); | |
| action.setCallback(this, function(a) { | |
| if (a.getState() === 'SUCCESS') { | |
| console.log(a.getReturnValue()); | |
| helper.parseResult(a.getReturnValue(),helper); | |
| } | |
| }); | |
| $A.enqueueAction(action); | |
| }, | |
| parseResult : function(res,helper){ | |
| var retJSON = JSON.parse(res); | |
| console.log(retJSON); | |
| domSearch = document.getElementById('resultPlaceHolder'); | |
| while (domSearch.firstChild) { | |
| domSearch.removeChild(domSearch.firstChild); | |
| } | |
| for(var i=0 ; i<retJSON.length ; i++) | |
| { | |
| helper.createChildNodes(domSearch, retJSON[i].Name,window.location.origin + '/'+ retJSON[i].Id); | |
| } | |
| }, | |
| createChildNodes : function(domSearch,title,url){ | |
| var res_li = document.createElement('li'); | |
| res_li.setAttribute('class', 'slds-list__item'); | |
| var link = document.createElement('a'); | |
| link.setAttribute('href', url); | |
| link.innerText = title; | |
| res_li.appendChild(link); | |
| domSearch.appendChild(res_li); | |
| } | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:application extends="force:slds"> | |
| <c:AccSearch></c:AccSearch> | |
| </aura:application> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment