Comment optimiser l’intégration des composants Menu dans vos applications PowerApps ?

Comment optimiser l’intégration des composants Menu dans vos applications PowerApps ?

L’utilisation des composants Menu dans PowerApps s’articule autour de deux styles principaux :

Menu ouvrant

Le menu ouvrant style « Microsoft » est un menu qui, lorsqu’il est fermé affiche seulement les icônes de navigation et lorsqu’il est ouvert, affiche les icônes plus le label du menu et le logo de l’entreprise.

L’utilisation des composants Menu dans PowerApps s’articule autour de deux styles principaux :

Menu ouvrant

Le menu ouvrant style « Microsoft » est un menu qui, lorsqu’il est fermé affiche seulement les icônes de navigation et lorsqu’il est ouvert, affiche les icônes plus le label du menu et le logo de l’entreprise.

Menu icône

Le menu icône est un menu qui affiche seulement les icônes de navigation sans possibilité d’ouverture et de fermeture. Voici un exemple :

Comment intégrer les menus dans une applications Power Apps ?

Les deux menus ont été créés dans l’environnement Kaizzen (Default) et partagés à l’équipe Projet. Les menus sont sous forme de composant, ce qui veut dire qu’on peut les utiliser tel quel dans n’importe quelle application du même environnement.

Avant d’utiliser les composants menus il faut savoir s’ils serviront que pour une application ou pour plusieurs applications.

Utilisation du composant sur une application

Dans le cas où le composant servira pour une application, il faut créer l’application sur le tenant cible et aller dans la partie composant.

Faites copier (CTRL+C) sur le composant à la source (Kaizzen) et coller (CTRL+V) à la cible. Cela copiera le composant sur votre application cible

Utilisation du composant dans plusieurs applications

Si le composant doit être utilisé sur plusieurs applications, sur le tenant Kaizzen une solution a été créée « Menu_Composant ». Il faut aller dans la partie « Solutions » et exporter la solution, ce qui lancera le téléchargement d’un fichier Zip. Il faut choisir « Non Managé » au moment de l’export.

Sur le tenant cible, dans la partie « Solutions », il faut importer la solution. Une fois importée, vous pouvez soit créer une application dans la solution, soit publier les composants dans la solution.

Une fois les composants publiés, vous pouvez créer une application, aller dans le volet « Insérer » de l’application et cliquer en bas sur « Obtenir plus de composants ».

Une fenêtre s’ouvre et vos deux composants apparaissent. Choisissez celui que vous voulez importer dans l’application. Par la suite, votre composant apparaitra dans le menu « Insérer » de l’application.

Comment modifier le composant une fois importé dans l’application ?

Une fois le composant importé, vous devez faire un clic droit dessus et sélectionner « Modifier un composant », puis « Créer une copie ». Ceci ouvrira le volet « Composant » et votre composant sera prêt à être modifié.

Les seules actions à réaliser pour le menu ouvrant consistent à modifier l’image de la société et le nombre de menus. Pour le menu avec icône, vous aurez seulement besoin de le modifier pour ajuster le nombre de menus.

Comment modifier le nombre de menu ?

Pour modifier le nombre de menu des composants l’action est la même. Modifiez la propriété « Items_Navigation » ou « Items ».

Ajoutez dans la table le nombre d’item que vous souhaitez pour votre application.

Utiliser le menu dans l’application

Une fois la photo de l’entreprise mise en place et le nombre de menus paramétré, dans l’application, faites « Insérer », puis « Personnalisé » et choisissez votre menu modifié.

Le menu apparaîtra sur votre écran. Ensuite, créez le nombre d’écrans nécessaires (en fonction du nombre d’items que vous avez mis dans votre composant) puis nommez-les.

Si vous rencontrez des problèmes de taille de menu liés aux dimensions de vos écrans, voici comment les régler :

– Pour le menu avec icônes seuls : Réglez la propriété « Width » du menu sur 80.

– Pour le menu ouvrant : Dans le composant, réglez la propriété « MenuWidht » en modifiant le nombre diviseur pour qu’il fasse apparaitre seulement les icônes en mode fermés (20 dans le cas présent).

Modifiez les noms et icônes des menus

Pour utiliser le menu dans l’application, il faut se rendre sur le OnStart de l’application et y insérer du code afin de fixer les éléments du menu.

On utilise une variable ici pour le premier menu. Mais on pourrait aussi utiliser une collection si le menu a pour but d’évoluer au fur et à mesure de l’application. Pour cet exemple, le premier menu icône sera avec une variable et le deuxième menu ouvrant sera avec une collection.
Voici donc le code pour le menu ouvrant avec une collection.
Il faut ensuite insérer un menu dans chaque page, et définir la propriété « items » sur le nom de la variable ou de la collection.
Et enfin pour avoir le tacker de permettant de savoir sur quel menu vous êtes il faut modifier la propriété « Default » des menus et mettre le nom de la page active, c’est-à-dire la « Value » dans la variable ou le « Title » dans la collection.
Gianni Lattanzio, Consultant cloud Microsoft chez Kaizzen