Personalize imagens de estado vazio com capacidade de tema para o seu tema

Personalize imagens de estado vazio com capacidade de tema padrão para seus temas Next Experience e Construtor de temas usando o registro de imagens do tema.

Antes de Iniciar

Função necessária: administrador

Procedimento

1. Navegar até Tudo > Estrutura do Now Experience > Temas > Temas do UX.
2. Selecione seu tema na tabela Temas de UX.
   O registro de tema de UX para o tema escolhido é exibido.
3. Na guia Tema do app de composição, selecione o registro de imagens.
4. No registro de estilo de imagem, insira os seguintes ganchos de tema de imagem de estado vazio no campo Estilo.

   {
       "properties": {
           "--now-illustration--add-attachment-sm--url": "",
           "--now-illustration--add-attachment-md--url": "",
           "--now-illustration--add-attachment-lg--url": "",
           "--now-illustration--add-data-sm--url": "",
           "--now-illustration--add-data-md--url": "",
           "--now-illustration--add-data-lg--url": "",
           "--now-illustration--completed-tasks-sm--url": "",
           "--now-illustration--completed-tasks-md--url": "",
           "--now-illustration--completed-tasks-lg--url": "",
           "--now-illustration--error-sm--url": "",
           "--now-illustration--error-md--url": "",
           "--now-illustration--error-lg--url": "",
           "--now-illustration--first-time-user-sm--url": "",
           "--now-illustration--first-time-user-md--url": ""
           "--now-illustration--first-time-user-lg--url": "",
           "--now-illustration--interrupted-sm--url": "",
           "--now-illustration--interrupted-md--url": "",
           "--now-illustration--interrupted-lg--url": "",
           "--now-illustration--no-data-sm--url": "",
           "--now-illustration--no-data-md--url": "",
           "--now-illustration--no-data-lg--url": "",
           "--now-illustration--no-search-results-sm--url": "",
           "--now-illustration--no-search-results-md--url": "",
           "--now-illustration--no-search-results-lg--url": "",
           "--now-illustration--offline-sm--url": "",
           "--now-illustration--offline-md--url": "",
           "--now-illustration--offline-lg--url": "",
           "--now-illustration--permissions-sm--url": "",
           "--now-illustration--permissions-md--url": "",
           "--now-illustration--permissions-lg--url": "",
           "--now-illustration--unconfigured-sm--url": "",
           "--now-illustration--unconfigured-md--url": "",
           "--now-illustration--unconfigured-lg--url": "",
           "--now-illustration--no-activities-sm--url": "",
           "--now-illustration--no-activities-md--url": "",
           "--now-illustration--no-activities-lg--url": "",
       }
   }

5. Adicione sua imagem personalizada de uma das maneiras a seguir.
   • Adicione uma imagem à lista de ativos de estilo de UX.
     1. Na guia Ativos de estilo de UX, selecione Novo.
     2. Selecione o ícone de pesquisa ( ) ao lado do item Ativo.
     3. Na lista Ativos do tema UX, selecione Novo.
     4. Selecione o ícone Gerenciar anexos ( ) para adicionar uma imagem.
     5. Quando o ativo de imagem for carregado, feche a janela Anexos.
        Nota:

        Verifique se a imagem está no formato SVG.
     6. Insira o nome do arquivo do ativo no campo Nome e selecione Enviar. O ativo é adicionado à lista Ativos de estilo de UX.
     7. Selecione e mantenha pressionado (ou clique com o botão direito do mouse) o ativo na lista Ativos de estilo de UX e selecione Copiar sys_id.
     8. Insira o sys_id no campo Estilo usando o seguinte formato: "/uxta/ENTERYOURSYSID.assetx"
   • Adicione sua imagem personalizada à tabela Imagens [db_images_list.do].
     Nota:

     Verifique se a imagem está no formato SVG.
     1. Para obter instruções detalhadas, consulte Carregar uma ou mais imagens.
     2. No registro de estilo de imagem, insira o nome do arquivo de imagem no campo Estilo usando o seguinte formato: "/FILENAME.svg".
6. Selecione Atualizar.
   As imagens personalizadas aparecem no seu tema.
7. Opcional: Personalize as cores das imagens de estado vazias usando o registro de cor de estilo de UX associado ao seu tema para substituir os ganchos de tema padrão.

   Para obter um tutorial passo a passo sobre como editar seu registro de cor de estilo de UX, consulte Exercício 3, Atividade 2 e 3 do workshop Next Experience na comunidade da ServiceNow.

   Nota:

   É recomendável usar os ganchos de tema padrão.