Tutoriel : Ajouter un formulaire à plusieurs étapes à votre page
Les formulaires à plusieurs étapes constituent un moyen puissant de collecter les entrées des utilisateurs sur plusieurs étapes. Les informations collectées sont stockées ou mises à jour dans Microsoft Dataverse. Voici les fonctionnalités disponibles dans un formulaire à plusieurs étapes par rapport aux formulaires réguliers :
- Permettant de répartir le processus de collection ou de mise à jour des données en plusieurs étapes.
- Fournit des conditions qui modifient dynamiquement le flux des étapes en fonction des entrées utilisateur.
- Le suivi de session permet à un utilisateur de reprendre là où il s’est arrêté lorsqu’il suit un processus de mise à jour des données.
Regardez cette vidéo (sans audio) pour voir un exemple de formulaire à plusieurs étapes sur une page :
Dans ce didacticiel, vous allez découvrir comment :
- Créer des tables, des vues et des formulaires Dataverse à utiliser dans votre formulaire à plusieurs étapes
- Ajouter un formulaire à plusieurs étapes à une page Web
- Configurer les autorisations de table pour les formulaires à plusieurs étapes
- Ajouter une condition et rediriger l’étape vers un formulaire à plusieurs étapes
Conditions préalables
- Un abonnement d’essai à Power Pages. Obtenez un abonnement d’essai à Power Pages ici.
- Un site Power Pages créé. Créer un site Power Pages.
- Menez à bien le didacticiel Ajouter et concevoir une page.
- Menez à bien le didacticiel Afficher les données en toute sécurité sur les pages.
- Menez à bien le didacticiel Ajouter un formulaire à une page.
Note
Lors de la création d’un formulaire à plusieurs étapes, il est important de planifier les étapes en premier. Cela facilite le processus de configuration. Établissez les étapes individuelles et toutes les branches conditionnelles du processus à plusieurs étapes.
Créer un formulaire à plusieurs étapes
Dans les étapes ci-dessous, nous allons créer un formulaire à plusieurs étapes. Cet exemple suit un processus simple pour déposer une demande de bourse d’étude, mais les concepts peuvent être appliqués à d’autres processus d’entreprise.
Voici un aperçu d’un exemple d’étapes :
| Step | Description |
|---|---|
| 1 | Sélectionnez la bourse à laquelle postuler et entrez le nom du candidat. |
| 2 | Renseignez les détails sur le candidat. |
| 3 | Recueillez d’autres détails supplémentaires. Plus tard dans le didacticiel, nous rendrons cette étape conditionnelle en fonction des informations de l’étape 2. |
| 4 | Recueillez le consentement final de l’utilisateur. |
Créer des tables et des formulaires Dataverse à utiliser dans le formulaire à plusieurs étapes
La vidéo suivante montre comment créer des formulaires à utiliser dans le processus de formulaire en plusieurs étapes.
Nous allons avoir besoin de stocker nos informations sur notre processus dans des tables Microsoft Dataverse.
Pour chaque étape du processus qui nécessite qu’un utilisateur crée ou mette à jour des colonnes sur un enregistrement Dataverse, vous aurez besoin d’un formulaire Dataverse correspondant.
Dans notre exemple, nous allons créer une table Dataverse appelée Applications pour notre processus. Pour plus d’informations sur la façon de créer des tables Dataverse, consultez Comment créer et modifier les tables Dataverse à l’aide de l’espace de travail Données.
Accéder à Power Pages.
Sélectionnez un site sur lequel vous souhaitez ajouter un formulaire à plusieurs étapes et sélectionnez Modifier.
Dans le studio de conception, sélectionnez l’espace de travail Données.
Créez une table Dataverse appelée Applications avec les propriétés suivantes :
Conseil
- La table suivante n’est qu’un exemple, n’hésitez pas à créer des tables correspondant à vos propres processus d’entreprise.
Nom de colonne Type de données de colonne Nom du candidat Texte (renommer la colonne nom) Bourse Choix (exemples de choix : American Architect Scholarship,Foreign Language Scholarship,Women in STEM Scholarship,Future Design Leaders Scholarship) Niveau de classe Choix (choix : Junior, Senior) Consentement Oui/non Coût des frais de scolarité Devise Type de diplôme Choix (choix : Master, Licence ) Temps plein Oui/non Principal Text Autres bourses Plusieurs lignes de texte 
Après les tables, vous devrez créer des formulaires pour chaque étape de votre processus.
Astuce
- Consultez Comment créer et modifier des formulaires Dataverse à l’aide de l’espace de travail Données sur la façon de créer des formulaires Dataverse.
- Une bonne pratique consiste à nommer vos formulaires pour qu’ils correspondent à chaque étape de votre processus à plusieurs étapes.
- Pour afficher les colonnes dans le formulaire sans autoriser les utilisateurs à les mettre à jour, configurez les colonnes pour qu’elles soient en lecture seule lors de la création des formulaires.
Créez les quatre formulaires suivants et organisez les colonnes sur le formulaire. Au fur et à mesure que chaque formulaire est créé, sélectionnez Publier le formulaire.
Nom du formulaire Colonnes dans un formulaire Étape 1 de l’application Bourse, Nom du candidat Étape 2 de l’application Bourse (lecture seule), Nom du candidat (lecture seule), Type de diplôme, Principal, Temps plein, Niveau de la classe, Stem Étape 3 de l’application Bourse (lecture seule), Nom du candidat (lecture seule), Frais de scolarité, Autres bourses Étape 4 de l’application Bourse (lecture seule), Nom du candidat (lecture seule), Consentement 
Vous devriez maintenant avoir une série de formulaires à utiliser dans votre processus à plusieurs étapes.
Ajouter un composant de formulaire à plusieurs étapes à une page
Maintenant que nous avons notre table et nos formulaires, nous pouvons créer un formulaire à plusieurs étapes sur une page Web.
Cette vidéo montre comment créer un formulaire en plusieurs étapes sur une page.
Accédez à l’espace de travail Pages et ajoutez une nouvelle page ou modifiez-en une existante. Pour plus d’informations sur la création de pages Web, consultez Créer et concevoir des pages.
Ajoutez une nouvelle section et sélectionnez le composant Formulaire à plusieurs étapes.
Si d’autres formulaires à plusieurs étapes existent sur votre site, vous aurez la possibilité de les ajouter à votre page. Dans notre exemple, nous allons créer un formulaire à plusieurs étapes pour notre didacticiel. Sélectionnez + Nouveau formulaire à plusieurs étapes dans la boîte de dialogue.
La fenêtre Ajouter un formulaire à plusieurs étapes apparaît. Entrez Application (ou un autre nom) pour le champ Nom du formulaire. Sélectionnez OK.
Ce formulaire ne comportera aucune étape. Sélectionnez + Ajouter la première étape pour ajouter la première étape.
Dans la fenêtre Ajouter une étape, entrez les valeurs suivantes dans la configuration :
- Dans le champ Nom de l’étape, entrez Étape 1 de l’application.
- Dans le champ Choisir une table, sélectionnez Application (ou le nom que vous avez donné à votre table).
- Dans le champ Sélectionner un formulaire, sélectionnez Étape 1 de l’application.
Choisissez l’onglet latéral Plus d’options et notez que l’option Données de ce formulaire : est automatiquement définie sur Créer un nouvel enregistrement. Pour la première étape de notre exemple, nous allons créer un enregistrement dans la table Dataverse. Notez que, dans les étapes suivantes, nous allons modifier l’enregistrement créé à la première étape et que cette option sera différente.
Sélectionnez OK.
Nous allons commencer à ajouter des étapes supplémentaires. Dans le menu, sélectionnez + Ajouter une étape.
Dans la fenêtre Ajouter une étape, entrez les valeurs suivantes pour la deuxième étape :
- Dans le champ Nom de l’étape, entrez Étape 2 de l’application.
- Dans le champ Choisir une table, la table Application (ou le nom que vous avez donné à votre table) doit déjà être sélectionnée.
- Dans le champ Sélectionner un formulaire, sélectionnez Étape 2 de l’application.
Choisissez l’onglet latéral Plus d’options et notez que l’option Données de ce formulaire : est automatiquement définie sur Mettre à jour un enregistrement existant. Dans notre exemple, la deuxième étape continuera d’ajouter des détails à l’enregistrement Dataverse créé lors de la première étape.
Note
En fonction de vos propres processus, vous pouvez créer ou mettre à jour différents enregistrements Dataverse à différentes étapes du processus.
Cliquez sur OK.
Continuez à ajouter les deux étapes restantes en tant qu’étapes de mise à jour, l’Étape 3 de l’application et l’Étape 4 de l’application, en suivant les instructions ci-dessus.
Modifier les propriétés du champ
Vous pouvez modifier certaines des propriétés de champ de votre formulaire à plusieurs étapes dans le studio de conception. Rendons un champ obligatoire, mettons à jour l’étiquette et ajoutons une description.
Sélectionnez un champ sur le composant de formulaire à plusieurs étapes sur la page.
Sélectionnez Modifier le champ.
Dans la fenêtre Modifier le champ, remplacez la valeur d’Étiquette du champ par une autre valeur. Sélectionnez Rendre ce champ obligatoire et sélectionnez Afficher une description . Entrez des instructions dans le champ Description.
Sélectionnez OK.
Ajouter une autorisation de table
Par défaut, les visiteurs du site ne pourront pas accéder au formulaire à plusieurs étapes. Dans notre exemple, nous souhaitons autoriser uniquement les utilisateurs authentifiés à remplir le formulaire à plusieurs étapes. Vous pouvez utiliser une combinaison de rôles Web et d’autorisations de table pour configurer les actions de création, de lecture et de mise à jour des données pour votre propre processus à plusieurs étapes.
Cette vidéo prsente comment configurer les autorisations de table pour les formulaires à plusieurs étapes.
Pour les nouveaux formulaires, une bannière apparaîtra vous invitant à ajouter des autorisations.
Si vous avez déjà configuré des autorisations pour la table utilisée dans votre formulaire à plusieurs étapes, vous pouvez sélectionner les points de suspension (...) et choisir Autorisations.
Sélectionnez + Nouvelle autorisation.
Un nom est attribué à l’autorisation de table, la table est sélectionnée et le champ Type d’accès est défini sur Accès global par défaut. Les autorisations Écrire et Créer seront sélectionnées afin que les visiteurs du site puissent utiliser le formulaire.
Sélectionnez + Ajouter des rôles et sélectionnez Utilisateurs authentifiés comme le rôle par défaut.
Sélectionnez Enregistrer.
Test de votre formulaire à plusieurs étapes
À ce stade, vous pouvez tester votre formulaire à plusieurs étapes.
Sélectionnez Version préliminaire, suivi de Bureau.
Lorsque la page d’accueil apparaît, sélectionnez Se connecter et connectez-vous en tant qu’utilisateur du site. Consultez Fournir un accès à des publics externes pour plus d’informations.
Sélectionnez la page où vous avez placé votre composant de formulaire à plusieurs étapes.
Essayez le processus en tant qu’utilisateur et suivez les étapes.
Si vous rencontrez des problèmes, vérifiez la configuration dans le studio de conception, ainsi que chaque étape.
Une fois que vous avez correctement soumis le formulaire, retournez au studio de conception.
Sélectionnez Données, puis sélectionnez la table Application (ou le nom que vous avez donné à votre table) et confirmez que les enregistrements ont été créés à l’aide du processus de formulaire à plusieurs étapes.
Ajouter une étape conditionnelle à votre formulaire à plusieurs étapes
Si vous devez ajouter une logique conditionnelle à votre formulaire à plusieurs étapes, vous devez d’abord identifier la condition en affichant le nom logique de la colonne Dataverse et l’évaluation que vous souhaitez effectuer. Le nom logique d’une colonne peut être trouvé en visualisant la configuration de la colonne dans l’espace de travail Données.
Dans notre exemple ci-dessous, nous allons vérifier si un candidat souhaite obtenir un master. Si un utilisateur poursuit des études supérieures, il sera dirigé vers des étapes supplémentaires. Les autres candidats sauteront cette étape. N’hésitez pas à ajouter une condition basée sur vos propres processus métier.
Nous allons évaluer si le champ Type de diplôme a la valeur Licence ou Master, représenté par le nom logique du champ craxx_degreetype et les valeurs de choix (Master = ’124860001’).
Les étapes conditionnelles sont configurées dans l’application de gestion du portail.
Dans le studio de conception, sur le formulaire à plusieurs étapes, sélectionnez la liste déroulante répertoriant toutes les étapes du formulaire à plusieurs étapes, puis choisissez le lien Application de gestion du portail.
Vous devez être dans l’application de gestion du portail dans l’enregistrement des métadonnées de votre formulaire à plusieurs étapes. Sélectionnez l’onglet Étapes de formulaire.
Sélectionnez + Nouvelle étape du formulaire.
Donnez un nom à l’étape (par exemple Vérifier le type de diplôme).
Spécifiez les configuration.
- Définissez le Type sur Condition.
- Sélectionnez la table Application depuis le menu déroulant Nom de la table cible.
Sélectionnez l’onglet Condition et entrez la condition en utilisant le nom de la colonne logique et une valeur. Dans notre exemple, nous entrerions quelque chose semblable à
craxx_degreetype == 124860001(vous devez spécifier votre nom logique et votre valeur de votre propre environnement.)
Nous devons configurer le processus pour passer à une étape si la condition n’est pas remplie. Sélectionnez Étape 4 de l’application dans le champ Étape suivante si la condition n’est pas respectée.
Nous devons maintenant configurer le processus pour passer à une étape spécifique si la condition est remplie. Sélectionnez l’onglet Général.
Dans le champ Étape suivante, entrez Étape 3 de l’application.
Sélectionnez Enregistrer et fermer
Vous devez maintenant voir votre étape conditionnelle dans la liste des étapes. Nous devons nous assurer que notre utilisateur atteindra l’étape conditionnelle après avoir terminé la deuxième étape. Sélectionnez Étape 2 de l’application et sélectionnez Modifier.
Dans le champ Étape suivante, modifiez la valeur de Étape 3 de l’application sur Vérifier type de diplôme.
Sélectionnez l’onglet Définition du formulaire et dans le champ Type de source, sélectionnez Résultat de l’étape précédente et dans le champ Étape de la source d’entité, sélectionnez Étape 1 de l’application.
Cliquez sur Enregistrer et fermer.
Ajouter une étape de redirection à votre formulaire à plusieurs étapes
Nous allons également ajouter une étape de redirection à la fin du processus pour que l’utilisateur revienne à la page d’accueil.
Sélectionnez + Nouvelle étape du formulaire et remplissez la configuration suivante :
- Définissez le champ Nom sur Accéder à la page d’accueil*.
- Définissez le champ Type sur Rediriger.
Sélectionnez l’onglet Rediriger.
Dans le champ Page Web, sélectionnez la page Accueil.
Cliquez sur Enregistrer et fermer.
Vous devez maintenant voir votre étape de redirection dans la liste des étapes. Nous devons nous assurer que notre utilisateur atteindra l’étape de redirection après avoir terminé la dernière étape du processus. Sélectionnez Étape 4 de l’application et sélectionnez Modifier.
Dans le champ Étape suivante, sélectionnez Accéder à la page d’accueil.
Sélectionnez l’onglet Définition du formulaire et dans le champ Type de source, sélectionnez Résultat de l’étape précédente et dans le champ Étape de la source d’entité, sélectionnez Étape 2 de l’application.
Pourboire
Nous choisissons une étape antérieure dans le processus (Étape 2 de l’application) car les utilisateurs arriveront à cette étape à partir de la deuxième ou de la troisième étape selon la condition et nous voulons choisir une étape commune avec laquelle tous les utilisateurs auront interagi.
Cliquez sur Enregistrer et fermer.
Revenez au studio de conception et sélectionnez le bouton Synchroniser.
Vous devez avoir un formulaire complet à plusieurs étapes avec des étapes, des conditions et une redirection.
Sélectionnez Version préliminaire, suivi de Bureau.
Lorsque la page d’accueil apparaît, sélectionnez Se connecter et connectez-vous en tant qu’utilisateur du site.
Sélectionnez la page où vous avez placé votre composant de formulaire à plusieurs étapes.
Essayez différentes combinaisons du processus pour voir comment fonctionne le formulaire à plusieurs étapes.