WSS 3.0 & MOSS: Construyendo vistas avanzadas con SharePoint Designer 2007 (I)!

Hacía tiempo que quería escribir sobre las capacidades que nos da SharePoint Designer 2007 (SD 2007) para crear rápidamente vistas avanzadas y formularios en una solución SharePoint. La clave de este desarrollo rápido y sin código está en la versatilidad y juego que nos da la Data Form Web Part. Esta Web Part tan especial permite consumir datos de orígenes de datos diversos como: listas y bibliotecas de SharePoint, feeds RSS, datos de una base de datos, servicios web o bien combinaciones de todas estas posibilidades. En este post vamos a ver como consumir datos de una cierta BD SQL Server. Empecemos.

Creación de la sección de visualización

Lo primero que vamos a hacer es crear la sección de visualización de los datos de la BD. Este sección va a ser una página de Web Parts de SharePoint. Para crearla:

  • Para crear la página de Web Parts en un cierto sitio de SharePoint, desde la página principal nos vamos a Site Actions -> Create.
  • Dentro de la sección Web Pages seleccionamos Web Part Pages.
  • Especificamos los siguientes parámetros de configuración para la página:
    • Name: Productos.
    • Layout Template: Header, Footer, 3 Columns.
    • Document Library: Shared Documents.
image image image

Tras comprobar que la página de Web Parts se ha creado, vamos a SD 2007 y abrimos el sitio de SharePoint dónde reside está página. A continuación, a través del Folder List de SD 2007 buscamos la página que acabamos de crear y hacemos doble clic sobre ella para tener disponible la vista de diseño de la página. De este modo, ya estamos listos para empezar a consumir los datos de una cierta BD (bastante sencilla como podéis  ver) utilizando la Data Form Web Part.

image image

Creando las vistas de datos

Para crear las vistas de datos, lo primero es acceder al panel Data Source Library. Para ello, en el menú de SD 2007 nos vamos a Task Panes -> Data Source Library. Una vez que se ha desplegado el panel, los pasos a seguir para crear las vistas de datos son:

  • Nos vamos a la sección Database Connectios y pulsamos la opción Connect to a Database. En la venta que se abre, realizamos las siguientes configuraciones:
    • Pestaña General especificamos Productos en la sección Name.
    • En la pestaña Source pulsamos el botón Configure Database Connection.
image image image
    • En la nueva ventana que se abre especificamos los siguientes parámetros:
      • Server Name: NOMBRE_SERVIDOR
      • User name: USUARIO_BD
      • Password: PASSWORD_USUARIO

Nota: En este caso estamos utilizando unas credenciales de usuario de BD. Si bien, se podría utilizar Single Sign On (SSO) o definir de manera personalizada la cadena de conexión.

    • Pulsamos Next y en las siguientes pantallas del asistente:
      • En la siguiente ventana del asistente, seleccionamos BD_Clientes en el combo de BD’s , dejamos marcada la opción Select a table or view y seleccionamos la tabla MD_Productos. Pulsamos Finish.
      • En la siguiente ventana pulsamos el botón Ok.

Si os dais cuenta, al definir la vista de este modo estamos haciendo un select * de los datos de la tabla. Por supuesto, podríamos especificar que campos filtrar, los filtros a definir y la ordenación de los datos. Además, podríamos haber optado por especificar directamente una sentencia Select para definir la vista, e incluso las sentencias Update, Insert y Delete en el caso de que queramos ir más allá de definir una vista de datos y queramos definir un formulario de inserción, actualización o borrado.

image image image
  • Una vez que hemos creado la primera conexión, para utilizar los datos de la misma nos vamos a la ventana Data Source Library hacemos clic sobre el menú de Productos y luego seleccionamos la opción Show data. A continuación en la pestaña Data Source Details seleccionamos los campos  de interés (en este caso: ID_Producto, sNombreProducto y iCantidad).
  • Una vez que los campos están seleccionados, en la página Productos seleccionamos el área de inserción de Web Part en la LeftColumn pulsamos Insert Selected Fields as… y seleccionamos la opción Multiple item view.
  • Tras hacer esta operación, ya podremos ver ver la composición y aspecto de la primera vista de datos.
image image image
  • Volvemos a la pestaña Data Source Library y repetimos parte del proceso anterior para añadir el resto de vista de datos que necesitamos.
  • El siguiente paso es utilizar estas conexiones de datos en la página de manera similar a como utilizamos la conexión a Productos. La diferencia es que en este caso vamos a insertar vistas de detalle en lugar de vistas múltiples. Veamos cuál es el procedimiento a seguir para la conexión Categorías Productos:
    • Seleccionamos Categorías Productos y en el menú que ofrece marcamos Show data.
    • En la pestaña Data Source Details nos aseguramos de tener seleccionados todos los campos de la conexión.
    • En la página Productos seleccionamos en este caso el área de inserción de Web Part de la MiddleColumn.
    • Dentro de Data Source Detail y en la sección Inserted Selected Fields as escogemos en este caso Single Item View.
  • Luego en este caso, el resultado obtenido es el de una vista de detalle de información frente al listado del caso anterior.
image image image
  • Repetimos el proceso para las otras dos vistas de datos.

Para visualizar la página en tiempo de ejecución, nos vamos al menú File de SD Designer y luego a Preview in Browser -> Windows Internet Explorer 7.0. El resultado que obtenemos es el que a continuación se muestra:

image 

Aunque el resultado es bueno, esta página es un poco pobre en cuanto a funcionamiento puesto que las Web Parts de la misma son independientes y no tienen ningún tipo de conexión. Pero esto lo dejamos para el siguiente post de la serie, en el qué a ver como conectar de manera lógica las Web Parts que forman parte de la página Productos.  Espero que el post os haya resultado interesante.

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.

4 comentarios en “WSS 3.0 & MOSS: Construyendo vistas avanzadas con SharePoint Designer 2007 (I)!”

  1. Hola esta muy bien tu explicacion,
    en base a eso te quiero hacer una consulta,

    cree una conexion a mi base de datos (sql server)
    y estoy haciendo el select al momento de crealo todo esta bien, en el tes me muestra datos, el detalle se presenta cuando lo quiero asignar a un control GridView no muestra nada y revizando las propiedades del control no muestra ningun campo de la consulta que crees que pueda estar pasando, anexo el codigo de la consulta

    set @var1 = (select count(account) from guest where arrival= convert(char(10),getdate(),101) and property=’Ciudad’)

    select @var1 as Llegadas

    agradezco tus comentarios.

Deja un comentario

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