Personalizar as cores dos componentes ServiceNow no AEM

Você pode definir a aparência dos componentes ServiceNow no Adobe Experience Manager (AEM) especificando cores para eles.

Como administrador do AEM, você pode modificar as variáveis de cor pré-configuradas para todos os componentes ou usar a função inicializeCSS para personalizar as cores de um componente específico usando uma classe CSS personalizada. Você especifica a classe CSS personalizada para um componente na propriedade Classe CSS personalizada. Para obter mais informações, consulte Exibir ServiceNow artigos de conhecimento em uma página do Adobe Experience Manager e Exibir ServiceNow casos em uma página do Adobe Experience Manager.

Nota:

Por padrão, os componentes ServiceNow são configurados usando os estilos CSS do Bootstrap v4.4.1. Se a página do AEM usar uma versão de inicialização diferente, o estilo dos componentes ServiceNow será substituído pelo estilo da página.

Modificar o tema de cores para todos os componentes ServiceNow no AEM

Defina o tema de cores para os componentes ServiceNow no Adobe Experience Manager (AEM) de uma só vez configurando as variáveis de cor.

Antes de Iniciar

Função necessária: administrador do AEM

Por Que e Quando Desempenhar Esta Tarefa

Nota:

Por padrão, os componentes ServiceNow são configurados usando os estilos CSS do Bootstrap v4.4.1. Se a página do AEM usar uma versão de inicialização diferente, o estilo dos componentes ServiceNow será substituído pelo estilo da página.

Procedimento

1. Abra o CRXDE Lite no seu navegador.
   Por exemplo, no seu navegador, insira o URL no formato http://<AEM_hostname> :<AEM_port> /crx/de . O URL padrão do CRXDE Lite é http://localhost:4502/crx/de.
2. Navegar até aplicações > servicenow-components > clientlibs > clientlib-common.
3. Abra o arquivo variáveis.less.
4. Configure as variáveis de cor disponíveis para os elementos HTML nos componentes ServiceNow.

   Tabela 1. Configurações de variável de cor

   Configuração de cor	Variável
   Conteúdo de texto	@cor-texto
   Hiperlinks	@link-color
   Cartões de identificação	@tinta-cor-de-texto
   Plano de fundo dos selos	@badge-background-color
   Cor primária para ênfase visual	@primary-color
   Cor complementar à cor primária, para dar ênfase visual	@secondary-color
   Títulos de componente	@title-color
   Texto do botão primário	@primary-btn-text-color
   Plano de fundo do botão primário	@primary-btn-bkg-color
   Texto do botão secundário	@secondary-btn-text-color
   Plano de fundo do botão secundário	@secondary-btn-bkg-color

   Nota:

   Você especifica uma cor para uma variável de uma das seguintes maneiras:

   • Nome da cor

     Por exemplo, vermelho

   • Valor HEX

     Por exemplo, #FF0000

   • Valor RGB

     Por exemplo, rgb(255,0,0)

   • funçãovar

     Use a função var para especificar uma propriedade personalizada para uma cor. Por exemplo, var(--gray-dark).

5. No menu CRXDE Lite, clique em Salvar tudo para salvar as mudanças no servidor AEM.

Modificar o tema de cores de um componente ServiceNow no AEM

Substitua o tema de cores de um componente ServiceNow no Adobe Experience Manager (AEM) usando a função de inicialização.

Antes de Iniciar

Função necessária: administrador do AEM

Por Que e Quando Desempenhar Esta Tarefa

As variáveis de cor especificadas no arquivo variáveis.less são aplicadas a todos os componentes ServiceNow no AEM. Você pode substituir as cores padrão de um componente específico definindo as variáveis de cor para o componente na função inicializeCSS.

Nota:

Por padrão, os componentes ServiceNow são configurados usando os estilos CSS do Bootstrap v4.4.1. Se a página do AEM usar uma versão de inicialização diferente, o estilo dos componentes ServiceNow será substituído pelo estilo da página.

Procedimento

1. Abra o CRXDE Lite no seu navegador.
   Por exemplo, no seu navegador, insira o URL no formato http://<AEM_hostname> :<AEM_port> /crx/de . O URL padrão do CRXDE Lite é http://localhost:4502/crx/de.
2. Navegar até aplicações > servicenow-components > clientlibs > clientlib-common.
3. Abra o arquivo variáveis.less.
4. Especifique a função inicializeCSS para um componente no formato<component_type> ;<class_name> ;<color_variable_1> ;<color_variable_2> ;<color_variable_n> .
   • component_type: o tipo de componente no qual você deseja aplicar o tema de cores personalizado, por exemplo, articlelist, articleview, cartões de caso e assim por diante.
   • class_name: a classe CSS personalizada inserida na propriedade Classe CSS personalizada do seu componente.
   • color_variable_1, color_variable_2, color_variable_n: as variáveis de cor que você especifica para os elementos HTML em um componente. Para obter mais informações, consulte a tabela de configurações da variável Cor.

   Use o código de exemplo a seguir como referência para o estilo de cor no nível do componente.

   .initialize(@componentType:articlelist;@className:now-article-list;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
   .initialize(@componentType:articleview; @className:now-article-view;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@secondary-color:indigo;);
   .initialize(@componentType:casecards; @className:now-case-cards; @text-color:red;@link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
   .initialize(@componentType:caselist; @className:now-case-list; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;);
   .initialize(@componentType:searchbox; @className:now-search-box; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;);
   .initialize(@componentType:searchresults;@className:now-search-results;@text-color:gray; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
   .initialize(@componentType:caseview;@className:now-case-view;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;);
   .initialize(@componentType:createcase;@className:now-create-case;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;)

5. No menu CRXDE Lite, clique em Salvar tudo para salvar as mudanças no servidor AEM.