Saisie de données à l'aide de formulaires

Objectifs de formation

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

Présenter les principales conditions requises pour un formulaire Visualforce
Différencier les éléments de formulaire Visualforce qui utilisent le style visuel de la plate-forme de ceux qui ne l’utilisent pas
Citer au moins quatre balises de formulaire d'entrée standard
Créer un formulaire Visualforce pour modifier et sauvegarder un enregistrement

Remarque

Vous souhaitez apprendre en français ? Dans ce badge, les validations de défi pratique Trailhead se font en anglais. Les traductions sont fournies entre parenthèses à titre de référence. Veillez à copier/coller les valeurs en anglais, puis à définir la langue de votre Trailhead Playground sur Anglais et les paramètres régionaux sur États-Unis. Suivez les instructions ici.

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

Introduction aux formulaires Visualforce

La création et la modification de données sont des éléments fondamentaux de toute application. Visualforce fournit tous les outils nécessaires pour créer aisément des pages capables de créer des enregistrements, de récupérer un enregistrement, de modifier ses valeurs et d’enregistrer les modifications dans la base de données.

Nous allons à présent combiner le contrôleur standard au composant <apex:form> et à quelques éléments de formulaire faciles à comprendre en vue de créer une page de modification d’enregistrement sophistiquée.

Création d'un formulaire de base

Utilisez <apex:form> et <apex:inputField> pour créer une page permettant de modifier les données. Combinez <apex:commandButton> avec l’action d’enregistrement intégrée au contrôleur standard afin de créer un enregistrement ou d’enregistrer les modifications d’un enregistrement existant.

Une page qui permet de modifier et de mettre à jour un enregistrement doit exécuter toutes les actions ci-dessous.

Rechercher l'enregistrement à modifier et le récupérer dans la base de données.
Placer les données de l'enregistrement correspondant de la page dans un formulaire de modification.
Recevoir un formulaire qui soumet les données modifiées.
Valider les nouvelles valeurs.
Enregistrer les modifications validées dans la base de données.
Afficher les messages appropriés à l'émetteur des modifications, si les nouvelles données sont enregistrées avec succès ou si des erreurs sont envoyées.

Visualforce exécute automatiquement ces tâches lorsque vous utilisez le contrôleur standard et le composant <apex:form>.

Commençons par les concepts de base.

Ouvrez la Developer Console, puis cliquez sur File (Fichier) | New (Nouveau) | Visualforce Page (Page Visualforce) pour créer une page Visualforce. Saisissez le nom AccountEdit pour la page.

Dans l'éditeur, remplacez le balisage par :

<apex:page standardController="Account">
    <h1>Edit Account</h1>
    <apex:form>
        <apex:inputField value="{! Account.Name }"/>
        <apex:commandButton action="{! save }" value="Save" />
    </apex:form>
</apex:page>

Cliquez sur Preview (Aperçu) pour prévisualiser la page à mesure que vous la modifiez. Une nouvelle fenêtre doit s'ouvrir, qui présente un formulaire dont le corps contient un champ vide unique.
Dans la fenêtre d'aperçu, ajoutez l'ID d'un compte à l'URL, puis appuyez sur Entrée. L’URL doit se présenter comme suit : https://MyDomainName.lightning.force.com/apex/AccountEdit?core.apexpages.request.devconsole=1&id=001D000000JRBes Le nom du compte doit désormais figurer dans le champ du formulaire.

Il vérifie le fonctionnement de votre contrôleur standard et la validité de l'ID d'enregistrement.

En quelques lignes de balisage, une demi-douzaine, vous avez créé un formulaire opérationnel qui met à jour le nom d'un compte. Essayez !

Les principaux concepts de ce formulaire sont les suivants :

