Personalizar as cores dos componentes ServiceNow no AEM

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 3 min. de leitura

    • 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.