Mes: septiembre 2007

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.

• 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).

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)

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).

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.

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

• 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.

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.