La page utilise le contrôleur standard pour les comptes, défini dans le composant <apex:page>.
<apex:form> est un composant Visualforce qui comprend tout élément pouvant être renvoyé au serveur lors d’une action de la page. Si vous souhaitez renvoyer des données à Salesforce, vous utilisez généralement un composant <apex:form>.
<apex:inputField> crée un champ de formulaire à l’écran pour le champ de données de l’enregistrement qui lui est associé. Pour cela, vous fournissez une expression qui référence le champ correspondant dans l’attribut value. Ici, l’expression est {!Account.Name }, qui correspond au champ Name (Nom) du compte.
Pour terminer, <apex:commandButton> ajoute un bouton à l’interface utilisateur de la page. Un clic sur ce bouton déclenche une action. Dans le cas présent, l'action correspond à la méthode d'action save() dans le contrôleur standard. Comme avec <apex:inputField>, vous connectez <apex:commandButton> à son action en référençant la méthode d’action à appeler dans une expression fournie à l’attribut d’action <apex:commandButton>.

Ajout d'étiquettes de champ et style de la plate-forme

Placez des éléments de formulaire dans les balises <apex:pageBlock> et <apex:pageBlockSection> pour les organiser et les regrouper, et appliquer le style visuel de la plate-forme au formulaire.

Revoyons votre formulaire pour lui donner un aspect plus familier.

Dans le composant <apex:form>, placez les deux éléments de formulaire dans les balises <apex:pageBlock> et <apex:pageBlockSection> pour définir votre balisage comme suit :

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

Le style de cette version du formulaire est très différent ! Comme avec les composants de sortie, lorsque vous utilisez des composants d’entrée dans des balises <apex:pageBlock> et <apex:pageBlockSection>, ils adoptent le style visuel de la plate-forme.

Sous le champ de nom du compte, ajoutez trois autres champs pour définir votre balisage comme suit :

<apex:pageBlockSection columns="1">
    <apex:inputField value="{! Account.Name }"/>
    <apex:inputField value="{! Account.Phone }"/>
    <apex:inputField value="{! Account.Industry }"/>
    <apex:inputField value="{! Account.AnnualRevenue }"/>
</apex:pageBlockSection>

Votre formulaire est maintenant plus complet et réaliste. Modification d'un formulaire de compte avec le style de la plate-forme

Le composant <apex:inputField> affiche le widget d’entrée approprié en fonction du type d’un champ d’objet standard ou personnalisé. Par exemple, si vous utilisez une balise <apex:inputField> pour afficher un champ de date, un widget de calendrier s’affiche dans le formulaire. Si vous utilisez une balise <apex:inputField> pour afficher un champ de liste de sélection, comme dans le cas présent avec le champ de secteur d’activité, une liste déroulante s’affiche à la place.

<apex:inputField> permet de capturer une entrée utilisateur pour tous les champs d’objet standard ou personnalisés, et respecte les métadonnées définies dans la définition du champ, notamment le fait qu’il soit obligatoire ou unique, ou le fait que l’utilisateur actif soit autorisé à l’afficher et à le modifier.

Affichage des erreurs et des messages du formulaire

Utilisez <apex:pageMessages> pour afficher les erreurs ou les messages de gestion du formulaire.

En cas de problème, votre page doit afficher un commentaire utile, par exemple un champ obligatoire est manquant ou la validation d'une valeur de champ a échoué. Le contrôleur standard gère ces informations pour vous. Il vous suffit de préciser l'emplacement des messages sur la page.

Sous la balise <apex:pageBlock>, ajoutez la ligne ci-dessous.
<apex:pageMessages/>
Essayez de supprimer le nom du compte, puis de sauvegarder l'enregistrement avec un nom vide. Des erreurs de validation de la page s’affichent.

Vous pouvez constater que <apex:inputField> affiche les erreurs en regard de son propre champ. Pour un formulaire plus long, il est préférable de répertorier toutes les erreurs de la page à un emplacement unique, en haut de la page.

Le contrôleur standard collecte déjà tous les messages de la page durant le traitement du formulaire. Le composant <apex:pageMessages> permet d’afficher ces messages à l’emplacement de votre choix.

Modification d'enregistrements associés

Aidez les utilisateurs à modifier les informations associées en ajoutant des liens vers les enregistrements associés.

