Création et modification de pages Visualforce

Objectifs de formation

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

Présenter une page Visualforce et ses principaux attributs
Citer et ouvrir des pages Visualforce existantes dans votre organisation
Créer et modifier une page Visualforce en utilisant la Developer Console.
Identifier, ajouter et personnaliser des balises et des attributs Visualforce dans l’éditeur

Remarque

Vous souhaitez apprendre en français ? Commencez le défi dans un Trailhead Playground en français et utilisez les traductions fournies entre crochets pour naviguer. Copiez et collez uniquement les valeurs en anglais, car les validations de défi reposent sur les données en anglais. Si vous ne réussissez pas le défi dans votre organisation en français, nous vous recommandons (1) de définir le paramètre régional sur les États-Unis, (2) de définir la langue sur l’anglais en suivant les instructions ici, puis (3) de cliquer à nouveau sur le bouton « Vérifier le défi ».

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

Introduction à la création de pages Visualforce

Les pages Visualforce sont des blocs de construction de base destinés aux développeurs d’applications. Une page Visualforce est semblable à une page Web standard, mais dotée de fonctionnalités puissantes qui permettent d’accéder, d’afficher et de mettre à jour les données de votre organisation. Les pages peuvent être référencées et invoquées via une URL unique, de la même façon que dans un serveur Web traditionnel.

Visualforce utilise un langage de balisage similaire au langage HTML. Chaque balise Visualforce correspond à un composant à gros grain ou à grain fin, tel qu’une section de page, une vue de liste ou un champ individuel. Visualforce regroupe près de 150 composants intégrés et permet aux développeurs de créer leurs propres composants. Le balisage Visualforce peut être librement combiné à un balisage HTML, à des styles CSS et à des bibliothèques JavaScript, ce qui offre une souplesse considérable dans la mise en œuvre de l’interface utilisateur de votre application.

Vous pouvez afficher, créer et modifier des pages Visualforce de plusieurs façons dans Salesforce. Il est également possible de créer et de modifier des pages Visualforce à l’aide des API Salesforce, qui activent une variété d’outils externes.

Création de pages Visualforce dans la Developer Console

Utilisez la Developer Console pour créer et modifier des pages Visualforce, et accédez aux autres outils de développement puissants de Lightning Platform. La Developer Console fournit la mise en évidence automatique de la syntaxe, la correspondance de paire de balises, la suggestion automatique et la saisie automatique, la mise en retrait intelligente, et d'autres fonctionnalités de modification du balisage et du code. Cet outil intégré est le plus utile lorsque vous travaillez sur la même page depuis un certain temps, ou sur des pages Visualforce qui contiennent des contrôleurs personnalisés, un code plus long, plus complexe, etc.

Pour créer une page Visualforce dans la Developer Console, procédez comme suit :

Ouvrez la Developer Console sous Your Name (Votre nom) ou le menu d’accès rapide (). La Developer Console s'ouvre dans une nouvelle fenêtre.
Cliquez sur File (Fichier) | New (Nouveau) | Visualforce Page (Page Visualforce).
Saisissez HelloWorld pour nommer la nouvelle page, puis cliquez sur OK. Une page Visualforce vide s’ouvre dans la Developer Console.
Dans l'éditeur, saisissez le balisage ci-dessous pour la page.
```
<apex:page>
    <h1>Hello World</h1>
</apex:page>
```
Cliquez sur File (Fichier) | Save (Enregistrer).
Pour afficher votre nouvelle page, cliquez sur Preview (Aperçu). La page restituée s'ouvre dans une nouvelle fenêtre. Notez que l'aperçu présente votre page sans style Salesforce. Pour voir votre page dans le contexte de Lightning Experience, revenez à la fenêtre principale de Lightning Experience dans votre navigateur. Ouvrez la console JavaScript de votre navigateur et saisissez le code suivant. N’oubliez pas de remplacer pageName par le nom de votre page. Ce JavaScript déclenche l’événement Lightning Experience navigateToURL et équivaut à la saisie de l’URL classique /apex/PageName.

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

