Skip to main content

Création de l’affichage de la carte de compte et finalisation de l’application

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • Décrire les commandes Salesforce CLI utilisées pour synchroniser votre projet avec vos organisations test
  • Décrire la commande Salesforce CLI utilisée pour créer un ensemble d’autorisations
  • Comprendre comment créer une application à l’aide de composants Aura

Description du projet

Lors de cette étape, nous allons créer les composants finaux de notre application de géolocalisation, qui rassemblent l’ensemble ses fonctionnalités. Nous allons créer un composant Aura qui représente les adresses de compte sous forme de marqueurs sur une carte, ainsi qu’un onglet personnalisé afin de pouvoir accéder à notre application. Nous utiliserons également un ensemble d’autorisations pour accorder aux utilisateurs l’accès à notre application.

Création du composant Aura Account Map (Carte de compte)

Ce composant utilise le composant <lightning:map> pour afficher les comptes sur une carte.

  1. Créez le composant AccountMap dans le dossier aura.
    sf lightning generate component --name AccountMap --output-dir force-app/main/default/aura
  2. Ouvrez le fichier force-app/main/default/aura/AccountMap/AccountMap.cmp et remplacez son contenu par le code suivant, puis enregistrez le fichier.
    <aura:component>
        <aura:handler event="c:AccountsLoaded" action="{!c.onAccountsLoaded}"/>
        <aura:attribute name="mapMarkers" type="Map[]"/>
        <lightning:card title="Account Map" iconName="action:map">
            <lightning:map mapMarkers="{!v.mapMarkers}"/>
        </lightning:card>
    </aura:component>
    Ce composant écoute l’événement AccountsLoaded et affiche les données de ce dernier sous forme de marqueurs de carte.

  3. Ouvrez le fichier force-app/main/default/aura/AccountMap/AccountMapController.js et remplacez son contenu par le code suivant, puis enregistrez le fichier.
    ({
        onAccountsLoaded: function( component, event, helper ) {
            var mapMarkers = [];
            var accounts = event.getParam( 'accounts' );
            for ( var i = 0; i < accounts.length; i++ ) {
                var account = accounts[i];
                var marker = {
                    'location': {
                        'Street': account.BillingStreet,
                        'City': account.BillingCity,
                        'PostalCode': account.BillingPostalCode
                    },
                    'title': account.Name,
                    'description': (
                        'Phone: ' + account.Phone +
                        'Website: ' + account.Website
                    ),
                    'icon': 'standard:location'
                };
                mapMarkers.push( marker );
            }
            component.set( 'v.mapMarkers', mapMarkers );
        }
    })
    La fonction onAccountsLoaded du contrôleur côté client transforme les données d’événement au format attendu par le composant <lightning:map>.

  4. Déployez votre nouveau code dans l’organisation test.
    sf project deploy start

Création du composant Aura Account Locator (Localisateur de compte)

Il s’agit de notre composant principal, que nous utilisons pour afficher notre application aux utilisateurs finaux dans les pages Lightning, Salesforce Mobile et les onglets personnalisés. C’est aussi le dernier composant que vous allez créer dans le cadre de ce projet !

  1. Créez le composant AccountLocator dans le dossier aura.
    sf lightning generate component --name AccountLocator --output-dir force-app/main/default/aura
  2. Ouvrez force-app/main/default/aura/AccountLocator/AccountLocator.cmp et remplacez son contenu par le code suivant, puis enregistrez le fichier.
    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
        <lightning:layout horizontalAlign="space" multipleRows="true">
            <lightning:layoutItem size="12"
                                  mediumDeviceSize="12"
                                  padding="around-small">
                <c:AccountSearch/>
            </lightning:layoutItem>
            <lightning:layoutItem size="12"
                                  mediumDeviceSize="6"
                                  padding="around-small">
                <c:AccountList/>
            </lightning:layoutItem>
            <lightning:layoutItem size="12"
                                  mediumDeviceSize="6"
                                  padding="around-small">
                <c:AccountMap/>
            </lightning:layoutItem>
        </lightning:layout>
    </aura:component>
    Ce composant est constitué des autres composants que vous avez créés tout au long de ce projet. L’encapsulation des composants et la capacité de réutilisation des composants sont deux fonctionnalités puissantes de l’infrastructure de composants Lightning. L’intégration de composants spécialisés dans un composant plus conséquent vous permet de créer des composants et des applications plus intéressants.

  3. Déployez votre nouveau code dans l’organisation test.
    sf project deploy start

