Criar e editar uma página usando o Designer Portal de serviços

Crie ou edite uma página e use layouts para organizar as colunas que hospedam os widgets.

Antes de Iniciar

Função necessária: sp_admin ou administrador

Por Que e Quando Desempenhar Esta Tarefa

Essas etapas são destinadas a usuários com pouca ou nenhuma experiência em codificação. O Portal de serviços Designer inclui várias camadas de personalização, desde a simples adição de widgets em uma configuração específica em uma página até a adição de classes CSS.

Procedimento

1. Navegar até Tudo > Portal de serviços > Configuração do Portal de serviços.
2. Selecione Designer.
3. Alterne para o portal para o qual você deseja projetar páginas selecionando o nome do portal no cabeçalho.
   
4. No Portal de serviços Designer, selecione uma página para personalizar ou selecione Adicionar uma nova página.
5. Em Layouts, selecione Contêiner e arraste-o para a página.
6. Arraste um dos outros layouts e solte-o no contêiner.
   Este layout define a estrutura da sua página e o espaço disponível para soltar widgets. A estrutura do layout se alinha com o modelo de grade de inicialização e sempre adiciona até 12.
7. Use o filtro para pesquisar um widget e arraste o widget para o layout.

   Figura 1. Arraste contêineres, layouts e widgets para uma página

   

   Para widgets que não contêm nenhuma informação por padrão, você deve configurar as opções para suas instâncias de widget antes que elas apareçam em uma página do portal. Para obter mais informações sobre como configurar opções de instância de widget, consulte Configurar instâncias de widget.

8. Opcional: Edite as propriedades da página.
   1. Selecione Editar propriedades da página.
      O registro de página da tabela Páginas [sp_page] é aberto.
   2. Edite o formulário.

      Tabela 1. Campos de página

      Campo	Descrição
      Título	Nome interno da página. Use o título para pesquisar uma página no Designer do Portal de serviços.
      ID	Um ID exclusivo para a página. O ID é o que você usa para atribuir uma página a um portal. Ele também determina o URL da página, por exemplo , https://instance name.service-now.com/doc_portal/?id=doc_page, em que doc_page é o ID da página.
      Aplicação	O escopo da aplicação.
      Público(a)	Permite que a página seja acessada sem a necessidade de autenticação. Se Público for selecionado, todos os usuários poderão exibir a página, independentemente das funções listadas.
      Rascunho	Marque uma página como rascunho para limitar a capacidade do usuário de exibir a página enquanto você ainda a cria. Somente usuários com a função de administrador podem exibir uma página em rascunho, todos os outros usuários veem uma página 404.
      Funções	Limite o acesso do usuário a uma página por função.
      Descrição resumida	Descreve a página do portal. Este campo não é voltado para o público.
      CSS específico da página	A menos que uma página tenha CSS específico da página, a página herda o CSS do tema e da identidade visual. Se você precisar que uma página tenha uma aparência diferente, o CSS específico da página substituirá a herança do tema e da identidade visual.
      Título de página dinâmica	Crie variáveis para gerar títulos descritivos, dependendo do conteúdo carregado em uma página. Para obter mais informações, consulte Adicionar títulos dinâmicos a uma página.
      Clonar Página	Permite que você faça uma cópia de uma página que pode ser modificada. Se você clonar uma página do sistema base, uma nova instância de widget será criada para cada widget na página.
      Usar script SEO	Opção para habilitar uma inclusão de script que adiciona marcadores SEO para URLs canônicos e marcadores hreflang. Para obter mais informações, consulte Habilitar SEO para versões localizadas de uma página do portal.
      Script SEO	Inclusão de script a ser aplicada à página. Por padrão, o sistema usa a inclusão de script SPSEOHeaderTags, que inclui a implementação padrão para o URL canônico e os marcadores hreflang para Análise do portal de serviços páginas.
      Estrutura de URL legível	Adicione palavras-chave legíveis ao URL da página para melhorar a otimização do mecanismo de pesquisa (SEO) e as taxas de cliques de páginas públicas. URLs legíveis também ajudam os usuários a entender o que esperar de uma página para páginas públicas e não públicas. Por exemplo, https://<instance> /kb/en/faq/what-is-a-cookie?id=kb_article_view&sysparm_article=KB0000007 . Para obter mais informações, consulte Adicionar palavras-chave legíveis a URLs de página.

9. Opcional: Edite as propriedades do contêiner.
   1. Selecione no contêiner que você deseja editar ou selecione Contêiner nas trilhas.
   2. Selecione o ícone de edição [ ].
      O registro de contêiner da tabela Contêineres [sp_container] é aberto.
   3. Edite o formulário.

      Tabela 2. Campos de contêiner

      Campo	Descrição
      Nome	Nome interno do contêiner.
      Ordem	A ordem em que os contêineres aparecem em uma página. Para definir um contêiner para aparecer acima de todos os outros contêineres, forneça ao contêiner o número mais baixo no campo Pedido.
      Página	A página que inclui o contêiner.
      Título do leitor de tela	O título usado por um leitor de tela.
      Marcador de semântica	O marcador HTML semântico que inclui o contêiner. As opções incluem: Nenhum: todo o conteúdo da página entre o cabeçalho e o rodapé está incluído no marcador <main>. Principal: o marcador <main> inclui somente o contêiner e seu conteúdo. O marcador <main> é um elemento HTML semântico que contém o conteúdo principal da página. Ele deve ser aplicado ao conteúdo exclusivo da página e deve ser configurado para apenas um elemento na página. Nota: O marcador <main> pode ser aplicado a um contêiner, linha ou coluna. Para obter mais informações, consulte Configurar o marcador principal em uma página.
      Aplicação	O escopo da aplicação.
      Largura	Largura do contêiner. As opções incluem: Fixo Fluido
      Classe primária	Classe CSS primária do contêiner.
      Classe do CSS	As classes de CSS do contêiner. Substitui o CSS específico da página.
      Cor de fundo	A cor de fundo do contêiner.
      Imagem em segundo plano	Imagem em segundo plano do contêiner.
      Estilo do plano de fundo	O estilo de exibição de uma imagem em segundo plano. As opções incluem: Padrão Cobertura Contém Repetição
      Alternativa de inicialização	A seleção deste campo remove as classes de grade de inicialização padrão e desabilita o sistema de grade de inicialização no contêiner. Se selecionado, o seguinte não será aplicado: O campo Largura no registro do contêiner. Classe de inicialização padrão no registro de linha dentro do contêiner. Os campos Tamanho - xs, Tamanho - sm, Tamanho - mde Tamanho - lg nos registros de coluna do contêiner. Somente selecione este campo se você planeja fornecer classes CSS personalizadas e CSS para os registros de contêiner, linha e coluna.
      Mover para cabeçalho	Se selecionado, o contêiner ficará preso ao cabeçalho e não será rolado. Use esta opção para criar um subcabeçalho.

10. Opcional: Para alternar para uma página diferente, selecione a guia Páginas no painel esquerdo e selecione a próxima página que você deseja configurar.
11. Opcional: Use o botão Visualizar no cabeçalho para exibir sua página conforme você a projeta.
    Você também pode usar a Visualização para exibir sua página no modo móvel ou tablet por meio dos controles apresentados no cabeçalho.

    Figura 2. Exibição do tablet do Designer

    

Adicionar um subcabeçalho a uma página

Selecione um registro de contêiner para servir como subcabeçalho da página. Um subcabeçalho adere ao cabeçalho da página e não rola.

Antes de Iniciar

Função necessária: administrador

Procedimento

1. Navegar até Tudo > Portal de serviços > Configuração do Portal de serviços.
2. Selecione Designer.
3. Selecione uma página.
4. Alterne para o portal para o qual você deseja projetar páginas selecionando o nome do portal no cabeçalho.
   
5. Selecione o contêiner que você deseja usar como subcabeçalho ou selecione o contêiner usando as trilhas.
6. Selecione o ícone de edição ( ).
7. Selecione Mover para cabeçalho.

Resultado

Como um subcabeçalho, o contêiner adere ao cabeçalho e não rola.

Incluir ícones de fonte em uma página

Inclua ícones de fonte em uma página para que todos os widgets da página tenham acesso ao conjunto de ícones de fonte.

Antes de Iniciar

Função necessária: sp_admin ou administrador

Procedimento

1. Navegar até Tudo > Portal de serviços > Páginas e clique na página à qual você deseja adicionar ícones de fonte.
2. Anexe o arquivo de ícone de fonte ao registro da página.
3. No campo CSS específico da página da página, adicione o CSS para a definição do ícone da fonte.
   Use o sys_id do anexo como a origem no CSS. Por exemplo:

   /* fallback */
   @font-face {
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
     src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2');
   }
   
   .material-icons {
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;  /* Preferred icon size */
     display: inline-block;
     line-height: 1;
     text-transform: none;
     letter-spacing: normal;
     word-wrap: normal;
     white-space: nowrap;
     direction: ltr;
   
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;
   
     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;
   
     /* Support for IE. */
     font-feature-settings: 'liga';
   }

Resultado

Você pode selecionar um ícone no conjunto de ícones para qualquer widget nesta página. Por exemplo, no widget HTML, você pode usar a opção Código de origem para usar um ícone. Por exemplo:

<p style="text-align: center;"><em class="material-icons">voo_território</em></p>