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 de codificação. . Portal de serviços O Designer inclui várias camadas de personalização, desde simplesmente adicionar widgets em uma configuração específica em uma página até adicionar 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 as páginas selecionando o nome do portal no cabeçalho.
   
4. Em Portal de serviços Designer, selecione uma página para personalizar ou selecionar Adicione 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 informações 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 se estiver 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 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 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 Adicione 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 de 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 de 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 os marcadores URL canônico e 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 para 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 . Para obter mais informações, consulte Adicione palavras-chave legíveis aos URLs da página.

9. Opcional: Edite as propriedades do contêiner.
   1. Selecione dentro do 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 em Pedido campo.
      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é é incluído no <main>marcador. Principal: O. <main>o marcador inclui somente o contêiner e seu conteúdo. . <main>O marcador é 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: . <main>o marcador pode ser aplicado a um contêiner, linha ou coluna. Para obter mais informações, consulte Configure 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 para o contêiner.
      Classe do CSS	As classes CSS do contêiner. Substitui CSS específico da página.
      Cor de fundo	A cor de fundo do contêiner.
      Imagem em segundo plano	Imagem de fundo do contêiner.
      Estilo do plano de fundo	O estilo de exibição de uma imagem de fundo. As opções incluem: Padrão Cobertura Contém Repetição
      Alternativa de inicialização	Selecionar este campo remove as classes de grade padrão do Bootstrap e desabilita o sistema de grade do Bootstrap no contêiner. Se selecionado, os seguintes itens não serão aplicados: . Largura campo no registro do contêiner. Classe de inicialização padrão no registro de linha no contêiner. . Tamanho - xs , Tamanho - sm , Tamanho - md e Tamanho - lg campos em registros de coluna no contêiner. Selecione este campo somente 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 adere ao cabeçalho e não rola. Use esta opção para criar um subcabeçalho.

10. Opcional: Para alternar para uma página diferente, selecione 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 Visualização para exibir sua página no modo celular ou tablet por meio dos controles apresentados no cabeçalho.

    Figura 2. Exibição do tablet Designer

    

Adicione um subcabeçalho a uma página

Selecione um registro de contêiner para servir como um subcabeçalho de 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 as 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 o 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 na 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 para a página, adicione o CSS para a definição do ícone de fonte.
   Use o sys_id do anexo como 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 Código de origem opção para usar um ícone. Por exemplo:

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