ServiceNow: Como estilizar painéis utilizando HTML e CSS.

Por que estilizar um Painel no ServiceNow ?

Dentro do contexto do ServiceNow, aprimorar a apresentação visual de painéis com gráficos desempenha um papel crucial na eficaz comunicação de dados. Através de um design bem pensado, não só tornamos métricas complexas mais compreensíveis, como também transmitimos um senso de profissionalismo e interação ao usuário. O toque pessoal na estética não apenas atende preferências individuais, mas também garante que a acessibilidade seja aprimorada para todos os públicos.

Em essência, a estilização de painéis no ServiceNow não é mera questão estética; é uma ferramenta prática com o poder de otimizar a experiência geral, a utilidade dos dados apresentados e seu impacto. Porém, é importante notar que essa plataforma apresenta algumas restrições em termos de personalização. Atualmente, as opções se limitam a alterações no fundo do painel e no cabeçalho dos gráficos. Essa limitação pode, portanto, criar desafios para usuários mais avançados que buscam um nível mais profundo de customização.

Como podemos ultrapassar os limites da ferramenta ?

Antes de tudo, é importante garantir que você tenha a autorização para editar gráficos e outros elementos. Uma vez obtida essa permissão, o próximo passo envolve acessar o painel específico no qual você deseja trabalhar. Uma ferramenta valiosa a ser explorada é o Dynamic Content. Mas, afinal, o que é isso e como ele pode aprimorar a personalização do seu painel? Vamos entender melhor.

· Dynamic Content: Este recurso viabiliza a criação de conteúdo dinâmico em relatórios e painéis. Sua função abrange a geração de filtros de relatórios dinâmicos diretamente no módulo de relatórios, alicerçados nos critérios pré-estabelecidos. Além disso, o Dynamic Content pode ser empregado para mostrar módulos de conteúdo nos painéis, como gráficos, tabelas e listas. Sua utilidade reside na personalização da exposição de informações em relatórios e painéis, proporcionando uma abordagem mais interativa e intuitiva. Por meio desse recurso, os usuários podem criar visualizações personalizadas dos dados, alinhando-se às suas necessidades específicas.

Adicionando e preparando o Dynamic content:

Para incorporar isso ao seu painel, siga os passos abaixo:

Adicionar Widgets:

1. Inicialmente, acesse a opção “Add Widgets”:

Acessar Blocos de Conteúdo:

2. Posteriormente, navegue para “Content Blocks”:

Selecionar Nova Opção de Dynamic Content:

3. Escolha a alternativa *New Dynamic Content:

Confirmar a Adição:

4. Clique em “Add”:

Agora que você já tem um Dynamic Content no seu painel, é hora de configurá-lo para personalização. Siga os passos a seguir:

Clique para Configurar:

5. Clique no link “Click here” dentro do seu Dynamic Content. Isso o direcionará para a configuração:

Nome e Ativação:

6. Quando acessar, a primeira alteração necessária será atribuir um nome ao Dynamic Content e marcar a opção “active” (caso não esteja marcada):

Limpeza do Conteúdo:

7. Após concluir essa etapa, apague todo o conteúdo presente no Dynamic Content, deixando-o da seguinte forma:

Agora, com o conteúdo limpo, podemos adicionar os elementos necessários para que a personalização funcione. Para isso, vamos utilizar a linguagem de marcação HTML e estilização CSS, visando alterar os elementos em nosso painel ao empregar classes e IDs.

O que é uma Classe:

Em essência, uma Classe é um atributo que possibilita a associação de um ou mais elementos a um código HTML. As classes são empregadas para selecionar e manipular elementos específicos através de CSS e JavaScript. Em resumo, as classes constituem uma maneira prática de agrupar elementos HTML, aplicando estilos e comportamentos específicos a esses grupos.

O que é um ID:

Por outro lado, um ID em HTML é um atributo global que confere um identificador exclusivo a um elemento HTML. Diferentemente das classes, que podem ser reutilizadas várias vezes em um documento HTML, cada ID deve ser singular no contexto do documento inteiro. Eles desempenham o papel de selecionar e acessar elementos específicos por meio de CSS e JavaScript. Em síntese, os IDs oferecem uma abordagem eficaz para identificar elementos HTML únicos, possibilitando a aplicação de estilos e comportamentos específicos a esses elementos.

Resumo:

Dado que o ServiceNow é uma plataforma pronta, seu código HTML subjacente é dotado de classes e IDs que podem ser aproveitados pelo CSS. Assim, ao estilizar, estamos explorando essa estrutura de classes e IDs (posteriormente, apresentarei como localizar essas classes e IDs).

8. Para concluir a preparação do nosso Dynamic Content, precisamos incorporar o seguinte código:

<html>

<style>

</style>

</html>

Ao realizar essa etapa, podemos prosseguir clicando em “Submit”, assim finalizando a preparação do nosso Dynamic Content e retornando ao início do painel.

Vamos agora explorar a utilização da ferramenta de inspeção para acessar as classes e IDs:

Para realizar esse procedimento, faremos uso da ferramenta de inspeção, que é nativa nos navegadores. Isso nos permitirá examinar o código-fonte da página HTML, ou seja, do próprio painel. Desta forma, seremos capazes de localizar as classes e IDs necessários.

9. O processo se inicia ao clicarmos com o botão direito do mouse e selecionarmos a opção “Inspecionar”, conforme demonstrado abaixo:

10. Depois disso, você deverá visualizar o seguinte aspecto:

Na lateral direita da tela, os códigos HTML do seu painel serão exibidos. Agora, para indicar à ferramenta qual elemento do painel você deseja modificar, você deve utilizar a primeira opção na parte superior da ferramenta. Alternativamente, você pode acionar o atalho Ctrl + Shift + C (se estiver utilizando o navegador Edge):

Com essas modificações, o botão adotará uma tonalidade azul. Ao posicionar o cursor sobre ele, uma caixa de destaque azul claro surgirá. Assim que essa caixa englobar a área que você pretende editar, o código HTML correspondente será apresentado automaticamente à direita. Para bloquear o código na ferramenta, basta clicar nele.

11. Movendo o cursor do mouse, continue até chegar à área que deseja editar:

Ao clicar no elemento que você deseja editar, esse elemento será fixado na seção à direita da tela. Isso permitirá uma análise mais detalhada do código HTML associado a esse elemento específico.

O código não apresenta um ID, no entanto, uma classe está presente: (title-content). Com essa informação, já temos a classe que almejamos modificar. Agora, para prosseguir, clique duas vezes sobre o nome da classe para copiá-lo. Em seguida, você pode fechar a ferramenta de inspeção ao clicar no “X” localizado na parte superior direita da ferramenta.

Vamos prosseguir com a adição da Classe (ou ID) ao Dynamic Content, e realizando as alterações de estilo:

12. Comece clicando novamente em “Add Widgets”, ativando assim o modo de desenvolvedor do painel. Com isso feito, mova o cursor do mouse sobre o cabeçalho do Dynamic Content. Você verá o ícone de um lápis de edição:

13. Após clicar para editar, você terá a capacidade de ajustar o Dynamic Content que foi preparado para a estilização do painel. Agora, para efetuar a personalização dessa classe, é necessário referenciá-la dentro da tag <style>. No CSS, a maneira de chamar uma classe é por meio da estrutura( .nome-da-classe { }).

14. Dentro das chaves, você pode realizar as modificações usando a linguagem CSS. Se precisar de mais informações sobre essa linguagem, você pode acessar o CSS Tutorial (w3schools.com), ou até mesmo usar o ChatGPT para solicitar exemplos de códigos prontos. Agora, você pode prosseguir com a alteração do elemento:

15. Após concluir as modificações, certifique-se de atualizar o seu Dynamic Content para que as alterações sejam aplicadas:

16. Ao ajustar a estilização da classe selecionada, você terá a capacidade de moldar o painel da maneira que melhor atender às suas preferências e necessidades:

Observações importantes:

Como utilizar o ID:

Quando se trata de um ID na ferramenta de inspeção, ele será representado da seguinte maneira:

E para aplicar alterações de estilo a esse ID no CSS, você deve se referir a ele dessa forma:

Ao fazer referência a um ID no CSS, você deve usar um (#) antes do nome do ID em vez de um (.) como nas classes. Isso diferencia as classes dos IDs na seleção de elementos no CSS.

O que podemos concluir ?

Personalizar os painéis no ServiceNow vai além de apenas torná-los bonitos. É uma maneira de dar vida aos dados e torná-los compreensíveis para todos. Usando recursos como o Dynamic Content e a ferramenta de inspeção, podemos ir além das limitações iniciais da plataforma, criando painéis que não apenas são visualmente agradáveis, mas também altamente funcionais.

Ao mexer nos elementos, como brincar com cores, layouts ou posições, transformamos painéis comuns em ferramentas incrivelmente eficazes para transmitir informações de maneira clara e impressionante. Essa personalização não apenas melhora a experiência do usuário, mas também enriquece o valor dos dados que apresentamos.

Com essa abordagem, o ServiceNow se torna muito mais do que uma simples ferramenta de gerenciamento. Ele se transforma em um aliado poderoso para análises precisas e para compartilhar informações de maneira compreensível. É um jeito de dar vida aos números e garantir que todos possam realmente aproveitar o poder dos dados.