Configurer un composant d'avatar pour le Planificateur de travail
Utilisez le composant Container pour ajouter un avatar et le nom d'utilisateur du délégataire de l'élément de travail.
Avant de commencer
Rôle requis : admin, workspace_admin ou ui_builder_admin
Procédure
- Dans la section Contenu, accédez à Corps (Flex) > Conteneur de base de carte (Flex) > En-tête de base de carte.
- Cliquez avec le bouton droit de la souris sur En-tête de base de carte, puis sélectionnez Ajouter un composant après.
- Dans l'écran contextuel, sélectionnez le composant Valeur d'étiquette empilée.
- Dans le volet gauche, cliquez avec le bouton droit de la souris sur Valeur d'étiquette empilée et sélectionnez Ajouter un composant après.
-
Configurez le composant.
- Dans l'écran contextuel Composants, sélectionnez Conteneur.
-
Dans l'onglet Config., procédez comme suit :
- Sélectionnez l'icône Modifier la visibilité du composant (
).
- Placez le pointeur de la souris sur le champ Masquer le composant et sélectionnez l'icône de liaison de données dynamiques
.
- Dans le champ Masquer le composant, saisissez !@state.cardProps.assignedTo.
- Dans le menu Direction, sélectionnez Ligne.
- Dans l'onglet Styles, dans le champ Aligner les éléments, sélectionnez l'icône centre.
- Sélectionnez Enregistrer.
- Sélectionnez l'icône Modifier la visibilité du composant (
- Pour ajouter le composant Avatar, sélectionnez Conteneur (Flex) > +Ajouter un composant.
-
Sélectionnez +Ajouter un composant.
L'écran contextuel Composants s'affiche.
Pour Effectuez cette action Ajouter le composant Avatar Dans l'onglet de configuration, définissez la taille, le nom d'utilisateur et l'info-bulle. - Dans le menu Taille, sélectionnez Moyenne.
- Placez le pointeur de la souris sur le menu Nom d'utilisateur et sélectionnez l'icône de liaison de données dynamiques
.
- Dans le menu Nom d'utilisateur, saisissez !@state.cardProps.assignedTo.
- Placez le pointeur de la souris sur le menu Texte d'info-bulles et sélectionnez l'icône de liaison de données dynamiques
.
- Dans le menu Texte d'info-bulles, saisissez !@state.cardProps.assignedTo.
Ajouter le composant Valeur d'étiquette par onglets Dans l'onglet de configuration, définissez la taille et les éléments. - Dans le menu Taille, sélectionnez Petite.
- Placez le pointeur de la souris sur le champ Éléments et sélectionnez l'icône de liaison de données dynamiques
.
- Dans le champ Éléments, saisissez
[{value: @state.cardProps.assignedTo}. - Sélectionnez Enregistrer.
Dans cette démonstration, nous vous expliquons comment configurer un composant d'avatar pour Planificateur de travail