Tipo de campo personalizado no modelo de Suplemento do SharePoint

Importante

Aviso de conteúdo herdado

Este artigo se baseia no desenvolvimento herdado do SharePoint (Suplementos, JSLink, FTC/Farm Solutions) e não é recomendado para o SharePoint Online moderno. O JSLink e o modelo de suplemento do SharePoint foram preteridos e não têm suporte em experiências modernas. Em vez disso, use a Estrutura do SharePoint (SPFx) para desenvolvimento moderno.

Resumo

A abordagem adotada para fornecer experiências personalizadas ao usuário final é diferente no novo modelo de Suplemento do SharePoint do que era com o Código de Confiança Total. Em um cenário típico de FTC (Código de Confiança Total) / Solução de Farm, os tipos de campo personalizados foram criados com o código de modelo de objeto do lado do servidor do SharePoint herdando de uma das classes de tipo de campo internas e criando um arquivo de implantação de tipo de campo (XML). Esses componentes foram implantados por meio de soluções do SharePoint.

Em um cenário de modelo de suplementos do SharePoint, experiências personalizadas do usuário final são implementadas por meio da renderização do lado do cliente. Nessa abordagem, os arquivos JavaScript são usados para implementar experiências personalizadas do usuário final. O padrão de provisionamento remoto implanta os arquivos JavaScript e os registra nos campos do SharePoint por meio da propriedade JSLink.

Da perspectiva do usuário final, a funcionalidade/resultado parece o mesmo.

Importante

As personalizações baseadas em JSLink (renderização do lado do cliente) não têm suporte nas experiências modernas. Isso inclui listas e bibliotecas modernas, inclusive suporte para JSLink nas Web Parts da Exibição de Lista das páginas modernas. A renderização do lado do cliente tem suporte nas experiências clássicas do SharePoint Online ou no local.

Aqui estão alguns exemplos de tipo de campo personalizado que implementa um mapa do Google. Eles são provenientes do exemplo PnP do Branding.JSLink Office 365.

Miniatura Imagens do mapa do Google exibidas em uma exibição de lista:

Duas exibições do Google Map mostrando o Ponto de Localização do Campus da Microsoft e a Área de Localização.

Edição em linha mostrando uma miniatura maior do Google Maps:

Dois mapas do Google. Uma exibição mostrando o ponto de localização do campus da Microsoft com um link para selecionar local, a outra exibição mostrando a área de localização do campus da Microsoft com um link para Editar forma.

Uma caixa de diálogo que permite a edição embutida:

Um mapa do Google mostrando o Microsoft Campus Shape. O texto na imagem diz: Clique no mapa para colocar marcadores e criar sua forma. Termine clicando no primeiro marcador. Você pode arrastar cada um dos marcadores ou clicar neles para obter mais opções. Você pode usar o botão Limpar mapa acima para remover todos os marcadores.

Diretrizes de alto nível

Como regra geral, gostaríamos de fornecer as seguintes diretrizes de alto nível para implementar a renderização do lado do cliente.

  • Use arquivos JavaScript e renderização do lado do cliente para implementar tipos de campo personalizados.
  • Use o padrão de provisionamento remoto para implantar arquivos JavaScript e registrá-los nos campos do SharePoint ou em Web Parts de Exibição de Lista.
  • Registre os arquivos JavaScript com o mecanismo MDS (Minimal Download Strategy) para garantir que o mecanismo MDS esteja ciente dos arquivos JavaScript de renderização personalizados.
  • Configurar a propriedade JSLink para hospedar a Web requer pelo menos permissão total no nível da Web, portanto, essa abordagem não é adequada para suplementos no repositório do SharePoint

Você tem algumas opções para implementar a renderização do lado do cliente com arquivos JavaScript por meio da propriedade JSLink.

  • Defina a propriedade JSLink em uma Web Part de Exibição de Lista que renderiza uma exibição de uma lista do SharePoint.
  • Defina a propriedade JSLink para um campo do SharePoint.
  • Defina a propriedade JSLink para um tipo de conteúdo do SharePoint.

