Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Utilisation d'un service de données Lightning et communication entre les composants

Partie 1 : Utilisation du service de données Lightning

Sur la page d'enregistrement de propriété, modifiez le prix de la propriété. Par exemple, essayez de l'augmenter de 200 000 $. Cliquez sur Save (Enregistrer), et notez que le composant ne se recharge par lors de la modification du prix. Comment pouvons-nous mettre automatiquement à jour la liste des propriétés similaires lorsque le prix de la page d'enregistrement de propriété a été modifié ?

  1. Dans la Console du développeur, ouvrez le composant de balisage SimilarProperties.
  2. Ajoutez l'attribut suivant.
  3. <aura:attribute name="property" type="Property__c"/>
    
  4. Ajoutez un objet force:recordData au composant après le dernier aura:handler.
  5. <force:recordData aura:id="propertyService"
        recordId="{!v.recordId}"
        targetRecord="{!v.property}"
        recordUpdated="{!c.doInit}"
        layoutType="FULL"/>
    

    force:recordData récupère automatiquement l'enregistrement spécifié par son attribut recordId, puis stocke ces données dans le <aura:attribute> défini par l'attribut targetRecord. Puis force:recordData se met à l'écoute des modifications apportées à cet enregistrement par d'autres composants sur la page et déclenche la fonction JavaScript définie par l'attribut recordUpdated lorsqu'il détecte une modification.

  6. Enregistrez le fichier et actualisez la page d'enregistrement de propriété.
  7. Modifiez le prix de la propriété et remarquez que le composant exécute une nouvelle recherche.
  8. Modifiez un enregistrement dans la liste Propriétés similaires, en augmentant le prix de plus de 10 000 $. Remarquez que le composant ne s'actualise pas.

Partie 2 : Utilisez des événements Lightning personnalisés

Ensuite, nous devons ajouter un événement Lightning pour faire savoir à d'autres composants de la page que nous avons mis à jour l'enregistrement. Un événement Lightning déclenche un événement que tout autre composant peut écouter. Et en réalité, nous allons faire en sorte que le composant SimilarProperties reste à l'écoute de l'événement, pour que, sur la page, plusieurs instances du composant puissent se mettre à jour simultanément.

  1. Dans la Console du développeur, cliquez sur File > New > Lightning Event (Fichier > Nouveau > Événement Lightning).
  2. Donnez à l'événement le nom recordUpdated.
  3. Cliquez sur Submit (Soumettre).
  4. Fermez le fichier.
  5. Passez à SimilarProperties.cmp.
  6. Ajoutez ce qui suit sur une nouvelle ligne, après aura:handler.
  7. <aura:handler event="c:recordUpdated" action="{!c.doInit}"/>
  8. Enregistrez le fichier.
  9. Passez à SimilarProperty.cmp.
  10. Sur une nouvelle ligne après aura:attribute, ajoutez :
  11. <aura:registerEvent name="recordUpdated" type="c:recordUpdated"/>
  12. Enregistrez le fichier, puis passez à SimilarPropertyController.js.
  13. Ajoutez ce qui suit à la fonction handleSuccess, juste après toastEvent.fire() :
  14. var recUpdate = $A.get("e.c:recordUpdated");
    recUpdate.fire();
  15. Enregistrez le fichier, puis actualisez la page Propriété.
  16. Modifiez un enregistrement dans la liste Propriétés similaires.
  17. Remarquez que le composant s'actualise.

Partie 3 : Utilisation de paramètres de Design

