Objectifs

• Comprendre les bases des pages Visualforce dans Salesforce.
• Apprendre à créer des pages Visualforce pour personnaliser l’interface utilisateur.
• Apprendre à utiliser des contrôleurs standard et personnalisés avec Visualforce.
• Explorer les concepts de base des composants Visualforce et des expressions.

Prérequis

• Un compte Salesforce. Vous pouvez en créer un gratuitement sur Salesforce Developer.
• Connexion à votre compte Salesforce.

1. Introduction à Visualforce

Visualforce est un cadre de développement de l’interface utilisateur pour Salesforce. Il permet aux développeurs de créer des pages Web personnalisées qui s’exécutent sur la plateforme Salesforce, en utilisant des balises similaires à HTML. Chaque page Visualforce est associée à un contrôleur qui gère la logique de l’application.

Principales caractéristiques de Visualforce :

• Balises Visualforce : Balises spécifiques qui facilitent l’intégration avec les données Salesforce.
• Contrôleurs : Gèrent la logique d’application et fournissent des données à la page.
• Composants réutilisables : Balises et composants personnalisés pour construire l’interface utilisateur.

2. Création de votre première page Visualforce

Étape 1 : Accéder à l’éditeur Visualforce

1. Connectez-vous à Salesforce : Allez sur login.salesforce.com et connectez-vous.
2. Naviguez vers Setup : Cliquez sur l’icône des paramètres en haut à droite, puis sur “Setup”.
3. Accédez à Visualforce Pages :

• Dans la barre de recherche rapide à gauche, tapez “Visualforce Pages” et sélectionnez “Visualforce Pages”.
• Cliquez sur “New” pour créer une nouvelle page Visualforce.

Étape 2 : Créer une page Visualforce simple

1. Nom de la page : HelloWorld
2. Code de la page :

   <apex:page>
       <h1>Hello, Salesforce World!</h1>
   </apex:page>

3. Enregistrer la page : Cliquez sur Save.

3. Utilisation des contrôleurs standard avec Visualforce

Les contrôleurs standard permettent d’accéder aux enregistrements Salesforce sans écrire de code Apex. Chaque page Visualforce peut être associée à un contrôleur standard pour un objet spécifique.

Exemple : Page Visualforce avec contrôleur standard Account

1. Créer une nouvelle page Visualforce :

• Nom de la page : AccountDetail
• Code de la page :

<apex:page standardController="Account">
    <h1>Account Details</h1>
    <p>Name: {!Account.Name}</p>
    <p>Phone: {!Account.Phone}</p>
    <p>Industry: {!Account.Industry}</p>
</apex:page>

2. Enregistrer la page : Cliquez sur Save.
3. Accéder à la page : Ajoutez /apex/AccountDetail?id=[AccountId] à l’URL de votre organisation Salesforce, en remplaçant [AccountId] par l’ID d’un compte existant.

4. Utilisation des contrôleurs personnalisés avec Visualforce

Les contrôleurs personnalisés permettent une plus grande flexibilité en définissant la logique d’application dans des classes Apex.

Étape 1 : Créer un contrôleur personnalisé Apex

1. Accédez à l’éditeur Apex :

• Dans Setup, tapez “Apex Classes” dans la barre de recherche rapide et sélectionnez Apex Classes.
• Cliquez sur New pour créer une nouvelle classe Apex.

1. Code du contrôleur :

   public class CustomAccountController {
       public Account account { get; set; }

       public CustomAccountController() {
           account = [SELECT Name, Phone, Industry FROM Account WHERE Id = :ApexPages.currentPage().getParameters().get('id')];
       }
   }

3. Enregistrer la classe : Cliquez sur Save.

Étape 2 : Créer une page Visualforce avec un contrôleur personnalisé

1. Créer une nouvelle page Visualforce :

• Nom de la page : CustomAccountDetail
• Code de la page :

<apex:page controller="CustomAccountController">
    <h1>Account Details</h1>
    <p>Name: {!account.Name}</p>
    <p>Phone: {!account.Phone}</p>
    <p>Industry: {!account.Industry}</p>
</apex:page>

2. Enregistrer la page : Cliquez sur Save.
3. Accéder à la page : Ajoutez /apex/CustomAccountDetail?id=[AccountId] à l’URL de votre organisation Salesforce, en remplaçant [AccountId] par l’ID d’un compte existant.

5. Composants Visualforce et expressions

Utilisation de composants standard

Visualforce propose plusieurs composants standard pour construire des interfaces utilisateur interactives.

Exemple : Formulaire de saisie avec composants standard

1. Créer une nouvelle page Visualforce :

• Nom de la page : AccountForm
• Code de la page :

<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="Edit Account">
            <apex:pageBlockSection>
                <apex:inputField value="{!Account.Name}"/>
                <apex:inputField value="{!Account.Phone}"/>
                <apex:inputField value="{!Account.Industry}"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons>
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

2. Enregistrer la page : Cliquez sur Save.
3. Accéder à la page : Ajoutez /apex/AccountForm?id=[AccountId] à l’URL de votre organisation Salesforce, en remplaçant [AccountId] par l’ID d’un compte existant.

Conclusion

Vous avez maintenant appris les bases du développement d’interfaces utilisateur avec Visualforce dans Salesforce. Vous savez comment créer des pages Visualforce, utiliser des contrôleurs standard et personnalisés, et incorporer des composants Visualforce pour créer des interfaces utilisateur interactives. Avec ces compétences, vous pouvez personnaliser l’expérience utilisateur dans Salesforce pour répondre aux besoins spécifiques de votre organisation.