Configurer un composant d'avatar pour le Planificateur de travail

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 1 minute de lecture
  • 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

    1. Dans la section Contenu, accédez à Corps (Flex) > Conteneur de base de carte (Flex) > En-tête de base de carte.
    2. Cliquez avec le bouton droit de la souris sur En-tête de base de carte, puis sélectionnez Ajouter un composant après.
    3. Dans l'écran contextuel, sélectionnez le composant Valeur d'étiquette empilée.
    4. 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.
    5. Configurez le composant.
      1. Dans l'écran contextuel Composants, sélectionnez Conteneur.
      2. Dans l'onglet Config., procédez comme suit :
        1. Sélectionnez l'icône Modifier la visibilité du composant ( icône Modifier la visibilité du composant).
        2. Placez le pointeur de la souris sur le champ Masquer le composant et sélectionnez l'icône de liaison de données dynamiques icône de liaison de données dynamiques.
        3. Dans le champ Masquer le composant, saisissez !@state.cardProps.assignedTo.
        4. Dans le menu Direction, sélectionnez Ligne.
        5. Dans l'onglet Styles, dans le champ Aligner les éléments, sélectionnez l'icône centre.
        6. Sélectionnez Enregistrer.
    6. Pour ajouter le composant Avatar, sélectionnez Conteneur (Flex) > +Ajouter un composant.
    7. Sélectionnez +Ajouter un composant.
      L'écran contextuel Composants s'affiche.
      PourEffectuez cette action
      Ajouter le composant Avatar Dans l'onglet de configuration, définissez la taille, le nom d'utilisateur et l'info-bulle.
      1. Dans le menu Taille, sélectionnez Moyenne.
      2. Placez le pointeur de la souris sur le menu Nom d'utilisateur et sélectionnez l'icône de liaison de données dynamiques icône de liaison de données dynamiques.
      3. Dans le menu Nom d'utilisateur, saisissez !@state.cardProps.assignedTo.
      4. 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 icône de liaison de données dynamiques.
      5. 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.
      1. Dans le menu Taille, sélectionnez Petite.
      2. Placez le pointeur de la souris sur le champ Éléments et sélectionnez l'icône de liaison de données dynamiques icône de liaison de données dynamiques.
      3. Dans le champ Éléments, saisissez [{value: @state.cardProps.assignedTo}.
      4. Sélectionnez Enregistrer.

      Dans cette démonstration, nous vous expliquons comment configurer un composant d'avatar pour Planificateur de travail