Pour finir, nous allons nous faire aimer des administrateurs en exposant les paramètres qu'ils peuvent modifier lors de l'ajout du composant sur une page. Nous allons leur donner la possibilité de spécifier des critères de recherche, ainsi qu'une plage en cas de recherche par prix. Nous allons également nous assurer que vous n'ajouterez pas accidentellement le composant sur une page sur laquelle il ne fonctionnerait pas. Par exemple, nous n'allons pas ajouter le composant Propriétés similaires sur une page d'enregistrement de contact. Grâce au fichier Design, nous pouvons spécifier les types d'objets sur lesquels le composant peut être utilisé. Ainsi, sur la page d'enregistrement de contact par exemple, le composant ne s'affichera par dans la liste des composants disponibles du générateur d'applications Lightning.

  1. Ajoutez deux nouveaux attributs à SimilarProperties.cmp.
  2. <aura:attribute name="searchCriteria" type="String" default="Price"/>
    <aura:attribute name="priceRange" type="String" default="100000"/>
    
  3. Mettez à jour le titre de la balise lightning:card en {! 'Similar Properties by ' + v.searchCriteria}, afin qu'il ressemble à ceci :
  4. <lightning:card iconName="custom:custom85" title="{! 'Similar Properties by ' + v.searchCriteria}">
  5. Passez à SimilarPropertiesController.
  6. Mettez à jour l'action en var action = component.get("c.getSimilarProperties");.
  7. Modifiez les paramètres de cette action comme suit :
  8. action.setParams({
        recordId: component.get("v.recordId"),
        beds: component.get("v.property.fields.Beds__c.value"),
        price: component.get("v.property.fields.Price__c.value"),
        searchCriteria: component.get("v.searchCriteria"),
        priceRange: parseInt(component.get("v.priceRange"), 10)
    });
    
  9. Dans la Console du développeur, cliquez sur File > Open Resource (Fichier > Ouvrir les ressources) et cliquez sur MyPropertyController.
  10. Supprimez la méthode FindProperties et actualisez la méthodegetSimilarProperties en conséquence.
  11. @AuraEnabled
    public static List<Property__c> getSimilarProperties (Id recordId, String searchCriteria, Decimal beds, Decimal price, Decimal priceRange ) {
        if (searchCriteria == 'Bedrooms') {
            return [
                SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c
                FROM Property__c WHERE Id != :recordId AND Beds__c = :beds
            ];
        } else {
            Decimal range;
                if (priceRange == null) {
                    range = 100000;
                } else {
                    range = priceRange;
                }
                return [
                    SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c
                    FROM Property__c WHERE Id != :recordId AND Price__c > :price - range AND Price__c < :price + range
                ];
        }
    }
    
  12. Enregistrez les fichiers.
  13. Actualisez la page d'enregistrement de propriété et remarquez que nous récupérons maintenant les propriétés en transférant l'ID, le nombre de chambres et le prix de l'enregistrement actuel.
  14. Dans la Console du développeur, passez au fichier SimilarProperties.cmp.
  15. Cliquez sur la vignette Design pour ajouter un fichier de conception au paquet de composants.
  16. Ajoutez ce qui suit au fichier de conception entre les balises design:component.
  17. <design:attribute name="searchCriteria" label="Search By" datasource="Bedrooms, Price, Sq Foot" default="Price" description="Search for similar houses based on what criteria?"/>
    <design:attribute name="priceRange" label="Price Range" default="100000" description="When searching by Price, search using the price plus or minus this amount"/>
    

    Un attribut de conception est le paramètre qui est exposé dans le générateur d'applications. Pour chaque attribut de conception, il doit exister un attribut aura correspondant dans le composant avec exactement le même nom que l'attribut de conception. Les paramètres de conception que vous exposez peuvent être un champ de saisie de texte ou une liste de sélection. Les paramètres qui doivent être une liste de sélection comprennent un attribut datasource avec une liste d'options séparées par des virgules, comme vous pouvez le voir dans <design:attribute name="searchCriteria">. Nous avons également ajouté un attribut pour priceRange. Il est utilisé par la classe Apex pour rechercher des propriétés ayant plus ou moins cette valeur.

  18. Passez à la page d'enregistrement de propriété.
  19. Cliquez sur l'icône Setup (Configurer) et choisissez Edit Page (Modifier la page).
  20. Les étapes suivantes sont facultatives :
    1. Cliquez sur le composant SimilarProperties de la page, puis appuyez sur la touche Suppr (ou cliquez sur le X) pour supprimer le composant de la page.
    2. Cliquez sur le bouton Save (Enregistrer) dans le Générateur d'applications Lightning.
    3. Revenez à la Console du développeur et ajoutez ce qui suit au fichier Design.
    4. <sfdc:objects>
          <sfdc:object>Property__c</sfdc:object>
      </sfdc:objects>
      

      La liste <sfdc:objects> définit le type de pages d'objets sur lesquelles le composant peut être utilisé. Si vous souhaitez utiliser ce composant sur quelque chose d'autre qu'une page Property__c , il vous suffit d'ajouter un nouveau <sfdc:object> à la liste.

    5. Enregistrez le fichier.
  21. Faites glisser les deux instances du composant Propriétés similaires sur la page. Configurez une instance pour Chambres et une pour Prix.
  22. Enregistrez la page et revenez à l'enregistrement Propriété.

