Personalizar un tipo de campo mediante la representación del lado cliente
Aprenda a personalizar un tipo de campo utilizando la tecnología de representación del lado cliente en SharePoint.
La representación del lado cliente ofrece un mecanismo que puede usar para generar sus propios resultados a fin de obtener un conjunto de controles hospedados en una página de SharePoint. Este mecanismo le permite usar tecnologías muy conocidas, como HTML y JavaScript para definir la lógica de representación de tipos de campos personalizados. En la representación del lado cliente puede especificar sus propios recursos de JavaScript y hospedarlos en las opciones de almacenamiento de datos disponibles en su solución de granja de servidores, como la carpeta _layouts.
Importante
Las personalizaciones basadas en JSLink (representación del cliente) no se admiten en la experiencia moderna. Esto incluye listas y bibliotecas modernas, así como la compatibilidad de JSLink en los elementos web de vista de lista de las páginas modernas. La representación del cliente es compatible con la experiencia clásica de SharePoint Online o local.
Requisitos previos para usar los ejemplos de este artículo
Para seguir los pasos de este ejemplo, necesita lo siguiente:
Microsoft Visual Studio 2012
Office Developer Tools para Visual Studio 2012
Un entorno de desarrollo de SharePoint.
Para obtener información sobre cómo configurar el entorno de desarrollo de SharePoint, vea Configurar un entorno de desarrollo general para SharePoint.
Conceptos básicos para comprender la representación del lado cliente para los tipos de campo
En la tabla siguiente se muestra una lista de artículos útiles que le permitirán comprender los conceptos y los pasos necesarios en un escenario de acciones personalizadas.
Tabla 1. Conceptos básicos para la representación del lado cliente para tipos de campo
| Título del artículo | Descripción |
|---|---|
| Crear soluciones de granjas de servidores en SharePoint |
Obtenga información sobre el desarrollo, el empaquetado y la implementación extensiones administrativas en SharePoint con soluciones de granja de servidores. |
| Tipos de campos personalizados |
Obtenga información sobre cómo crear tipos de campo personalizados. A medida que almacena la información empresarial en SharePoint, puede que haya ocasiones en las que los datos no se ajusten a los tipos de campo que están disponibles en SharePoint FoundationOr, es posible que solo quiera personalizar esos tipos de campo. Los campos personalizados pueden incluir la validación de datos personalizados y la representación de campos personalizados. |
Ejemplo de código: Personalizar el proceso de representación de un tipo de campo personalizado en un formulario de vista
Siga estos pasos para personalizar la representación de un tipo de campo personalizado:
Cree el proyecto de solución de granja de servidores.
Agregue una clase para el tipo de campo personalizado.
Agregue una definición XML para el tipo de campo personalizado.
Agregue un archivo JavaScript para la lógica de representación del tipo de campo personalizado.
La figura 1 muestra un formulario de vista con un tipo de campo representado personalizado.
Figura 1. Campo de cliente representado personalizado en un formulario de vista
Para crear el proyecto de solución de granja de servidores
Abra Visual Studio 2012 como administrador (haga clic con el botón derecho en el icono de Visual Studio 2012 en el menú Inicio y seleccione Ejecutar como administrador).
Cree un nuevo proyecto con la plantilla Proyecto de SharePoint
En la figura 2 se muestra la ubicación de la plantilla Proyecto de SharePoint en Visual Studio 2012, bajo Plantillas, Visual C#, Office SharePoint, Soluciones de SharePoint.
Figura 2. Plantilla de Visual Studio del proyecto de SharePoint
Especifique la dirección URL del sitio web de SharePoint que quiera usar para la depuración.
Seleccione la opción Implementar como solución de granja de servidores.
Para agregar una clase al tipo de campo personalizado
Haga clic con el botón secundario en el proyecto de solución de granja de servidores y agregue una clase nueva. Asigne al archivo de clase el nombre FavoriteColorFieldType.cs.
Copie el código siguiente y péguelo en el archivo FavoriteColorFieldType.cs. El código realiza las siguientes tareas:
Declara una clase FavoriteColorField que se hereda de SPFieldText.
Proporciona dos constructores para la clase FavoriteColorField.
Reemplaza la propiedad JSLink.
Nota:
La propiedad JSLink no es compatible con las listas de Encuesta o Eventos. Un calendario de SharePoint es una 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 agregar una definición XML para el tipo de campo personalizado
Haga clic con el botón secundario en el proyecto de solución de granja de servidores y agregue una carpeta asignada de SharePoint. En el cuadro de diálogo, seleccione la carpeta {SharePointRoot}\Template\XML .
Haga clic con el botón secundario en la carpeta XML creada en el último paso y agregue un nuevo archivo XML. Asigne al archivo XML el nombre fldtypes_FavoriteColorFieldType.xml.
Copie el siguiente marcado y péguelo en el archivo XML. El marcado realiza las siguientes tareas:
Proporciona el nombre de tipo para el tipo de campo.
Especifica el nombre completo de la clase para el tipo de campo. Es la clase que ha creado en el procedimiento anterior.
Proporciona atributos adicionales para el 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 agregar un archivo JavaScript a la lógica de representación del tipo de campo personalizado
Haga clic con el botón secundario en el proyecto de solución de granja de servidores y agregue la carpeta asignada de diseños de SharePoint. Agregue una nueva carpeta CSRAssets a la carpeta de diseños agregada recientemente.
Haga clic con el botón secundario en la carpeta CSRAssets que ha creado en el último paso y agregue un nuevo archivo JavaScript. Asigne al archivo JavaScript el nombre CSRFieldType.js.
Copie el siguiente código y péguelo en el archivo JavaScript. El código realiza las siguientes tareas:
Crea una plantilla para el campo cuando se muestra en un formulario de vista.
Registra la plantilla.
Proporciona la lógica de representación para el tipo de campo cuando se muestra en un formulario de vista.
(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 +
"' >&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;" + color;
}
Para crear y ejecutar la solución
Presione la tecla F5.
Nota:
Al presionar F5, Visual Studio crea la solución, la implementa y abre el sitio web de SharePoint donde se ha implementado.
Cree una lista personalizada y agregue una nueva columna de campo Color favorito.
Agregue un elemento a la lista y proporcione un valor a la columna Color favorito.
La figura 3 muestra la página de la columna Crear con el nuevo tipo de campo personalizado.
Figura 3. Crear una nueva columna de tipo de campo personalizado
| Problema | Solución |
|---|---|
| El tipo de campo FavoriteColorField no está instalado correctamente. Vaya a la página de configuración de la lista para eliminar este campo. |
Ejecute el comando siguiente desde un símbolo del sistema con privilegios elevados: iisreset /noforce. Precaución: Si va a implementar la solución en un entorno de producción, espere el momento idóneo para restablecer el servidor web mediante iisreset /noforce. |
Pasos siguientes
Este artículo muestra cómo personalizar el proceso de representación de un tipo de campo personalizado. En el paso siguiente, puede obtener más detalles sobre los tipos de campos personalizados. Para obtener más información, consulte lo siguiente: