Editar componentes

Edite Construtor de temas componentes individuais para que se adequem melhor à sua marca e atendam aos padrões de conformidade de acessibilidade. Os ganchos de tema que você pode editar são específicos para cada tipo de componente.

Antes de Iniciar

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

Os componentes que você pode editar em Construtor de temas foram criados em Now Platform Sistema de design. Para obter mais informações, consulte Componentes do Next Experience no ServiceNow Site para desenvolvedores.

O número total de violações de acessibilidade por componente é indicado na página do painel de edição.

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Temas > Construtor de temas.
   A página principal do Construtor de temas é exibida na exibição da página inicial.
2. Na exibição da página inicial, selecione a exibição da página Editor.

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

   

3. Selecione o tema para o qual você deseja editar componentes.
4. Na exibição da página do Editor, selecione a guia Estilos de componente.
   Os estilos de componente são listados graficamente.

   

5. Selecione Editar.
   Nota:

   Os componentes que podem ser editados são exibidos. Para obter informações sobre como filtrar a lista de componentes para localizar o componente que você deseja editar, consulte Visualizar componentes.
6. Selecione o componente que você deseja editar.
   Se você vir um aviso na guia de edição, resolva todos os avisos dentro do painel de interação do componente para remover o sinal de aviso do componente.
7. No painel de estilo configurável, edite os ganchos do tema que estão disponíveis para o componente selecionado conforme necessário.

   Os ganchos de tema editáveis disponíveis dependem do tipo de componente selecionado. Por exemplo, se você selecionar um componente Crachá, poderá editar as cores e os ganchos de acessibilidade do crachá. Se você selecionar um componente de link de texto, poderá editar a cor base e os ganchos de acessibilidade.

   Depois de atualizar os ganchos específicos do componente, as mudanças feitas no estilo global não atualizarão os estilos do componente porque os estilos específicos do componente têm precedência sobre os estilos definidos globalmente.

8. Se você selecionar uma cor a ser editada, o seletor de cores será aberto.

   Figura 2. Seletor de cores

   

   Nota:

   Por padrão, o seletor de cores mostra todas as cores disponíveis para o componente. Você pode selecionar o controle deslizante Ocultar opções inacessíveis para limitar as opções de cores às identificadas como acessíveis, com base nas diretrizes atuais das WCAG.
9. Ao concluir as mudanças, selecione Salvar mudanças.
10. Ao observar os componentes listados na página Edição, observe que alguns componentes podem exibir o símbolo a seguir.

    

    Nota:

    O símbolo de aviso de acessibilidade indica que o contraste de cores do componente selecionado não está em conformidade com os padrões de acessibilidade WCAG 2.1 para contraste de cores. Para obter mais informações, consulte Ajustar componentes para atender aos padrões de acessibilidade.