Personalizar um tipo de campo usando a renderização do lado do cliente

Saiba como personalizar um tipo de campo, usando a tecnologia de renderização do lado do cliente no SharePoint.

O processamento do lado do cliente fornece um mecanismo que você pode usar para produzir sua própria saída para um conjunto de controles hospedados em uma página do SharePoint. Esse mecanismo permite usar tecnologias conhecidas, como HTML e JavaScript, para definir a lógica de processamento de tipos de campo personalizado. Na renderização do lado do cliente, você pode especificar seus próprios recursos JavaScript e hospedá-los nas opções de armazenamento de dados disponíveis para sua farm solution, como a pasta layouts.

Pré-requisitos para usar os exemplos neste artigo

Para acompanhar as etapas deste exemplo, será necessário:

• Microsoft Visual Studio 2012
• Office Developer Tools para Visual Studio 2012
• Um ambiente de desenvolvimento do SharePoint

Para obter informações sobre como configurar o seu ambiente de desenvolvimento do SharePoint, consulte Configurar um ambiente de desenvolvimento geral para o SharePoint.

Conceitos principais para ajudá-lo a entender a renderização do lado do cliente para tipos de campo

A tabela a seguir lista os artigos úteis que podem ajudá-lo a entender os conceitos e as etapas envolvidos em um cenário de ação personalizada.

Tabela 1. Conceitos principais para composição do lado do cliente para tipos de campo

Exemplo de código: personalizar o processo de renderização para um tipo de campo personalizado em um formulário no modo de exibição

Siga estas etapas para personalizar o processo de renderização para um tipo de campo personalizado:

1. Crie o projeto farm solution.

2. Adicione uma classe para o tipo de campo personalizado.

3. Adicione uma definição de XML para o tipo de campo personalizado.

4. Adicione um arquivo de JavaScript para a lógica de processamento do tipo de campo personalizado.

   Figura 1. Campo composto personalizado do lado do cliente num formulário de vista

Para criar o projeto farm solution

1. Abra Visual Studio 2012 como administrador (com o botão direito no ícone de Visual Studio 2012 no menu Iniciar e, em seguida, escolha Executar como administrador ).

2. Criar um novo projeto com o modelo do Projeto do SharePoint

   A Figura 2 mostra a localização do modelo do SharePoint Project no Visual Studio 2012, em Modelos, Visual C#, Office SharePoint, SharePoint Solutions.

   Figura 2. Modelo do Visual Studio do projeto sharePoint

   

3. Forneça a URL do site do SharePoint que você deseja usar para depuração.

4. Selecione a opção de implantar como uma solução de farm.

Para adicionar uma classe para o tipo de campo personalizado

1. Com o botão direito no projeto farm solution e adicione uma nova classe. Nome do arquivo de classe FavoriteColorFieldType.cs.

2. Copie o código a seguir e cole-o no arquivo FavoriteColorFieldType.cs. O código executa as seguintes tarefas:

   • Declara uma classe de FavoriteColorField herda de SPFieldText.

   • Fornece dois construtores para a classe FavoriteColorField.

   • Substitui a propriedade JSLink.

     Observação

     A propriedade JSLink não é suportada em listas de Eventos ou Inquéritos. Um calendário do SharePoint é uma Lista de Eventos.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

// Additional references for this sample.
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

namespace Microsoft.SDK.SharePoint.Samples.WebControls
{
    /// <summary>
    /// The FavoriteColorField custom field type
    /// inherits from SPFieldText.
    /// Users can input the color in the field
    /// just like in any other text field.
    /// But the field will provide additional
    /// rendering logic when displaying
    /// the field in a view form.
    /// </summary>
    public class FavoriteColorField : SPFieldText
    {
        // The solution deploys the JavaScript
        // file to the CSRAssets folder
        // in the WFE's layouts folder.
        private const string JSLinkUrl =
            "~site/_layouts/15/CSRAssets/CSRFieldType.js";

        // You have to provide constructors for SPFieldText.
        public FavoriteColorField(
            SPFieldCollection fields,
            string name) :
            base(fields, name)
        {

        }
        public FavoriteColorField(
            SPFieldCollection fields,
            string typename,
            string name) :
            base(fields, typename, name)
        {

        }

        /// <summary>
        /// Override the JSLink property to return the
        /// value of our custom JavaScript file.
        /// </summary>
        public override string JSLink
        {
            get
            {
              return JSLinkUrl;
            }
            set
            {
              base.JSLink = value;
            }
        }
    }
}

