Compartilhar via

Soluções de navegação para portais do SharePoint Online

  • Artigo

Cada projeto de portal precisa implementar uma solução de navegação. Com base nos requisitos do projeto, a solução de navegação pode optar por aproveitar apenas componentes de navegação integradas, somente componentes de navegação personalizados ou uma combinação de ambos.

Esse artigo descreve como criar um sistema de navegação de bom desempenho no SharePoint Online.

Observação

Embora essa orientação vise principalmente o SharePoint Online, a maior parte também se aplica a portais hospedados em um ambiente local do SharePoint.

O que não fazer

A lista a seguir contém os pontos principais o quenão fazer ao criar sua solução de navegação.

Não:

  • Usar a navegação de site estrutural quando os conjuntos de sites do portal tiverem estrutura complexa (vários níveis de sites e/ou permissões exclusivas).
  • Usar uma solução de navegação personalizada que solicita todos os nós de navegação para todos os controles de navegação personalizados assim que a página é carregada, mesmo para controles que são inicialmente recolhidos/ocultos.
  • Usar uma solução de navegação personalizada que não armazene em cache os nós de navegação recebidos.
  • Usar uma solução de navegação personalizada direcionada ao serviço Web SOAP (listas herdadas); para problemas extras, passe algumas consultas CAML mal formadas.
  • Obter um repositório de termos referenciando se por nome ou ID (por exemplo, var termStores = taxSession.get_termStores();var termStore = termStores.getByName("Taxonomy_Dmxzz8tIBzk8wNVKQpJ+xA==");), as diretrizes recomendadas são obter a palavra-chave padrão ou o repositório de termos do conjunto de sites (por exemplo, var termStore = taxSession.getDefaultSiteCollectionTermStore(); ou var termStore = taxSession.DefaultKeywordsTermStore()).

Lógica para uma solução de navegação personalizada

Há muitos motivos pelos quais um arquiteto de portal pode optar por buscar uma solução de navegação personalizada. A maioria dos motivos está relacionada ao fato de que os designs de portal modernos são responsivos por natureza e geralmente incluem um sistema de navegação com recursos avançados; Dessa forma, as tentativas de mapear o design proposto para o SharePoint falham porque os controles de navegação do lado do servidor não podem ser configurados para atender a um ou mais requisitos do design proposto. Exemplos específicos a seguir.

Os controles integrados:

  • E sua experiência do usuário de gerenciamento não dá suporte a um design de interface do usuário responsivo.
  • Não exibe os comportamentos necessários (como submenu/foco, mega menu, mídia avançada, carregamento lento).
  • Não dá suporte aos atributos de hierarquia de navegação desejados (como cabeçalhos, agrupamento, profundidade, limite de link).
  • Não dá suporte aos atributos de link de navegação desejados (como miniatura, link de imagem, início/término da publicação, ênfase).
  • Não está ou não está mais disponível (como rodapé, trilha).
  • Não se integra com armazenamentos de dados de navegação personalizados/herdados.
  • A experiência do usuário de gerenciamento é inconsistente entre controles de navegação e não é amigável.

Quando houver motivos suficientes, considere uma solução de navegação personalizada.

Usando uma solução de navegação integrada

Você avaliou a lógica de uma solução de navegação personalizada e decidiu que nenhum desses motivos se aplica. A boa notícia é que você pode aproveitar padrões comprovados para uma solução de navegação integrada.

Em seu núcleo, uma solução de navegação consiste em um conjunto de controles de navegação que recebem seus dados de um repositório de navegação. Ao escolher uma solução de navegação integrada, a navegação gerenciada (descrita posteriormente nesse artigo) geralmente é a opção preferencial para um repositório de navegação, pois oferece o melhor desempenho de carregamento de página.

A outra opção, navegação estrutural (descrita posteriormente nesse artigo), pode se tornar facilmente muito intensivo de recursos (especialmente para estruturas complexas de conjunto de sites) e pode resultar em um desempenho de carregamento de página significativamente mais lento.

Usando uma solução de navegação personalizada

