Création d’un composant enfant et interaction avec celui-ci

Remarque

Vous souhaitez apprendre en français ? Dans ce badge, les validations de défi pratique Trailhead se font en anglais. Les traductions sont fournies entre parenthèses à titre de référence. Veillez à copier/coller les valeurs en anglais, puis à définir la langue de votre Trailhead Playground sur Anglais et les paramètres régionaux sur États-Unis. Suivez les instructions ici.

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Notre base de code s’est bien enrichie au fil des étapes précédentes. Prenons maintenant un instant pour refactoriser notre composant Liste d’ours en plusieurs composants plus petits. Nous allons déplacer le code des vignettes d’ours dans un nouveau composant.

Création du composant des vignettes d’ours

1. Dans VS Code, faites un clic droit sur le dossier lwc et cliquez sur SFDX: Create Lightning Web Component (SFDX : Créer un composant Web Lightning).
2. Donnez un nom au composant bearTile.
3. Ouvrez bearList.html et coupez tout le code entre <!-- Start bear tile --> et <!-- End bear tile -->.
4. Collez le code entre les balises template de bearTile.html. Une fois que vous aurez terminé, votre fichier bearTile.html doit ressembler à ceci.

   <template>
   	<lightning-card title={bear.Name} class="bear-tile">
   		<div class="slds-var-p-horizontal_small">
   			<div class="slds-media">
   				<div class="slds-media__figure">
   					<img src={appResources.bearSilhouette} alt="Bear profile" class="bear-silhouette"/>
   				</div>
   				<div class="slds-media__body">
   					<p class="slds-var-m-bottom_xx-small">{bear.Sex__c}</p>
   					<p class="slds-var-m-bottom_xx-small">{bear.Age__c} years old</p>
   					<p class="slds-var-m-bottom_xx-small">{bear.Height__c} cm</p>
   					<p class="slds-var-m-bottom_xx-small">{bear.Weight__c} Kg</p>
   				</div>
   			</div>
   		</div>
   	</lightning-card>
   </template>

5. Remplacez le contenu de bearTile.js par :

   import { LightningElement, api } from 'lwc';
   import ursusResources from '@salesforce/resourceUrl/ursus_park';
   export default class BearTile extends LightningElement {
   	@api bear;
   	appResources = {
   		bearSilhouette: `${ursusResources}/standing-bear-silhouette.png`,
   	};
   }

   Nous avons ajouté une propriété bear décorée avec @api. Cela expose la propriété bear à n’importe quel composant parent.
