martes, 16 de junio de 2009

Validaciones Custom en Sharepoint

Objetivo:
Realizar validaciones custom de diversos campos en sharepoint, con mucha mejor apariencia y usabilidad, sin hacer post.

Ingredientes:
Un a lista a validar.
Suite Jquery (Son los ficheros javascript que se encuentran en el paquete Rar que os proporciono).
Un array creado en una variable javascript con los nombres de los campos a validar.
Fichero Validaciones.js que he preparado para este objetivo

Receta:
Paso 0) Descomprimir el paquete que contiene el código js y la suite jQuery en la carpeta "js" (hay que crearla) en la raiz del sitio.Descargalo de aquí :
http://www.robertomarcos.com/validaciones_codigo.rar

Paso 1) Abrir el NewForm.aspx

Paso 2) Ocultar (Hidden) el WebPart de formulario automático (ListFormWebPart)

Paso 3) Añadir nuestro formulario Custom debajo del ListFormWebPart con los campos del tipo NewItemForm (o de tipo EditItemForm para la pagina EditForm.aspx)


Paso 4) Pegar en el interior del tag <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> la inclusión del script
<script type="text/javascript" language="javascript" src="../../js/validaciones.js" ></script>

Paso 5) Pegar en el interior del tag <asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server"> este script el cual hay que preparar incluyendo los tipos , nombres y mensajes en caso de error de los campos
Hay que poner los campos en la matriz de esta forma:

'TIPO1', 'FIELDNAME1', 'TEXTO A MOSTRAR1',
'TIPO1', 'FIELDNAME1', 'TEXTO A MOSTRAR1',
.....
'TIPO N', 'FIELDNAME N', 'TEXTO A MOSTRAR N'

Los tipos admitidos son input, select (Para combos y lookup) y selectespecial (Para lookupfield con mas de 20 elementos)

<script language="javascript" >cadenaCampos = new Array(
'select','Tratamiento','Seleccione un -Tratamiento- válido',
'input','Nombre','Tiene que rellenar el campo -Nombre-',
'input','Apellidos','Tiene que rellenar el campo -Apellidos-',
'input','Telefono','Tiene que rellenar el campo -Telefono-'
//'selectespecial','NombreComboAjax','Seleccione un -Nombrecombo con mas de 20 elementos- válido' );
</script>


Nota:
Si ponemos algún FieldName que no exista, saca un mensaje de error como un alert normal y hay que tener en cuenta que el error se produce en el javascript por no encontrar el objeto, por lo que hasta que estén bien puestos los fieldName de los campos a validar (Que no tienen porque ser todos) no va a funcionar correctamente.

Paso 6) Poner el botón de save el redirect to source y el "if (validaVacios(cadenaCampos))" , os quedara así:
<input type="button" value="Save" name="btnSave" onclick="javascript: if (validaVacios(cadenaCampos)) {ddwrt:GenFireServerEvent('__commit;__redirectsource')}" />

Paso 7) Abrir el EditForm.aspx

Paso 8) Añadir nuestro formulario Custom con los campos de tipo EditItemForm para la pagina EditForm.aspx

Truco: Yo suelo copiar la tabla que contiene los campos del Web part de la pagina de nuevo y les cambio campo a campo la propiedad CONTROLMODE a de NEW a EDIT así no tengo que repetir el formulario completo

Paso 9) Repetir desde el paso 2

Paso 9.1) Filtrar el formulario custom de editForm mediante un parametro ITEMID que recoja la variable ID de la QueryString, porque si no, siempre editara el mismo elemento , esto lo he explicado en post anteriores.

Paso 10) Probar y Darle calor :D

Aquí os dejo unas capturas de pantalla del resultado final.

RobertoMarcos.com
http://sharepointworks.blogspot.com/




No hay comentarios:

Publicar un comentario