Validación de campos en un formulario personalizado de Shrepoint 2007 con JavaScript – Part II

Parte II – Formularios personalizados de lista en Sharepoint 2007

Hemos vuelto y como comentamos, vamos a ver cómo podemos crear un formulario personalizado para una lista y asociarlo a la misma. Esperamos que instalaran el Sharepoint Designer como les recomendamos en el artículo anterior, puesto que vamos a utilizarlo como herramienta para llevar a cabo este desarrollo.
En el artículo anterior (Ver parte I), hablamos de los formularios por defecto (Ver Imagen 1) que nos coloca Sharepoint cuando creamos una lista en nuestro sitio, estos formularios son asociados a la lista para cada una de las tareas que queremos realizar (Nuevo, Editar y Ver un Elemento) y cada vez que realizamos alguna de estas tareas, Sharepoint nos muestra dicho formulario para llevarla a cabo.
Algunas veces nos encontramos con el caso que dichos formularios no son del todo útiles y debemos construir formularios personalizados para trabajar con la lista en Sharepoint, dado los requerimientos solicitados en nuestra aplicación.
Para comenzar a trabajar debemos abrir Sharepoint Designer y conectarnos al sitio donde está la lista a la que le queremos cambiar los formularios por defecto, una vez conectados la pantalla del Sharepoint Designer se tiene que ver como lo muestra la imagen (Ver Imagen 2).
Usando el panel izquierdo (Lista de Carpetas) navegamos hasta la carpeta de la lista y buscamos la lista a la cual deseamos cambiarles los formularios por defecto y la abrimos. Vamos a encontrarnos con los formularios (paginas ASPX) que describimos en el artículo anterior, como lo muestra la imagen (Ver Imagen 3). Si abrimos unos de los formularios (por ejemplo EditForm.aspx) verán como está conformado el mismo y encontraran la WebPart que le mencionamos anteriormente.
Ahora vamos a empezar a crear el formulario personalizado, vamos a crear uno para insertar nuevos elementos en la lista, lo primero que tenemos que hacer es crear un pagina ASPX en la raíz de la lista (como están los demás archivos), para ello seleccionamos la  lista y vamos al menú, Archivo->Nuevo->ASPX y nos tiene que abrir una página nueva. Lo que vamos hacer inmediatamente es guardarla y darle un nombre, así la misma queda almacenada en la base de datos de Sharepoint, para ello vamos de nuevo al menú y seleccionamos, Archivo->Guardar, le colocamos un nombre y la misma queda almacenada con los demás formularios dentro de la carpeta de la lista.

 

Imagen 1
Formulaior_Por_Defecto

Imagen 2
Inicio_Designer

Imagen 3
Lista_Designer

 

Una vez que tenemos el formulario guardado, lo que vamos hacer es colocar un formulario de lista personalizado, para realizar esta tarea vamos al menú y seleccionamos, Insertar->Controles de Sharepoint->Formulario de lista Personalizado. Se nos despliega una nueva ventana donde deberemos seleccionar:
  • Lista o Biblioteca: La lista para la cual queremos crear el nuevo formulario.
  • Tipo de Contenido: En el DropDow seleccionamos Elemento.
  • Tipo de Formulario: Seleccionamos la opción "Formulario de Nuevo Elemento.

Si queremos la barra de herramientas activada, dejamos marcada la casilla "Mostrar barra de herramientas estándar". El formulario nos debería quedar como se muestra en la imagen (Ver Imagen 4).

Imagen 4
Formulario_Designer