Partie 4 : Ajoutez une icône personnalisée, visible dans le générateur d'applications Lightning.

Lorsque vous créez un composant Lightning, vous avez la possibilité de créer une icône pour le composant ; elle s'affichera en regard du nom du composant dans le générateur d'applications Lightning. Par défaut, chaque composant personnalisé reçoit un carré bleu avec un éclair blanc comme icône. Donnons à notre composant sa propre icône.

  1. Revenez à la Console du développeur et dans l'onglet SimilarProperties.cmp, cliquez sur la vignette SVG, à droite de la fenêtre.
  2. (Pour information seulement) Les étapes suivantes vous montrent comment télécharger des icônes SVG à partir du site SLDS et les inclure dans votre composant. Ces étapes sont strictement informatives ; elles ne sont pas nécessaires pour ce projet.
    1. Dans le nouvel onglet du navigateur, revenez au site SLDS.
    2. Accédez à la section Icônes du site.
    3. Descendez jusqu’à la section Custom (personnalisées) des icônes afin de trouver custom85.
    4. Normalement, vous devez cliquer sur le lien Downloads (Téléchargements) du volet de navigation, puis descendre jusqu'à la section Icônes et cliquer sur le bouton Download (Télécharger).
    5. Après avoir accédé au fichier zip téléchargé et l'avoir décompressé, ouvrez le dossier, puis le dossier custom.
    6. Localisez le fichier custom85.svg et ouvrez-le dans un éditeur de texte.
    7. Copiez la balise <path> depuis le SVG.
    8. Dans la Console du développeur, passez à SimilarProperties.svg.
    9. Remplacez la seconde balise <path> par celle que vous venez de copier.
    10. Au début de <path> que vous venez de coller, ajoutez fill=”#fff” avant l'attribut “d”.
    11. Remplacez width="120px" height="120px" viewBox="0 0 120 120" dans la balise <svg> par :
    12. width="100px" height="100px" viewBox="0 0 100 100"

    13. Changez le remplissage du premier <path> en #F26891.
  3. Sélectionnez tout et remplacez le fichier .svg file dans la Console du développeur par :
  4. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
            <path fill="#FFF" d="m78 24h-50v-2c0-1.1-0.9-2-2-2h-4c-1.1 0-2 0.9-2 2v56c0 1.1 0.9 2 2 2h4c1.1 0 2-0.9 2-2v-46h50c1.1 0 2-0.9 2-2v-4c0-1.1-0.9-2-2-2z m-4 14h-34c-3.3 0-6 2.7-6 6v22c0 3.3 2.7 6 6 6h34c3.3 0 6-2.7 6-6v-22c0-3.3-2.7-6-6-6z m-5.5 17h-2.5v10c0 0.6-0.4 1-1 1h-4c-0.6 0-1-0.4-1-1v-6c0-0.6-0.4-1-1-1h-4c-0.6 0-1 0.4-1 1v6c0 0.6-0.4 1-1 1h-4c-0.6 0-1-0.4-1-1v-10h-2.5c-0.5 0-0.7-0.6-0.3-0.9l11.2-10.9c0.4-0.3 0.9-0.3 1.3 0l11.2 10.9c0.3 0.3 0.1 0.9-0.4 0.9z">
        </path>
    </g>
    </svg>
    
  5. Enregistrez le fichier.
  6. Revenez au Générateur d'applications Lightning et cliquez sur le bouton Refresh (Actualiser), en haut de la liste des composants.