Création de l’onglet personnalisé Account Locator (Localisateur de compte)

Un moyen simple d’afficher des composants Aura à la fois dans Lightning Experience pour ordinateur et dans Salesforce Mobile consiste à utiliser un onglet personnalisé. Après cette étape, vous accéderez à votre application en passant par cet onglet personnalisé.

  1. Ouvrez votre organisation test.
    sf org open
  2. Depuis Setup (Configuration), saisissez Tabs (Onglets) dans la zone Quick Find (Recherche rapide), puis sélectionnez Tabs (Onglets).
  3. Dans la section Lightning Component Tabs (Onglets des composants Lightning), cliquez sur New (Nouveau) et saisissez les informations ci-dessous :

    • Lightning Component (Composant Lightning) : c:myFirstComponent
    • Étiquette de l’onglet : Account Locator (Localisateur de compte)
    • Nom de l’onglet : Account_Locator (Localisateur_de_compte)
    • Style de l’onglet : cliquez sur l’icône de loupe, puis sélectionnez Map comme icône de l’onglet.
    • Description : Custom tab for Account Locator. (Onglet personnalisé pour le localisateur de compte.)

      Boîte de dialogue New Lightning Component tab (Nouvel onglet Composant Lightning)
  4. Cliquez sur Next (Suivant).
  5. Pour Apply one tab visibility to all profiles (Appliquer une visibilité d’onglet à tous les profils), choisissez Tab Hidden (Onglet masqué).
  6. Cliquez sur Save (Enregistrer).

Création de l’ensemble d’autorisations de géolocalisation

Pour contrôler l’accès à votre application de géolocalisation, créez un ensemble d’autorisations et accordez-lui la visibilité sur l’onglet Account Locator (Localisateur de compte).

  1. Dans Setup (Configuration), saisissez Permission Sets (Ensembles d’autorisations) dans la zone Quick Find (Recherche rapide), puis sélectionnez Permission Sets (Ensembles d’autorisations).
  2. Cliquez sur New (Nouveau) et saisissez les informations suivantes :

    • Étiquette : Geolocation (Géolocalisation)
    • Nom d’API : Geolocation (Géolocalisation)
    • Description : Grants access to the Account Geolocation app (Accorde l’accès à l’application de géolocalisation de compte)
  3. Cliquez sur Save (Enregistrer).
  4. Sous Apps (Applications), cliquez sur Object Settings (Paramètres d’objet).
  5. Cliquez sur Account Locator (Localisateur de compte).
  6. Cliquez sur Modifier.
  7. Pour Tab Settings (Paramètres de l’onglet), sélectionnez à la fois Available (Disponible) et Visible, puis cliquez sur Save (Enregistrer).

Maintenant, vous allez vous attribuer l’ensemble d’autorisations. Nous verrons à une étape ultérieure comment automatiser l’attribution d’ensembles d’autorisations à l’aide de Salesforce CLI.

  1. Dans Setup (Configuration), saisissez Users (Utilisateurs) dans la zone Quick Find (Recherche rapide), puis cliquez sur Users (Utilisateurs).
  2. Cliquez sur l’utilisateur ayant pour nom complet User, User (Utilisateur, Utilisateur) dans le tableau.
  3. Cliquez sur Permission Set Assignments (Attribution d’ensembles d’autorisations).
  4. Dans la section Permission Set Assignments (Attribution d’ensembles d’autorisations), cliquez sur Edit Assignments (Modifier les attributions).
  5. Ajoutez l’ensemble d’autorisations Geolocation (Géolocalisation) à la zone Enabled Permission Sets (Ensembles d’autorisations activés). 
  6. Cliquez sur Save (Enregistrer)

Si vous vous posiez la question, User User (Utilisateur Utilisateur) est le nom complet par défaut attribué à l’administrateur système dans une organisation test. N’hésitez pas à le modifier dans Setup (Configuration) si vous souhaitez le personnaliser.  

La magie des métadonnées : récupération des modifications dans votre projet

