Create a custom search component called customSearch, which implements the forceCommunity:searchInterface. This example queries several objects and returns
record IDs that match our search term. Then you redirect to a custom page that contains the
record names and links to the full record details.
1. Implement the forceCommunity:searchInterface
Interface
Use a
<lightning:buttonIcon> component and include
a click
handler.
Add an attribute called
searchText to contain the
search text. Use a
<ui:inputText> component instead
of a plain
<input> to bind the
values.
2. Create an Apex Controller
You need to create an Apex class for the component—let’s call it
CustomSearchController. Implement the method
searchForIds, which takes a
String
searchText and returns a list of strings representing
found IDs. For now, just return the search string
itself.
Specify this class as the controller for your component by adding it as the value for the
controller attribute. Here’s an example of the completed search
component.
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. Implement a Basic Search Query with SOQL
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.
4. Return the Search Results to a Custom Page
Instead of just returning the record IDs, you can return the objects themselves or the IDs
with extra information. You can even extend the search component to start searching after
every key press and display partial results. For now, keep things simple and redirect to a
new page that uses the IDs to display the record names and links to the full record details.
You need two new components and a new custom page.
Create a component to show a single record. Based on the example for the Lightning data
service, you can use this
code.
Create a drag-and-drop component called
customSearchResults.
Create a controller. Here, you’re relying on the record ID list to be passed to the
component from the browser’s session storage. This method allows data to be passed from page
to page without affecting any
URLs.
In Experience Builder,
create a standard page called Custom Search Results, which produces a page URL of
custom-search-results. Drag the
customSearchResults component onto the page, along with whichever
other customizations you want. You can even use the same custom theme layout that you
created earlier in Step 1: Create the Basic Theme Layout Structure, which the Home page is
using.
Update the console log line in the original
customSearchController JavaScript with code that sets the session storage value
and fires a navigation event to the new
page.
In the CSS for the component, add the following CSS
rules.
Add a label for the component in the bundle’s design
resource.
In Experience Builder,
return to and click the edit icon (
) to switch to the new Custom Search component.
If all went well, you can test out your new search component by entering a text string,
clicking Search, and seeing which results show up!
j