Compartir a través de

SharePoint

Uso de JSLink con SharePoint 2013

Pritam Baldota

Trabajar con SharePoint UI siempre ha sido un reto para los desarrolladores. Sin embargo, una nueva característica de SharePoint 2013 llamado JSLink reduce la carga del uso de XSLT y proporciona una manera mucho más fácil y más sensible para mostrar los campos personalizados en el cliente. JSLink es una propiedad que controla el procesamiento de campos, artículos y hasta elementos web a través de un archivo JavaScript.

Este artículo explora el uso de JSLink con la ayuda de dos escenarios de demostración. El primer escenario demostrará cómo puede utilizar mensajes codificados por colores para indicar la finalización de la tarea, por ejemplo, como se muestra en la figura 1.

Using a Custom Column for a Task List to Show Status
Figura 1 usando una columna personalizada para una lista de tareas para mostrar el estado de

El segundo escenario es más complejo. Demostrará cómo implementar una galería de imágenes que proporciona un rótulo para cada imagen Mostrar metadatos y permitir la descarga en diferentes resoluciones, como se muestra en la figura 2.

Multiple Resolutions of an Image Available for Download
Figura 2 múltiples resoluciones de una imagen disponible para descargar

Podrá también recito a personalizar los campos del formulario nuevo y editar. Antes de comenzar, sin embargo, me quedo un vistazo a los fundamentos del cliente-lado representación en SharePoint 2013 y cómo JSLink añade valor a él.

Client-Side Rendering

Representación del lado del cliente se refiere a la visualización de datos en una página utilizando tecnologías que operan en el cliente, tales como JavaScript, HTML y CSS. Porque la tecnología se ejecuta en el navegador del cliente, es más sensible y eficiente, reduciendo la carga en el servidor Web. Las versiones anteriores de SharePoint (2010, 2007) utiliza XSLT para elementos del estilo, que generalmente es más complejo para trabajar con y más lento en rendimiento en comparación con JavaScript. SharePoint 2013 todavía es compatible con XSLT, pero tiene dos técnicas adicionales para la personalización de resultados por parte del cliente — Mostrar las plantillas, que definen la forma de un elemento Web de SharePoint 2013 búsqueda rinde resultados (ver bit.ly/1i5fM6k para obtener más información) y, el tema del enfoque de este artículo, JSLink.

JSLink es una propiedad que puede utilizarse con campos, elementos web, formas de lista y tipos de contenido. Con esta característica, usted puede agregar archivos JavaScript, abre amplias posibilidades de personalización. Cada archivo de JavaScript que se agrega es precedido con un token de SharePoint y separado por el símbolo de la pipa (|), así: Biblioteca ~site/style /­mycustom.js|~site/style library/mycustom2.js. Si los archivos JavaScript no contienen ningún código de representación relevante, se aplica el procesamiento predeterminado del elemento.

SharePoint proporciona varias fichas (estáticas y dinámicas) que son útiles para la construcción de una dirección URL específica. Aquí están algunas fichas importantes de SharePoint para construcción de URL dinámica:

  • ~ sitio — se refiere a la URL del sitio Web actual.
  • ~ sitecollection — se refiere a la dirección URL de la colección de sitios de padres del actual sitio Web.
  • ~ diseños — se refiere a _layouts/15 con respecto a la aplicación Web.
  • ~ sitecollectionlayouts — se refiere a la carpeta de diseños de colección de sitios thecurrent (como /sites/mysite/_layouts/15).
  • ~ sitelayouts — se refiere a la carpeta de diseños en el sitio actual (por ejemplo, sitio/mysite/mysubsite/_layouts/15).

SharePoint tiene más fichas para la construcción de la URL. Para más información sobre cadenas de URL y tokens, consulte el centro Dev en bit.ly/1lpYuAP.

Representación del cliente utilizando JSLink tiene un número de ventajas sobre XSL/XSLT. En primer lugar, utiliza JavaScript, con el cual la mayoría de los desarrolladores Web ya son cómodos. XSLT es algo más complejo para desarrollar y depurar, así que JSLink puede reducir el tiempo de desarrollo sin pérdida de precisión.

