Substitua ilustrações de estado vazio por imagens personalizadas

Modifique ou substitua as ilustrações de estado vazio padrão por suas próprias imagens personalizadas para garantir que os elementos visuais reflitam a identidade visual da sua empresa.

Antes de Iniciar

Para tornar sua imagem compatível com o tema, adicione os dois tokens de design a seguir ao seu código usando seu editor de texto preferencial antes de carregar o SVG personalizado para Construtor de temas.

• --empty-state--main-object--fill

• --empty-state--main-object—outline

Para obter mais informações, consulte Trabalhar com estilos de imagem.

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

Importante:

As imagens personalizadas se aplicam a espaços de trabalho e não são compatíveis com IU principal.

Procedimento

1. Navegar até Tudo > Estrutura do Now Experience > Temas > Construtor de temas.
   . Construtor de temas A página principal é aberta em uma nova guia e exibida na exibição da página inicial.
2. Use a lista suspensa Página para selecionar a exibição da página do Editor.

   Figura 1. Exibição da página do editor

   

3. Na lista suspensa Tema, selecione o tema que você deseja editar.
4. Selecione Estilos de imagem no painel estilos gerais.
   As ilustrações de estado vazio são exibidas na fase principal e agrupadas por tipo.

   Figura 2. Guia Estilos de imagem selecionada

   

5. Use uma das seguintes opções para selecionar a ilustração de estado vazio que você deseja substituir.
   • Selecione o ícone Filtro e expanda a categoria estados vazios para selecionar a ilustração de estado vazio específica que você deseja substituir.
   • Percorra a lista de ilustrações de estado vazio na fase principal.
   O painel de propriedades é aberto automaticamente.
6. No painel Propriedades, selecione Imagens guia.

   Figura 3. Guia Imagens do painel de propriedades

   

7. Selecione o arquivo de imagem grande, médio ou pequeno da ilustração que você deseja substituir.
   Nota:

   Você só pode substituir um tamanho de imagem por vez.
   O modal de upload de imagens é exibido.

   Figura 4. Modal Carregar imagens

   

8. Use uma das seguintes opções para carregar sua imagem personalizada:
   • Selecione Procurar , escolha seu arquivo de imagem personalizada no navegador de arquivos do computador e selecione Aberto .
   • Arraste o arquivo de imagem personalizada do navegador de arquivos do seu computador e solte a imagem diretamente no modal.
   Consulte o modal de carregamento de imagem para obter limitações de tamanho e formato. Se sua imagem personalizada não atender ao tamanho e ao formato necessários, sua imagem não será salva.

   Figura 5. Modal de imagem de upload com limitações de tamanho e formato

   

9. Selecione Save (Salvar).
   Sua imagem personalizada aparece na fase principal dentro da categoria de estado vazia que você escolheu.

   Figura 6. Adicionar categoria de estado vazio de dados com imagem personalizada exibida

   

   Figura 7. Adicionar categoria de estado vazio de dados com imagem personalizada exibida (tokens de design aplicados à imagem)

   

10. Opcional: Selecione o símbolo Remover substituição se quiser restaurar a ilustração de estado vazio padrão.

    Figura 8. Substituição de Remoção de imagem

    

11. Opcional: Visualize suas edições antes de publicar seu tema em sua instância.
    1. Selecione Visualização da experiência No painel Estilos globais.

       

    2. Selecione a experiência que você deseja visualizar na lista suspensa Experiência.

       

    3. Selecione o ícone Abrir em uma nova guia para abrir a experiência em uma nova guia.

Resultado

Depois de carregar sua imagem personalizada com os dois tokens de design aplicados, você pode personalizar as cores usando Construtor de temas assim como você faria para ilustrações de estado vazio padrão. Para obter informações sobre como personalizar cores, consulte Personalize as cores para ilustrações de estado vazio e imagens personalizadas.

Se o seu tema for publicado, suas imagens personalizadas ficarão visíveis para os usuários que tiverem seu tema aplicado após a atualização. Para obter mais informações sobre como publicar temas, consulte Publique seus temas com Construtor de temas.