Partie 6 : Afficher/masquer un compteur

Vous venez de faire un travail incroyable ! Mais en tant qu'utilisateur, c'est un peu discordant lorsque le composant se charge pour la première fois sur la page. Tout ce que vous voyez au début, c'est la barre de titre de la carte, et ensuite seulement le contenu s'affiche. Imaginez qu'il y ait un problème de réseau. L'utilisateur pourrait ne même pas savoir qu'il devrait y avoir du contenu à cet endroit, ou ignorer si le contenu chargé est le plus récent. Salesforce utilise une icône rotative, ou « spinner », pour indiquer à l’utilisateur qu’une activité réseau est en cours. Ajoutons un spinner pour indiquer que les données sont en train d’être récupérées ou actualisées.

  1. Dans la Console du développeur, passez au composant SimilarProperties.
  2. Ajoutez une nouvelle ligne en bas du balisage, avant la balise fermante </lightning:card> et ajoutez ce qui suit.
  3. <lightning:spinner aura:id="spinner" variant="brand" size="large"/>
  4. Enregistrez le fichier.
  5. Si vous actualisez la page d'enregistrement de propriété, vous pouvez remarquer quelques problèmes. En premier lieu, le compteur peut recouvrir la totalité de la page, et en second lieu, il ne disparaît jamais ! Par défaut, l'objet <lightning:spinner> recouvre toute la page. Mais nous pouvons le limiter pour qu'il ne recouvre que le composant dans lequel il figure avec une classe de SLDS.

  6. Ajoutez class="slds-is-relative" à la balise <lightning:card> pour qu'il ressemble à ceci :
  7. <lightning:card iconName="custom:custom85" title="{! 'Similar Properties by ' + v.searchCriteria}" class="slds-is-relative">
    
  8. Enregistrez le fichier.
  9. Cliquez sur STYLE pour ajouter un fichier CSS personnalisé au composant SimilarProperties et remplacez le contenu par défaut par :
  10. .THIS {
        min-height: 13rem;
    }
    

    Lorsque vous utilisez un fichier CSS personnalisé avec un composant Lightning, la classe .THIS est automatiquement ajoutée à l'élément HTML qui enveloppe le composant. Dans ce cas, il s'agit de <lightning:card>. L'attribut min-height spécifie la hauteur minimale du composant. Nous lui avons donné la hauteur d'un enregistrement de propriété.

  11. Enregistrez le fichier.
  12. Rechargez la page d'enregistrement de propriété. Vous voyez un problème ?
  13. Dans la Console du développeur, cliquez sur CONTROLLER (contrôleur) pour ouvrir SimilarPropertiesController.
  14. Ajoutez ce qui suit au début de la fonction doInit, avant la déclaration var action.
  15. var spinner = component.find("spinner");
    $A.util.removeClass(spinner, "slds-hide");
    
  16. Ajoutez ce qui suit à la fin du rappel de l'action.
  17. $A.util.addClass(spinner, "slds-hide");
    

    Vous venez d'ajouter trois lignes de code au contrôleur. La première ligne var spinner = component.find("spinner"); crée une référence de variable au compteur. La méthode component.find() est utilisée pour rechercher des éléments dans le balisage. Lorsque nous avons créé <lightning:spinner>, nous lui avons affecté l’aura:id de "spinner". Reprenons : ouvrez le balisage et recherchez ce qui possède un aura:id de spinner.


    $A.util.removeClass(spinner, "slds-hide"); indique à l'infrastructure (vous souvenez-vous de $A ?) d'utiliser cette méthode utilitaire removeClass() pour supprimer la classe CSS de slds-hide du compteur. La classe slds-hide, comme son nom l'indique, permet de masquer un élément qui s'y trouve. Par conséquent, une fois la classe slds-hide supprimée, le spinner est toujours visible lorsque le composant se charge. Dans le rappel de l'action, nous avons ajouté $A.util.addClass(spinner, "slds-hide"); qui rajoute simplement la classe slds-hide au compteur.


  18. Enregistrez le fichier et actualisez la page d'enregistrement de propriété.
  19. Modifiez l'enregistrement et observez le spinner.