Você avaliou a lógica de uma solução de navegação personalizada e decidiu que muitos desses motivos se aplicam. A boa notícia é que você pode aproveitar padrões comprovados para desenvolver uma solução de navegação personalizada.

O diagrama a seguir mostra a arquitetura lógica de uma solução de navegação personalizada.

Arquitetura lógica da solução de navegação personalizada

As seções a seguir descrevem os principais componentes da arquitetura lógica.

Esse é um controle de exibição JavaScript personalizado do lado do cliente que reside na página.

Em geral, o controle consulta o repositório de navegação quando a página é carregada, processa a resposta de dados de navegação e renderiza o componente de navegação (apresentação, informações e comportamento). Na prática, o controle deve observar um padrão de carga lenta: execute a solicitação de dados de navegação somente quando necessário e adie-a pelo máximo de tempo possível.

O controle de exibição pode ser adicionado à definição estática da página em tempo de design (por meio de uma página mestra, um layout de página ou uma web part) ou pode ser adicionado ao estado dinâmico da página em tempo de execução (por meio da técnica de inserção de JavaScript).

O controle de exibição aproveita a Camada de Acesso a Dados do Lado do Cliente (descrita posteriormente nesse artigo) para otimizar o desempenho da página.

Opcionalmente, o controle de exibição pode fornecer um link de Configurações para sua página de gerenciamento de navegação, que fornece uma interface do usuário para gerenciar a configuração do controle de navegação.

A seguir estão algumas diretrizes gerais para os vários tipos de controles de navegação normalmente usados em uma solução de navegação personalizada.

Controles de exibição de navegação típicos

  • Navegação global: implemente um controle personalizado direcionado a uma entidade central de configuração de navegação específica do portal. Use um cache público para os nós de navegação. Considere a página de gerenciamento inicial.
  • Navegação do rodapé: implemente um controle personalizado direcionado a uma entidade central de configuração de navegação específica do portal. Use um cache público para os nós de navegação. Considere a página de gerenciamento inicial.
  • Mapa do site: implemente um controle personalizado direcionado a uma entidade de configuração de navegação central específica do portal.
  • Navegação atual (ou seja, à esquerda): implemente um controle personalizado direcionado a uma entidade de configuração de navegação local específica da web. Use um cache público para os nós de navegação. Considere a página de gerenciamento inicial.
  • Navegação estrutural: evite implementar esse controle personalizado; a construção da cadeia pai de objetos da web, com base na URL da web atual, é uma operação cara.
  • Links úteis: implemente um controle personalizado direcionado a uma entidade de configuração de navegação local específica da web. Use um cache público para os nós de navegação. Considere a página de gerenciamento inicial.
  • Meus links: implemente um controle personalizado direcionado a uma entidade de configuração de navegação específica do usuário privado. Use um cache privado para os nós de navegação. Forneça uma página de gerenciamento personalizada.

O repositório de navegação persiste a configuração do controle de navegação personalizado. Você pode optar por fazer com que o controle de navegação personalizado use um repositório de navegação personalizado ou um repositório de navegação fora da caixa.

Repositório de navegação personalizado

O repositório de navegação personalizado mais usado, uma lista personalizada do SharePoint, atinge um equilíbrio entre extensibilidade, capacidade de gerenciamento e desempenho (quando consultado por meio de pesquisa). O esquema de lista pode ser facilmente estendido com tipos de conteúdo personalizados que representam cabeçalhos/grupos de navegação e links de navegação, e colunas de site que definem os atributos personalizados desejados (por exemplo, ordem de exibição). As propriedades rastreadas para essas colunas de site podem ser mapeadas para propriedades gerenciadas na Pesquisa do SharePoint. Os dados de navegação são facilmente gerenciados por meio das páginas de gerenciamento de lista já conhecidas. Os dados de navegação podem ser acessados remotamente por meio da API REST de Pesquisa do SharePoint.

Observação

A navegação baseada em pesquisa tem uma dependência no índice de pesquisa. O SharePoint rastreia continuamente o conteúdo do portal; no entanto, ainda há um pequeno atraso antes que as alterações na lista do SharePoint apareçam no índice de pesquisa.