Representar una vista en el cliente utilizando JavaScript, HTML y CSS evita cargas innecesarias en el servidor, mejorando el rendimiento general y la reducción de tiempos de respuesta de la página. Procesamiento del lado del cliente hace que la interfaz de usuario altamente sensible.

Además, puede personalizar todo o parte de una vista utilizando JSLink. Por ejemplo, si desea personalizar sólo un campo específico, que pueda adaptar la lógica de representación para el campo el resto de la vista se procesan utilizando la lógica por omisión. Con JSLink, puede utilizar cualquier JavaScript válido, incluyendo complementos externos tales como jQuery, en combinación con HTML y CSS.

Por supuesto, cada tecnología tiene algunas desventajas, y también JSLink. Por ejemplo, si un usuario tiene JavaScript bloqueado en su navegador, JSLink no funcionará. Representación del lado del servidor con XSLT todavía mostrará la misma experiencia, pero rendimiento podría sufrir.

Rendimiento también podría sufrir si navegador de un usuario o del sistema es viejo o estadístico porque puede tomar más tiempo para ejecutar el script.

Finalmente, las correas eslabonadas están poco probable que entienda el contenido dinámico generado por AJAX/JavaScript; requieren datos estáticos con HTML. Entonces, si usted tiene un sitio público, JSLink no puede ser su mejor opción.

La referencia de archivo JSLink JavaScript puede establecerse en múltiples formas utilizando el modelo de objetos de servidor, Windows PowerShell, Element.xml través de características, la ventana de propiedades del elemento Web y el modelo de objetos de cliente. Lo que sigue es un código de ejemplo para cada enfoque.

El modelo de objetos de servidor: Para establecer la propiedad JSLink de, decir, lista formas, usted obtener acceso al objeto SPForm utilizando la colección de formas de la lista y luego establezca la propiedad JSLink del objeto SPForm:

SPWeb web = SPContext.Current.Web;
SPList list = web.Lists.TryGetList("MyTasks");
if (null != list)
{
  SPForm newForm = list.Forms[PAGETYPE.PAGE_NEWFORM];
  if (null != newForm)
  {
    newForm.JSLink = "~/mycustom.js";
  }
}

Windows PowerShell: Para establecer la propiedad JSLink de, por ejemplo, un campo personalizado de una lista, usted obtener acceso al objeto de campo utilizando la colección Fields de la lista y luego establezca la propiedad JSLink del objeto de campo:

$web = Get-SPWeb
$field = $web.Fields["MyCustomField"]
$field.JSLink = "~/layouts/mycustom.js"
$field.Update()
$web.Dispose()

El archivo Element.xml: Para establecer la propiedad JSLink de un campo personalizado de la lista, usted agregar un nodo de campo en el archivo Element.xml:

<Field ID="{eb3eed37-961b-41bd-b11c-865c16e47071}"
Name="MyCustomField" DisplayName="Custom Columns"
Type="Text" Required="FALSE" Group="JSLink Demo"
JSLink="~site/style library/JSLinkDemo/jquery-1.10.2.min.js|
~site/style library/JSLinkDemo/customview.js">
</Field>

Tenga en cuenta que usando el símbolo de tubería puede añadir varios archivos JavaScript.

El cuadro de diálogo Propiedades de elementos web : Para establecer la propiedad JSLink de un elemento Web, modificar sus propiedades. Ir a la parte Web | Editar propiedades | Miscellaneous y establece la propiedad JSLink.

El modelo de objeto del cliente (OMSC): Puede establecer la JSLink de un campo mediante la OMSC. Note que no puede actualizar la propiedad de columna sitio vía JavaScript directamente, necesita actualizar usando campos lista asociada. Si intenta actualizar a nivel de columna de sitio, obtendrá este error:

Esta funcionalidad no está disponible para los campos no está asociados a una lista...

 

Este código muestra cómo actualizar correctamente la propiedad JSLink para un campo en una lista vía el CSOM JavaScript:

