Custom Search Component for Communities using forceCommunity:searchInterface

Here we will show how to create a custom search component for the communities. To make the  Lightning component to allow it to be used as a custom search the for Customer Service community template the lightning component must implement the  forceCommunity:searchInterface interface .After you create a custom search component, admins can select it in Community Builder in Settings | Theme to replace the template’s standard Search & Post Publisher component.

1.Create Apex Class

You need to create an Apex class for the component that will search the data from Salesforce.Here is the simple apex class that we will use to search the data and return the result.

public class CustomSearchController {
    public static List<SObject> searchForIds(String searchText) {
        List<List<SObject>> results = [FIND :searchText IN ALL FIELDS  RETURNING Account(Id,Name), Campaign(Id,Name), Contact(Id,Name), Lead(Id,Name),Case(Id,CaseNumber)];
        List<SObject> ids = new List<SObject>();
        for (List<SObject> sobjs : results) {
            for (SObject sobj : sobjs) {
        return ids;

The above class will search the entered text by using SOSL and return the Sobject to the custom component. Now make the server controller do something more interesting. Salesforce supports the SOQL search language, which you can use in your Apex classes. For this query, take the input search text and try to find objects where that text appears in any field. Update the Apex class’s method to return a list of record IDs for the accounts, campaigns, contacts, or leads that match the search term.

2 .Custom Lightning Component 

Here is the Lightning component that will be used to implement the custom search from the community .this component will show the return data from the apex controller. The custom component here will show only the simple record name on search result instead of some cool stuff which you can able to do.  You can even extend the search component to start searching after every key press and display partial results. For now, keep things simple and showing the record name in the search result.

<aura:component implements="forceCommunity:searchInterface" controller="CustomSearchController">
    <aura:attribute name="searchText" type="String" default=""/>
    <aura:attribute type="Object[]" name="recordIds" />
    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordError" type="String"/>
    <div class="slds-form-element slds-lookup" data-select="single">
        <div class="slds-form-element__control">
            <div class="slds-input-has-icon slds-input-has-icon--right">
                <lightning:buttonIcon iconName="utility:search" variant="bare" onclick="{! c.handleClick }" alternativeText="Search" class="slds-input__icon" />
                <ui:inputText value="{!v.searchText}" class="slds-lookup__search-input slds-input" placeholder="Search" />
    <h1>Search Results</h1>
    <aura:iteration items="{!v.recordIds}" var="ids">
        <div class="slds-page-header" role="banner">
            <p class="slds-text-heading--label">{!ids.Name}</p>


    handleClick : function(component, event, helper) {
        var searchText = component.get('v.searchText');
        var action = component.get('c.searchForIds');
        action.setParams({searchText: searchText});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === 'SUCCESS') {
                var ids = response.getReturnValue();
                component.set("v.recordIds" , ids);

Now that you’ve hooked up the search component to an Apex controller, tell the component to execute that controller’s action when the search button is clicked. Create a click handler for this component, and add a handleClick method. This example reads the value of the input text, sends it to the server-side Apex controller, and waits for a response. When you test the example, you see an array logged to the browser console.

3.Configure in Community 

Now you can able to configure the community with the custom search  To show the custom search component community, go to   Community Builder from all communities setup page.In Community Builder, return to Settings | Theme and click the edit icon to switch to the new Custom Search component as shown below

Thats it . Now you can able to see the custom search as shown below.