Jusqu’à présent, dans ce module, vous avez travaillé sur votre projet local et inséré des métadonnées dans votre organisation test. Au cours de cette étape, vous avez apporté des modifications directement dans cette organisation test. C’est maintenant que la magie opère. Avec une seule commande, vous allez récupérer toutes les métadonnées que vous avez modifiées dans l’organisation test et les appliquer à votre projet local.

Toutefois, avant d’effectuer cela, nous devons configurer notre fichier .forceignore de manière à ignorer la synchronisation de certaines métadonnées. Lorsque vous avez créé l’onglet Account Locator (Localisateur de compte) et attribué sa visibilité à tous les profils, le suivi automatique des modifications dans l’organisation test a pris en compte la modification des profils. Naturellement, la prochaine fois que vous extrairez des métadonnées de l’organisation test pour les synchroniser avec votre projet local, la CLI souhaitera extraire les métadonnées de profil. Étant donné que les profils ne sont pas pertinents pour votre application de géolocalisation et ne doivent pas être suivis dans votre référentiel de contrôle source dans le cadre de ce projet, nous devons indiquer à Salesforce CLI d’ignorer les modifications de profil.

Dans le répertoire racine de votre projet de géolocalisation, ouvrez le fichier .forceignore et ajoutez **/profiles comme nouvelle ligne dans le fichier, puis enregistrez ce dernier. Votre fichier .forceignore doit se présenter comme suit :

# List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status
# More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm
#
package.xml
# LWC configuration files
**/jsconfig.json
**/.eslintrc.json
# LWC Jest
**/__tests__/**
# Profiles
**/profiles

Vous êtes maintenant prêt à récupérer les métadonnées. Dans la fenêtre de commande, récupérez les modifications que vous avez apportées à l’organisation test pour les appliquer à votre projet local.

sf project retrieve start

La sortie de la commande project retrieve start ressemble à ceci :

Retrieving v58.0 metadata from test-t7e5za@example.com using the v58.0 SOAP API
Preparing retrieve request... Succeeded
Retrieved Source
================================================================================================================
| State   Name            Type          Path
| ─────── ─────────────── ───────────── ────────────────────────────────────────────────────────────────────────
| Created Account_Locator CustomTab     force-app/main/default/tabs/Account_Locator.tab-meta.xml
| Created Geolocation     PermissionSet force-app/main/default/permissionsets/Geolocation.permissionset-meta.xml

Notez qu’aucune des modifications de profil n’a été récupérée, car elles sont ignorées dans .forceignore.

Validation de votre application

Bien que vous puissiez tout à fait utiliser la même organisation test que celle que vous avez employée pendant le développement pour effectuer vos tests, nous vous recommandons de toujours commencer avec une nouvelle organisation test. Le fait d’avoir recours à une nouvelle organisation test garantit que toutes les sources ont été correctement externalisées de l’organisation.

  1. Créez une organisation test.
    sf org create scratch --set-default --definition-file config/project-scratch-def.json --alias GeoTestOrg
  2. Déployez votre source et vos métadonnées locales dans l’organisation test.
    sf project deploy start --target-org GeoTestOrg
  3. Attribuez votre ensemble d’autorisations.
    sf org assign permset --name Geolocation --target-org GeoTestOrg
  4. Chargez vos exemples de données dans l’organisation. Il s’agit des données que vous avez exportées à partir d’une autre organisation test dans une unité précédente. 
    sf data import tree --files data/Account.json --target-org GeoTestOrg
  5. Ouvrez votre organisation.
    sf org open --target-org GeoTestOrg
  6. Testez l’onglet Account Locator (Localisateur de compte) et vérifiez qu’il fonctionne comme prévu. Dans l’outil App Launcher (Lanceur d’application), cherchez et sélectionnez Account Locator (Localisateur de compte).
Composant Account Locator (Localisateur de compte) avec les composants Account Search (Recherche de compte), Account List (Liste de comptes) et Account Map (Carte de compte)

Félicitations ! Vous avez réussi à créer et à tester une nouvelle application grâce à des organisations test et à Salesforce CLI. N’oubliez pas d’ajouter tous les éléments sur lesquels vous avez travaillé à votre référentiel de contrôle source !

Partagez vos commentaires sur Trailhead dans l'aide Salesforce.

Nous aimerions connaître votre expérience avec Trailhead. Vous pouvez désormais accéder au nouveau formulaire de commentaires à tout moment depuis le site d'aide Salesforce.

En savoir plus Continuer à partager vos commentaires