Maintenant, le spinner s'affiche brièvement pendant le chargement des données, puis disparaît une fois que les données sont arrivées.

Partie 7 : Rendre le contenu de manière conditionnelle

  1. Dans la Console du développeur, revenez au balisage du composant SimilarProperties.
  2. Remplacez le contenu de <ul> par ce qui suit.
  3. <aura:if isTrue="{!v.similarProperties.length &gt; 0}">
        <aura:iteration items="{!v.similarProperties}" var="item">
            <li class="slds-list__item">
                <c:SimilarProperty property="{!item}"/>
            </li>
        </aura:iteration>
        <aura:set attribute="else">
            <li class="slds-list__item">
                <h3 class="slds-text-small slds-text-color_error">No similar properties found.</h3>
            </li>
        </aura:set>
    </aura:if>
    
  4. Enregistrez le fichier et actualisez la page.

Modifiez le prix de l'Enregistrement de propriété et donnez-lui une valeur sans propriété similaire, par exemple 200 000 $, pour voir l'état vide du composant.

Besoin d'une aide supplémentaire ? Comparez votre code à ce qui suit.

SimilarProperties.cmp

<aura:component controller="MyPropertyController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="similarProperties" type="Object[]"/>
    <aura:attribute name="property" type="Property__c"/>
    <aura:attribute name="searchCriteria" type="String" default="Price"/>
    <aura:attribute name="priceRange" type="String" default="100000"/>

    <aura:handler event="c:RecordUpdated" action="{!c.doInit}"/>
    <aura:handler name="init" value="{! this}" action="{!c.doInit}"/>

    <force:recordData aura:id="propertyService"
        recordId="{!v.recordId}"
        targetRecord="{!v.property}"
        recordUpdated="{!c.doInit}"
        layoutType="FULL"/>

    <lightning:card iconName="custom:custom85" title="{! 'Similar Properties by ' + v.searchCriteria}" class="slds-is-relative">
        <div class="slds-p-left_medium slds-p-right_medium">
            <ul class="slds-list_vertical slds-has-dividers_top-space">
                <aura:if isTrue="{!v.similarProperties.length &gt; 0}">
                    <aura:iteration items="{!v.similarProperties}" var="item">
                        <li class="slds-list__item">
                            <c:SimilarProperty property="{!item}"/>
                        </li>
                    </aura:iteration>
                    <aura:set attribute="else">
                        <li class="slds-list__item">
                            <h3 class="slds-text-small slds-text-color_error">No similar properties found.</h3>
                        </li>
                    </aura:set>
                </aura:if>
            </ul>
        </div>
        <lightning:spinner aura:id="spinner" variant="brand" size="large"/>
    </lightning:card>
</aura:component>

SimilarPropertiesController.js

({
    doInit : function(component, event, helper) {
        var spinner = component.find("spinner");
        $A.util.removeClass(spinner, "slds-hide");
        var action = component.get("c.getSimilarProperties");
        action.setParams({
            recordId: component.get("v.recordId"),
            beds: component.get("v.property.fields.Beds__c.value"),
            price: component.get("v.property.fields.Price__c.value"),
            searchCriteria: component.get("v.searchCriteria"),
            priceRange: parseInt(component.get("v.priceRange"), 10)
        });
        action.setCallback(this, function(response){
            var similarProperties = response.getReturnValue();
            component.set("v.similarProperties", similarProperties);
            console.log("f: ", component.get("v.similarProperties"));
            $A.util.addClass(spinner, "slds-hide");
        });
        $A.enqueueAction(action);
    }
})

