LWC Custom Search in Salesforce - Full Code

Salesforce Lightning Web Components (LWC) provide a modern and efficient way to build interactive user interfaces on the Salesforce platform. In this blog post, we will walk through the process of creating a custom search functionality using LWC in Salesforce. We will implement a simple search component that allows users to search for records based on a specific field.

Prerequisites

Before we start, make sure you have the following prerequisites:

1. Salesforce Developer Account
2. Salesforce CLI installed on your local machine

Step 1: Create a New Lightning Web Component

First, let's create a new LWC for our custom search functionality. Open the terminal/command prompt and navigate to your project directory. Use the following command to create a new LWC:

sfdx force:lightning:component:create -n CustomSearch -d force-app/main/default/lwc

This will create a new folder named "CustomSearch" inside the "lwc" directory, containing the necessary files for the Lightning Web Component.

Step 2: Edit the HTML Markup

Open the "CustomSearch.html" file located at "force-app/main/default/lwc/CustomSearch/CustomSearch.html". Replace the default markup with the following code:

<template>

    <lightning-card title="Custom Search">

        <div class="slds-m-around_medium">

            <lightning-input label="Enter search keyword" onchange={handleSearchTermChange}></lightning-input>

        </div>

        <div class="slds-m-around_medium">

            <template if:true={searchResults}>

                <ul>

                    <template for:each={searchResults} for:item="result">

                        <li key={result.Id}>{result.Name}</li>

                    </template>

                </ul>

            </template>

            <template if:false={searchResults}>

                <p>No results found</p>

            </template>

        </div>

    </lightning-card>

</template>

In this code, we have a simple Lightning Card containing an input field for users to enter their search keyword. Below that, we display the search results in an unordered list.

Step 3: Edit the JavaScript Controller

Open the "CustomSearch.js" file located at "force-app/main/default/lwc/CustomSearch/CustomSearch.js". Replace the default code with the following JavaScript:

import { LightningElement, track, wire } from 'lwc';

import searchRecords from '@salesforce/apex/CustomSearchController.searchRecords';

export default class CustomSearch extends LightningElement {

    @track searchTerm = '';

    @track searchResults;

    handleSearchTermChange(event) {

        this.searchTerm = event.target.value;

    }

    @wire(searchRecords, { searchTerm: '$searchTerm' })

    wiredSearchResult({ error, data }) {

        if (data) {

            this.searchResults = data;

        } else if (error) {

            console.error(error);

        }

    }

}

In this JavaScript controller, we have defined a searchTerm variable to store the user's input. The handleSearchTermChange function is called whenever the input field value changes. We use @wire decorator to call the server-side Apex method searchRecords with the searchTerm as a parameter. The returned data is stored in the searchResults variable.

Step 4: Create an Apex Class

Now, let's create an Apex class to handle the server-side search logic. Create a new Apex class named "CustomSearchController" with the following code:

public with sharing class CustomSearchController {

    @AuraEnabled(cacheable=true)

    public static List<Account> searchRecords(String searchTerm) {

        String searchKey = '%' + searchTerm + '%';

        return [SELECT Id, Name FROM Account WHERE Name LIKE :searchKey LIMIT 10];

    }

}

In this Apex class, we have a method searchRecords that takes the searchTerm as an input parameter. It performs a SOQL query to search for Accounts whose Name contains the search term (case-insensitive) and returns up to 10 matching records.

Step 5: Deploy the Custom Search Component

Now that we have created the LWC component and the server-side Apex class, let's deploy them to your Salesforce org. Open the terminal/command prompt and run the following commands:

sfdx force:source:push

sfdx force:apex:execute -f force-app/main/default/classes/CustomSearchController.cls

These commands will deploy the LWC component and the Apex class to your Salesforce org.

Step 6: Add the Custom Search Component to a Lightning Page

Finally, let's add the custom search component to a Lightning Page. Follow these steps:

1. Go to "Setup" in your Salesforce org.
2. In the Quick Find/Search box, type "App Builder" and select "App Builder."
3. Click "New" to create a new Lightning App Page.
4. Choose "Record Page" and click "Next."
5. Select "Account" as the object and click "Next."
6. Name the page "Custom Search Page" and click "Finish."
7. In the left-hand side components list, search for "CustomSearch" and drag it to the right-hand side where you see the "Custom Search Page" layout.
8. Save and activate the page.

Step 7: Test the Custom Search Component

Now, navigate to an Account record detail page and you should see the "Custom Search" component on the page. Enter a search keyword in the input field, and the component will display matching Account names in real-time.

Congratulations! You have successfully implemented a custom search functionality using LWC in Salesforce.

Conclusion

In this blog post, we walked through the steps to create a Lightning Web Component for a custom search in Salesforce. We created an LWC component that allows users to search for Accounts based on their name, and we used an Apex class to handle the server-side logic and retrieve the search results. By following these steps, you can extend this functionality to other objects or fields as per your business needs.

Remember to experiment and enhance the component further, adding features like pagination, additional filtering, and error handling to make it even more user-friendly and robust. Happy coding!