Como validar campos en formularios de listas personalizadas de SharePoint con SharePoint Designer

Haaron Gonzalez — Wed, 15 Jun 2011 23:39:00 GMT

Lo único que puedo decir es que aquellos pequeños y finos detalles dejan un sabor mucho más agradable a la experiencia.

Durante un pasado servicio de soporte se solicitó un requerimiento de validar que el campo fecha de una lista personalizada, no permitiera ingresar fechas mayores o iguales al día de hoy. Sin duda, de primera mano y como todo un programador piensas en construir un Custom Field que contenga la funcionalidad solicitada, sin embargo, todas las implicaciones y costo de desarrollar, probar, implementar y mantener una funcionalidad como tal no se justifica como para esta necesidad solicitada y el sentido de urgencia.

El folclórico y temperamental SharePoint Desginer 2007 a.k.a “SPD” hace su aparición como una alternativa para realizar la validación solicitada.

Básicamente la solución será:

Copiar y pegar la página NewForm.aspx de la lista en cuestión con el nombre de NewFormEnhancement.aspx
Abrir la página y poner invisible el primer WebPart
Agregar un Custom List Form de tipo New para la lista en cuestión
Agregar validadores a field donde requerimos la funcionalidad

1. Copiar y pegar la página NewForm.aspx de la lista en cuestión con el nombre de NewFormEnhanced.aspx

Cargamos el sitio en cuestión usando SPD, asegúrate de firmarte al sitio en cuestión con una cuenta que por lo menos el permiso de Site Collection owner.
Cuando cargas el sitio podrás ver en forma de árbol el contenido.
Expande la carpeta Lists y de los elementos mostrados expandes la lista que deseas personalizar. Observa que se tienen un conjunto de archivos .aspx, selecciona NewForm.aspx y da clic derecho, copia la página y ahí mismo pegas con el nombre de NewFormEnhancements.aspx

2. Abrir la página y poner invisible el primer WebPart

Das doble clic sobre NewFormEnhanced.aspx. SPD carga la página para poder ser editada.
Da clic sobre el único WebPart en la página y da clic derecho para elegir la opción de WebPart Properties. WebPart Properties carga el panel de propiedades correspondiente.
Expande la sección de Layout y da clic sobre el cuadro de verificación Hidden. Esto hace que en la página en cuestión el WebPart pre determinado no este visible.

3. Agregar un Custom List Form de tipo New para la lista en cuestión

En el código Markup de la página en cuestión buscamos el lugar donde se encuentra </WebPartPages:
ListFormWebPart>
</ZoneTemplate>
</WebPartPages:
WebPartZone> y justo debajo posicionamos nuestro cursor.
Seleccionamos del menú Insert la opción SharePoint Controls y Custom List Form. Esto carga una ventana de dialogo que nos permite seleccionar el tipo de WebPart que deseamos insertar sobre nuestra página personalizada.
Configuramos el tipo de forma de captura que será aprovisionado por esta ventana de dialogo. Básicamente elegimos la lista de la cual necesitamos una instancia del formulario de captura y muy importante es el tipo de formulario de captura que requerimos como la forma de nuevo elemento, forma de modificación de un elemento o forma de visualización de un elemento. Elegimos New Item form, damos clic en Ok y esto genera una nueva instancia de la forma de captura para nuevos elementos de la lista que elegimos. Esta forma de captura es aprovisionada en código Markup de tipo WebPartPages:DataFormWebPart el cual expone los fields que el formulario tiene y el layout HTML donde estos fields son ubicados en la forma, esto nos da grandes posibilidades de personalización visual.

4. Agregar validadores a field donde requerimos la funcionalidad

Buscamos el field de tipo fecha que deseamos validar.
Nos aseguramos de modificar el tipo de control que se tiene configurado. Simplemente seleccionamos el control en cuestión y damos clic derecho sobre él, elegimos la opción de Show common control task cargando con ello una sección donde podemos elegir el tipo de control. Como podemos ver seguramente tenemos la opción de Form Field como Format As, damos clic sobre el cuadro de selección y elegimos Date Picker. Esto hace una especie de cambio en el control.
Damos clic derecho Properties sobre el control y buscamos la propiedad ID en mi caso fue “ff6_1”. Este ID es muy importante ya que con el podremos asociarlos a otros controles del lado servidor como TextBox, Validation Controls,. etc. Lo único importante que se debe de contemplar es que cuando utilizamos los controles de ASP.NET o nativos de SharePoint, estos hacen referencia al control no con el ID como tal, sino con el siguiente patrón “ID$IDTipoDeDato” en otras palabras “ff6_1$ ff6_1Date”.
Dentro del código Markup buscamos la terminación de la declaración del control Date Picker “</SharePoint:DateTimeControl>” y justo abajo pegamos el siguiente código:

<SharePoint:InputFormCustomValidator

ClientValidationFunction="IsValidDate"

ID="custvDueDate"

runat="server"

Display="Dynamic"

SetFocusOnError="false"

ControlToValidate="ff6_1$ff6_1Date"

BreakBefore="true"

BreakAfter="false"

ErrorMessage="Date must be grater than today" />

Como se puede observar, tenemos controles del lado servidor específicos de SharePoint. Estos controles heredan de los controles de validación de ASP.NET y agregan otro comportamiento adicional muy similar a los de ASP.NET pero especial para SharePoint. Mediante las directivas pre definidas en la página podemos acceder a ellos. Karine Bosch explica aquí cada uno de estos controles y lo hace muy bien. Favor de ver este post antes de continuar.

En el caso de InputFormCustomValidator lo estamos usando para realizar una validación sobre el field Due Date. Recuerda que la regla es NO permitir la captura de fechas mayores o iguales al dia de hoy. El control de validación custom InputFormCustomValidator nos permite asignar código compilado .NET para realizar la validación en cuestión, solo que bajo el contexto de ejecución de SharePoint se requeriría hacer algunas modificaciones en el web.config para permitir la compilación de la página, sin embargo, este control nos permite hacer lo mismo utilizando código del lado del cliente. Y justo ese es el escenario que pienso compartir aquí.

Básicamente estamos confiando en realizar la validación desde el navegador de internet utilizando Javascript. Como ven, la propiedad ClientValidationFunction apunta a una función Javascript “IsValidDate” encargada de realizar la validación personalizada y este código javascript deberá de estar referenciado o registrado en la página en cuestión y lo hacemos agregandolo dentro de un Content Place Holder especial. Cuando el usuario capture una fecha sobre el control, este dispara el uso de la función javascript para validar la información capturada, la funcion javascript recibe en sus argumentos el source y args, en otras palabras el objeto que lo dispara y algunos argumentos del objeto como el valor que contiene. Cuando args.IsValid es igual a true significa que la validacion es correcta y por lo tanto hace que el control InputFormCustomValidator no muestre el mensaje de error. Cuando es false, hace lo contrario.

Este código javascipt lo podemos agregar justo al inicio de la página después de la declaración de las directivas:

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

<script language="javascript" type="text/javascript">

function IsValidDate(source, args)

{

var today = new Date(new Date().setHours(0,0,0,0));

var arrayDate = args.Value.split("/");

var controlDate = new Date(arrayDate[2], arrayDate[0]-1, arrayDate[1]);

args.IsValid =( today<controlDate);

}

</script>

</asp:Content>

Como podemos ver utilizamos un Content Place Holder que no propiamente estaba declarado dentro de la página y adentro agregamos el javascript de la función IsValidDate el cual recibe como argumento el dato que se desea validar. Con funcionalidad javascript se generan variables de tipo date para gestionar la comparación.

El resultado:

No olvides dar check in a la pagina para poder probarla. Para terminar, asegurate de especificar en las propiedades de la lista en cuestion tu nueva pagina como la pagina principal para agregar elementos en la lista. Con esto cuando un usuario de clic en New dentro de la lista, SharePoint carge la nueva pagina personalizada.

En SPD, das clic derecho sobre la lista en cuestion.
Seleccionas Properties.
Seleccionas la pestaña Supporting Files y en new item from buscas la nueva pagina creada.

Credito a Hector Mata por el codigo javascript, gracias!

Originalmente publicado en msmvps.com

Haaron Gonzalez : SharePoint Designer 2007, WSS 3.0, Windows SharePoint Services, SharePoint Designer

Como validar campos en formularios de listas personalizadas de SharePoint con SharePoint Designer