fieldCollection = taskList.get_fields();
this.oneField = fieldCollection.getByInternalNameOrTitle("MyCustomField");
this.oneField.set_description("MyNewFieldDescription");
this.oneField.update();

Para obtener más información sobre este ejemplo, vea la documentación de MSDN en bit.ly/1i9rlZR.

Para trabajar con JSLink, en el archivo JavaScript personalizado que tienes que reemplazar este método:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides()

Este método requiere un objeto de plantilla que deben pasarse a él. Para definir el objeto de plantilla, debe especificar una propiedad y un método render para cada vista (por ejemplo, ver, agregar y editar).

El objeto de plantilla para registrar el método tiene propiedades como encabezado, cuerpo, pie de página, OnPreRender, OnPostRender, grupo, artículo y campos, que pueden ser aprovechados para reemplazar la lógica de representación predeterminada de una vista. Por ejemplo, para modificar los campos personalizados vista, visualización, edición y nueva, ofrecerle la siguiente información de propiedad de los campos del objeto de la plantilla:

siteCtx.Templates.Fields = {
  // MyCustomField is the Name of our field
  'MyCustomField': {
  'View': customView,
  'DisplayForm': customDisplayForm,
  'EditForm': customNew,
  'NewForm': customEdit
  }
};

Los métodos que se hace referencia en este código, tales como customView y customDisplayForm, contienen la lógica de representación real para este campo.

Por último, se llama al método RegisterTemplateOverrides de TemplateManager para aplicar la vista personalizada, así:

 

// Register the template to render custom field
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(siteCtx);

Este método se encargará del resto de la prestación de la visión basada en la lógica personalizada.

Tenga en cuenta que cuando se utilizan varias instancias de una vista de lista WebPart en la misma página y JSLink se aplican a uno de los casos, la disposición de toda otra lista ve cambios elementos web también, porque internamente SharePoint utiliza la lógica de representación común. Para evitar este problema, usted necesita para asegurarse de que el valor de BaseViewID no entran en conflicto con ViewIDs existente, así que cambia la propiedad BaseViewID del contexto antes de reemplazar, por ejemplo, ctx.BaseViewID = 1000.

Ahora te acompañaré a través de los escenarios de dos demostración.

Escenario 1: Mostrar estado de terminación de la tarea de codificados por colores

Este escenario muestra estado de finalización de la tarea mediante códigos de color para obtener una lista de tareas — rojo para una tarea incompleta y verde para una tarea completada.

En el ejemplo, podrás personalizar la plantilla de vista para el campo personalizado, como se muestra aquí:

// View Page custom rendering
function customView(ctx) {
if (ctx != null && ctx.CurrentItem != null) {
  var percentCompete = parseInt(ctx.CurrentItem.PercentComplete);
  if (percentCompete != 100) {
    return "<span style='color:red'>Incomplete Task</span>";
  }
  else {
    return "<span style='color:green'>Task Completed</span>";
  }
}
}

El método customView recibe el actual contexto de render como parámetro de entrada de SharePoint internamente. Este contexto entrada tiene muchas otras propiedades relacionadas con la lista, vista, elemento actual y así sucesivamente.

Propiedad currentItem del contexto da acceso al elemento de la fila actual de una lista. A través de esta propiedad se pueden acceder a todos los campos disponibles en la lista. Tenga en cuenta que si el campo no está disponible en una vista seleccionada, obtendrá un error al acceder al valor del campo.

Para comenzar, abra Visual Studio 2013 y seleccione un proyecto de SharePoint 2013 vacío.

Paso 1: En el menú Agregar nuevo elemento, agregar una columna de sitio al proyecto vacío. Para crear una columna de sitio, añadir la información de campo en un archivo Element.xml, como se muestra en la figura 3. Como puede ver, la propiedad JSLink hace referencia a dos archivos JavaScript: la biblioteca JQuery y un archivo JavaScript vista personalizada de la biblioteca de estilo. Tenga en cuenta que debe mantenerse la jerarquía de archivos de izquierda a derecha (archivos dependientes deben referenciarse primero).

