Validación de campos en un formulario personalizado de Shrepoint 2007 con JavaScript – Part III
Fabián ImazParte III – Formularios personalizados de lista en Sharepoint 2007.
Una vez que tenemos construido el formulario personalizado para la lista de Sharepoint y está funcionando correctamente vamos a colocar las validaciones necesarias para que no se pueda guardar un elemento hasta que los datos ingresados en la misma están correctos o los campos obligatorios fueron ingresados.
Como comentamos anteriormente Sharepoint nos provee mecanismos para la validación de los datos ingresados en cada campo de la lista, pero los mismos son ejecutados en el Servidor, lo que implica que nuestro formulario tenga que ir al servidor para realizar la misma y retornar al cliente si se produjo un error. Este mecanismo es rápido cuando nos encontramos en un ambiente de Intranet, pero cuando el ambiente es de Extranet o Internet la rapidez con la cual se ejecute la validación dependerá de la velocidad que contemos y de que tan cargado de trabajo se encuentre el servidor donde está alojada la solución Sharepoint.
Lo que nos llevo a nosotros a implementar esta solución fue que el servidor de Sharepoint tiene exposición a Internet y además el formulario que debíamos realizar era bastante complejo y las validaciones que debíamos realizar eran también complejas, debido a que algunas de ellas dependían de otros campos ingresados en el dicho formulario.
No podíamos utilizar código servidor para realizar las mismas puesto que no teníamos permisos y acceso al servidor de producción para instalar un Assembly con el código necesario para realizar las validaciones. Este problema es muy común en servidores administrados por terceros y donde nosotros no podemos instalar directamente ninguna solución (WSP o CAB) en el server o ni siquiera podemos colocar el Assembly en el directorio Bin de ejecución de nuestra aplicación.
Utilizando JavaScript colocado en el formulario hemos desarrollado una solución rápida y sencilla para resolver este problema, la cual nos permitió realizar todas las validaciones necesarias.
En este ejemplo que estamos haciendo vamos a colocar la validación de un campo de la lista y la misma se llevara a cabo cuando el usuario presione el botón Guardar, que está en el formulario. El problema principal que debemos sortear es poder anticiparnos al evento click del botón Guardar desde JavaScript, puesto que el control de Sharepoint “SharePoint:SaveButton” que utilizamos en el formulario para guardar no expone públicamente un evento el cual podamos programar. La solución a este problema la tenemos utilizando una función de JavaScript llamada “attachEvent” que nos permite registrarnos a cualquier evento de un control indicándole el evento que queremos registrarnos y un puntero a la función JavaScript que manejara dicho evento cuando se produzca. Tampoco podemos registrarnos al evento click del control (Submit) puesto que cuando nuestra función es notificada de que se produjo el mismo el formulario ya paso por el proceso de Submit y la pagina se está enviando al servidor y no podemos cancelar este proceso, lo que vamos hacer es registrarnos al evento “onmouseup” el cual se produce antes y podemos cancelar todos los eventos producidos, con esto logramos que el formulario no sea enviando al servidor hasta que la validación este correcta. Esta función “attachEvent” pertenece a cada control por lo que tenemos que buscar el control dentro del formulario, para eso podemos utilizar las funciones JavaScript getElementById o getElementByName. A la primera función le tenemos que pasar el ID del control y a la segunda el Name del control, pero en ambos casos son generados por Sharepoint en la renderización del formulario, por lo cual tenemos dos opciones de ver cuál es el ID del control en el cliente (browser). La primera opción es inspeccionar el código fuente y sacar todos los Ids que necesitamos o si no podemos utilizar una función que nos extraiga el Name a partir del tagName, identifier, title dle control que colocamos en nuestro formulario Sharepoint. La implementación de esta función fue extraída de la siguiente página “Microsoft SharePoint Designer Team Blog” y nos permite en tiempo de ejecución saber el name del control al que queremos registrarnos. Una vez tengamos el Name, utilizamos la función getElementByName para obtener una referencia al control en la página y así poder registrarnos al evento correspondiente.
Debido a que nos encontramos en un formulario de Sharepoint y el mismo tiene una Master Page asociada, no contamos con el tag body para poder colocar nuestro código en el evento Load del formulario, pero dentro de los JavaScript que nos provee Sharepoint contamos con una función que nos permite poner una función nuestra JavaScript en la pila de funciones que serán disparadas en el evento Load del mismo cuando se cargue, esta función se llama “_spBodyOnLoadFunctionNames.push”.En la siguiente sección (Ver Sección 1) vamos a ver cómo nos registrarnos al evento “onmouseup” de los dos botones que están en nuestro formulario.
function EventButton()
{
var objAceptar = getTagFromIdentifierAndTitle(“input”,”SaveItem”,””);//Se registra al evento “onmouseup” del botón aceptar
objAceptar.attachEvent(“onmouseup”,AceptarClick);
var objCancelar = getTagFromIdentifierAndTitle(“input”,”GoBack”,””);//Se registra al evento “onmouseup” del botón cancelar.
objCancelar.attachEvent(“onmouseup”,CancelarClick);
}
{
return lCancelarEvento;
En la próxima sección (Ver Sección 4) vamos a ver el código de la función “getTagFromIdentifierAndTitle” la cual nos permite obtener una referencia al control que queremos de forma dinámica.
function getTagFromIdentifierAndTitle(tagName, identifier, title)
return null;
}
Imagen 2
Espero que esta serie de artículos le haya servido de utilidad como nos sirvió a nosotros para implementar una solución diferente para realizar validaciones.
Fabián Imaz
Siderys Elite Software
Compartir
Hola, ¿puedes revisar el codigo que aparece en la seccion 4?
Creo que esta incompleto/erroneo, le falta la condicion del bucle for y la segunda parte del if creo que esta mal.
Por lo demas, muy bien el articulo.
Yo hice algo muy parecido, pero ademas de para validar los campos, yo lo utilizaba para redigir la pagina una vez hubiera hecho el submit (con un simple location.href=http://minueva pagina).
Asi en funcion de algunos valores metidos por el usuario, podia hacer uno u otro tratamiento (porque con manejador de eventos en servidor no se puede redirigir la pagina)
Elecktrus,
Muchas gracias por indicarnos el error que existia en el código. Aquí va tada la funcion nuevamente:
function getTagFromIdentifierAndTitle(tagName, identifier, title) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++) { var tempString = tags[i].id; if (tags[i].title == title && (identifier == “” || tempString.indexOf(identifier) == tempString.length – len)) { return tags[i]; } } return null; }
Saludos,
Fabián Imaz
Excelente trabajo, hace algun tiempo estuve buscando informacion de como validar campos de formularios del Sharepoint, hice algunas cosas empiricamente. Esto acalara mis dudas, me fue de mucha utilidad.
Si pueden se dan una vueltita por mi blog, son temas similares a los que ustedes abordan.
Saludos:
Mi Blog
Hola, no se porque motivo al querer registrar ese evento nunca lo ejecutó, de todas formas siguiendo vuestra idea, lo que hice fue tomar el evento onsubmit del formulario
document.getElementById(“aspnetForm”),
solo tuve la precaución de llamar a la función que ya es llamada por defecto
WebForm_onSubmit();
y Listo,
Solo quería comentar esta otra opción.
zizou,
Muchas gracias por tu aporte.
Saludos,
Hola, hice lo mismo que expusiste pero no me funcionó, mi duda es donde poner el codigo javascript, yo por lo menos lo puse en la misma página en el Content ContentPlaceHolderId=”PlaceHolderPageTitle”, no se si esto está bien o va en otro lado y por eso no funciona, ayuda por favor.
Hola,
Acá podes tomar la desicion de ponerlo en el placeholder main o en la master page. De todas formas te recomiendo que lo pongas en la master page, para que la funcion que se dispara en el body te la considere.
Cualquier cosa me avisas y lo vemos nuevamente.
Saludos,
Gracias Fabian, ahí si me funcionó.