Construyendo Reportes Para Aplicaciones Web: Parte 1

Muchas veces nos encontramos realizando sistemas de información que se dedican a capturar datos pero que también necesitan una manera de procesarlos y mostrarlos. Para esta tarea entran en juego los famosos Reportes que no son más que objetos que entregan información en un formato particular y que permiten realizar ciertas operaciones como imprimirlos, enviarlos por email, guardarlos a un archivo, etc.

Es importante mencionar que los datos almacenados son útiles en la misma medida que se puedan convertir en información para las personas que los necesitan. También es importante subrayar que la plataforma tecnológica que utilicemos debe poder tener facilidades para convertir los datos en información y poder entregarlos a los usuarios de forma que sean útiles.

Pues bien, el caso es que el .net Framework no es la excepción. Al instalar cualquiera de los productos, desde las versiones express hasta la versión TeamSuite podemos realizar reportes y presentarlos a los usuarios para que puedan utilizar la preciada información.

Primero debemos entender que estamos haciendo y porqué. El caso es el siguiente, por lo regular, un reporte será impreso en hojas de papel con un tamaño específico, esto nos lleva al primer desafío, tenemos que poder entregar información que quepa dentro de estas hojas de papel y que pueda ser impreso sin problemas a una impresora local o remota. El segundo desafío es poder realizar esta operación desde una aplicación web; pero ¿Cuál es el problema aquí? Pues muy sencillo, lo que sucede es que una página web es un objeto que tiene un despliegue único, es decir, todos los datos se muestran en una “tira” continua de información lo que hace difícil sino imposible hacer que la impresión sea consistente y predecible. El tercer desafío es poder hacer que la solución sea utilizable para “cualquier navegador” lo que en si es todo un reto.

Entonces, la solución que encontramos en el .net Framework es la del objeto Microsoft.ReportViewer.WebForms. Este objeto nos permite realizar todas las operaciones descritas con anterioridad y permite también superar los desafíos planteados.

En primer lugar, debemos decir que un reporte en una aplicación web se compone de 4 partes principales: 1) Un documento reporte. 2) Un objeto ReportViewer. 3) Una fuente de datos. 4) Una página que permita mostrar al ReportViewer.

Entonces, manos a la obra. Hagamos un reporte que: pueda controlar los saltos de página por medio de una configuración de tamaño de papel, tenga una forma de imprimir correctamente la información y sea “crossbrowser” (pueda ser visto en cualquier navegador).

Inicialmente debemos crear una aplicación web (o website si lo prefieren) y para ello vamos a Visual Studio 2008 y seleccionamos el tipo de proyecto que nos interesa:

Proyectoweb

Esto creará una estructura similar a la siguiente:

EstructuraProyecto

Al abrir la página Default.aspx ubicaremos un objeto Microsoft.ReportViewer.WebForm en ella y quedará de la siguiente forma:

ReportViewer

Ahora ya tenemos dos de las cuatro cosas necesarias para el reporte, vamos por la tercera. Es necesario crear un documento de reporte que contenga la definición de los datos que quiero mostrar.

El ejemplo que voy a demostrar utilizará la base de datos Northwind y los datos almacenados en las tablas dbo.Orders y dbo.Order Details. En esta primera parte solamente veremos la tabla dbo.Orders y dejaremos la otra tabla para las siguientes partes de este artículo.

Entonces es necesario agregar un documento reporte a nuestra solución de la siguiente forma. El nombre del documento será Ordenes.rdlc :

Report

Esto nos presentará la siguiente ventana en Visual Studio:

ReportWindow

Ahora es necesario decirle al reporte que datos quiero que muestre, para ello agregamos un Data Source hacia SQL Server por medio de Server Explorer y seleccionamos la base de datos Northwind, lo que debería mostrar la siguiente información:

ServerExplorer

Luego al crear el nuevo Data Source tenemos que se creó en realidad un objeto DataSet, el cual tendrá la definición de nuestros objetos de datos. Entonces solamente arrastramos del Server Explorer las tablas que nos interesan hacia el objeto DataSet. En este caso es dbo.Orders. Una vez grabado el DataSet, en la ventana de Website Data Sources se mostrará la tabla y los campos disponibles.

DataSet1

Ahora agregamos un objeto List a nuestro reporte para que contenga los datos de la tabla:

List

Y por último arrastramos los campos que queremos de nuestra tabla hacia el objeto list. Para nuestro ejemplo y con fines ilustrativos solamente arrastraremos 4 campos: OrderID, OrderDate, ShipName, ShipCity. Tambi&
#233;n agregaremos unas etiquetas para saber de qué datos estamos hablando. Cabe mencionar que el documento report no tiene Labels como los conocemos para esta tarea así que tendremos que utilizar TextBoxes para poder poner títulos a los campos:

Fields

Bien, grabamos nuestro reporte y nos pasamos a la página Default.aspx que es donde tenemos nuestro objeto ReportViewer y ahora le decimos que utilice el reporte que recién acabamos de crear:

ChooseReport

El seleccionar el reporte debe haber creado también en la página un objeto ObjectDataSource que será el encargado de la tubería de información entre la fuente de datos (DataSet1) y el ReportViewer; y con esto tenemos ya las 4 cosas necesarias para correr el reporte. Ahora podemos ejecutar nuestra aplicación y ver cómo funciona el reporte:

WorkingReport

Aquí podemos ver claramente en la página que el reporte funciona correctamente, tiene 76 páginas y se muestra con un zoom de 100%.

Espero que este artículo les sirva, seguramente se encontrarán con alguna necesidad para utilizar estos objetos y ojalá les ayude a lograr su cometido.

Espero vean los siguientes artículos relacionados:

  • Parte 2: Reportes por código y paso de parámetros
  • Parte 3: Subreportes

Hasta la próxima.

One Response to “Construyendo Reportes Para Aplicaciones Web: Parte 1”

  • Vanessa says:

    Hice cada paso, y no me sale lo último, Seleccionar el reporte =(
    porfa ayuda!
    Lo selecciono y se ve vacío, no pasa nada, de hecho aparece
    el objeto “ObjectDataSource” pero lo demás está vacío.


Leave a Reply

Your email address will not be published. Required fields are marked *