O repositório de navegação personalizado mais simples e de melhor desempenho é um arquivo de recurso JavaScript (por exemplo, nav.js) que declara uma variável de configuração específica do componente (por exemplo, footerNav) que é inicializada com uma cadeia de caracteres JSON. O navegador baixa automaticamente o arquivo e o armazena em cache para uso subsequente. Os dados de configuração estão prontos para uso depois de serem carregados no ambiente de tempo de execução do JavaScript. A principal compensação com essa abordagem diz respeito à interface do usuário de gerenciamento: no mínimo, um administrador deve editar manualmente uma cadeia de caracteres JSON em um arquivo JavaScript. Uma interface do usuário personalizada seria necessária para abstrair o repositório do administrador e tornar as coisas um pouco mais amigáveis.

Na outra extremidade do espectro de repositórios de navegação personalizados está o banco de dados personalizado. Essa opção fornece o máximo em flexibilidade, mas também requer o desenvolvimento mais personalizado. Além disso, um ambiente de hospedagem é necessário para o banco de dados, a API Web personalizada e a página de gerenciamento de navegação.

Observação

Para obter um exemplo excelente que mostra como implementar um repositório de navegação personalizado que usa a Camada de Acesso a Dados do Lado do Cliente, consulte Exemplo de DAL (Camada de Acesso a Dados) do lado do cliente no repositório PnP do SharePoint.

Repositório de navegação integrado

  • MMS (navegação gerenciada integrada): a navegação gerenciada do permite que você use um conjunto de termos do MMS (Serviço de Metadados Gerenciados) para configurar os nós de navegação para um determinado conjunto de sites. Os controles de exibição de navegação fora da caixa consomem automaticamente esses dados. A página de gerenciamento de navegação integrada fornece uma interface do usuário fácil de usar para gerenciar os nós de navegação dentro de uma hierarquia não restrita (profundidade ilimitada). Os controles de exibição de navegação personalizados também podem consumir esses dados, mas devem fazer isso por meio do JSON, pois atualmente não há API REST disponível para trabalhar com a navegação gerenciada.

    Observação

    É muito complicado configurar e manter uma definição de navegação global por meio da navegação gerenciada. À medida que cada novo conjunto de sites é criado, você deve duplicar a configuração para o conjunto de sites e seu conjunto de termos associado. Lembre-se também de que a navegação gerenciada não é recortada pela segurança, portanto, os usuários podem ver links que não podem acessar.

  • Navegação estrutural integrada (site): a navegação estrutural permite que você use a estrutura nativa do conjunto de sites (suas webs e páginas), bem como títulos e links criados, para configurar os nós de navegação para um determinado conjunto de sites. A página de gerenciamento de navegação integrada fornece uma interface do usuário para gerenciar os nós de navegação dentro de uma hierarquia restrita (profundidade limitada). Os controles de exibição de navegação personalizados também podem consumir esses dados, mas devem fazer isso por meio do JSON, pois atualmente não há API REST disponível para trabalhar com a navegação estrutural.

    Observação

    Os controles de exibição de navegação integrada usam consultas de banco de dados (ou seja, conteúdo por consulta) para obter os dados de navegação. Eles fazem isso para cada carregamento de página, que é muito intensivo de recursos para estruturas complexas de conjunto de sites. O uso da navegação estrutural é recomendado apenas para portais pequenos com estruturas de conjunto de sites simples. A navegação estrutural sempre retorna resultados cortados pela segurança.

  • Índice de pesquisa inicial (Pesquisa): a navegação controlada por pesquisa permite que você consulte o índice de pesquisa do SharePoint para sites e páginas construindo a consulta de pesquisa adequada. Não há uma página de gerenciamento de navegação específica e você deve implementar controles de exibição de navegação personalizados para consumir os dados recuperados das consultas de pesquisa.

    Observação

    Ao usar a navegação controlada por pesquisa, é importante armazenar em cache os resultados de pesquisa obtidos porque você não deseja acessar o servidor para cada carregamento de página. Mais adiante nesse artigo, a Camada de Acesso a Dados do Lado do Cliente é explicada, que é o modelo a ser usado em combinação com a navegação orientada por pesquisa. Assim como a navegação estrutural, a navegação orientada por pesquisa é reduzida à segurança, portanto, os usuários não verão links inacessíveis. A desvantagem da navegação controlada por pesquisa é que é difícil controlar a ordem dos itens de navegação retornados.

