Intégrer une image utilisateur pour remplacer les avatars

Introduction

Créez une fonctionnalité permettant aux utilisateurs d’ajouter une photo à leur profil utilisateur. Appliquez une restriction à cette fonctionnalité en veillant à ce que seul l’utilisateur de ce profil puisse ajouter une photo. De plus, la photo de l’utilisateur remplacera l’avatar utilisateur dans le coin supérieur droit de l’application, ainsi que dans le menu drawer.

Étapes à suivre

1. Créer le champ image utilisateur dans l’Aggregate User

Commencez par créer le champ « userImage », de type « image », sous l’Aggregate user.

2. Configurer la commande de mise à jour de l’image

Pour permettre aux utilisateurs de remplacer l’image de remplacement (qui sera ajoutée à une étape ultérieure) par la leur, créez une commande de mise à jour d’image, en utilisant « add update command » depuis le dossier command sous l’Aggregate user. Dans cet exemple, elle a été nommée « modifyUserImage » et le type d’événement a été changé pour « USER_IMAGE_UPDATED ». À la deuxième étape de l’assistant, ajoutez uniquement le champ créé à l’étape 1 et laissez-le comme non obligatoire.

3. Ajouter le composant Image à la page de profil utilisateur

Glissez-déposez un composant « image » de la toolbox, à côté du nom de l’utilisateur dans une page de profil. Depuis l’onglet « attribute », changez la source pour « field » et sélectionnez le champ « userImage ».

4. Assigner un placeholder et définir les attributs de l’image

Toujours depuis l’onglet « attribute », ajoutez une image placeholder et assurez-vous que la commande créée à l’étape 2 est sélectionnée dans la section « update command » de l’onglet « attribute ».

Appliquez une bordure arrondie et ajustez la taille de l’image à 60 px en max width et height, ainsi qu’à 100 % en « width » et « fit content » en « height ».

Ensuite, sur la boîte contenant l’image et le nom d’utilisateur, ajoutez 0,8 em de « item spacing » et appliquez un « horizontal center align » au contenu de la boîte.

5. Restreindre les mises à jour d’image au propriétaire du profil

La prochaine étape consiste à appliquer une restriction pour que la fonctionnalité ne puisse être utilisée que par l’utilisateur de ce profil. Sélectionnez la commande créée à l’étape 2 et ouvrez le panneau « properties ». Ajoutez une précondition de nom « id », avec l’opérateur défini sur « equal » et la valeur (JS) comme « currentUser.id ». Passez en Live Mode pour le tester avec 2 utilisateurs, le vôtre et un autre.

6. Remplacer l’avatar par l’image utilisateur dans la mise en page de l’application

Voyons comment appliquer l’image de l’utilisateur au lieu de l’avatar de l’utilisateur, dans le coin supérieur droit de l’application. Commencez par passer en « layout designer » mode. Depuis le panneau Structure, sélectionnez le « side panel » et appliquez un « set component data » (JS) : currentUser.

Pour plus de clarté, les 2 boîtes contenant « avatar » ont été renommées « inside » et « outside ». Dans cette étape, nous traitons l’image de la boîte « outside ». Glissez-déposez un composant « image » de la toolbox, juste sous le composant « avatar » dans la boîte « outside », définissez la source sur « field » et sélectionnez « userImage ». Ensuite, supprimez la « update command » ajoutée automatiquement.

Supprimez le style par défaut et appliquez une bordure arrondie. Ensuite, ajoutez un dimensionnement de 45 px en « height » et « width » et, dans « more », définissez « mouse cursor » sur « pointer ».

7. Appliquer un comportement Show/Hide selon la présence de l’image

Ajoutez un comportement « show/hide » au composant image. Définissez une précondition avec « userImage » « is not empty ». Ajoutez le même comportement au composant « avatar » mais avec « is empty » dans sa précondition. Cela devrait masquer l’avatar, si vous aviez précédemment sélectionné une image pour votre utilisateur.

8. Personnaliser le menu drawer avec l’image et le nom de l’utilisateur

Double-cliquez sur l’image pour ouvrir le menu drawer. Sélectionnez l’« avatar » de la boîte « inside » et désactivez « show name » depuis l’onglet « attribute ». Ensuite, glissez-déposez un composant « text » à côté de l’« avatar ».

a. Depuis l’onglet « attribute », définissez la valeur sur « field » « name ».

b. Appliquez un wrap horizontal aux composants « avatar » et « text » et appliquez un « horizontal center align » à la boîte. Ensuite, ajoutez 1 em de « item spacing ».

c. Copiez le composant image de la boîte « outside » et collez-le dans la boîte « inside », puis ajoutez un comportement « show/hide » au composant « avatar » et définissez une précondition avec « userImage » « is empty ».

Conclusion

En intégrant une fonctionnalité d’image utilisateur, les utilisateurs peuvent personnaliser leurs profils en ajoutant leurs propres images. Cette image remplace l’avatar par défaut dans toute l’application, améliorant l’expérience utilisateur. La mise en place de comportements comme show/hide assure des transitions fluides entre les avatars et les images utilisateur, offrant une interface plus propre et professionnelle.