Dans l'éditeur, ajoutez un texte à votre page, puis enregistrez-la. La fenêtre d'aperçu est automatiquement actualisée pour refléter vos modifications lorsque vous enregistrez la page. Nous supprimerons plus tard l'instruction d'enregistrement, mais vous devez enregistrer vos pages entre chaque étape.

La Developer Console

Cliquez sur File (Fichier) | Open (Ouvrir) pour afficher la liste des pages Visualforce existantes. Double-cliquez sur une page pour l'ouvrir. Vous pouvez également ouvrir d’autres entités de Salesforce, notamment des classes et des déclencheurs Apex, des composants Visualforce, etc.

Ajout d'attributs à l'aide de la suggestion automatique

Définissez des attributs dans des composants Visualforce afin de personnaliser leur comportement. Utilisez la suggestion automatique pour ajouter rapidement des attributs et des valeurs à des balises de composant Visualforce.

Pour ajouter et modifier des attributs dans une balise Visualforce, procédez comme suit :

Sur votre page HelloWorld, cliquez sur la balise ouvrante <apex:page>, avant le caractère fermant >. Insérez un espace, puis saisissez s. La suggestion automatique présente une liste de fins possibles correspondant à votre saisie. À mesure que vous saisissez des caractères, la liste de suggestions diminue et indique uniquement les valeurs correspondantes.
Appuyez sur la touche flèche vers le bas jusqu’à ce que sidebar (menu latéral) soit sélectionné. Appuyez sur la touche Retour. L’attribut sidebar (menu latéral) est ajouté à la balise <apex:page> dans votre balisage, et la suggestion automatique présente des valeurs possibles correspondantes.
Utilisez les touches fléchées ou saisissez f pour sélectionner false (faux), puis appuyez sur la touche Retour. Votre code doit se présenter comme suit :
```
<apex:page sidebar="false">
    <h1>Hello World</h1>
</apex:page>
```
Enregistrez vos modifications.
Répétez les étapes ci-dessus pour ajouter showHeader="false" à la balise <apex:page>, puis enregistrez vos modifications. Votre code doit se présenter comme suit :
```
<apex:page sidebar="false" showHeader="false">
    <h1>Hello World</h1>
</apex:page>
```

La suggestion automatique est très utile lorsque vous connaissez les composants à utiliser, leur nature et leur fonction. Si vous découvrez Visualforce, reportez-vous régulièrement au document Référence des composants standard pour connaître les composants disponibles, leur fonction, leur utilisation et comment les personnaliser.

Au-delà des concepts de base

Dans Salesforce Classic, la valeur par défaut des attributs sidebar et showHeader est true. Cependant, dans Lightning Experience et dans l’application mobile Salesforce, la valeur de ces attributs est remplacée et est toujours false. Il est impossible de supprimer l’en-tête de Lightning Experience.

La page contient quelques feuilles de style Salesforce qui permettent d’adapter les choix de police, de taille, etc., de Salesforce. Pour supprimer tous les choix standard de Salesforce, ajoutez standardStylesheets="false" pour désactiver également les styles.

Ajout et organisation des composants pour structurer la page

Ajoutez des composants à votre page Visualforce et organisez-les pour structurer la page.

Pour ajouter de nouvelles balises Visualforce à votre page pour structurer la page, procédez comme suit :

