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

En el último post veíamos como de una forma sencilla podíamos construir vistas avanzadas de datos de una cierta BD a partir de la Data Form Web Part y utilizando SharePoint Designer 2007 (SD 2007) como herramienta y entorno de desarrollo. La página de vista de datos tenía el siguiente aspecto:

image

Ahora bien, os comentaba que está página tenía un funcionamiento pobre, puesto que las web parts que visualizan la información de la BD son independientes y sin ningún tipo de relación entre ellas. La idea de este segundo post es ver como podemos conectar de manera lógica estas web parts y como además con SD 2007 podemos añadir un formulario de inserción de datos en la BD. Empecemos.

Conectando las Web Parts con SD 2007

Lo primero que vamos a ver es como podemos conectar de manera lógica las web parts que aparecen en la página Productos. Para ello, seleccionamos una de las web parts de nuestra página y seguimos los siguientes pasos:

  • Accedemos al menú Common Data View Tasks que ofrece la Web Part Productos, para a continuación seleccionar la opción Web Part Connections que nos permite conectar esta Web Part con alguna de las otras Web Parts disponibles en la página.
  • Tras pulsar la opción Web Part Connections, se inicia un asistente en el que seguiremos los siguientes pasos:
    • Especificar la acción a realizar para la conexión. Dejamos la que vienen por defecto: Send a Row of Data To. Pulsamos Next.
    • En la siguiente pantalla dejamos la opción que viene marcada por defecto: Connect to a Web Part on this page . Pulsamos Next.
    • En la siguiente pantalla especificamos los parámetros siguientes:
      • Target Web Part: Categoría Producto.
      • Targe action: Get Filter Values From.

      Pulsamos Next.

    • En la siguiente pantalla tenemos que especificar qué campos de la Web Parts productos utilizamos como parámetros para filtrar en la Web Part Categoría Producto. En este caso el campo de filtrado tanto en la Web Part origen como en destino es ID_CategoriaProducto. Pulsamos Next.
    • En la siguiente pantalla especificamos que campo de la Web Part origen utilizamos como enlace con la Web Part destino. Especificamos:
      • Create a hyperlink on: sNombreProducto.
      • Indicate current selection using: marcamos el check.

      En la pantalla que se abre al marcar el check, especificamos que el campo de enlace es sNombreProducto. Pulsamos el botón Next.

image image image
    • En la siguiente pantalla simplemente pulsamos el botón Finish.
    • Repetimos el proceso para conectar el resto de Web Parts de nuestra página:
      • Por ejemplo, conectar Web Part Producto con la Web Part Subcategoría Producto. En este caso, al utilizar la opción Web Part Connections que ofrece el menú Common Data View Tasks de la Web Categoría Producto, se abrirá la siguiente pantalla en la que tendremos que pulsar el botón Add:

image

    • En este caso, los campos utilizados para la conexión en origen y destino son:
      • ID_CategoriaProducto.
      • ID_SubcategoriaProducto.

image

Como campo de enlace utilizamos de nuevo sNombreProducto.

    • Finalmente, repetimos el mismo procedimiento para conectar la Web Part Productos con la Web Part Descripción de Producto. En este caso, los campos utilizados para la conexión en origen y destino son:
      • ID_DescripcionProducto.
      • Como campo de enlace utilizamos de nuevo sNombreProducto.

Sin más, previsualizamos de nuevo la página y comprobamos que la conexión entre las Web Parts funciona correctamente: File -> Preview in Browser -> Windows Internet Explorer 7.0.

image

Creación del formulario de inserción de datos

Para finalizar el post vamos a ver como se podría construir un formulario de inserción de datos a partir de las conexiones de datos ya creadas. En particular, vamos a ver cómo podríamos insertar un nuevo producto en la BD. Los pasos necesarios son los siguientes:

  • Seleccionamos la zona de inserción de Web Parts en Header dentro de la vista de diseño de la página Productos.
  • Desde Data Source Library seleccionamos la conexión Productos y luego Show Data.
  • En la pestaña Data Detail seleccionamos todos los campos del nuevo dataset Productos (1) y luego en la opción Insert Selected Fields as.. específcamos New Form.

image

El resultado que obtenemos es el siguiente:

image

Sin más, previsualizamos de nuevo la página y en el formulario de entrada de datos especificamos:

  • ID_Producto: CURS12
  • sNombreProducto: Curso de WCF
  • ID_DescripcionProducto: DESC08
  • ID_CategoriaProducto: Desarrollo
  • ID_SubcategoriaProducto: Herramientas
  • iCantidadProducto:2

Al pulsar el botón Save, veremos que el nuevo producto se ha añadido de manera efectiva a la BD.

image

Y hasta aquí llega este segundo post sobre creación de vistas avanzadas y formularios de insercción con SD 2007. 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.

Un comentario en “WSS 3.0 & MOSS: Construyendo vistas avanzadas con SharePoint Designer 2007 (II)!”

Deja un comentario

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