Comment Créer des formulaires à onglets dans PowerApps for SharePoint List

Comment Créer des formulaires à onglets dans PowerApps for SharePoint List

Dans ce tutoriel PowerApps, Nous verrons ce que sont les onglets dans PowerApps, Comment créer un onglet ou des onglets dans l’application PowerApps. Ceci est un exemple complet de la création de formulaires à onglets dans PowerApps pour la liste SharePoint.

De plus, en prenant un scénario simple, Nous verrons comment utiliser les onglets PowerApps sur l’écran PowerApps.

Que sont les onglets PowerApps ?

• Un onglet est peut-être un Bouton ou un contrôle d’entrée cliquable en haut d’un formulaire ou d’une fenêtre. Cet onglet permet d’afficher une autre page ou zone lorsqu’un utilisateur clique dessus. Lorsqu’un utilisateur clique sur les onglets, il effectue certaines fonctionnalités.
• De même, les formulaires à onglets PowerApps sont utilisés pour rendre les éléments de groupe et garder la taille visible des formulaires gérable.
• Jusqu’à présent, PowerApps n’a pas de formulaire à onglets. Nous pouvons donc créer le formulaire à onglets en utilisant un groupe de contrôles d’entrée Powerapps et une galerie.

Exigence:

La capture d’écran ci-dessous représente le scénario que je souhaite créer pour les utilisateurs. Il y a au total trois onglets comme:

1. Maladie: Lorsqu’un utilisateur clique sur l’onglet Maladie, il affiche tous les champs liés à la maladie uniquement (comme les Problèmes circulatoires, les maladies du foie, l’hépatite, etc.). En même temps, cet onglet sera en mode désactivation et les deux autres onglets seront en mode édition.
2. Détails sur le patient: Lorsqu’un utilisateur clique sur l’onglet Détails du patient, il affiche tous les champs liés uniquement au Patient (comme le Nom du patient, le Nom du Père, la date de naissance, etc.). En même temps, cet onglet sera en mode désactivation et les deux autres onglets seront en mode édition.
3. Détails relatifs: Lorsqu’un utilisateur clique sur l’onglet Détails relatifs, il affiche tous les champs liés uniquement au Parent Patient (comme le Nom du Parent Patient, la Relation avec le patient, le Numéro de contact Relatif, etc.). En même temps, cet onglet sera en mode désactivation et les deux autres onglets seront en mode édition.

De plus, Lorsque l’utilisateur entrera toutes les valeurs de champ et les soumettra une fois, toutes les données seront stockées dans la liste SharePoint.

Lire: Chargement des applications d’alimentation Spinner

Créer un formulaire à onglets dans PowerApps

Ici, nous verrons comment créer les différents onglets PowerApps selon les besoins. Suivez les étapes ci-dessous pour faire l’exigence ci-dessus.

Étape 1:

Il existe une liste SharePoint nommée Détails d’enregistrement de l’hôpital. Cette liste contient ces nombreuses colonnes ci-dessous avec différents types de données comme:

1. Titre: Il s’agit d’une colonne par défaut avec une seule ligne de texte. Je viens de le renommer en Nom de patient.
2. Nom du père: Une seule ligne de texte
3. Date de naissance: Date et heure
4. Sexe: Type de choix et ainsi de suite

Étape – 2:

• Créez une application PowerApps Canvas. Connectez la source de données de la liste SharePoint (Détails de l’enregistrement de l’hôpital) à l’application.

• Sur l’écran PowerApps, Insérez un formulaire d’édition (Insert-> Forms-> Edit). Connectez la source de données de la liste SharePoint au formulaire. Vous pouvez voir que tous les champs ont été récupérés dans la liste. Conservez les champs obligatoires et supprimez les champs inutiles du formulaire.

Étape 3:

• Ajoutez trois boutons pour créer trois onglets à l’écran. Tous les boutons doivent être placés au-dessus du formulaire d’édition qui ressemble à ci-dessous.
• Définissez la propriété de texte des trois boutons sur Maladie, Détails du patient et Détails relatifs.

Étape – 4:

• Sélectionnez l’onglet Maladie et appliquez cette formule beow sur sa propriétéSelelect comme:

OnSelect = Set(varFormTab, "Disease")

Où,

1. varFormTab = Nom de la variable
2. Disease = C’est la valeur que j’ai spécifiée

• Sélectionnez ensuite la propriété DisplayMode de l’onglet et définissez cette formule ci-dessous:

DisplayMode = If( varFormTab = "Disease", Disabled, Edit)

Le code ci-dessus spécifie si la variable spécifiée contient la valeur de la maladie, alors l’onglet sera en mode de désactivation sinon il sera en mode d’édition.

Étape – 5:

• Sélectionnez l’onglet Détails du patient et appliquez cette formule beow sur sa propriétéSelelect comme:

OnSelect = Set(varFormTab, "PatientDetails")