6. Supprimez bearList.css.
7. Créez un dossier bearTile.css dans le répertoire bearTile et collez-y le code suivant.

   :host {
   	--sds-c-card-color-background: linear-gradient(180deg, rgba(255,255,255,1) 80%, #fae8d2 100%);
   }
   
   .bear-tile {
   	display: block;
   	border: 1px solid #d2955d;
   	border-radius: .25rem;
   	background-color: #fae8d2;
   }
   
   .bear-silhouette {
   	height: 100px;
   }

8. Ouvrez bearList.html et remplacez le contenu entre les commentaires <!-- Start bear tile --> et <!-- End bear tile --> par <c-bear-tile bear={bear}></c-bear-tile>. Une fois que vous avez terminé, votre fichier bearList.html doit ressembler à ceci.

   <template>
   	<lightning-card title="Bears" icon-name="utility:animal_and_nature">
   		<div class="slds-card__body slds-card__body_inner">
   			<!-- Start bear list -->
   			<template if:true={bears.data}>
   				<lightning-input type="search"
   					onchange={handleSearchTermChange}
   					variant="label-hidden"
   					class="slds-var-m-bottom_small"
   					label="Search"
   					placeholder="Search for bears"
   					value={searchTerm}>
   				</lightning-input>
   				<lightning-layout multiple-rows="true" pull-to-boundary="small">
   					<template for:each={bears.data} for:item="bear">
   						<lightning-layout-item key={bear.Id} size="3" class="slds-var-p-around_x-small">
   							<c-bear-tile bear={bear}></c-bear-tile>
   						</lightning-layout-item>
   					</template>
   				</lightning-layout>
   				<!-- No bears found -->
   				<template if:false={hasResults}>
   					<div class="slds-align_absolute-center slds-var-m-vertical_small">
   						This is beary disturbing, we did not find results...
   					</div>
   				</template>
   			</template>
   			<!-- End bear list -->
   			<!-- Data failed to load -->
   			<template if:true={bears.error}>
   				<div class="slds-text-color_error">
   					An error occurred while loading the bear list
   				</div>
   			</template>
   		</div>
   	</lightning-card>
   </template>

   Cela fait référence à notre composant de vignette d’ours avec l’attribut bear que nous avons défini dans les étapes précédentes. Notez que le dossier et les fichiers de notre composant sont nommés bearTile, mais que la balise que nous avons ajoutée est c-bear-tile. Le c initial représente l’espace de noms par défaut, suivi du nom du composant en minuscules, avec des tirets séparant les lettres majuscules.
9. Déployez le code mis à jour dans l’organisation et testez votre nouveau composant de liste. Il devrait avoir meilleure allure, avec un dégradé subtil.

Interactions avec le composant Liste d’ours

Les gardes forestiers veulent pouvoir consulter rapidement l’enregistrement d’un ours et le modifier sans avoir à quitter la page d’accueil. Nous allons donc leur donner la possibilité de cliquer sur les vignettes d’ours pour ouvrir un formulaire d’enregistrement d’ours modifiable.

1. Modifiez bearTile.html et ajoutez le code suivant après la balise <lightning-card title={bear.Name} class="bear-tile">.

   <div slot="actions">
   	<lightning-button-icon
   		icon-name="utility:search"
   		icon-class="bear-tile-button"
   		variant="bare"
   		alternative-text="Open record"
   		onclick={handleOpenRecordClick}>
   	</lightning-button-icon>
   </div>

   Nous avons ajouté un bouton Modifier qui déclenche la fonction handleOpenRecordClick. Le bouton est placé sur la carte Lightning à l’aide de l’emplacement actions. Un emplacement est un espace réservé pour le balisage qu’un composant parent transmet dans le corps d’un composant.
2. Modifiez bearTile.js et ajoutez la fonction suivante avant la dernière accolade fermante.

   handleOpenRecordClick() {
   	const selectEvent = new CustomEvent('bearview', {
   		detail: this.bear.Id
   	});
   	this.dispatchEvent(selectEvent);
   }

   Points marquants du code :
   • La fonction handleOpenRecordClick est déclenchée lorsqu’un utilisateur clique sur le bouton d’ouverture de l’enregistrement à partir d’une vignette d’ours.
   • La fonction crée et déclenche un événement bearview personnalisé qui contient l’identifiant de l’enregistrement de l’ours.
3. Modifiez bearList.html et ajoutez un attribut onbearview={handleBearView} à la balise c-bear-tile. Cela nous permet de capter l’événement bearview déclenché par le composant de vignette. L’événement est géré dans une fonction handleBearView.
   

   <c-bear-tile bear={bear} onbearview={handleBearView}></c-bear-tile>

4. Remplacez le contenu de bearList.js par :

   import { NavigationMixin } from 'lightning/navigation';
   import { LightningElement, wire } from 'lwc';
   /** BearController.searchBears(searchTerm) Apex method */
   import searchBears from '@salesforce/apex/BearController.searchBears';
   export default class BearList extends NavigationMixin(LightningElement) {
   	searchTerm = '';
   	@wire(searchBears, {searchTerm: '$searchTerm'})
   	bears;
   	handleSearchTermChange(event) {
   		// Debouncing this method: do not update the reactive property as
   		// long as this function is being called within a delay of 300 ms.
   		// This is to avoid a very large number of Apex method calls.
   		window.clearTimeout(this.delayTimeout);
   		const searchTerm = event.target.value;
   		// eslint-disable-next-line @lwc/lwc/no-async-operation
   		this.delayTimeout = setTimeout(() => {
   			this.searchTerm = searchTerm;
   		}, 300);
   	}
   	get hasResults() {
   		return (this.bears.data.length > 0);
   	}
   	handleBearView(event) {
   		// Get bear record id from bearview event
   		const bearId = event.detail;
   		// Navigate to bear record page
   		this[NavigationMixin.Navigate]({
   			type: 'standard__recordPage',
   			attributes: {
   				recordId: bearId,
   				objectApiName: 'Bear__c',
   				actionName: 'view',
   			},
   		});
   	}
   }

   Points marquants du code :
   • Nous importons un mixin de navigation qui regroupe des fonctions utilitaires traitant de la navigation. Un mixin nous permet d’ajouter des fonctionnalités à une classe sans l’étendre. Cela est utile lorsqu’une classe étend déjà une classe parent (une classe ne peut étendre qu’un seul parent).
   • Notre classe étend le mixin de navigation appliqué à la classe de base LightningElement.
   • Nous gérons l’événement bearview dans la fonction handleBearView. Nous extrayons l’identifiant de l’enregistrement d’ours du détail de l’événement et nous utilisons le mixin de navigation pour naviguer vers une page d’enregistrement d’ours.
5. Déployez le code mis à jour dans l’organisation et essayez d’accéder à un enregistrement d’ours avec l’icône de bouton sur une vignette.

C’est tout pour cette étape. Nous avons refactorisé notre composant en deux composants plus petits : la liste d’ours et une vignette d’ours. Nous avons vu comment communiquer du composant de liste parent vers le composant de vignette enfant avec un décorateur @api. Nous avons également vu comment communiquer d’un enfant vers un parent avec un événement personnalisé.

Dans l’étape suivante, nous verrons comment interagir avec d’autres composants dans une page Lightning.