Para adicionar uma definição de XML para o tipo de campo personalizado

1. Com o botão direito no projeto farm solution e adicione uma pasta mapeada do SharePoint. Na caixa de diálogo, selecione a pasta {SharePointRoot}\Template\XML .

2. Clique com o botão a pasta XML criada na etapa anterior e adicione um novo arquivo XML. O XML de nome de arquivo fldtypes_FavoriteColorFieldType.xml.

3. Copie a seguinte marcação e colá-lo no arquivo XML. A marcação faz as seguintes tarefas:

   • Fornece um nome de tipo para o tipo de campo.
   • Especifica o nome completo da classe para o tipo de campo. Esta é a classe que você criou no procedimento anterior.
   • Fornece os atributos adicionais para o tipo de campo.

<?xml version="1.0" encoding="utf-8" ?>
<FieldTypes>
  <FieldType>
    <Field Name="TypeName">FavoriteColorField</Field>
    <Field Name="TypeDisplayName">Favorite color field</Field>
    <Field Name="TypeShortDescription">Favorite color field</Field>
    <Field Name="FieldTypeClass">Microsoft.SDK.SharePoint.Samples.WebControls.FavoriteColorField, $SharePoint.Project.AssemblyFullName$</Field>
    <Field Name="ParentType">Text</Field>
    <Field Name="Sortable">TRUE</Field>
    <Field Name="Filterable">TRUE</Field>
    <Field Name="UserCreatable">TRUE</Field>
    <Field Name="ShowOnListCreate">TRUE</Field>
    <Field Name="ShowOnSurveyCreate">TRUE</Field>
    <Field Name="ShowOnDocumentLibrary">TRUE</Field>
    <Field Name="ShowOnColumnTemplateCreate">TRUE</Field>
  </FieldType>
</FieldTypes>

Para adicionar um arquivo de JavaScript para a lógica de processamento do tipo de campo personalizado

1. Com o botão direito no projeto farm solution e adicione a pasta mapeada Layouts do SharePoint. Adicione uma nova pasta CSRAssets à pasta Layouts adicionada recentemente.

2. Com o botão direito na pasta CSRAssets que você criou na etapa anterior e adicione um novo arquivo de JavaScript. Nomeie o arquivo JavaScriptCSRFieldType.js.

3. Copie o código a seguir e cole-o no arquivo JavaScript. O código executa as seguintes tarefas:

   • Cria um modelo para o campo quando é apresentado num formulário de vista.
   • Registra o modelo.
   • Fornece a lógica de processamento para o tipo de campo quando usado é exibido em um formulário no modo de exibição.

(function () {
  var favoriteColorContext = {};

  // You can provide templates for:
  // View, DisplayForm, EditForm and NewForm
  favoriteColorContext.Templates = {};
  favoriteColorContext.Templates.Fields = {
    "FavoriteColorField": {
      "View": favoriteColorViewTemplate
    }
  };

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(favoriteColorContext);
})();

// The favoriteColorViewTemplate provides the rendering logic
// the custom field type when it is displayed in the view form.
function favoriteColorViewTemplate(ctx) {
  var color = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
  return "<span style='background-color : " + color +
         "' >&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span>&amp;nbsp;" + color;
}

Para compilar e executar a solução

1. Pressione a tecla F5.

   Observação

   [!OBSERVAçãO] Quando você pressiona F5, Visual Studio aproveita a solução, implanta a solução e abre o site do SharePoint onde a solução será implantada.

2. Crie uma lista personalizada e adicione uma nova coluna de campo de cor favorito.

3. Adicionar um item à lista e fornecer um valor para a coluna de cores favorito.

4. A Figura 3 mostra a página criar coluna com o novo tipo de campo personalizado.

   Figura 3. Creating a new custom field type column

   

Próximas etapas

Este artigo demonstrado como personalizar o processo de renderização para um tipo de campo personalizado. Como próxima etapa, você pode saber mais detalhes sobre os tipos de campo personalizado. Para saber mais, consulte o seguinte:

• Como: criar um tipo de campo personalizado
• Instruções: Criar um Tipo de Campo Personalizado.
• Personalizar uma exibição de lista em Suplementos do SharePoint usando a renderização do lado do cliente

Confira também

• Configurar um ambiente de desenvolvimento geral para o SharePoint
• Criar sites para o SharePoint
• Adicionar recursos do SharePoint
• Criar soluções de farm no Microsoft Office SharePoint Online