Remplacer les illustrations d’état vide par des images personnalisées

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 3 minutes de lecture

    • Modifiez ou remplacez les illustrations d’état vide par défaut par vos propres images personnalisées pour vous assurer que les éléments visuels reflètent l’image de marque de votre entreprise.

    Avant de commencer

    Pour que votre image puisse être thématisée, ajoutez les deux jetons de conception suivants à votre code à l’aide de votre éditeur de texte préféré avant de charger le SVG personnalisé sur Générateur de thèmes. 
    • --empty-state--main-object--fill
    • --empty-state--main-object—outline
    Pour plus d'informations, consultez Utilisation des styles d’image.

    Rôle requis : admin

    Pourquoi et quand exécuter cette tâche

    Important :
    Les images personnalisées s’appliquent aux espaces de travail et ne sont pas prises en charge dans le Interface utilisateur principale.

    Procédure

    1. Accédez à la Tous > Cadre de travail Now Experience > Thèmes > Générateur de thèmes.
      La Générateur de thèmes page de destination s’ouvre dans un nouvel onglet et s’affiche dans la vue Page d’accueil.
    2. Utilisez la liste déroulante Page pour sélectionner la vue de page de l’éditeur.
      Figure 1. Vue de la page de l’éditeur
      Exemple de vue de la page Éditeur.
    3. Dans la liste déroulante Thème, sélectionnez le thème que vous souhaitez modifier.
    4. Sélectionnez l’onglet Styles d’image dans le panneau des styles généraux.
      Les illustrations d’état vide sont affichées sur la scène principale et regroupées par type.
      Figure 2. Onglet Styles d’image sélectionné
      Onglet Styles d’image sélectionné avec des illustrations d’état vides répertoriées sur l’étape principale et le panneau des propriétés ouvert.
    5. Utilisez l’une des options suivantes pour sélectionner l’illustration d’état vide que vous souhaitez remplacer.
      • Sélectionnez l’icône d’icône Filtre et développez la catégorie États vides pour sélectionner l’illustration d’état vide spécifique que vous souhaitez remplacer.
      • Faites défiler la liste des illustrations d’état vides dans l’étape principale.
      Le panneau des propriétés s’ouvre automatiquement.
    6. Dans le panneau des propriétés, sélectionnez l’onglet Images .
      Figure 3. Onglet Images du panneau de propriétés
      Panneau de propriétés avec l’onglet Images sélectionné.
    7. Sélectionnez le fichier image grand, moyen ou petit de l’illustration que vous souhaitez remplacer.
      Remarque :
      Vous ne pouvez remplacer qu’une seule taille d’image à la fois.
      La fenêtre modale de chargement des images s’affiche.
      Figure 4. Modal de chargement des images
      Fenêtre modale de chargement de l’image.
    8. Utilisez l’une des options suivantes pour charger votre image personnalisée :
      • Sélectionnez Parcourir, choisissez votre fichier image personnalisé dans le navigateur de fichiers de votre ordinateur, puis sélectionnez Ouvrir.
      • Faites glisser votre fichier image personnalisé depuis le navigateur de fichiers de votre ordinateur et déposez l’image directement dans le modal.
      Consultez la fenêtre modale de chargement d’image pour connaître les limitations de taille et de format. Si votre image personnalisée ne répond pas à la taille et au format requis, votre image n’est pas enregistrée.
      Figure 5. Charger un modal d’image avec des limitations de taille et de format
      Chargez le modal d’image avec l’option Parcourir sélectionnée et les limitations des fichiers étendues.
    9. Sélectionnez Enregistrer.
      Votre image personnalisée apparaît sur la scène principale dans la catégorie d’état vide que vous avez choisie.
      Figure 6. Ajouter une catégorie d’état vide de données avec image personnalisée affichée
      Ajouter une catégorie d’illustration d’état vide de données avec image personnalisée affichée.
      Figure 7. Ajouter une catégorie d’état vide de données avec une image personnalisée affichée (jetons de conception appliqués à l’image)
      Ajouter une catégorie d’illustration d’état vide de données avec image personnalisée affichée (jetons de conception appliqués à l’image avant le chargement).
    10. Facultatif : Sélectionnez le symbole Supprimer le remplacement si vous souhaitez restaurer l’illustration d’état vide par défaut.
      Figure 8. Remplacement de la suppression d’image
      Onglet Images avec Supprimer le remplacement sélectionné.
    11. Facultatif : Prévisualisez vos modifications avant de publier votre thème sur votre instance.
      1. Sélectionnez l’onglet Aperçu de l’expérience dans le panneau Styles globaux.
        Onglet Aperçu de l’expérience.
      2. Sélectionnez l’expérience que vous souhaitez prévisualiser dans la liste déroulante Expérience.
        Liste déroulante de l’expérience.
      3. Sélectionnez l’icône Ouvrir dans un nouvel onglet pour ouvrir l’expérience dans un nouvel onglet.

    Résultats

    Une fois que vous avez téléchargé votre image personnalisée avec les deux jetons de conception appliqués, vous pouvez personnaliser les couleurs Générateur de thèmes comme vous le feriez pour les illustrations d’état vide par défaut. Pour plus d’informations sur la personnalisation des couleurs, reportez-vous à la section Personnaliser les couleurs des illustrations d’état vide et des images personnalisées.

    Si votre thème est publié, vos images personnalisées sont visibles par les utilisateurs qui ont appliqué votre thème lors de l’actualisation. Pour plus d’informations sur la publication de thèmes, reportez-vous à la section Publier vos thèmes avec Générateur de thèmes.