Jusqu'à présent, nos formulaires se sont contentés de modifier un enregistrement à la fois. Plus précisément, le formulaire utilise le contrôleur standard pour l'objet compte. Par conséquent, il peut modifier uniquement des enregistrements de compte.

Ce workflow n'est pas toujours le plus efficace pour les utilisateurs. Vous ne pouvez pas enregistrer des modifications de plusieurs types d'objet dans une requête avec le contrôleur standard, mais vous pouvez faciliter l'accès aux enregistrements associés en insérant des liens qui déclenchent des actions, par exemple une modification ou une suppression dans ces enregistrements.

Sous la balise fermante </apex:pageBlock> existante, ajoutez le balisage ci-dessous.

<apex:pageBlock title="Contacts">
    <apex:pageBlockTable value="{!Account.contacts}" var="contact">
        <apex:column>
            <apex:outputLink
                value="{! URLFOR($Action.Contact.Edit, contact.Id) }">
                Edit
            </apex:outputLink>
            <apex:outputLink
                value="{! URLFOR($Action.Contact.Delete, contact.Id) }">
                Del
            </apex:outputLink>
        </apex:column>
        <apex:column value="{!contact.Name}"/>
        <apex:column value="{!contact.Title}"/>
        <apex:column value="{!contact.Phone}"/>
    </apex:pageBlockTable>
</apex:pageBlock>

La liste des contacts du compte s’affiche sous le formulaire de modification du compte. Modification d'un compte avec des enregistrements de contact associés

Modification d'un compte avec des enregistrements de contact associés

Essayez de cliquer sur le lien Modifier d’un contact. Où mène le lien ? Que se passe-t-il lorsque vous enregistrez vos modifications ou cliquez sur Annuler dans cette page ?

Le composant <apex:pageBlockTable> crée un tableau qui contient la liste des contacts du compte. Ici, la nouveauté réside dans la colonne de composants <apex:outputLink>. Ils utilisent une expression qui référence une variable globale, $Action, puis la combine avec l'ID de contact dans la fonction URLFOR(). Il en résulte un lien vers la page de modification ou de suppression du contact, selon l'action référencée. Ce raccourci peut s'avérer très utile pour les utilisateurs du formulaire.

En savoir plus...

L'élaboration de formulaires utiles et pratiques pour vos applications Web implique de nombreux autres éléments.

Pour commencer, sachez que Visualforce propose environ une douzaine de composants d’entrée, pas seulement <apex:inputField>. <apex:inputField> fonctionne bien avec le contrôleur standard, ainsi que pour modifier directement les données d’enregistrement. Avec les pages dans lesquelles vous utilisez votre propre code de contrôleur personnalisé ou lorsque la saisie d'un formulaire ne mappe pas directement avec les champs d'un enregistrement, vous devez connaître d'autres composants. La plupart de ces composants portent un nom qui commence par apex:input et sont regroupés dans le document de référence des composants. Pour repérer les contrôles de listes et de cases d’option, recherchez les composants dont le nom commence par apex:select.

Pour trouver les interfaces utilisateur destinées à des appareils mobiles, examinez le composant <apex:input>, employé dans des pages HTML5. Il permet d’utiliser diverses fonctionnalités qui génèrent des éléments d’entrée utilisateur adaptés aux appareils mobiles.

Le code que vous avez écrit ici utilise plusieurs actions fournies par le contrôleur standard de la page. Nous les appelons actions standard et elles sont relativement nombreuses. Un ensemble de base est disponible pour tous les objets avec des contrôleurs standard, mais de nombreux objets standard intégrés permettent d'utiliser d'autres actions.

Vous avez pu ajouter des actions pour modifier et supprimer des contacts associés existants. Comment pouvez-vous ajouter la possibilité de créer des contacts associés ? Cette procédure n’est pas aussi simple que la création d’un lien avec l’action create ou l’utilisation des actions edit et delete. Ces actions fonctionnent dans des enregistrements existants, qui ont déjà une relation avec le compte associé. Par contre, lorsque vous créez un enregistrement, vous devez créer cette relation vous-même. Vous devez pour cela écrire votre propre code de contrôleur personnalisé.

Ressources