Formularios de listas personalizados

En un post anterior escribimos sobre la estructura de datos. En él mostramos cómo definir listas usando archivos XML que están empaquetados en nuestras soluciones para SharePoint sin embargo, los formularios con los que se implementa la solución son los estandar y cuentan con las validaciones básicas como la de campos requeridos.
Para poderle dar un poco más de vida a los formularios que ofrece SharePoint nosotros podemos personalizarlos tanto como queramos (claramente el esfuerzo dependerá de cuánta personalización desees). En este ejemplo les mostraré cómo definir un formulario personalizado al que se le agrega una referencia javascript/jQuery.

Agregando el formulario

El primer paso es expandir la serie de archivos en el que se define la lista en nuestro proyecto de Visual Studio y agregar un ítem al mismo nivel que el archivo Schema.xml.

En el cuadro de diálogo seleccione la opción Page que nos permite agregar un aspx a nuestra App. Tome nota del nombre que le di al archivo (DisplaySolicitud.aspx). Ésto es sólo una convención ya que se pueden agregar tres páginas diferentes por lista: una para Insertar un ítem, otra para Editar el ítem y la última para Visualizar el ítem. El procedimiento para cualquiera de éstos formularios es exactamente el mismo.

Al presionar el botón Add se creará el archivo. Es de notar que sólo se crea el aspx, esto debido a que en mi caso, es un proyecto para SharePoint Online pero, para aquellos que realizan soluciones para On premise, la página se creará con los archivos cs.
Un punto importante es cambiar la propiedad Deployment Type de los archivos aspx a ElementFile. En el caso de omitir este punto, ocurrirá un error al intentar implementar la solución.

El siguiente paso es modificar el archivo aspx agregando las referencias a los archivos CSS y JavaScript a utilizar. Todas las referencias las coloqué en el bloque Content que hace referencia al ContentPlaceHolderId="PlaceHolderAdditionalPageHead". Ten especial atención con la ruta relativa de los archivos que llamarás debido a que no concuerda con la estructura de carpetas del proyecto, en su lugar, concuerda con la ruta de implementación de los archivos en SharePoint.
En el bloque Content que hace referencia al ContentPlaceHolderId="PlaceHolderMain" es necesario agregar el WebPartZone con ID="Main". En ésta zona se crearán los controles que requiere la lista para capturar o mostrar los valores de cada uno de sus campos.

El archivo DisplaySolicitud.js contiene una función sencilla que envía un mensaje cuando se carga la página, por ello no entraré en detalle de ese archivo.
El último paso de configuración se da en el archivo Schema.xml de la lista que estamos trabajando. Es necesario expandir la sección Forms y editar la opción del formulario que nos interesa. Para el caso de éste ejercicio edité el nodo marcado con Type="DisplayForm". 

• Lo primer es cambiar la Url del formulario, para ello sólo coloco el nombre del archivo aspx que agregué (DisplaySolicitud.aspx). 
• El siguiente paso es cambiar SetupPath por Path y colocar el nuevamente el nombre del formulario. 
• Finalmente, agregué el atributo UseLegacyForm="FALSE".

Ya con todos los puntos cubiertos podemos pasar a probar el formulario utilizando F5 para implementar la solución. Una vez cargada la solución, me dirigí a la lista y agregué un ítem que posteriormente abrí para que SharePoint mostrara el formulario DisplaySolicitud.aspx que fue el que agregamos en este ejemplo.

Conclusión y siguientes pasos

Este ejemplo aunque sencillo, demuestra una forma de editar los formularios de SharePoint de tal manera que se pueden empaquetar y son implementados sin un esfuerzo adicional de configuración. El mayor provecho se obtiene al usar el API de SharePoint basada en JavaScript del cual platicaremos más adelante; pero no sólo eso, el manejo de los estándares web HTML, CSS y Javascript ayudará a darle una mayor funcionalidad con menor esfuerzo dado a que varias de las validaciones las puede controlar SharePoint y el resto se pueden hacer mediante Javascript.

Nuevamente recuerden que todos sus comentarios son bienvenidos. Saludos y la mejor de las suertes en sus proyectos.