Implémentation d’un typeahead dans LWC / Blogs / Perficient

Dans le monde du développement Web moderne, l’amélioration de l’expérience utilisateur est une priorité absolue. L’une des fonctionnalités les plus populaires pour améliorer la capacité de recherche est la fonctionnalité « Typeahead », qui fournit des suggestions dynamiques au fur et à mesure que les utilisateurs tapent. Cette fonctionnalité peut accélérer considérablement la saisie des données, réduire les erreurs et rendre votre application plus réactive.

Dans ce blog, nous vous expliquerons comment mettre en œuvre un Saisie anticipée dans un Composant Web Salesforce Lightning (LWC). Que vous créiez un champ de recherche pour les enregistrements ou un système de filtrage dynamique, ce guide vous fournira les outils et les connaissances nécessaires pour implémenter cette fonctionnalité de manière transparente dans votre environnement Salesforce.

Qu’est-ce qu’une saisie anticipée ?

UN Saisie anticipée (également connu sous le nom saisie semi-automatique) est une fonctionnalité de l’interface utilisateur qui suggère automatiquement des correspondances possibles en fonction des caractères saisis par l’utilisateur. Il aide les utilisateurs à trouver rapidement des données en filtrant de grands ensembles de données sans avoir à saisir la requête complète. Les suggestions sont généralement récupérées en temps réel en fonction des saisies de l’utilisateur.

Par exemple, lorsque l’utilisateur commence à saisir le nom d’un contact, la fonctionnalité de saisie anticipée suggère de faire correspondre les noms de la base de données Salesforce.

Salesforce LWC Typeahead : considérations clés

1. Source de données: les données pour les suggestions de saisie anticipée proviennent généralement d’enregistrements Salesforce ou d’API externes. Il est important de récupérer efficacement les bonnes données.
2. Seuil de recherche: Plutôt que de récupérer tous les enregistrements en même temps, il est préférable de limiter le nombre de résultats en fonction du terme de recherche pour réduire la charge et améliorer les performances.
3. Expérience utilisateur (UX): assurez-vous que les suggestions apparaissent au fur et à mesure que l’utilisateur tape et qu’elles peuvent être facilement sélectionnées dans la liste.

Étape 1 : configurer le composant Web Lightning (LWC)

Pour commencer, créons la structure de base du composant Web Lightning. Nous aurons besoin d’un fichier HTML, d’un fichier JavaScript et d’un fichier CSS.

1.1 Créer le fichier HTML

<template>
    <lightning-input label="Search Contacts" 
                     value={searchTerm} 
                     onchange={handleSearchChange} 
                     placeholder="Search for a contact..." 
                     aria-live="assertive" 
                     class="search-box">
    </lightning-input>

    <template if:true={suggestions.length}>
        <ul class="sugg-list">
            <template for:each={suggestions} for:item="suggestion">
                <li key={suggestion.Id} class="sugg-item" onclick={handleSuggestionSelect}>
                    {suggestion.Name}
                </li>
            </template>
        </ul>
    </template>
</template>

Explication

• <lightning-input>: Il s’agit de la zone de saisie dans laquelle les utilisateurs saisiront leur requête. Nous le lions à une propriété searchTerm et configurer un écouteur d’événement handleSearchChange.
• Suggestions: S’il y a des résultats correspondants, une liste (<ul>) s’affiche, affichant les noms des contacts suggérés.

1.2 Créer le fichier JavaScript

     public void buildPathMap() {
        for (AssetNode node : refObj.values()) {
            if (!pathMap.containsKey(node.id)) {
                String path = getPath(node);
                pathMap.put(node.id, path);
            }
        }
    }

    // Recursive method to get the full path of a node
    private String getPath(AssetNode node) {
        if (String.isBlank(node.parentId)) {
            return node.name; // Base case: root node
        }
        AssetNode parentNode = refObj.get(node.parentId);
        if (parentNode != null) {
            String parentPath = getPath(parentNode);
            return parentPath + ' > ' + node.name;
        }
        return node.name; // In case parent doesn't exist
    }

    // Getter for the path map
    public Map<String, String> getPathMap() {
        return pathMap;
    }import { LightningElement, track } from 'lwc';
import searchContacts from '@salesforce/apex/ContactController.searchContacts';

export default class TypeaheadSearch extends LightningElement {
    @track searchTerm = '';
    @track suggestions = [];

