Ajouter un composant à Espace de travail d'agent

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 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 société.

    Communiquer avec les clients via 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 le basculement 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 manière.

    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 besoin d’accéder à 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 page de destination à l’aide Espace de travail d’UI Builder

    Utilisez le Générateur d'IU pour créer des pages de 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 UI Builder. 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, consultez 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 votre répertoire de 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. Le nom d’affichage du composant dans UI Builder.
      Composants. [nom-composant].uiBuilder.icon Chaîne Requis. Nom de l’icône qui apparaît dans UI Builder.
      Composants. [nom-composant].uiBuilder.description Chaîne Requis. Brève description 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 composants. [ component-name].properties au fichier.
      Cela ajoute 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 Array <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 comment l’utiliser.
      Composants. [nom-composant].propriétés[].readOnly Booléen Si la valeur est vrai, empêche un utilisateur de configurer la propriété dans UI Builder.

      Valeur 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é.

      Valeur par défaut : false.
      Composants. [nom-composant].properties[].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 UI Builder. La valeur doit être « global.core ».
      Composants. [nom-composant].properties[].typeMetadata Objet Données de configuration supplémentaires dont certains types de données ont besoin, 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 sur une instance.