Muy a menudo nuestros usuarios necesitan representar dos informes con datos diferentes en una página. Imaginamos la situación, donde usted necesita comparar los informes del primer mes y del último mes. Para solucionar vuestro problema tenemos una aplicación de apoyo Blazor WebReport.
Vamos a considerar en más detalle cómo realizarlo en vuestra aplicación de Blazor. Utilizamos una aplicación de demostración del artículo “Los informes y los documentos de PDF en la aplicación de Blazor” como base y eliminamos todo lo innecesario.
Al principio, intentamos simplemente representar dos informes en una página. Vamos al archivo “Pages\Index.razor.cs”.
Luego añadimos el segundo informe. No olvidamos primeramente anunciarlo y registrar los datos para él, y luego escribir la parte siguiente del código:
Report Report2 { get; set; } Report2 = Report.FromFile(reportPath); Report2.RegisterData(DataSet, "NorthWind");
Bien, ahora representamos nuestro informe. Pasamos al archivo “Pages\Index.razor.cs” y escribimos el código necesario:
UserWebReport2 = new WebReport { Report = Report2, Toolbar = toolbar2 };
Ahora nuestro archivo será el siguiente:
public partial class Index { readonly string directory; const string DEFAULT_REPORT = "Filter Employees.frx"; public Report Report1 { get; set; } public Report Report2 { get; set; } public WebReport UserWebReport { get; set; } public WebReport UserWebReport2 { get; set; } DataSet DataSet { get; } protected override void OnParametersSet() { base.OnParametersSet(); string path = Path.Combine( directory, string.IsNullOrEmpty(ReportName) ? DEFAULT_REPORT : ReportName); Report1 = Report.FromFile(path); Report2 = Report.FromFile(path); // Registers the application dataset Report1.RegisterData(DataSet, "NorthWind"); Report2.RegisterData(DataSet, "NorthWind"); ToolbarSettings toolbarSettings1 = new ToolbarSettings() { Color = Color.Red, IconColor = IconColors.White, Position = Positions.Left, }; ToolbarSettings toolbarSettings2 = new ToolbarSettings() { Color = Color.Black, IconColor = IconColors.White, Position = Positions.Right, }; UserWebReport = new WebReport { Report = Report1, Toolbar = toolbarSettings1, }; UserWebReport2 = new WebReport { Report = Report2, Toolbar = toolbarSettings2, }; } public Index() { directory = Path.Combine( Directory.GetCurrentDirectory(), Path.Combine("..", "..", "Reports")); DataSet = new DataSet(); DataSet.ReadXml(Path.Combine(directory, "nwind.xml")); } }
Muy bien, ahora vamos al archivo “Pages/Index.razor” y escribimos la componente siguiente:
<WebReportContainer WebReport="@UserWebReport2"/>
Puede ver el resultado por ejecutar nuestra aplicación Blazor y abrir cualquier informe. A título ilustrativo hemos seleccionado un informe con gráficos y diagramas.
Y si:
- Queremos ver los datos diferentes en estos informes;
- Queremos ver los informes diferentes en cada página;
- Queremos ver un informe que contenga los empleados y sus salarios para cada mes;
- Queremos ver un informe con los datos de Septiembre, y el secundo con los datos de Octubre;
- Queremos abrir rápidamente otro informe sin cerrar el primero.
Hay una respuesta a todas estas situaciones. ¡Es posible realizarlo!
Utilizamos FastReport .NET, en la que abrimos el administrador de diseño y cambiamos nuestro Simple List.frx estándar. Conectamos una nueva fuente de datos, en nuestro caso esto es XML:
Luego editamos un poco el informe, eliminamos todo lo innecesario y conservamos solo los campos que necesitamos. En la captura de pantalla siguiente todos los cambios en el informe se muestran bien.
Ahora se requiere crear una condición para filtrar los datos. Pulsamos dos veces en la columna “Datos” a la izquierda. Luego en la pestaña “Filtro” escribimos una condición como en la captura de pantalla debajo.
En este momento puede guardar el informe y abrir nuestra aplicación de demostración. Vamos a escribir una parte del código en el archivo “Pages/Index.razor”:
public EventCallback Filter1() { UserWebReport.Report.Load(Path.Combine(directory,firstReport)); UserWebReport.Report.SetParameterValue("Month", Select1); return default; } public EventCallback Filter2() { UserWebReport2.Report.Load(Path.Combine(directory,secondReport)); UserWebReport2.Report.SetParameterValue("Month", Select2); return default; } public EventCallback ChangeReport1(){ UserWebReport.Report.Load(Path.Combine(directory,firstReport)); return default; } public EventCallback ChangeReport2(){ UserWebReport2.Report.Load(Path.Combine( directory, secondReport)); return default; }
Ahora vamos a añadir a una pagina con el informe cuatro listas desplegables para filtrar los datos y pasar entre los informes:
<div style="display:flex;flex-direction:column;"> <div style="display:flex;flex-direction:row;"> <div style="display:flex;flex-direction:column;"> <select style= "margin-left:370px;" @onclick=ChangeReport1() @bind="@firstReport"> <option>Simple List.frx</option> <option>Chart.frx</option> <option>Filter Employees.frx</option> </select> @if (@firstReport == "Filter Employees.frx") { <select style= "margin-left:400px;" @onclick=Filter1() @bind="@Select1"> <option>September</option> <option>October</option> <option>November</option> </select> } </div> <div style="display:flex;flex-direction:column;"> <select style= "margin-left:614px;" @onclick=ChangeReport2() @bind="@secondReport"> <option>Simple List.frx</option> <option>Chart.frx</option> <option>Filter Employees.frx</option> </select> @if (@secondReport == "Filter Employees.frx") { <select style= "margin-left:681px;" @onclick=Filter2() @bind="@Select2"> <option>September</option> <option>October</option> <option>November</option> </select> } </div> </div>
El archivo Pages/Index.razor será el siguiente después de todas las modificaciones:
@page "/" @using System.IO; @using System.Data; <div style="display:flex;flex-direction:column;"> <div style="display:flex;flex-direction:row;"> <div style="display:flex;flex-direction:column;"> <select style= "margin-left:370px;" @onclick=ChangeReport1() @bind="@firstReport"> <option>Simple List.frx</option> <option>Chart.frx</option> <option>Filter Employees.frx</option> </select> @if (@firstReport == "Filter Employees.frx") { <select style= "margin-left:400px;" @onclick=Filter1() @bind="@Select1"> <option>September</option> <option>October</option> <option>November</option> </select> } </div> <div style="display:flex;flex-direction:column;"> <select style= "margin-left:614px;" @onclick=ChangeReport2() @bind="@secondReport"> <option>Simple List.frx</option> <option>Chart.frx</option> <option>Filter Employees.frx</option> </select> @if (@secondReport == "Filter Employees.frx") { <select style= "margin-left:681px;" @onclick=Filter2() @bind="@Select2"> <option>September</option> <option>October</option> <option>November</option> </select> } </div> </div> <div style="display:flex;flex-direction:row;"> <WebReportContainer WebReport="@UserWebReport"/> <WebReportContainer WebReport="@UserWebReport2"/> </div> </div>
@code { private string dir = Path.Combine( Directory.GetCurrentDirectory(), Path.Combine("..","..", "Demos", "Reports")); [Parameter] public string ReportName { get; set; } [Parameter] public string Select1 { get; set; } = "September"; [Parameter] public string Select2 { get; set; } = "October"; [Parameter] public string firstReport { get; set; } = "Filter Employees.frx"; [Parameter] public string secondReport { get; set; } = "Filter Employees.frx"; public EventCallback Filter1() { UserWebReport.Report.Load(Path.Combine(directory,firstReport)); UserWebReport.Report.SetParameterValue("Month", Select1); return default; } public EventCallback Filter2() { UserWebReport2.Report.Load(Path.Combine(directory,secondReport)); UserWebReport2.Report.SetParameterValue("Month", Select2); return default; } public EventCallback ChangeReport1(){ UserWebReport.Report.Load(Path.Combine(directory,firstReport)); return default; } public EventCallback ChangeReport2(){ UserWebReport2.Report.Load(Path.Combine( directory, secondReport)); return default; } }
Quiere variar un poco un informe. Vamos al archivo “Pages/Index.razor.cs” para pintar nuestras barras de herramientas al trabajo simultáneo con ellas. Añadimos el código siguiente:
En este momento puede ejecutar la aplicación de demostración y ver el resultado:
Se ve bien, pero puede mejorar un poco más. El paso siguiente es de añadir la filtración al segundo informe mediante las listas desplegables arriba:
Bien, ahora cambiamos el informe en el segundo componente:
En consecuencia, puede representar dos informes en una página, así como realizar las manipulaciones diferentes con ellos. Por ejemplo, intente de filtrar los datos o ver los varios informes al el mismo tiempo como se muestra arriba. En nuestra aplicación WebReport para su comodidad es posible personalizar la barra de herramientas para cada informe para sus necesidades.
Cabe notar que dos informes no es una limitación, que los puede tener diez en una página! Si, será posible realizar todas las acciones a cada informe.
Puede encontrar la demostración del proyecto de este artículo al directorio siguiente: FastReport.Net Trial\Demos\Core\FastReport.Blazor.DoubleReports