Figura 3 hace referencia a los archivos JavaScript

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/"> 
  <Field
    ID="{eb3eed37-961b-41bd-b11c-865c16e47071}"
    Name="MyCustomField"
    DisplayName="Custom Columns"
    Type="Text"
    Required="FALSE"
    Group="JSLink Demo"
    JSLink="~site/style library/JSLinkDemo/jquery-1.10.2.min.js|
            ~site/style library/JSLinkDemo/customview.js">
  </Field>
 
</Elements>

Paso 2: Añadir otro nuevo elemento, un módulo de Scripts para almacenar JavaScript personalizado y otros archivos de recursos.

Paso 3: Agregar la biblioteca JQuery para el módulo de secuencias de comandos. Crear un nuevo archivo JavaScript denominado CustomView.js.

Paso 4: Cambie el nombre por defecto característica de característica 1 a JSLinkDemo, o crear una nueva función que incluye el módulo de secuencias de comandos y columnas de sitio. Establecer el alcance en sitio como es la columna del sitio que se desplegará.

Paso 5: Implementar la solución. Después de implementar la solución, usted verá la columna añadida a las columnas de sitio por ir a configuración del sitio | Columnas de sitio.

Paso 6: Crear una lista de tareas llamada MyTasks agregando una aplicación desde la página de contenido del sitio.

Paso 7: Agregar una columna personalizada para la lista de MyTasks en el menú de configuración de lista de la cinta.

Paso 8: Agregar una columna personalizada creado utilizando los pasos 1 a 5 haciendo clic en agregar desde columnas de sitio existente en la página de configuración de la lista. Filtro del grupo utilizando JSLink Demo, elija columna personalizada y agregarla a la lista.

Esto completa la aplicación del primer escenario, que muestra el estado de finalización de una tarea. Como se puede ver en figura 1, el estado personalizado muestra como tarea terminada en verde o incompleta tarea en rojo.

Escenario 2: Crear una galería de imágenes personalizadas con rótulos

En este escenario podrá personalizar el procesamiento de imagen incorporado Galería para mostrar en un formato tabular, con rótulos para descargar imágenes de resolución múltiple.

Para hacer esto, personalizar las propiedades del artículo, encabezado y pie de página de la plantilla de campo. El código siguiente establece el paso inicial:

