Ajouter un composant à Espace de travail d'agent

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 3 minutes de lecture

    • Utilisez des composants personnalisés pour créer une interface personnalisée Espace de travail afin de répondre aux besoins spécifiques des agents de votre entreprise.

    Communiquer avec les clients par le biais de plusieurs canaux peut prendre beaucoup de temps. Pour être efficaces dans ces interactions omnicanales, vos agents ont besoin d’une vue unique des informations sur les clients afin de réduire les changements de contexte entre plusieurs outils. En développant des composants personnalisés pour Espace de travail, votre équipe peut regrouper les communications de plusieurs canaux dans une seule interface.

    Ajout de composants à un Espace de travail

    Une fois déployé sur votre instance, vous pouvez y ajouter des composants Espace de travail de cette façon.

    Ajouter un composant à un Espace de travail modal
    Utilisez une action d’interface utilisateur pour lancer un composant personnalisé dans un modal afin qu’un agent n’ait pas à naviguer vers un autre écran pour accomplir une tâche. Pour plus d’informations, reportez-vous à la rubrique Rendu d’un composant dans un modal.
    Ajouter un composant à une Espace de travail page de destination à l’aide du générateur d’IU

    Utilisez le pour créer des pages de Générateur d'IU destination personnalisées pour vos agents. Générateur d'IU est un outil de glisser-déplacer qui vous permet d’organiser visuellement les composants de l’espace de travail. Pour en savoir plus, consultez Créer des pages de destination personnalisées pour les espaces de travail.

    Configurez les propriétés dans le fichier now-ui.json pour utiliser les composants déployés dans le générateur d’IU. Consultez Ajouter un composant à Générateur d'IU.

    Ajouter un composant à une Espace de travail vue d’enregistrement
    Vous pouvez ajouter des composants personnalisés ou standard à la zone de composant dans la vue d’enregistrement Espace de travail . Pour plus d’informations, voir Configuration de la vue d’enregistrement dans l’espace de travail.

    Ajouter un composant à Générateur d'IU

    Définissez les propriétés dans un fichier de configuration pour ajouter votre composant à votre Générateur d'IU instance.

    Avant de commencer

    Procédure

    1. Dans le répertoire de votre projet, ouvrez now-ui.json.
    2. Ajoutez les composants.[ component-name].uiBuilder au fichier.
      Cet objet ajoute le composant au Générateur d'IUfichier .
      Cet objet comprend les paires clé-valeur suivantes :
      Clé Type de données Description
      Composants. [nom-composant].uiBuilder Objet Objet qui ajoute le composant au générateur d’IU.
      Composants. [nom-composant].uiBuilder.label Chaîne Requis. Nom d’affichage du composant dans le générateur d’IU.
      Composants. [nom-composant].uiBuilder.icon Chaîne Requis. Le nom de l’icône qui apparaît dans le générateur d’IU.
      Composants. [nom-composant].uiBuilder.description Chaîne Requis. Description brève de la fonctionnalité du composant. 
      {
  "components": {
    "card": {
      "uiBuilder": {
        "label" : "Card",
        "icon" : "chat-fill", 
        "description" : "A visual card format for a record.",
        "associatedTypes": ["global.core"]
      },
    3. Si votre composant inclut des propriétés, ajoutez-les . component-name].properties au fichier.
      Cela permet d’ajouter les propriétés en tant qu’options de configuration pour le composant dans Générateur d'IU.
      Cet objet comprend les paires clé-valeur suivantes :
      Clé Type de données Description
      Composants. [nom-composant].propriétés Tableau <Object> Tableau d’objets qui inclut toutes les propriétés du composant et toutes les informations pertinentes sur ces propriétés.
      Composants. [nom-composant].propriétés[].nom Chaîne Nom de la propriété dans le code de votre composant.
      Composants. [nom-composant].propriétés[].étiquette Chaîne Nom d’affichage de la propriété à afficher dans , le Générateur d'IUcas échéant.
      Composants. [nom-composant].propriétés[].description Chaîne Une brève description de ce que fait la propriété ou de la façon de l’utiliser.
      Composants. [nom-composant].propriétés[].readOnly Booléen Lorsque la valeur est vrai, empêche un utilisateur de configurer la propriété dans le générateur d’IU.

      Par défaut : false.
      Composants. [nom-composant].propriétés[].requis Booléen Si la valeur est vrai, l’utilisateur doit configurer la propriété.

      Par défaut : false.
      Composants. [nom-composant].propriétés[].defaultValue Chaîne Valeur par défaut lorsque l’utilisateur n’en fournit pas.
      Composants. [nom-composant].properties[].associatedTypes Tableau Décrit l’endroit où le composant apparaît dans la boîte à outils du générateur d’IU. La valeur doit être « global.core ».
      Composants. [nom-composant].propriétés[].typeMetadata Objet Données de configuration supplémentaires requises par certains types de données, telles que les propriétés de référence et les listes de choix. 
      {
  "components": {
    "properties": [
		    {
			"name": "backgroundColor",
			"label": "Background Color",
			"description": "Background Color",
			"readOnly": false,
			"required": false,
			"defaultValue": "lightgray"
		    },
		    {
		       "name": "cardType",
			"label": "Type of card",
			"description": "Type of card",
			"readOnly": false,
			"required": false,
			"defaultValue": ""
		    }
			]
    4. Enregistrez le fichier.

    Que faire ensuite

    Déployer un composant dans une instance.