Página de gerenciamento de navegação

A página de gerenciamento de navegação fornece uma interface do usuário para gerenciar a configuração do controle de navegação de maneira amigável. A página pode ser acessada diretamente, bem como de um link opcional presente no controle de navegação (por exemplo, um link Configurações). A página usa as APIs de repositório de navegação apropriadas para o repositório de navegação escolhido para gerenciar a configuração do controle de navegação.

Você pode optar por fazer com que o controle de navegação personalizado use uma página de gerenciamento de navegação personalizada ou uma página de gerenciamento de navegação inicial.

Em muitos casos, a página de gerenciamento de navegação padrão pronto para uso (por exemplo, exibição de lista do SharePoint ou página de gerenciamento de conjunto de termos) associada ao repositório de navegação escolhido deve ser suficiente. Quando uma página padrão não está disponível, obviamente você deve desenvolver uma página personalizada. Ao decidir se a página padrão existente é aceitável ou não, considere o custo total do desenvolvimento de uma página de gerenciamento personalizado (design, desenvolvimento/manutenção, hospedagem e treinamento do usuário).

Como regra geral, busque páginas de gerenciamento personalizadas somente quando uma opção padrão não existir, quando a página deve dar suporte a uma interface do usuário responsiva ou quando a página deve ser consumida por meio da exibição do usuário front-end do portal (em vez do modo de exibição de administrador de back-end).

A API do repositório de navegação fornece uma interface programática para gerenciar a configuração do controle de navegação de forma consistente e segura. Você pode optar por fazer com que o controle de navegação personalizado use uma API de repositório de navegação personalizada ou uma API de repositório de navegação integrada.

Se você quiser desenvolver e implantar uma API de repositório de navegação personalizada, observe as seguintes diretrizes:

  • Implemente usando a pilha de tecnologia de sua escolha (ASP.NET API Web 2.0, Node.js,...).
  • Hospede a API em um ambiente acessível pela Internet.
  • Use o DNS público para resolução de nomes.
  • Exija SSL e obtenha o certificado SSL de uma Autoridade de Certificação Pública.
  • Habilite o acesso anônimo e proteja a API com o Azure AD.
  • Implemente suporte para CORS (Suporte a Recursos entre Origens).

Para ambientes de cliente .NET:

  • Direcione APIs do SharePoint por meio do Modelo de Objeto do Lado do Cliente do SharePoint (CSOM ou REST).
  • Direcione as suas APIs Web personalizadas via REST.
  • Direcione as APIs de terceiros via REST (use SOAP somente se necessário).

Para ambientes de cliente do navegador:

  • Direcionar APIs do SharePoint por meio das APIs REST do SharePoint (use JSOM somente se necessário).
    • Use a biblioteca entre domínios se você tiver como destino um conjunto de sites diferente.
  • Direcione as suas APIs Web personalizadas via REST.
    • Use a Biblioteca de Autenticação da Microsoft para fluxo javaScript e OAuth implícito.
  • Direcionar APIs de terceiros via REST (ou SOAP, se necessário).

Camada de Acesso a Dados do Lado do Cliente

A Camada de Acesso a Dados do Lado do Cliente é uma estrutura JavaScript personalizada do lado do cliente disponibilizada para todos os controles de exibição personalizados do lado do cliente, incluindo os controles de exibição de navegação personalizados. Ele dá suporte a padrões de carregamento de dados inteligentes, abstrai os detalhes das solicitações de cliente para servidor, fornece funcionalidade de cache de dados para minimizar o tráfego de solicitação de cliente para servidor e melhora o desempenho percebido da página.

Confira mais informações sobre a Camada de Acesso de Dados no Lado do Cliente, veja as Diretrizes sobre desempenho para portais do SharePoint Online.

Confira também