SimilarProperties.css

.THIS {
    min-height: 13rem;
}

SimilarProperties.design

<design:component>
    <sfdc:objects>
        <sfdc:object>Property__c</sfdc:object>
    </sfdc:objects>
    <design:attribute name="searchCriteria" label="Search By" datasource="Bedrooms, Price" default="Price" description="Search for similar houses based on what criteria?"/>
    <design:attribute name="priceRange" label="Price Range" default="100000" description="When searching by Price, search using the price plus or minus this amount"/>
</design:component>

SimilarProperty.cmp

<aura:component>
    <aura:attribute name="property" type="Property__c"/>
    <aura:registerEvent name="recordUpdated" type="c:RecordUpdated"/>

    <lightning:recordViewForm aura:id="viewForm" recordId="{!v.property.Id}" objectApiName="Property__c">
        <div class="slds-media">
            <div class="slds-media__figure">
                <img src="{!v.property.Thumbnail__c}" class="slds-avatar_large slds-avatar_circle" alt="{!v.targetFields.Title_c}"/>
            </div>
            <div class="slds-media__body">
                <lightning:layout class="slds-hint-parent">
                    <a onclick="{!c.navToRecord}">
                        <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.property.Name}</h3>
                    </a>
                    <lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}"/>
                </lightning:layout>
                <lightning:layout multipleRows="true">
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="Beds__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="Baths__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="Price__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="Status__c"/>
                    </lightning:layoutItem>
                </lightning:layout>
            </div>
        </div>
    </lightning:recordViewForm>
    <lightning:recordEditForm aura:id="editForm" recordId="{!v.property.Id}" objectApiName="Property__c" class="slds-hide" onsuccess="{!c.handleSuccess}">
        <div class="slds-media">
            <div class="slds-media__figure">
                <img src="{!v.property.Thumbnail__c}" class="slds-avatar_large slds-avatar_circle" alt="{!v.targetFields.Title_c}"/>
            </div>
            <div class="slds-media__body">
                <lightning:layout>
                    <a onclick="{!c.navToRecord}">
                        <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.property.Name}</h3>
                    </a>
                </lightning:layout>
                <lightning:layout multipleRows="true">
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Beds__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Baths__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Price__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Status__c"/>
                    </lightning:layoutItem>
                </lightning:layout>
                <lightning:layout horizontalAlign="center" class="slds-m-top_large">
                    <lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}"/>
                    <lightning:button variant="brand" label="Submit" title="Submit" type="submit"/>
                </lightning:layout>
            </div>
        </div>
    </lightning:recordEditForm>
</aura:component>

SimilarPropertyController.js

({
    navToRecord : function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.property.Id")
        });
        navEvt.fire();
    },

    editRecord : function(component, event, helper) {
        helper.showHide(component);
    },

    handleSuccess : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "The property's info has been updated.",
            "type": "success"
        });
        toastEvent.fire();
        var recUpdate = $A.get("e.c:RecordUpdated");
        recUpdate.fire();
        helper.showHide(component);
    },

    handleCancel : function(component, event, helper) {
        helper.showHide(component);
        event.preventDefault();
    }
})

MyPropertyController.apxc

public with sharing class MyPropertyController {
    @AuraEnabled
    public static List<Property__c> getSimilarProperties (Id recordId, String searchCriteria, Decimal beds, Decimal price, Decimal priceRange ) {
        if (searchCriteria == 'Bedrooms') {
            return [
                SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c
                FROM Property__c WHERE Id != :recordId AND Beds__c = :beds
            ];
        } else {
            Decimal range;

            if (priceRange == null) {
                range = 100000;
            } else {
                range = priceRange;
            }
            return [
                SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c
                FROM Property__c WHERE Id != :recordId AND Price__c > :price - range AND Price__c < :price + range
            ];
        }
    }
}
retargeting