Sur votre page HelloWorld, ajoutez un composant <apex:pageBlock> sous le texte “Hello World”. <apex:pageBlock> est un élément d’interface utilisateur structuré qui regroupe des éléments associés sur une page. Utilisez la suggestion automatique pour l’ajouter, puis définissez la valeur de l’attribut title sur “A Block Title” (Titre d’un bloc).
Ajoutez un composant <apex:pageBlockSection> dans le composant <apex:pageBlock>. Définissez l’attribut de titre sur “A Section Title” (Titre de la section). <apex:pageBlockSection> est un autre composant qui ajoute une structure et une hiérarchie à une page. Dans la page affichée, l’utilisateur peut réduire les éléments <apex:pageBlockSection> pour tout masquer à l’exception du titre de la section.
Ajoutez un texte dans le composant <apex:pageBlockSection>, par exemple I’m three components deep! (J’utilise trois composants !). Votre code doit se présenter comme suit :
```
<apex:page>
    <h1>Hello World</h1>
    <apex:pageBlock title="A Block Title">
        <apex:pageBlockSection title="A Section Title">
            I'm three components deep!
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
```
Votre page affiche une structure, avec un titre général, une section réductible avec un titre, et un texte brut.
Ajoutez un autre <apex:pageBlockSection> après le premier, puis définissez la valeur de l’attribut title sur “A New Section” (Une nouvelle section). Ajoutez un texte au corps du composant, comme avec le premier <apex:pageBlockSection>. Votre code doit se présenter comme suit :
```
<apex:page>
    <h1>Hello World</h1>
    <apex:pageBlock title="A Block Title">
        <apex:pageBlockSection title="A Section Title">
            I'm three components deep!
        </apex:pageBlockSection>
        <apex:pageBlockSection title="A New Section">
            This is another section.
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
```
Remarquez la manière dont les balises <apex:pageBlockSection> sont imbriquées dans la balise <apex:pageBlock>. Vous ne pouvez pas utiliser une balise <apex:pageBlockSection> enfant sans la placer dans une balise <apex:pageBlock> parent.

Vous connaissez maintenant les principes fondamentaux de la construction d'une page, notamment la création, l'ajout d'attributs et de composants, et l'organisation des composants pour structurer et concevoir votre page.

En savoir plus...

La Developer Console est l’outil le plus puissant avec les fonctionnalités les plus complètes pour le développement de Lightning Platform depuis votre organisation Salesforce.

Il existe deux autres méthodes intégrées de création et de modification de pages Visualforce dans Salesforce.

Le mode de développement « quick fix » et pied de page est une méthode qui permet de créer rapidement une page ou d'apporter des modifications rapides à une page existante. Cette méthode est idéale pour des modifications rapides ou créer une petite page afin de tester un tout nouveau code, avant de les incorporer aux pages de votre application.
L’éditeur Configuration, disponible dans Configuration en saisissant Pages Visualforce dans la zone Recherche rapide, puis en sélectionnant Pages Visualforce, est certes l’éditeur de base, mais il permet d’accéder à des paramètres de page qui ne sont pas disponibles dans la Developer Console ou dans le pied de page du mode de développement.

Vous pouvez également développer des pages Visualforce avec Visual Studio Code, un éditeur de code léger et extensible. Les extensions Salesforce pour Visual Studio Code comprennent des outils de développement pour Salesforce Platform. Ils fournissent des fonctionnalités permettant de travailler avec des organisations de développement (organisations test, sandbox et organisations DE), Apex, les composants Aura et Visualforce.

Les composants <apex:pageBlock> et <apex:pageBlockSection> que vous ajoutez à votre page affichent une interface utilisateur qui correspond aux éléments habituels de l’interface de Salesforce Classic. D’autres composants permettent également de reproduire le style visuel de la plate-forme, notamment <apex:pageBlockSectionItem> et <apex:pageBlockButtons>. Pouvez-vous deviner lequel s’incorpore dans un <apex:pageBlockSection> ?

Visualforce comprend presque 150 composants intégrés qui offrent une grande diversité d’éléments et de comportements pour l’interface utilisateur. Le document Visualforce Standard Component Reference répertorie ces composants et présente leurs attributs, avec un exemple de code qui montre comment utiliser les composants.

Ressources

Aide Salesforce : Créer des pages Visualforce
Aide Salesforce : Developer Console Functionality
Aide Salesforce : Using the Editor for Visualforce
Guide du développeur Visualforce Tools for Visualforce Development
Guide du développeur Visualforce Standard Component Reference
Extensions Salesforce pour Visual Studio Code
Blog des développeurs Salesforce : Developing Visualforce With Your Browser

Besoin d'aide ?

En savoir plus