Développement de pages Visualforce pour Lightning Experience

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.

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.

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.

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.

1. 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.
2. 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.
3. 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.
4. 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. 
5. 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.
6. 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.  
7. 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.

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

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.

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.

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

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

• 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 ?

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 :

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 !

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