Tuto : Afficher des vignettes avec les initiales pour les utilisateurs sans photos de profil (Niveau : 🌕🌗🌑🌑🌑)

Étiquetté : canvas, galerie, office365users, SVG

Ressources

Tuto : Afficher des vignettes avec les initiales pour les utilisateurs sans photos de profil (Niveau : 🌕🌗🌑🌑🌑)

Posté par DavidZed sur 22 novembre 2022 à 22h52
Bonjour,

Voici un nouveau tuto étape par étape : Remplacer l’image d’un utilisateur qui n’a pas de photo par une vignette colorée avec ses initiales : Comme dans de nombreux outils MS ou même comme sur ce forum 😊

On peut trouver facilement des tutos similaires (ex : Power Apps Display A User Photo Or Initials – Matthew Devaney) où l’on va superposer un bouton sur l’image et afficher l’un ou l’autre en fonction de la présence ou non de la photo sur le profil utilisateur.

Je vous propose d’aller plus loin : Nous allons optimiser cela en générant un Code <Svg> qui affichera les initiales dans l’objet image.

Nous n’aurons donc plus qu’un seul objet pour afficher la photo ou les initiales !

Au menu nous allons donc :
- Ajouter le connecteur Office365users
- Ajouter une galerie avec une liste de personnes
- Détecter si la personne a une photo de profil
- Générer un code svg pour les initiales
- Générer une couleur de fond aléatoire
- Paramétrer quelques formules pour créer un objet « responsive » facilement réutilisable
1) Ajout du connecteur Office365users

Dans le menu données, cliquez sur « ajouter des données », inscrivez « office » dans la zone de recherche et sélectionnez « Office365users »

Ce connecteur va nous permettre de récupérer des infos étendues sur l’utilisateur, mais surtout de nous indiquer s’il dispose d’une photo de profil.

2) Insérer une galerie verticale et lui mettre un format « Image et Titre »3) Mettre une liste de personnes dans la source de donnés de la galerie

Une liste Sharepoint avec noms & email, une colonne de type « Person » ou une table Dataverse avec une colonne lookup sur la table des utilisateurs peuvent convenir.

Pour l’expemple, vous pouvez utiliser la fonction searchuser du connecteur office365users :
```
Office365Users.SearchUser({searchTerm:"a";top:20}) //Recherche les 20 premiers utilisateurs dont le nom prénom contiennent « a»
```
Vous devriez vous retrouver avec des noms qui s’affichent :

Si tel n’est pas le cas, assurez-vous bien que votre label Titre pointe bien sur le nom de la personne :

4) Génération de la vignette avec les initiales ou, si présente, affichage de la photo de profil

Dans l’objet image de la gallerie, dans le paramètre image, nous allons mettre le code suivant :
```
If(Len(ThisItem.Email)>0&&Office365Users.UserPhotoMetadata(ThisItem.Email).HasPhoto;Office365Users.UserPhoto(ThisItem.Email);"data:image/svg+xml,"&EncodeUrl("<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' height='100' width='100'><text font-family='Lucida Console' font-size='48' font-weight='500' x='18' y='66' fill='white'>"&With({Initials:Split(ThisItem.DisplayName;" ").Result};Left(First(Initials).Result;1)&Left(Last(Initials).Result;1))&"</text></svg>"))
```
Voici le détail et les explications, une fois le code mis en forme :

Nous voici maintenant avec une liste où toutes les personnes qui n’ont pas de photo de profil, ont une vignette avec leurs initiales :

Pour mettre un peu de couleur et retrouver plus facilement les personnes, nous allons, toujours sur l’objet image, générer des couleurs aléatoires, grâce à la fonction Rand() en mettant dans le paramètre .fill de l’image :
```
RGBA(Trunc(Rand()*150;0)+50;Trunc(Rand()*150;0)+50; Trunc(Rand()*150;0)+50;1)
```
La function Trunc() nous permet d’ignorer les nombres après la virgule

Trunc(Rand()*150;0)+50 nous permet de générer un nombre aléatoire entre 50 et 200, les valeurs RGBA vont de 0 à 255, mais cette portée de valeurs va nous permettre de ne pas générer de couleurs trop sombres ou trop claires.

Il y a bien sûr d’autres possibilités de générer des couleurs différentes pour chaque utilisateur, Mathew Devaney, dans le tuto cité plus haut, utilise une table de 12 couleurs, et assigne une couleur en fonction des lettres. L’avantage est qu’une personne aura toujours la même couleur, par contre la méthode Rand() que je propose est beaucoup moins gourmande en ressources.

Notre Galerie prend forme :

5) Maintenant, il est temps d’arrondir un peu les angles :

Pour avoir un aspect rond, nous allons assigner aux paramètres RadiusTopLeft, RadiusTopRight etc, une formule pour garder au mieux cet aspect arrondi :
```
Min(Self.Width;Self.Height)/2
```
De cette manière, je peux redimensionner mon image, elle aura toujours la forme d’un cercle si je garde les mêmes proportions largeur / hauteur, sinon elle aura au moins deux bords circulaires :

Il y a un petit inconvénient cependant, dans certaines galeries trop chargées ou dans le cas de galeries imbriquées, il se peut que l’image des initiales ne soit pas générée.

Dans ce cas, il reste toujours la possibilité de charger les svg générés dans une collection.

PostID=M9KevECQHlyELHj
Quentin a répondu Il y a 11 mois, 3 semaines 1 Membre · 1 Réponse
1 Réponse