    // Handle input changes
    handleSearchChange(event) {
        this.searchTerm = event.target.value;
        if (this.searchTerm.length > 2) {
            this.fetchSuggestions();
        } else {
            this.suggestions = [];
        }
    }

    // Fetch contact suggestions
    fetchSuggestions() {
        searchContacts({ searchTerm: this.searchTerm })
            .then((result) => {
                this.suggestions = result;
            })
            .catch((error) => {
                console.error("Error fetching suggestions", error);
                this.suggestions = [];
            });
    }

    // Handle suggestion click
    handleSuggestionSelect(event) {
        this.searchTerm = event.target.innerText;
        this.suggestions = [];
    }
}

Explication

• handleSearchChange(): Cette méthode est déclenchée chaque fois que l’utilisateur tape dans la zone de saisie. Si l’utilisateur tape plus de 2 caractères, il appelle fetchSuggestions() pour récupérer les résultats correspondants.
• fetchSuggestions(): Cela appelle une méthode Apex (searchContacts) qui interroge les enregistrements Salesforce et renvoie les contacts correspondants en fonction du searchTerm.
• handleSuggestionSelect(): Lorsqu’un utilisateur clique sur une suggestion, le terme de recherche est mis à jour avec la suggestion sélectionnée et la liste des suggestions est effacée.

1.3 Créer le contrôleur Apex

Créons maintenant la classe Apex qui récupère les suggestions. Cette classe Apex utilisera une requête SOQL pour rechercher des contacts en fonction du terme de recherche.

public class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> searchContacts(String searchTerm) {
        String searchQuery = '%' + searchTerm + '%';
        return [SELECT Id, Name FROM Contact WHERE Name LIKE :searchQuery LIMIT 5];
    }
}

Explication

• @AuraEnabled(cacheable=true): Cela rend la méthode disponible pour les composants Lightning et permet à la mise en cache d’améliorer les performances.
• Requête SOQL: La requête recherche les contacts dont le Name le champ contient le searchTermet nous limitons les résultats à 5 pour éviter de récupérer trop d’enregistrements.

Étape 2 : styliser le composant

Vous pouvez styliser votre composant pour le rendre visuellement attrayant et convivial.

2.1 Ajouter du CSS pour les suggestions de saisie anticipée

.search-box {
    width: 100%;
}

.sugg-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #d8dde6;
    position: absolute;
    width: 100%;
    z-index: 10;
}

.sugg-item {
    padding: 10px;
    cursor: pointer;
    background-color: #f4f6f9;
}

.sugg-item:hover {
    background-color: #e1e5ea;
}

Explication

• Stylisme: La liste de suggestions est conçue avec un arrière-plan simple, un remplissage et un effet de survol pour la rendre plus interactive.

Étape 3 : Testez votre saisie anticipée dans Salesforce

Après avoir déployé votre composant, ajoutez-le à une page Lightning ou à une page d’enregistrement dans Salesforce. Lorsque les utilisateurs commencent à taper, ils devraient voir des suggestions apparaître dynamiquement.

Améliorer l’expérience utilisateur

Voici quelques façons d’améliorer l’expérience utilisateur :

1. Anti-rebond: Pour éviter d’interroger Salesforce à chaque frappe, vous pouvez implémenter une technique anti-rebond pour attendre que l’utilisateur arrête de taper pendant une certaine période (par exemple, 300 ms).
2. Indicateur de chargement: Ajoutez une icône de chargement pour montrer aux utilisateurs que les suggestions sont en cours de récupération.
3. Gestion des erreurs: implémentez des messages d’erreur conviviaux si la méthode Apex échoue ou si aucun résultat n’est trouvé.

Conclusion

Dans ce blog, nous avons créé un outil simple mais efficace Saisie anticipée fonctionnalité de recherche dans Salesforce LWC. En tirant parti Sommet pour récupérer des suggestions dynamiques, le composant offre une expérience de recherche interactive aux utilisateurs, les aidant à trouver des enregistrements plus rapidement et plus efficacement.

Cette implémentation s’adapte à divers cas d’utilisation, tels que la recherche dans des enregistrements tels que des contacts, des comptes, des opportunités ou des objets personnalisés. Vous pouvez personnaliser cette solution pour qu’elle s’adapte parfaitement à votre application Salesforce en comprenant les concepts clés et les éléments de base.

Bon codage et n’hésitez pas à partager vos retours ou améliorations dans les commentaires !

Ressources connexes