Où,

1. varFormTab = Nom de la variable
2. PatientDetails = C’est la valeur que j’ai spécifiée

• Sélectionnez ensuite la propriété DisplayMode de l’onglet et définissez cette formule ci-dessous:

DisplayMode = If( varFormTab = "PatientDetails", Disabled, Edit)

Le code ci-dessus spécifie si la variable spécifiée contient la valeur PatientDetails, alors l’onglet sera en mode de désactivation sinon il sera en mode d’édition.

Étape – 6:

• Sélectionnez l’onglet Détails relatifs et appliquez cette formule beow sur sa propriétéSelelect comme:

OnSelect = Set(varFormTab, "RelativeDetails")

Où,

1. varFormTab = Nom de la variable
2. RelativeDetails = C’est la valeur que j’ai spécifiée

• Sélectionnez ensuite la propriété DisplayMode de l’onglet et définissez cette formule ci-dessous:

DisplayMode = If( varFormTab = "RelativeDetails", Disabled, Edit)

Le code ci-dessus spécifie si la variable spécifiée contient la valeur RelativeDetails, alors l’onglet sera en mode de désactivation sinon il sera en mode d’édition.

Étape – 7:

• Nous allons maintenant décider quel champ affichera dans quel onglet. Cela signifie, supposons à l’écran, que j’ai une maladie nommée « Maux de tête chroniques ».
• Je souhaite afficher ce champ lorsque l’utilisateur clique sur l’onglet Maladie. Suivez la formule ci-dessous pour le faire.
• Sélectionnez la carte de données des maux de tête chroniques (la carte de données doit d’abord être déverrouillée) et appliquez la formule ci-dessous sur sa propriété visible comme:

Visible = If( varFormTab = "Disease", true, false)

Où,

1. varFormTab = Nom de la variable que nous avons créé avant
2. Disease = La valeur que nous avons spécifiée

Le code ci-dessus spécifie que si la variable est égale à la valeur de la maladie, le champ sera visible sinon il se cachera.

REMARQUE:

Si vous souhaitez en savoir plus sur le contrôle à bascule PowerApps, reportez-vous à cet article: Contrôle à bascule PowerApps + Comment utiliser avec exemple. Ce tutoriel PowerApps vous aide à savoir comment changer la valeur de bascule de true à Yes ou false à No et bien d’autres.

Étape – 8:

• De la même manière, supposons qu’il y ait un champ nommé Nom du patient et que nous souhaitions afficher le champ lorsque l’utilisateur cliquera sur l’onglet Détails du patient.
• Pour ce faire, Sélectionnez la fiche de données du nom du patient et appliquez la formule ci-dessous sur sa propriété Visible:

Visible = If( varFormTab = "PatientDetails", true, false)

Où,

1. varFormTab = Nom de la variable que nous avons créé avant
2. PatientDetails = La valeur que nous avons spécifiée

Le code ci-dessus spécifie que si la variable est égale à la valeur PatientDetails, le champ sera visible sinon il se masquera.

• De la même manière, vous pouvez effectuer le même processus pour les champs rest pour leurs onglets spécifiques.

Étape-9:

• Insérez un bouton où il vous aidera à stocker l’enregistrement dans la liste SharePoint (Détails de l’enregistrement de l’hôpital).
• Sélectionnez le bouton et définissez sa propriété Text pour Enregistrer.
• Appliquez cette formule ci-dessous sur la propriété Buttonelect du bouton comme:

OnSelect = SubmitForm(Form1)

Où,

Form1 = Modifier le nom du formulaire

Étape – 10:

• Enregistrez et publiez l’application. Rouvrez l’application à nouveau. Entrez les valeurs en choisissant chaque onglet, puis cliquez sur le bouton Enregistrer.

• Ensuite, accédez à la liste Sharepoint existante (Détails de l’enregistrement de l’hôpital) et actualisez-la. Vous pouvez voir qu’un nouvel élément a été enregistré comme la capture d’écran ci-dessous.

En outre, vous pouvez aimer ces tutoriels ci-dessous PowerApps comme:

• Table de répétition PowerApps
• Fonction CountIf PowerApps avec des exemples
• Fonction CountRows PowerApps avec des exemples
• Fonction de Comptage PowerApps avec des exemples
• Case à cocher PowerApps – Comment utiliser
• Fonction PowerApps First, FirstN, Last et LastN avec des exemples
• Fonction PowerApps AddColumns avec des exemples
• PowerApps LastSubmit() avec des exemples
• Fonction PowerApps ForAll avec des exemples
• Fonction de patch PowerApps avec des exemples

Dans ce tutoriel PowerApps, Nous avons vu que sont les PowerApps tabs, Comment créer un onglet ou des onglets dans l’application PowerApps. Nous avons appris ici comment créer un formulaire à onglets pour la liste SharePoint dans PowerApps.