Building a Reusable Custom LWC Multi-Select Lookup: Full Dynamic Working Code

Introduction:

In this blog post, we will explore how to create a reusable Custom Lightning Web Component (LWC) that implements a multi-select lookup functionality. We will go through the entire process, from setting up the development environment to writing the code for our component. By the end of this tutorial, you'll have a solid understanding of how to build dynamic LWCs and create powerful multi-select lookup components that can be easily reused in your Salesforce projects.

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of Lightning Web Components (LWC) and Salesforce development. You'll also need a Salesforce Developer Edition org to test and deploy the component.

Setting Up the Development Environment:

1. Install Salesforce CLI (Command Line Interface) on your machine.
2. Create a new Salesforce DX project using the command: sfdx force:project:create -n multiSelectLookup
3. Navigate to the project directory: cd multiSelectLookup
4. Authenticate with your Salesforce org using: sfdx force:auth:web:login

Creating the Reusable Custom LWC Multi-Select Lookup Component:

1. Create a new LWC using the command: sfdx force:lightning:component:create -n multiSelectLookup -d force-app/main/default/lwc
2. Open the newly created component in your preferred code editor.

HTML Markup:

<template>

    <div class="lookup-container">

        <lightning-input type="text" label="Search" onchange={handleSearch}></lightning-input>

        <ul class="lookup-results">

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

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

            </template>

        </ul>

        <ul class="selected-values">

            <template for:each={selectedValues} for:item="value">

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

            </template>

        </ul>

    </div>

</template>

JavaScript Controller:

import { LightningElement, track } from 'lwc';

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

export default class MultiSelectLookup extends LightningElement {

    @track lookupResults = [];

    @track selectedValues = [];

    handleSearch(event) {

        const searchTerm = event.target.value;

        searchRecords({ searchTerm })

            .then((result) => {

                this.lookupResults = result;

            })

            .catch((error) => {

                console.error('Error fetching lookup results:', error);

            });

    }

    handleSelection(event) {

        const selectedId = event.target.dataset.id;

        const selectedName = event.target.textContent;

        const selectedItem = { Id: selectedId, Name: selectedName };

        this.selectedValues = [...this.selectedValues, selectedItem];

    }

}

Apex Controller:

public with sharing class CustomLookupController {

    @AuraEnabled(cacheable=true)

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

        // Perform your record search logic here

        // and return a list of SObjects matching the search term

        // Example: return [SELECT Id, Name FROM Account WHERE Name LIKE :searchTerm LIMIT 5];

    }

}

Styling (CSS):

.lookup-container {

    position: relative;

    display: inline-block;

}

.lookup-results {

    list-style: none;

    padding: 0;

    margin: 0;

    position: absolute;

    width: 100%;

    max-height: 200px;

    overflow-y: scroll;

    border: 1px solid #ccc;

    background-color: #fff;

    z-index: 999;

}

.lookup-results li {

    padding: 5px;

    cursor: pointer;

}

.selected-values {

    list-style: none;

    padding: 0;

    margin: 0;

    border: 1px solid #ccc;

    background-color: #f3f3f3;

}

.selected-values li {

    padding: 5px;

}

Usage:

To use the multi-select lookup component in your project, follow these steps:

1. Import the component in your parent component or record page.
2. Use the component markup in your template and bind any necessary attributes.

Conclusion:

In this blog post, we walked through the process of creating a reusable Custom LWC Multi-Select Lookup component. We covered the necessary code and steps required to implement this functionality. By building this component, you now have a powerful tool that can be easily reused across your Salesforce projects. Feel free to enhance the component further and adapt it to suit your specific requirements.

Remember to test your component thoroughly and consider any additional features or validations you may need for your use case. Happy coding!