So today we will create Global Search Component in Lightning. Previously I have shared a search/Lookup component. But using that we can only search one object at a time. But sometimes we need to do search on multiple objects. So today we will create a Lightning Global Search Component. We can use this component to search on Custom as well as Standard objects.
As we know using SOQL we can only query one object at a time. While the SOSL allows us to do a search on multiple objects. So once the user starts typing a text, we are using SOSL to search and find the related records.
Now here we only have few attributes. If user want to make it required and what is the label they want to display. Once user starts typing we pass the value to the controller and display the result in another component.
Component Code
Set<String> obNameSet = new Set<String>();
obNameSet.add('account');
obNameSet.add('contact');
obNameSet.add('opportunity');
obNameSet.add('lead');
obNameSet.add('quote');
obNameSet.add('pricebook');So In Apex we have configured these standard objects and all custom objects. However you can control the object names in two ways. Firstly, pass the object name as an attribute from the parent component. Secondly, Use Custom setting or Custom Metadata records to store the details and from there you can refer in apex.
As we are using SOSL to search records so all the standard limits related to SOSL will be applied here. As this is a custom component as a result you can use this in the community or in Visualforce pages as well. So far we don’t have any standard Global Search component available for internal org. So this can be very helpful in many situations.
To display record detail I have used lightning:tag but we can also use lightning:recordForm to display object details.
You can find complete code on my github repo here.
Do you want to add anything, let me know in the comments section. Happy programming 🙂
This is great Tushar. I am looking for a scenario where you type a text, we get the results and when you select a value in the result,that has to be add as a row under this search component.
This is a small modification you can easily do this. Let me know if you are facing any challenge.
Hey Tushar, This is really awesome but when I try and put the component on the lightning page I get the following error “Unable to find action ‘doInit’ on the controller of c:CustomSearchResultList”
Hi Steve, you can remove the Init action from c:CustomSearchResultList component. Let me know if you face any other issue.
Hi Tushar,
I was just wondering if there is a easy way to only show the accounts object and a custom object rather than all the objects?
Thanks, Matt
Hi Matt,
In code I have already covered this. Just remove other object except Account.
Hi Tushar,
Still a little unsure here.
I keep getting errors and I’m a little lost.
I have changed the controller to the .apxc version and now it’s saying it cant find the “searchrecords” action in the controller…
The component error reads….
“Uncaught Unable to find action ‘searchRecords’ on the controller of c:CustomSearch”\
Can you be a little more specific on how I can implement?
Many thanks,
Matt
Hi Matt,
In this class https://github.com/tushar30/GlobalSearch/blob/master/CustomSearchController.apxc check line 6 to 12. Only keep account and remove other objects. You will get your required behaviour.
Hi Tushar,
Yes I did this but I don’t think the error is regarding that as an issue.
The issue is the controller does not contain the ‘searchRecords’ action within the CustomSearchController.axpc
Is there another reason why this would not work? This is incredibly confusing
I checked the code again and it look ok. Can you check if you have passed the correct class name in aura component and your class contains that method. Maybe due to some error it doesn’t get saved.
Hi Tushar,
I deleted both the apex class and (CustomSearchController.js). If I set the CustomSearch component’s controller to the apex class version …. https://github.com/tushar30/GlobalSearch/blob/master/CustomSearchController.apxc , I get errors. Is the code below mean to be used anywhere? Should this be in the helper perhaps? This looks like the error is looking for the functions within this code (the code from your CustomSearchController.js).
({
handleClick : function(component, event, helper) {
var searchText = component.get(‘v.searchText’);
var action = component.get(‘c.searchRecords’);
action.setParams({searchText: searchText});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === ‘SUCCESS’) {
var recordList = response.getReturnValue();
component.set(‘v.recordList’,recordList);
}
});
$A.enqueueAction(action);
}
})
Let me know if I’m on the right track.
Thanks heaps
Just make sure in component you have given correct class name, thats the only issue I can think now. Rest code looks correct.
Hi Tushar,
I am trying to navigate to the record page by clicking on record after searching but not able to redirect to the record page. What could be the issue?