Lo que debemos hacer nosotros es modificar el HTML y los controles que acaba de colocar el Sharepoint Designer para armar el formulario. Los controles de Sharepoint tienen la utilidad de poderse transformar en otro control, incluso en un control de Asp.Net. Lo que no podemos hacer es cambiar la estructura del formulario y debemos respetar como está armado, podemos agregar más controles y código HTML, incluso podemos utilizar XSLT para realizar transformaciones de datos  y así conseguir un formulario que deseamos.
Para cada campo de la lista, Sharepoint Designer nos coloca el siguiente control
<SharePoint:FormField runat="server" id="ff5{$Pos}" ControlMode="New" FieldName="WebPage" __designer:bind="{ddwrt:DataBind(‘i’,concat(‘ff5′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@WebPage’)}"/>, el cual representa al mismo en el formulario. Este control posee una serie de propiedades que no debemos modificar puesto que son utilizadas para mostrar el valor del campo o guardar el valor introducido por el usuario en la lista. Debemos tener en cuenta que el Sharepoint Designer enlaza el campo de la lista con el control por intermedio de la propiedad __designer:bind y la propiedad ControlMode establece el modo del control a la hora de dibujarse, en el ejemplo la misma se estable a "New", quiere decir que se está ingresando un valor nuevo. Si estuviéramos creando un formulario para editar un elemento el valor de esta propiedad sería "Edit" y si el formulario es para desplegar los datos el valor de la propiedad es "Display" y el id del control en conformado por un texto y una variable XSLT.
Una vez que realizamos las modificaciones, vamos a proceder a colocarle la Master Page utilizada por el sitio, así nuestro formulario queda con el mismo estilo que todo el sitio. La Master Page que le vamos a asociar es la por defecto, pero podemos asociar cualquier Master Page que tengamos creada, para llevar a cabo esta tarea debemos ir al menú y seleccionamos Formato->Página Principal->Adjuntar Página Principal (Si esta opción aparece deshabilitada, es debido a que tenemos que guardar los cambios realizados en el formulario) al seleccionar esta opción se nos despliega una nueva ventana que nos permite seleccionar la Página Maestra, nosotros vamos a dejar la opción por defecto (la primera de las tres opciones) y presionamos Aceptar. Nuestro formulario debería quedar como lo muestra la imagen (Ver Imagen 5)

 

Imagen 5
Formulario_Designer_Personalizado

Una vez terminado el formulario, lo próximo que tenemos que hacer es asociarlo a la lista, para que cuando presionemos el botón nuevo en Sharepoint nos muestre el formulario creado, para realizar esta tarea en la sección izquierda (Lista de Carpetas) seleccionamos la lista y vamos a las propiedades de la mismas, para ellos presionamos el boton derecho del ratón. Se nos despliega una nueva ventana la cual tiene 4 solapas para manejar las distintas propiedades, seleccionamos la ultima solapa (Archivos Auxiliares), seleccionamos "Elemento" para el tipo de contenido y en la sección "Formulario de nuevo Elemento" apretamos el botón examinar y navegamos hasta el formulario que acabamos de crear, lo seleccionamos y presionamos Aceptar en la nueva ventana que se nos acabo de abrir. Una vez seleccionado el formulario en el cuadro de texto, nos quedo cargada la ruta al archivo y volvemos a presionar el botón aceptar para cerrar la ventana de propiedades de la lista.
Si vamos a la lista en Sharepoint y presionamos el botón Nuevo, el formulario que nos debería mostrar es el que acabamos de crear como se puede ver en la imagen (Ver Imagen 6).

Imagen 6
Formulario_Sharepoint_Personalizado

En este artículo acabamos de crear un formulario personalizado en Sharepoint utilizando el Sharepoint Designer y lo asociamos a una lista. En el próximo y última parte vamos a colocar validaciones utilizando JavaScript para controlar los datos obligatorios y el tipo de dato que ingresa el usuario del lado del cliente, puesto Sharepoint nos provee una cantidad de controles de validación, como los controles de validación de ASP.Net pero la misma se realizada en el servidor.

Validación de campos en un formulario personalizado de Shrepoint 2007 con JavaScript – Part I

Parte I – Introducción a los formularios de lista en Sharepoint 2007

Al crear una lista en un sitio de Sharepoint la misma se crea con formularios que nos permiten manipular todos los campos de la lista desde el sitio de Sharepoint. Estos formularios creados por defectos están basados en las WebParts ListViewWebPart y ListFormWebPart las cuales son utilizados para desplegar todos los elementos y para desplegar un elemento particular. En la siguiente tabla se muestran los formularios por defecto creados y la utilizada de cada uno de ellos:

Formularios por defectos:

Formulario WebPart Descripcion
AllItems.aspx ListViewWebPart Formulario utilizado para mostrar todos los elementos de una lista de Sharepoint. Se utiliza la WebPart ListViewWebPart la cual muestro todos los elementos en un formato de tabla.
DispForm.aspx ListFormWebPart Este formulario se utiliza para mostrar un elemento de la lista en formato de solo lectura, el cual nos permite ver los valores cargados en los distintos campos de la lista. Utiliza la WebPart ListFormWebPart la cual muestra todos los campos que conforman la lista en forma de un formulario.
EditForm.aspx ListFormWebPart Este formulario se utiliza para editar un elemento de la lista, el cual despliega todos los campos de la lista cargados en cajas de texto que nos permiten modificar los valores. Utiliza la WebPart ListFormWebPart para realizar esta tarea.
NewForm.aspx ListFormWebPart Este formulario se utiliza para crear un nuevo elemento en la lista, el cual despliega todos los campos de la lista y cajas de texto vacías para cargar información en los mismos. Utiliza la WebPart ListFormWebPart para realizar esta tarea.

 

Como comentamos, estos formulario son creados por Sharepoint cuando creamos una nueva lista en un sitio Web, para brindarnos la posibilidad de manipular la información que vamos a ir almacenando en la misma. Los forma de mostrar los campos en cada formulario dependerá de la configuración que tengamos realizada en la lista y el Tipo de contenido asociado y que campos queremos mostrar o no, pero el formato del mismo no cambia. El formulario AllItems.aspx muestra la vista creada por Sharepoint para esta lista y los campos que se muestran dependerá de la configuración de esta vista.
Si tenemos habilitado el manejo de contenidos en nuestra lista, el cual se habilita en la propiedades avanzadas (Ver Imagen 1), podemos manejar el orden en que se desplegaran los campos en los formularios, DispForm.aspx, EditForm.aspx y NewForm.aspx, para ello cuando habilitamos el manejo de contenido en la pantalla principal de de la configuración de la lista nos aparece una nueva sección llamada "Tipos de contenido" y ahí se listan todos los tipos de contenidos que están asociados en nuestra lisa (una lista puede tener asociados varios tipos de contenido, en un próximo articulo hablaremos de la utilidad de los mismos y la forma de crear tipos de contenidos personalidades), al seleccionar el tipo de contenido vamos a la pantalla de configuración del tipo seleccionado (Ver Imagen 2).
En la pantalla de configuración podremos establecer el orden de aparición de los campos en los formularios como se muestra en la imagen (Ver Imagen 3), para lo cual debemos acceder a través del link que se encuentra al final de este formulario y se llama "Orden de Columnas" y ahí simplemente debemos seleccionar en que posición deberán aparecer nuestros campos en a los formularios.
También contamos con la posibilidad de ocultar algunos campos en los formularios si no queremos que los mismos sean mostrados a nuestros usuarios a la hora de trabajar con los mismos, para realizar esta tarea en la pantalla de configuración del tipo de contenido debemos ir campo por campo y configurar el comportamiento de los mismos. Contamos con tres opciones:
  • Requerida: Esta columna debe contener información y el elemento que estamos manejando no se guardara en la lista hasta que el mismo no se complete.
  • Opcional: Esta columna puede no contener información.
  • Oculta: Este campo no se mostrara en los formularios por defecto creados por la lista (DispForm.aspx, EditForm.aspx y NewForm.aspx), en al formulario AllItems.aspx, dependerá de la configuración de la vista que tengamos.

 

Imagen 1
Tipo_Contenido

 

Imagen 2
Tipo_Contenido_Conf

 

Imagen 3
Tipo_Contenido_Orden_Columnas

 

En este artículo nos introducimos al manejo de los formularios que nos provee Sharepoint 2007 por defecto y los cuales podemos modificar algunas de las configuraciones. En la parte II estaremos hablando de cómo podemos crear formularios personalizados por nosotros y agregarlos a la lista sustituyendo los formularios por defecto de Sharepoint 2007.
Para llevar a cabo esta tarea estaremos utilizando el Sharepoint Designer, así que les recomiendo que se lo vayan instalando y familiarizándose con él.