(function () {
  var overrideContext = {};
  overrideContext.ListTemplateType = 109;
  overrideContext.Templates = {};
  overrideContext.Templates.Item = customItem;
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
 
function customItem() {
  return "ItemRow";
}

He puesto ListTemplateType a 109, que SharePoint predefine como PictureLibrary. (Encontrarás toda la lista predefinida tipos de plantilla en SharePoint en 2013 en bit.ly/1qE8UiY.) Este código extinguirían las filas con el texto devuelto por el método customItem.

Ahora, va a reemplazar el texto estático con las propiedades reales de imagen (título, URL y otros campos) para iniciar el procesamiento de la imagen. Para reemplazar las nueva imagen enlace y encabezado de columnas predeterminadas, podrás personalizar las propiedades del encabezado y pie de página para establecer algún texto HTML:

overrideContext.Templates.Header = "<b>Custom Image Gallery View</b>";
overrideContext.Templates.Footer = "<b>Custom Footer</b>";
function customItem() {
  return "<br /><img src='" + ctx.CurrentItem.FileRef +
  "' width='190' height='190' />;
}

Quiero mostrar las imágenes en formato tabular. Para hacerlo, tengo que añadir algo de CSS y HTML para el diseño en el método customItem. En primer lugar, agrego un contenedor div vacía a la plantilla de cabecera, que será utilizada posteriormente para mantener los datos reales de representación del artículo y pie de página. Dentro de la interpretación del artículo, me crear HTML dinámico y almacenarlo en una variable global. En la plantilla de renderizado de pie de página, asignar los datos dinámicos en el contenedor div. Figura 4 muestra el código completo para representar una galería de imágenes de formato tabular.

Figura 4 mostrando imágenes en formato Tabular

function customItem(ctx) {
  // Grid contains 4
  if (ctx.CurrentItemIdx % 4 == 0) {
    // Start new row
    tableData+= "<div style='clear:both'></div>"
  }
 
  tableData += "<div style='margin:5px;border:1px solid #666;float:left;"+
  "width:100px;height:100px' onmouseover=\""+
  "ShowCallout(this,'" + ctx.CurrentItem.Title + "','" +
  ctx.CurrentItem.FileDirRef + "','" + ctx.CurrentItem.FileLeafRef
  + "');\"><img src='" + ctx.CurrentItem.FileRef +
  "' width='100' height='100' /></div>";
 
return "";
}
 
// Custom Footer Method
function customFooter(ctx) {
  // Append Dynamic-generated data to container div
  $("#customImageGalleryContainer").html(tableData);
  return "";
}

Ahora quiero mostrar un rótulo en el ratón sobre cada imagen y Mostrar metadatos adicionales tales como título, información breve y así sucesivamente, junto con las resoluciones de imagen diferente para descargar. 2013 SharePoint proporciona un marco de llamada para Mostrar información contextual mediante un archivo JavaScript callout.js, usando el objeto global CalloutManager. Voy aprovechar ese marco para mostrar los rótulos de forma predeterminada. En primer lugar, crear un método personalizado denominado ShowCallout para determinar si hay cualquier rótulos abiertos existentes; Si hay, termino usando el método closeAll por defecto de la CalloutManager:

function ShowCallout(sender, itemId, title, brief, directory, filename) {
  CalloutManager.closeAll();
}

Antes de seguir adelante con la aplicación, tienes que entender cómo obtener imágenes de diferentes resoluciones. En SharePoint 2013, de forma predeterminada una imagen se crea en dos tamaños diferentes cuando lo está subido en una biblioteca de imagen. Por ejemplo, si subes sample.png a library path/imageLibraryName /, SharePoint crea automáticamente tanto una imagen en miniatura y una imagen Web-tamaño: /imageLibrary­Name/_t/Sample_png.jpg y /imageLibraryName/di_metro/­Sample_png.jpg. En estas URLs, _t representa miniatura di_metro representa Web y la extensión de archivo obtiene anexada al nombre de archivo con un separador de subrayado (_) prefijo.

La función ShowCallout utiliza estas URL de la imagen original, así como imágenes de diferentes resoluciones y los almacena en diferentes variables como se muestra aquí (nombre de archivo y directorio son ShowCallout parámetros):

var fname = filename.replace(".", "_");
var thumbnail = directory + "/_t/" + fname + ".jpg";
var medium = directory + "/_w/" + fname + ".jpg";
var full = directory + "/" + filename;

En este caso utilizo el método de createNewIfNecessary de CalloutManager, que crea la llamada sólo si no hay ningún rótulo en el punto del destino de lanzamiento. Si hay una llamada, el método devuelve la referencia de objeto existente. (Para leer más sobre CalloutManager, visite bit.ly/1kXH7uU.) Figura 5 muestra el código completo, y figura 6 muestra el resultado de salida.

Figura 5 la función ShowCallout actualizados

function ShowCallout(sender, itemId, title, brief, directory, filename) {
  // Close fists all callouts if opened
  CalloutManager.closeAll();
  var fname = filename.replace(".", "_");
  var thumbnail = directory + "/_t/" + fname + ".jpg";
  var medium = directory + "/_w/" + fname + ".jpg";
  var full = directory + "/" + filename;
  var calloutContent = "<img src='" + medium + "' width='50%'
    height='50%' /><br/>" +
  brief + " <a href='" + directory + "/Forms/DispForm.aspx?ID=" +
  itemId + "'>View Image</a><br />" +
  "<a href='" + thumbnail + "' target='_blank'>
    Thumbnail</a>  |  " +
  "<a href='" + medium + "' target='_blank'>
    Web Size</a>  |  " +
  "<a href='" + full + "' target='_blank'>Original Size</a>";
 
  var calloutRef = CalloutManager.createNewIfNecessary({
    ID: 'call_' + itemId, launchPoint: sender,
    beakOrientation: 'leftRight', title: title,
    content: calloutContent,
    contentWidth: 610
  });
 
  calloutRef.open();
}

Custom Image Gallery with Callout Showing Metadata
Galería de imágenes de Custom figura 6 con llamada mostrando metadatos

Para aplicar el procesamiento personalizado, cree una página del sitio y añadir la biblioteca de imágenes lista View Web Part. Ir al cuadro de diálogo Editar WebPart propiedades y establezca la propiedad JSLink ~/site/Style Library/JSLinkDemo/jquery-1.10.2.min.js|~/site/Style Library/JSLinkDemo/Custom­ImageGallery.js. Haga clic en aplicar y guarde la página. Después de actualizar la página, verás como se muestra en una galería figura 6.

Puede personalizar los campos del formulario nuevo y editar usando un enfoque similar, aunque con algunas variaciones. Aquí necesita considerar las cosas tales como validación de la entrada, almacenamiento de datos de campo de entrada al elemento de lista, mostrando los datos almacenados de un elemento de lista en un campo de entrada y así sucesivamente.

A continuación, me quedo a ver los detalles de implementación de un escenario complejo, multi-column campo personalizado como se muestra en la figura 7.

Multi-Column Custom Fields of a List Using JSLink
Figura 7 campos personalizados de varias columnas de una lista utilizando JSLink

Paso 1: Usando el archivo Element.xml, crear una nota (un campo personalizado para el texto en columnas de sitio con la propiedad NumLines establecida en, digamos, 1.000 (o lo que sea que adapte a sus necesidades). Este campo personalizado reemplaza la prestación en la forma nueva y editar.

siteCtx.Templates.Fields = {
  "MyComplexField": {
  'EditForm': customComplexNewOrEdit,
  'NewForm': customComplexNewOrEdit
}
};

Usar el mismo método de customComplexNewOrEdit para ambos ver nuevo y edición.

Paso 2: Establecer el contexto de la forma, que se requiere para configurar validadores para leer un valor desde el punto de vista personalizado y guardarlo a una lista. Para configurar el contexto forma utiliza el método SPClientTemplates.Utility.GetFormContextForCurrentField. Este método acepta dar contexto como parámetro, el cual es proporcionado por SharePoint internamente. Aquí está una muestra de código muestra el nuevo o editar método render personalizado:

 

function customComplexNewOrEdit(ctx) {
  if (ctx == null || ctx.CurrentFieldValue == null)
  return '';
 
  var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
  if (formCtx == null || formCtx.fieldSchema == null)
    return '';
}

Paso 3: Después de recibir el contexto forma, tienes que registrar la devolución de llamada con la actual forma de activar validación, obtener valor de un campo y guardar el valor en el campo correspondiente en la vista personalizada generada a partir de JSLink. Cada vez un clics del usuario guardar el botón en el formulario de lista, SharePoint internamente invoca un controlador callback adjunto a los campos usando formCtx.registerGetValueCallback (filedName, "callback"). Este controlador callback Lee el valor del campo antes de guardar a la lista:

formCtx.registerGetValueCallback(formCtx.fieldName, function () {
  // Read value from this callback and assign to the field before save
  return "";
});

Este es un controlador callback vacía. Tienes que personalizar el código para leer los valores de los controles seleccionados en el formulario y volver a la representación de los valores de cadena.

Paso 4: Para añadir validadores, necesitas primero crear un contenedor de validador en el cual registro validadores para los distintos campos. Hago esto mediante el objeto SPClientForms.ClientValidation.ValidatorSet. Puedo usar el método RegisterValidator del validador de contenedor para registrar varios validadores.

Usted necesita registrar un controlador callback error, así como, para mostrar errores. Para ello, usaré el método registerValidationErrorCallback del contexto de la forma. Este método requiere dos parámetros, el ID del elemento contenedor HTML (div en este ejemplo) y errorResult, que se devuelve de SharePoint internamente basado en error de validación. Mensajes de error anexará al elemento contenedor suministrado a este método. En mi ejemplo tengo que añadir un validador de campo obligatorio, y se muestra el código completo para la validación en figura 8.

Figura 8 código de validación

var validatorContainer = new SPClientForms.ClientValidation.ValidatorSet();
if (formCtx.fieldSchema.Required) {
  validatorContainer.RegisterValidator(
  new SPClientForms.ClientValidation.RequiredValidator());
}
 
if (validatorContainer._registeredValidators.length > 0) {
  formCtx.registerClientValidator(
  formCtx.fieldName, validatorContainer);
}
 
formCtx.registerValidationErrorCallback(
  formCtx.fieldName, function (errorResult) {
    SPFormControl_AppendValidationErrorMessage(
    errorContainer, errorResult);
});

Paso 5: Tienes que añadir controles HTML para representar el campo en el nuevo o editar página. Voy a tener un cuadro de texto, una lista desplegable con los valores dinámicos de otra lista y una lista desplegable con los valores estáticos. Podrá crear una tabla, agregar estos controles a la mesa y devolver el código HTML como salida desde el método Add/Edit personalizado.

Para cargar los datos dinámicamente, usar la API REST para leer los datos de otra lista y usarlo para llenar el título en esta lista. Para averiguar más acerca de la API REST de SharePoint, vea bit.ly/1cVNaqA.

Figura 9 muestra el código para la representación de controles de entrada de forma dinámica.

Figura 9 representación entrada controla dinámicamente

// Render input fields
var inputFields = "<table>";
...
inputFields += "</table>";
 
// Get List data from REST API
$.ajax({
...
success: function (data) {
  // Add options to the dynamic dropdown list
},
error: function (data) {
  // Error handler
}
});
 
 
return inputFields;

Paso 6: Para guardar un valor de varios campo en una lista, poner todos los valores de los campos en una sola cadena usando el separador de cadena y crear un formato personalizado como (fieldname:value)(fieldname:value), una especie de pares de clave y valor. Voy a hacer la construcción de la cadena en registerGetValueCallback.

Paso 7: Para mostrar un valor existente en el formulario de edición, analizar la cadena almacenada como un par de clave y valor, ahorro y asignar los valores a los respectivos controles de entrada. Esto se logra utilizando el mismo método de procesamiento personalizado como al construir HTML personalizado.

En resumen

Puede depurar JSLink utilizando herramientas de desarrollador basado en el navegador como las herramientas para desarrolladores de Internet Explorer, Firebug. Si pones un punto de interrupción en JavaScript después renderiza en el cliente, puede depurar el JavaScript como código de C#. net. Cuando accedes al contexto en el método de visión, puede obtener una referencia al elemento actual a través del cual puedes ver los valores de cada campo del elemento actual. Puede utilizar la ventana de consola de herramientas de desarrollador de Internet Explorer para acceder a cualquier propiedad del objeto actual.

JSLink proporciona una forma sencilla de personalizar cualquier vista de SharePoint usando un script de cliente puro, sin escribir una sola línea de código del lado del servidor. Puede utilizar cualquier basada en JavaScript plug-in con JSLink. Descargar el proyecto demo muestra en msdn.microsoft.com/magazine/msdnmag0614.

Pritam Baldota es un consultor de SharePoint en Microsoft prestación Global de servicios con más de nueve años de experiencia en la industria. En su tiempo libre tiempo blogs en pritambaldota.com. Llegar a él en pritam@pritambaldota.com.

Gracias a los siguientes expertos técnicos de Microsoft por su ayuda en la revisión de este artículo: Sanjay Arora, Subhajit Chatterjee y Paresh Moradiya
Sanjay Arora – Sanjay es un administrador de recursos de desarrollo profesional en la prestación Global de servicios de Microsoft.

Subhajit Chatterjee es Consultor Senior de entrega Global de servicios de Microsoft con más de 12 años de experiencia en la industria. Ha ejecutado a muchos contratos llave en mano y complejos en GD.

Paresh Moradiya tiene 11 años de experiencia en la industria de Software. Actualmente trabaja como consultor con Microsoft desde hace 5 años. Es una PYME en SharePoint Web Content Management y SharePoint Social.