SharePoint 2010: Como añadir validaciones en formularios de lista en el lado del cliente (I)!

A menudo cuando estamos creando soluciones para SharePoint 2010 nos podemos encontrar con la limitación de que tengamos que hacer cierta extensibilidad en el lado del cliente (con JavaScript) ya que por la circunstancias que sean no tengamos posibilidad de subir desarrollos ni el servidor ni en la galería de soluciones Sandbox o simplemente porque queremos que la experiencia de usuario sea lo más flexible posible. Esta situación se puede dar por ejemplo cuando necesitamos introducir validaciones en formularios de lista adicionales a las que nos da por defecto la plataforma. En este artículo y siguientes trataré de cubrir este tema sobre como añadir cierta lógica en cliente mediante JavaScript:

  • Lo primero que vamos a hacer es disponer de una lista en la que hay ciertos campos a validar. Por ejemplo, en este caso no queremos que el campo Title esté vacío y además queremos que el valor del campo Numero3 no sea inferior a la suma de los campos Numero1 y Numero2.
  • A continuación, tenemos que analizar lo que nos devuelve el servidor cuando abrimos el formulario de creación de elemento o de edición para saber como identificar los controles a validar. Como podéis ver, más o menos tenemos un cierto patrón que nos permite identificar estos controles a través de:
    • El tipo de campo, que es “INPUT”.
    • El atributo id, que es un churro de caracteres que termina en un patrón conocido que en este caso es el tipo de campo TextField.
    • El atributo title, que contiene el nombre del campo.

 

image image
  • El detalle del código HTML devuelto  para el campo “Title” es el siguiente:
   1: <tr>

   2: <td nowrap="true" valign="top" width="190px" class="ms-formlabel"><h3 class="ms-standardheader">

   3: <nobr>Numero1</nobr>

   4: ></td>

   5: <td valign="top" class="ms-formbody">

   6: <!-- FieldName="Numero1"

   7:      FieldInternalName="Numero1"

   8:      FieldType="SPFieldNumber"

   9:   -->

  10:     <span dir="none">

  11: <input name="ctl00$m$g_c529ad40_bd17_4408_807b_3871c31df6c1$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$ctl00$TextField" type="text" id="ctl00_m_g_c529ad40_bd17_4408_807b_3871c31df6c1_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" title="Numero1" class="ms-input" size="11" style="ime-mode:inactive;" /><br />

  12: an>

  13:     

  14:     

  15: </td>

  16: >

  • Una vez que tenemos claro como poder acceder a los campos de interés, ya podemos pasar a la fase de desarrollo de nuestro código JavaScript. En este caso, lo que haremos es usar Visual Studio 2010 y crearnos un archivo de tipo JavaScript para aprovechar sobre todo el IntelliSense.

image

  • Y el código a añadir es el que aparece debajo. Como véis, la clave de todo está en la función getTagFromIdentifierAndTitle que nos permite localizar el control buscado a partir del tipo de campo, el patrón para el id y el valor de la propiedad title.
  • Con la salida de esta función, obtenemos el control en cuestión mediante la llamada a document.getElementById.
  • Y a partir de aquí, a implementar la lógica que corresponde.
   1: function PreSaveAction() 

   2: {

   3:     //Empty field

   4:     var lsTitle = document.getElementById(getTagFromIdentifierAndTitle("input","TextField","Title"));         

   5:     if(lsTitle.value == "") 

   6:     { 

   7:         alert("El título no puede estar vacío"); 

   8:         return false; // Cancel the item save process 

   9:     } 

  10:  

  11:     //Checking fields

  12:     var lsNumero3= document.getElementById(getTagFromIdentifierAndTitle("input","TextField","Numero3"));

  13:     var lsNumero1= document.getElementById(getTagFromIdentifierAndTitle("input","TextField","Numero1"));

  14:     var lsNumero2= document.getElementById(getTagFromIdentifierAndTitle("input","TextField","Numero2"));

  15:     if (parseInt(lsNumero3.value) < parseInt(lsNumero1.value) + parseInt(lsNumero2.value) ) {

  16:         alert("Numero3 no puede ser menor que la suma de Numero1 y Numero2");

  17:         return false;

  18:     }

  19:     return true;  // OK to proceed with the save item 

  20: }

  21:  

  22:  

  23: function getTagFromIdentifierAndTitle(tagName, identifier, title) 

  24: {

  25:     var len = identifier.length;

  26:     var tags = document.getElementsByTagName(tagName); 

  27:     for (var i=0;i<tags.length;i++) {    

  28:             var tempString = tags[i].id; 

  29:         if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len))

  30:         {

  31:             return tempString;

  32:         }

  33:     }

  34: }

  • Para añadirlo a nuestro formulario de lista, una de las opciones disponibles pasa por:
    • Cargar en primer lugar el archivo JavaScript en una biblioteca del sitio.
    • Editar el formulario con la interfaz de usuario.
    • Añadir una WebPart de tipo ContentEditor. Editar el campo de contenido de la WebPart en modo HTML y añadir la referencia a nuestro archivo JavaScript.
  • Guardamos la personalización del formulario y ya estamos listos para probar las validaciones añadidas.
image image image

Referencias sobre este tema:

Publicado por

Juan Carlos González

Juan Carlos es Ingeniero de Telecomunicaciones por la Universidad de Valladolid y Diplomado en Ciencias Empresariales por la Universidad Oberta de Catalunya (UOC). Cuenta con más de 12 años de experiencia en tecnologías y plataformas de Microsoft diversas (SQL Server, Visual Studio, .NET Framework, etc.), aunque su trabajo diario gira en torno a SharePoint & Office 365. Juan Carlos es MVP de Office Servers & Services desde 2015 (anteriormente fue reconocido por Microsoft como MVP de Office 365 y MVP de SharePoint Server desde 2008 hasta 2015), coordinador del grupo de usuarios .NET de Cantabria (Nuberos.Net, www.nuberos.es), co-fundador y coordinador del Grupo de Usuarios de SharePoint de España (SUGES, www.suges.es), así como co-director de la revista gratuita en castellano sobre SharePoint CompartiMOSS (www.compartimoss.com). Hasta la fecha, ha publicado 8 libros sobre SharePoint & Office 365 y varios artículos en castellano y en inglés sobre ambas plataformas.

2 comentarios en “SharePoint 2010: Como añadir validaciones en formularios de lista en el lado del cliente (I)!”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *