Composant de navigation d'application de canevas basé sur les autorisations

Les arguments en faveur de la navigation basée sur les autorisations

De nombreux utilisateurs d'applications souhaitent verrouiller certaines parties de leurs applications de canevas afin que certains écrans ne soient accessibles qu'à un sous-ensemble d'utilisateurs d'applications. La configuration de ces autorisations peut être réalisée de différentes manières, y compris les rôles de sécurité, les données CDS ou toute autre logique basée sur l'utilisateur actuel. Si un écran n'est référencé dans aucune des fonctions de navigation de votre application et qu'il ne s'agit pas de l'écran d'accueil, il n'y a aucun moyen d'accéder à la page dans la version publiée de l'application de canevas. Dans cet article, nous allons parcourir les écrans masquant dynamiquement dans un composant de navigation réutilisable.

Vue d'administration de l'écran d'accueil avec tous les éléments de navigation visibles

] Vue d'administration de l'écran d'accueil avec certains éléments de navigation visibles

Configuration du composant de navigation

Le pilote du composant de navigation est ses propriétés personnalisées. Créez un nouveau composant et renommez-le Navigation. La propriété la plus importante de ce composant sera une table. Ajoutez une nouvelle propriété de table au composant de navigation et intitulez-le Screens. L'alignement est l'un des problèmes liés à l'affichage et au masquage conditionnels des écrans dans la navigation. Si l'utilisateur n'est pas un administrateur, nous voulons masquer l'écran d'administration de la navigation, mais nous voulons éviter un espace vide. Par conséquent, la table Écrans sera connectée à la propriété Items d'une galerie. Cela supprime le besoin de maintenir les coordonnées conditionnelles des boutons, ce qui peut devenir désordonné.

Propriété de la table

En ce qui concerne la structure de la table, il y a trois champs: l'écran lui-même, le nom de l'écran et une icône . Le nom d'écran et l'icône ne sont pas techniquement requis, mais peuvent permettre aux utilisateurs de mieux comprendre la structure de l'application. Pour que la table du composant reconnaisse correctement les types de chaque champ, après avoir créé la propriété screens en tant que type de table, ajoutez les exemples de valeurs de table suivants:

Configuration des propriétés des écrans du composant

Connexion de la table vers une galerie

Maintenant que le composant a un aperçu des types de champs pertinents pour la propriété de table, l'étape suivante consiste à ajouter une galerie et à modifier la propriété Items à Navigation.Screens. Ajoutez d'abord un bouton à la galerie. Remplacez la propriété Text par ThisItem.ScreenName et la propriété OnSelect par Naviate (ThisItem.Screen). Un type de transition peut également être ajouté ici, mais n'est pas obligatoire. Ensuite, ajoutez l'icône en haut du bouton et remplacez la propriété Icon par ThisItem.Icon. Enfin, ajustez les propriétés de style du bouton et de l'icône en fonction de l'image de marque de votre entreprise.

Propriété Items de la galerie du composant

Style conditionnel

Pour améliorer encore la facilité d'utilisation de votre application , il peut être utile d'ajouter un style supplémentaire aux boutons afin qu'il y ait un indicateur de l'écran actif. Cela peut être fait en référençant App.ActiveScreen . Par exemple, la couleur de remplissage du bouton peut être basée conditionnellement sur si le champ d'écran de l'élément sélectionné dans la galerie est égal à l'écran que l'utilisateur est en train de visualiser:

Mise en forme conditionnelle sur le bouton Propriété de remplissage

Ajout du composant à un écran

Le composant est maintenant terminé, il peut donc être ajouté au premier écran de l'application. Après avoir ajouté le nouveau composant, l'étape suivante consiste à créer la table qui sera transmise à la propriété table dans le nouveau composant. Comme la propriété dans le composant, la table aura un nom d'écran, un écran et une icône. De plus, il devrait avoir un champ booléen appelé Visible, pour décider si l'écran doit apparaître dans l'application.

Pour faciliter les tests, une variable globale sera initialisée pour déterminer si l'utilisateur est ou n'est pas un admin dans l'application OnStart:

Modification de OnStart pour le test

Ensuite, construisez le tableau avec les quatre champs pour chacun des écrans de l'application qui doivent être affichés dans l'application par au moins un utilisateur. Dans cet exemple, il y a 5 écrans au total. L'écran Admin ne doit s'afficher que si l'utilisateur est un administrateur ou si gblUserIsAdmin est true.

 Set (gblScreens,
   Table(
 {
 ScreenName: "Accueil",
 Écran: Accueil,
 Icône: Icon.Home,
 Visible: vrai
 },
 {
 ScreenName: "Mes demandes",
 Écran: 'Mes demandes',
 Icône: Icon.Person,
 Visible: vrai
 },
 {
 ScreenName: "Nouveau",
 Écran: 'Créer une nouvelle demande',
 Icône: Icon.Add,
 Visible: vrai
 },
 {
 ScreenName: "Admin",
 Écran: Admin,
 Icône: Icon.Lock,
 Visible: gblUserIsAdmin
 },
 {
ScreenName: "Rapports",
Écran: Rapports,
Icône: Icon.AddDocument,
 Visible: vrai
 }
 )
) 

Suppression de certains écrans de la navigation en fonction de l'utilisateur actuel

Exécutez OnStart et mettez à jour la propriété Screens du composant de navigation sur l'écran en gblScreens. Cela devrait afficher tous les écrans référencés dans le tableau, mais l'écran Admin est toujours affiché même si la variable gblUserIsAdmin est toujours définie sur false. Par conséquent, la dernière étape consistera à envelopper le tableau (variable gblScreens) dans une formule de filtre, nous supprimons donc les écrans qui ne devraient pas être visibles:

 Set (
 gblScreens,
 Filtre(
 Table(
 {
 ScreenName: "Accueil",
 Écran: Accueil,
 Icône: Icon.Home,
 Visible: vrai
 },
 {
 ScreenName: "Mes demandes",
 Écran: 'Mes demandes',
 Icône: Icon.Person,
 Visible: vrai
 },
 {
 ScreenName: "Nouveau",
 Écran: 'Créer une nouvelle demande',
 Icône: Icon.Add,
 Visible: vrai
 },
 {
 ScreenName: "Admin",
 Écran: Admin,
 Icône: Icon.Lock,
 Visible: gblUserIsAdmin
 },
 {
 ScreenName: "Rapports",
 Écran: Rapports,
 Icône: Icon.AddDocument,
 Visible: vrai
 }
 ),
 Visible
 )
) 

Réexécutez OnStart et notez que le composant de navigation doit maintenant masquer l'écran Admin. Testez ce comportement en changeant la valeur de gblUserIsAdmin. À long terme, la logique permettant de déterminer si l'utilisateur est ou non un administrateur peut être connecté à une source de données pertinente avec ces informations.

À propos de l'auteur

Katie Suerth est une consultante Power Platform basée à Chicago . Elle aime travailler avec Power Apps, les applications de canevas et Power Automate.

Plus de cet auteur