Onglets dans Power Apps

Cette manipulation vous montre les étapes pour créer un formulaire avec plusieurs onglets dans Power Apps.

Pour ce faire, l’astuce consiste à utiliser des boutons qui seront suffisamment arrondis pour ressembler à des onglets.

Par ailleurs, afin de s’éviter trop de manipulations, un premier bouton sera entièrement configuré. Ensuite, il sera copié 2 fois pour disposer au total de 3 boutons et donc 3 onglets. Il suffira de changer le texte des 2 nouveaux boutons pour les identifier.

Enfin, vous terminerez en associant les contrôles cartes de données aux onglets correspondants.

Préparation

La manipulation de Personnaliser une liste SharePoint doit être terminée avec succès.

La liste lstAffaires doit exister dans votre site SharePoint. Elle contient la liste de toutes les affaires en cours de la boutique. Bien évidemment, vous pouvez utiliser une autre liste en adaptant les manipulations.

Si vous rencontrez des erreurs dans les manipulations ci-dessous, lisez l’article qui explique comment débuguer les erreurs dans Power Apps.

Gardez à l’esprit que l’interface a pu évoluer fortement depuis que cet article a été rédigé.

Personnaliser le formulaire SharePoint

Tout d’abord, ouvrez vote site SharePoint puis sur ce site, ouvrez la liste lstAffaires avec l’interface moderne.

Rappelez-vous que la manipulation pour avoir des onglets dans Power Apps fonctionne avec n’importe quelle liste. Toutefois, dans ce scénario, vous utiliserez la liste lstAffaires.

Ensuite, dans le menu de la liste, cliquez sur Power Apps, puis dans le sous-menu qui s’ouvre, cliquez sur Personnaliser les formulaires.

Puis, patientez quelques instants, le temps du chargement et de la préparation du formulaire.

Préparer le formulaire

Une fois que le formulaire est ouvert dans Power Apps, fermez le volet Champs avec la croix.

Ensuite, supprimez le contrôle Image1. Ce contrôle avait été inséré précédemment dans le TP Personnaliser une liste SharePoint.

Puis, donnez la couleur suivante au formulaire :

SharePointForm.Fill = RGBA(0; 120; 212; 1)

Puis, avec le ruban Insérer, insérez une étiquette puis configurez ses propriétés :

• Label1.Text = « Détail d’une affaire »
• Label1.FontWeight = Bold
• Label1.Italic = True
• Label1.Height = 151
• Label1.Size = 28

Ajouter un bouton

Ensuite, avec le ruban Insérer, insérez un bouton. Grâce aux propriétés, remplacez le texte Bouton par le texte Jouet.

Button1.Text = "Jouet"

Puis, modifiez la courbure du haut du bouton de 20 degrés :

Button1.RadiusTopLeft = 20

Button1.RadiusTopRight = Button1.RadiusTopLeft

Comprendre les effets visuels des onglets dans Power Apps

Un onglet est une sorte « d’illusion d’optique ».

En effet, lorsque l’utilisateur clique sur un onglet, il s’attend à voir l’onglet sur lequel il a cliqué « s’activer ». Inversement, il s’attend à voir les autres onglets « se désactiver ». Ces phénomènes visuels s’obtiennent en jouant sur les paramètres de couleur du bouton et ceux liés aux bordures de l’onglet.

De plus, le paramétrage de ces propriétés utilise la fonction ColorFade(). Celle-ci renvoie une version plus claire ou plus sombre d’une couleur. La quantité de fondu varie de -100% (complètement noir) à 100%, qui éclaire complètement une couleur au blanc.

Personnaliser les effets visuels des onglets dans Power Apps

Configurez les couleurs et la bordure du bouton Button1 avec ces paramètres :

• BorderColor = SharePointForm1.BorderColor
• BorderStyle = BorderStyle.Solid
• DisabledBorderColor = ColorFade(Self.BorderColor; 60%)
• DisabledColor = Self.Color
• DisabledFill = SharePointForm1.Fill
• HoverBorderColor = ColorFade(Self.BorderColor; 20%)
• HoverColor = Self.Color
• PressedBorderColor = Self.Fill

Mécanisme d’activation

Les propriétés DisabledBorderColor, DisabledColor, DisabledFill ne s’affichent que si la valeur de la propriété DisplayMode est définie sur Disabled (désactivé). DisplayMode fait partie des propriétés principales de Power Apps, au même titre que OnSelect par exemple. Elle sert à définir si le contrôle autorise l’entrée utilisateur (valeur: Edit), affiche uniquement les données (valeur: View) ou est désactivé (valeur: Disabled).

