I've seen the documentation listed at the link below:


However this only shows how to create the input elements for the search interface. When placed in a community, there is no button to execute the search. There is also no documentation around how to implement a custom button.

I was able to isolate the event fired by the standard search component. It is the force:searchRequest application event. However we do not have access to this event via $A. I could also URL hack it in (/search/All/Home/:queryString), but that seems to be a bit of a hack job as well.

Isn't the point of an interface to abstract this functionality? I would expect to be inheriting some helper methods that can fire the event for me.

Anybody successfully implemented one of these that can point me in the right direction?

  • I am in the same boat as you. I am trying to change the look and feel of the search bar while still using Global search but I haven't found anything yet (beside adding a button that uses force:navigateToURL). I will let you know if I find anything.
    – MaxPaq
    Mar 15, 2017 at 13:39
  • The feature is not very well developed. After going the rounds with support, the best bet is to use force:navigateToURL and hopefully figure out what 'All' and 'Home' parameters are. However, there is more baked into the search component than just the search. It also houses the pop-up 'Ask a Question' modal, so that button breaks if it is not present. Basically, only override it if you want a clean slate to work from. Mar 16, 2017 at 15:57

1 Answer 1


the documentation is a bit lacking, but by going through the lightning component developer guide you can achieve it. I tweaked the code snipept from the doc you linked a bit, I included a lgihtning:button and a lightning:input field as follows:

<aura:component implements="forceCommunity:searchInterface" access="global">
<aura:attribute name="searchString" type="String" default="@uri"/>

<div class="search">
    <div class="search-wrapper">

            <div class="search-input-wrapper">
                <span onkeypress="{!c.gotoURL}" class="slds-size--11-of-12">
                    <lightning:input class="search-input" type="search" placeholder="My Super Custom Search" label="Search" 
                                 value="{!v.searchString}" name="search"/>
                <lightning:button aura:id="submit" type="submit" label="Search" onclick="{! c.gotoURL }" />
        <form class="search-form"></form>

in my controller, I used force:NavigateToUrl, and added the searchString value to the URL from my attribute:

    gotoURL : function (component, event, helper) {
    var searchString = component.get("v.searchString");
    if(event.which == 13){
        var urlEvent = $A.get("e.force:navigateToURL");
          "url": "/global-search/"+searchString

Obviously, the above fires on enter, and the button click will do nothing, however, if you add a validation for the button label or any other attribute, you can trigger the query as well.

enter image description here

Searching with special character will render an invalid page, you would have to add validation or convertion to Hex to properly manage this. The above is just a Prototype to get you going. Same thing goes for the CSS, too lazy to properly style at the moment this was written.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .