Développement de pages Visualforce pour Lightning Experience

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

Réaliser la configuration de votre environnement de développement Lightning Experience.
Décrire deux façons différentes d’afficher une page Visualforce dans Lightning Experience au cours de son développement.
Décrire la différence entre la prévisualisation d’une page Visualforce au cours du développement et son test formel.
Créer une matrice de test décrivant les différents facteurs que vous devez utiliser lors des tests formels de vos pages Visualforce.

Développement de pages Visualforce pour Lightning Experience

Le processus de développement pour créer des pages et des applications Visualforce pour Lightning Experience est, par certains côtés, très différent du processus utilisé pour Salesforce Classic. Pour d'autres points, vous aurez l'impression qu'il est identique. La différence principale réside dans la manière dont vous testez et affichez vos pages au cours du développement.

Dans cette unité, nous aborderons les détails de la configuration de votre environnement de développement, puis nous parlerons plus précisément de la « bonne » manière de tester vos pages pendant leur création. La bonne nouvelle est que le processus que vous utilisez pour développer Lightning Experience est le même que pour les pages Salesforce mobile.

Configuration de votre éditeur

La première chose à configurer est l'outil d'édition que vous utiliserez pour écrire le code. Le processus reste le même, que vous souhaitiez créer des pages dans Lightning Experience, Salesforce Classic ou l’application Salesforce, ou que vous utilisiez la Developer Console, les extensions Salesforce pour Visual Studio Code ou le bon vieil éditeur de configuration.

Si vous avez déjà votre outil d’édition Visualforce préféré, vous n’avez rien à faire de spécial. Les opérations d’écriture et d’enregistrement de votre balisage Visualforce ne changent absolument pas. La Developer Console présente sa propre interface utilisateur qui reste inchangée entre Lightning Experience et Salesforce Classic. L'éditeur dans Configuration est également inchangé et utilise l'interface utilisateur de Salesforce Classic dans chaque contexte. Bien entendu, les outils natifs, comme les extensions Salesforce pour Visual Studio Code ou l’un des nombreux outils tiers disponibles, disposent de leur propre interface utilisateur.

La seule exception est l’éditeur du pied de page du mode de développement de Visualforce. Si vous avez activé le mode de développement dans vos paramètres et si vous utilisez Salesforce Classic, l’affichage et l’édition des pages Visualforce avec le pied de page du mode de développement ne changent pas, comme vous pouvez vous y attendre. Si vous passez à Lightning Experience et accédez à une page en utilisant le modèle traditionnel d’URL https://votreInstance.salesforce.com/apex/NomPage, vous serez sans doute surpris de constater que vous êtes revenu à Salesforce Classic.

Cela est tout à fait normal et nous y reviendrons au moment d’évoquer le test et l’affichage de vos pages Visualforce. Pour le moment, sachez que le mode de développement pour Visualforce n’est disponible que dans Salesforce Classic.

Affichage de pages Visualforce pendant le développement

Afficher vos pages Visualforce pendant leur développement est une tâche courante. Bien qu'il ne s'agisse pas d'un « test » au sens propre, vous souhaitez sûrement avoir la possibilité d'interagir avec une fonctionnalité que vous avez développée afin de vous assurer que son comportement sera celui attendu. Cette étape est en général accomplie en accédant à la page avec le modèle d’URL https://votreInstance.salesforce.com/apex/NomPage. Cela fonctionne toujours pour la révision de pages dans Salesforce Classic, mais pas pour contrôler leur fonctionnement dans Lightning Experience.

Les pages que vous visualisez en y accédant directement par leur URL s’affichent toujours dans Salesforce Classic, donc le conteneur « classique » Visualforce, indépendamment des réglages de votre interface utilisateur. Si vous créez des pages Visualforce qui ont un fonctionnement propre à Lightning Experience, vous ne pourrez pas les réviser en y accédant simplement par l’URL directe habituelle.

Au-delà des concepts de base

Que se passe-t-il donc en arrière-plan ? C'est en fait assez simple. Pour afficher votre page dans Lightning Experience, vous devez accéder à l'application du conteneur Lightning Experience. Il faut donc accéder à /lightning. Si vous le faites, vous ne pouvez pas accéder à /apex/NomPage. Il s'agit simplement de deux URL qui ne se chevauchent pas.

Que doit donc faire un développeur ? Vous devez visualiser votre page depuis l'application Lightning Experience, afin qu'elle soit exécutée dans le conteneur Lightning Experience. Vous devrez par conséquent accéder à la page dans Lightning Experience et il existe de nombreux moyens d'y parvenir.

Le plus simple pour arriver sur une page Visualforce en particulier est de créer un onglet pour celle-ci, puis d’accéder à cet onglet via la section Tous les éléments dans le lanceur d’application. Il existe une approche à plus long terme qui consiste à créer une application « En développement », à lui ajouter des onglets Visualforce pendant que vous travaillez dessus et à déplacer ou supprimer ces derniers à mesure de leur passage en production. Les éléments permettant de faire cela ayant été légèrement déplacés, voici quelques instructions rapides.

Dans Setup (Configuration), saisissez Applications dans la case Quick Find (Recherche rapide), puis sélectionnez App Manager (Gestionnaire d’applications). La page de configuration du Gestionnaire d’applications Lightning Experience doit désormais être affichée.
Cliquez sur Nouvelle application Lightning, puis créez une application personnalisée pour vos pages en développement. Pensez à limiter votre application aux administrateurs système uniquement ou à un profil créé pour les développeurs de votre organisation. Il n’est pas nécessaire que vos utilisateurs voient vos pages avant que celles-ci soient ajoutées à leur emplacement permanent dans l’interface utilisateur.
Dans Configuration, saisissez Menu des applications dans la zone Recherche rapide, puis sélectionnez Menu des applications. Vous devez maintenant voir la page de configuration du menu des applications.
Assurez-vous que votre application En développement est configurée sur Visible dans le lanceur d’application. Pendant que vous êtes dans cette interface, vous voudrez peut-être en profiter pour classer vos éléments, voire masquer les applications que vous n’utilisez pas.
Dans Setup (Configuration), saisissez Tabs (Onglets) dans la case Quick Find (Recherche rapide), puis sélectionnez Tabs (Onglets). Vous devez maintenant voir la page de configuration des onglets personnalisés.
Cliquez sur Nouveau dans la section Onglets de Visualforce et créez un onglet personnalisé pour la page en développement. Rendez l'onglet visible pour votre profil d'utilisateur développeur uniquement, et ajoutez-le seulement à votre application En développement.
Répétez l'étape précédente pour chaque page que vous souhaitez ajouter à votre application En développement. Il s'agira de la seule étape requise pour l'ajout de nouvelles pages à l'avenir.

Pour toutes ces raisons, il s'agit d'un moyen facile d'afficher vos pages pendant que vous travaillez dessus, ce n'est pas vraiment comparable au fait de saisir le nom de la page dans une URL. Il existe un autre moyen, tout aussi simple, de tester votre page dans Lightning Experience : vous pouvez saisir les éléments suivants dans votre console JavaScript :

$A.get("e.force:navigateToURL").setParams(
    {"url": "/apex/pageName"}).fire();

Ce code JavaScript déclenche l’événement Lightning Experience navigateToURL et équivaut à la saisie de l’URL /apex/NomPage classique (vous pouvez d’ailleurs visualiser ce modèle d’URL dans le code).

Pour que cette technique fonctionne, vous devez être dans Lightning Experience. Si vous êtes dans Salesforce Classic, le code JavaScript échouera.

Pour quelque chose d'un peu plus pratique à utiliser, ajoutez le bookmarklet suivant pour le menu ou la barre d'outils de votre navigateur. (Pour une lecture simplifiée, nous avons ajouté des sauts de lignes pour ce code.)

javascript:(function(){
    var pageName = prompt('Visualforce page name:');
    $A.get("e.force:navigateToURL").setParams(
        {"url": "/apex/" + pageName}).fire();})();

Ce bookmarklet vous demande un nom de page, puis déclenche l'événement permettant d'y accéder directement. Très utile !

Une fois que vous êtes sur la page sur laquelle vous travaillez, vous pouvez simplement utiliser la commande de rechargement de votre navigateur, afin de rafraîchir la page à mesure que vous apportez des modifications.

Révision de pages Visualforce dans des environnements multiples

Si vous créez des pages utilisées dans Lightning Experience, dans Salesforce Classic et dans l'application Salesforce, vous allez probablement vouloir les examiner dans tous les environnements pendant leur élaboration. Vous devez ainsi ouvrir la page sur plusieurs appareils et navigateurs.

En phase de développement, il est difficile de modifier une page Visualforce qui va être utilisée dans les différents environnements d’interface utilisateur de Salesforce. Vous pouvez basculer entre Salesforce Classic et Lightning Experience grâce au sélecteur d'environnement du menu du profil, mais cela vous lassera rapidement. Vous pouvez également ajuster les réglages de l'agent utilisateur de votre navigateur afin de simuler l'environnement mobile Salesforce, mais cette opération est plus fastidieuse.

Au lieu de cela, vous préférerez utiliser plusieurs navigateurs, voire plusieurs appareils, pour afficher vos pages. Vous voudrez également accéder à au moins un utilisateur test supplémentaire. Voici un exemple de configuration de votre environnement de développement.

Environnement de développement principal

Il s'agit de l'environnement que vous utilisez lorsque vous travaillez dans Configuration pour apporter des changements à votre organisation, par exemple ajouter des champs et objets personnalisés, et éventuellement écrire un véritable code si vous utilisez la Developer Console.

Navigateur : Chrome
Utilisateur : Votre utilisateur développeur
Paramètres de l'interface utilisateur : Salesforce Classic

Révisez l'apparence et le fonctionnement de votre page dans Salesforce Classic dans cet environnement.

Environnement de révision de Lightning Experience

Cet environnement vous permet de vérifier l'apparence et le fonctionnement de vos pages dans Lightning Experience.

Navigateur : Safari ou Firefox
Utilisateur : votre utilisateur test
Paramètres de l'interface utilisateur : Lightning Experience

Environnement de révision de Salesforce Mobile

Cet environnement permet de vérifier l'apparence et le fonctionnement de vos pages dans l'application Salesforce.

Appareil : tablette ou téléphone iOS ou Android
Navigateur : Application Salesforce
Utilisateur : votre utilisateur test
Paramètres de l'interface utilisateur : Lightning Experience

Il s'agit juste d'un exemple de configuration et vous pouvez choisir n'importe quel navigateur ou appareil mobile récent pour la vôtre, que vous soyez sous Salesforce Classic ou Lightning Experience. Le plus important est d'utiliser deux navigateurs différents afin d'accéder simultanément à Salesforce Classic et à Lightning Experience, et de tester l’application Salesforce sur un véritable périphérique.

Cela paraît sans doute assez élaboré, et la configuration initiale demande un peu de travail, notamment si écrire du code vous ennuie. Cela dit, retenez deux choses. Tout d'abord, une fois la configuration effectuée, vous êtes tranquille. Ensuite, cet espace de travail ne se contente pas de vous offrir un excellent environnement de développement, il vous donne également ce dont vous avez besoin pour le test formel de vos pages. Vous ne pensiez quand même pas passer vos pages en production sans test formel ?

Test de vos pages Visualforce

Le test de vos pages Visualforce avant de les déployer en production est une tâche essentielle du développement. Lorsque votre organisation adopte Lightning Experience, le processus de test des pages se complique.

Nous venons de parler des environnements que vous devez configurer pour réaliser des tests rapides et informels au cours du développement de vos pages. La nécessité de ces environnements s'applique également au test formel de vos pages et applications. Pour éviter toute répétition, voyons pourquoi vous avez besoin de ces différents environnements.

L'intérêt de tester vos pages dans Lightning Experience et Salesforce Classic est assez évident, mais pourquoi ne pourriez-vous pas le faire dans le même navigateur et avec le même utilisateur ? En réalité, vous pouvez et devriez le faire. Vos utilisateurs peuvent passer d'une interface à l'autre et vous devez vous assurer que vos pages fonctionnent lorsqu'ils le font.

Mais vous voudrez également tester vos pages d'une manière plus isolée et systématique, le but étant de garantir que ce que vous testez est la fonctionnalité de base de la page, aussi séparée que possible des effets d'un autre code, qu'il s'agisse du vôtre, du nôtre, de celui du navigateur ou de celui de l'appareil.

Les navigateurs mobiles et de bureau fonctionnent de manière différente, parfois très différente, qu'ils proviennent du même fournisseur ou non. Un test ne pourra être formel et rigoureux que s'il est effectué sur chaque appareil et chaque navigateur que vous comptez prendre en charge.

Si vous développez une page seule ou une application de base pour des appareils identiques, votre « matrice » de facteurs sera probablement simple. Pour des projets plus ambitieux, si vous développez des fonctionnalités que vous devez gérer parmi tout un ensemble de fonctions, votre plan de test devra tenir compte de la nécessité de tester de manière croisée :

Chaque appareil pris en charge.
Chaque système d'exploitation pris en charge.
Chaque navigateur pris en charge, dont l'application Salesforce, qui intègre son propre navigateur.
Chaque environnement d'interface utilisateur pris en charge (Lightning Experience, Salesforce Classic et l’application Salesforce).

Heureusement pour vous, certains de ces facteurs se recoupent et permettent de réduire l'explosion combinatoire. Par exemple, la plupart des appareils mobiles Apple sont déjà équipés de la dernière version d'iOS. Cela signifie que l'appareil, le navigateur et le système d'exploitation ne forment qu'une seule combinaison. Votre plan peut ainsi définir le test d'un iPhone et d'un iPad équipés de la dernière version d'iOS et de l'application Salesforce seulement.

Un dernier élément sur les tests. Il existe une autre raison pour laquelle nous recommandons fortement que vos environnements de test et de développement soient identiques : cela vous permettra de commencer la totalité des tests à un stade précoce du processus de développement. Nous estimons qu'il est trop facile de reporter les tests sur des appareils secondaires à la fin du projet. Lorsque c'est le cas, la découverte des problèmes vous obligera à revenir sur vos pas.

Testez tôt, testez souvent et testez tout !

Ressources

Trailhead : Creating & Editing Visualforce Pages
Visualforce Developer’s Guide