En particulier, si un onglet n’est pas sélectionné, ses propriétés Disabled doivent s’afficher. Si l’onglet est sélectionné, ses propriétés Disabled ne doivent pas s’afficher. Pour savoir, si l’onglet est sélectionné, il suffit de stocker le texte de l’onglet dans une variable au moment où l’utilisateur clique sur l’onglet :

Button1.OnSelect = Set(varOngletTitre;Button1.Text)

Ensuite, il suffit de comparer la valeur de la variable avec la valeur du texte de l’onglet en cours. Configurez la propriété DisplayMode du bouton :

Button1.DisplayMode = If(varOngletTitre=Button1.Text;Disabled;Edit)

Finaliser le paramétrage du bouton

Enfin, pour une raison purement esthétique (et pédagogique), le texte des onglets dans Power Apps est aligné en haut et la taille du bouton est réduite. La réduction permettra d’avoir bientôt 3 boutons. Configurez ces deux dernières propriétés :

Button1.VerticalAlign = Top

Button1.Width = 148

Ensuite, glissez le bouton pour qu’il s’aligne en haut du contrôle de formulaire.

Pour vous aider, regardez la copie d’écran ci-dessous.

Multiplier le bouton d’origine

Maintenant, sélectionnez votre bouton, copiez-le et collez-le à 2 reprises : vous obtenez 3 boutons.

Ensuite, renommez les 2 nouveaux boutons : Button2 et Button3.

Puis, alignez vos boutons en haut du formulaire.

Grâce à la propriété Text, remplacez le texte « Jouet » par « Montant » puis « Responsable ».

Button2.Text = "Montant"

Button3.Text = "Responsable"

Attribuer les contrôles

Chaque onglet doit afficher des cartes de données différentes, sinon ils ne servent à rien.

En effet, dans la vraie vie, il y aurait probablement 12 à 15 champs à répartir sur les onglets. Dans ce scénario, il y a seulement 3 champs. Toutefois, il est facile de décliner ce qu’il y a faire avec plus de champs.

Notamment, votre objectif est que le Titre apparaisse sur tous les onglets, la carte MontantHT ne doit apparaître que sur l’onglet « Montant », tandis que la carte Responsable ne doit apparaître que sur l’onglet « Responsable ».

Ensuite, cliquez sur la carte Responsable, puis définissez sa propriété visible:

Responsable_DataCard1.Visible = varOngletTitre = "Responsable"

Ne soyez pas surpris de voir le contrôle disparaître.

En effet, comme l’application n’a pas été exécutée, la variable varOngletTitre n’a pas encore de valeur. Donc varOngletTitre = « Responsable » est faux. Du coup Responsable_DataCard1.Visible = false.

Ensuite, cliquez sur la carte MontantHT, puis définissez sa propriété visible:

MontantHT_DataCard1.Visible = varOngletTitre = "Montant"

Ensuite, pour la carte Titre, c’est encore plus simple : il suffit de ne pas définir la propriété OnVisible pour que la carte s’affiche sur tous les onglets.

Il n’y a donc rien à faire.

Configurer l’écran

Lors de l’ouverture du formulaire, vous souhaitez que l’utilisateur arrive par défaut sur l’onglet Jouet.

Pour ce faire, configurez la propriété avancée OnVisible de l’écran :

FormScreen1.OnVisible = varOngletTitre = "Jouet"

C’est fini 😉

Tester le nouveau formulaire à onglets dans Power Apps

Vous allez vérifier l’efficacité de vos modifications. Pour cela, cliquez sur le lien dans le coin supérieur gauche, qui s’intitule Revenir à SharePoint : une boite de dialogue s’ouvre.

Notamment, dans cette boîte de dialogue, cliquez sur le bouton Publier sur SharePoint.

Puis patientez quelques instants : la liste SharePoint va s’ouvrir.

Par ailleurs, il est possible que le résultat ne soit pas immédiat suite à la manipulation ci-dessous. Dans ce cas patientez une bonne minute. Si le résultat n’est toujours pas visible : modifiez à nouveau le formulaire PowerApps puis publiez le à nouveau.

Notamment, dans cette liste, cliquez sur un élément quelconque pour l’ouvrir : il s’affiche bien dans le nouveau formulaire Power Apps.

Ensuite, cliquez sur l’onglet Responsable et remarquez la présence des champs Titre et Responsable, uniquement.

Puis, cliquez sur l’onglet Montant et remarquez la présence des champs Titre et MontantHT, uniquement.

Pour vous aider, regardez la copie d’écran ci-dessous.

Dans SharePoint, fermez le volet de l’élément affiché.

La manipulation est terminée.