Nesta opção, você define a propriedade JSLink em uma WebPartDefinition.

  • Essa abordagem não cria especificamente um tipo de campo personalizado no nível do SPField.
    • Portanto, a renderização personalizada só se aplica na Web Part de Exibição de Lista em que você define a propriedade JSLink.
  • Essa abordagem permite alterar a renderização de um ou mais campos do SharePoint de uma só vez.
  • Essa abordagem pode ser feita com código declarativo, com o modelo de objeto do lado do servidor do SharePoint, com o modelo de objeto do lado do cliente (CSOM) do SharePoint ou por meio do PowerShell.
    • Recomendamos que você use o modelo de objeto do lado do servidor do SharePoint, o modelo de objeto do lado do cliente do SharePoint ou o PowerShell para definir a propriedade JSLink por meio do padrão de provisionamento remoto.

Quando isso é apropriado?

Quando você precisa definir exibições específicas para dados de lista do SharePoint e modificar a renderização para mais de um campo do SharePoint, essa é uma boa opção.

Introdução

O exemplo a seguir define a propriedade JSLink em uma Web Part de Exibição de Lista do SharePoint.

  • Branding.ClientSideRendering (Amostra de PnP do O365)
    • Inclui 9 exemplos que definem a propriedade JSLink em uma Web Part de Exibição de Lista do SharePoint e uma explicação de como cada exemplo foi implementado.
    • O método RegisterJStoWebPart define a propriedade JSLink da Web Part de Exibição de Lista.

Nesta opção, você define a propriedade JSLink em um SPField.

  • Essa abordagem registra especificamente a propriedade JSLink no nível do SPField.
    • Portanto, a renderização personalizada será aplicada em todos os lugares em que o SPField for renderizado.
  • Essa abordagem permite alterar a renderização de um campo do SharePoint.
  • Essa abordagem pode ser feita com código declarativo, com o modelo de objeto do lado do servidor do SharePoint, com o modelo de objeto do lado do cliente do SharePoint ou por meio do PowerShell.
    • Recomendamos que você use o modelo de objeto do lado do servidor do SharePoint, o modelo de objeto do lado do cliente do SharePoint ou o PowerShell para definir a propriedade JSLink por meio do padrão de provisionamento remoto.

Quando isso é apropriado?

Quando você precisa definir uma exibição específica para um determinado campo do SharePoint e garantir que a exibição seja sempre usada quando o campo for renderizado, essa é uma boa opção.

Introdução

Os artigos a seguir demonstram como definir a propriedade JSLink em um SPField.

Ao desenvolver componentes de renderização personalizados do lado do cliente, lembre-se do seguinte.

  • Nem todos os campos do SharePoint podem ser substituídos pela propriedade JSLink.

    • O TaxonomyField é um bom exemplo.

  • O JSLink suporta vários tokens.

    • _layouts
    • _site
    • _siteCollection
    • _siteCollectionLayouts
    • _siteLayouts

  • Você pode registrar os arquivos JavaScript JSLink com a estrutura SOD (Script On Demand) do SharePoint para carregar o arquivo lentamente.

    • Use a tag (d) no final da URL do JSLink para registrar o arquivo no SOD.

      ~sitecollection/Style Library/JSLink-Samples/DependentFields.js(d)

  • Você pode carregar vários arquivos JavaScript por meio da propriedade JSLink.

    • Isso é especialmente útil se você tiver uma biblioteca de arquivos JavaScript que implementa a renderização do lado do cliente.

    • Considere usar essa abordagem ao direcionar dispositivos móveis, pois ela permite que você forneça apenas o JavaScript necessário para implementar a renderização do lado do cliente de um determinado campo do SharePoint.

    • Use o | para separar os arquivos JavaScript que você deseja carregar.

      ~sitecollection/Style Library/JSLink-Samples/MainLibrary.js|~sitecollection/Style Library/JSLink-Samples/SpecificField.js**(d)**

Exemplos de PnP

Aplicável a

  • Office 365 Multilocatário (MT)
  • Office 365 dedicado (D) parcialmente
  • SharePoint 2013 local, parcialmente

Os padrões para dedicados e locais são idênticos às técnicas de modelo do suplemento do SharePoint, mas há diferenças nas possíveis tecnologias que podem ser usadas.

  • Last updated on