Cómo utilizar Online Designer con las bibliotecas de FastReport.Core e una aplicación React .Net Core

Muchos usarios de FastReport.Core quieren saber cómo va a funcionar el generador de informes en una aplicación escrita con el uso de las bibliotecas React. Ya lo hemos examinado en el artículo {}. En este artículo vamos a examinar el uso del diseñador en línea. A pesar de que se muestre en el mismo objeto web que un informe regular la diferencia, sie se muestra en React, es considerable. Pero todo a su tiempo.

Si nunca ha creado una aplicación en React con backend en .Net Core, entonces tiene que hacer:

1) instalar NodeJS. Es un conjunto de programas que permite ejecutar un código JavaScript en el lado del servidor, así como instalar diferentes bibliotecas JavaScript;

2) instalar Microsoft Visual Studio 2017 u otro IDE + .Net Core SDK 2.0.

Para crear una aplicación, abra la línea de comandos de Winwos en la carpeta donde estará situado el proyecto y ejecute el siguiente comando:

dotnet new react –o ReactFRCoreDesigner

Abra el proyecto creado. Añada las bibliotecas de FastReport en el administrador de paquetes NuGet. Ajuste la fuente local de paquetes para la carpeta:

C:\Program Files (x86)\FastReports\FastReport.Net\Nugets

Instale el paquete FastReport.Core.

Encuentre en el proyecto el archivo Startup.cs y añada al método la siguiente línea de código:

1

app.UseFastReport();

Ahora podemos utilizar el generador de informes en nuestro proyecto.

Aparte de la visualización del diseñador en línea, también vamos a ver cómo pasar el nombre del informe pertinente y cargarlo en la carpeta del proyecto App_Data. Y en la carpeta añadamos los modelos de los informes de la carpeta Demos\Reports al directorio de instalación FR.Net.

Como puede ver, también hemos añadido un archivo XML de la misma carpeta. Es la base de datos de informes.

Localice la carpeta Controllers. Tenemos desponible el controlador SampleDataController. Añada a este dos métodos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

…
using FastReport.Web;
using System.IO;
…
[HttpGet("[action]")]
 public IActionResult Design(string name)
 {
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 if (name != "Blank")
 WebReport.Report.Load("App_Data/" + name + ".frx"); // Load the report into the WebReport object
 System.Data.DataSet dataSet = new System.Data.DataSet(); // Create a data source
 dataSet.ReadXml("App_Data/nwind.xml"); // Open the database xml
 WebReport.Report.RegisterData(dataSet, "NorthWind"); // Registering the data source in the report
 
 WebReport.Mode = WebReportMode.Designer; // Set the web report object mode - designer display
 WebReport.DesignerLocale = "en";
 WebReport.DesignerPath = @"WebReportDesigner/index.html"; // We set the URL of the online designer
 WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport"; // Set the view URL for the report save method
 WebReport.Debug = true;
 ViewBag.WebReport = WebReport; // pass the report to View
 return View();
 }
 
 [HttpPost("[action]")]
 // call-back for save the designed report
 public IActionResult SaveDesignedReport(string reportID, string reportUUID)
 {
 ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID); // Set the message for representation
 Stream reportForSave = Request.Body; // Write the result of the Post request to the stream.
 string pathToSave = @"App_Data/TestReport.frx"; // get the path to save the file
 using (FileStream file = new FileStream(pathToSave, FileMode.Create)) // Create a file stream
 {
 reportForSave.CopyTo(file); // Save query result to file
 }
 return View();
 }

El primer método crea el objeto de un informe web, establece modelo y fuente de datos para él, modo de corregir informes y ajustes del diseñador en línea. Así pues, el método va a recuperar la vista donde el objeto de un informe web se mostrará. El método tiene un parámetro, el nombre del informe que sustituimos al cargar el modelo de informe al objeto del informe.

El segundo método es un manipulador call back para hacer clic en el botón "guardar informe". Guarde el informe corregido en la carpeta App_Data.

Para estos dos métodos tiene que crear dos vistas. Cree la carpeta Views en la raíz de la carpeta. Ahora vuelva al controlador. Haga clic con el botón derecho en la signatura del método Design y seleccione Add view. De el nombre Design a la vista. Sustituya todo el contenido de la vista creada por el siguiente código:

1

@await ViewBag.WebReport.Render()

Para el método SaveDesignedReport también creamos una vista con el mismo nombre. Su contenido se sustituye por

1

@ViewBag.Message

Ahora pasamos a lo más interesante, a frontend. Las aplicaciones React están en la carpeta ClientApp. Expándala en el árbol en el navegador de solución (solution browser). Ahora abrimos el directorio src y components. Añada un nuevo componento a esta carpeta. Cree un archivo JavaScript y dele el nombre Designer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import React, { PureComponent, Fragment } from 'react';
import { WebReport } from './WebReport';
 
export class Designer extends PureComponent {
 constructor(props) {
 super(props);
 this.state = {
 options: [
 {
 value: 'Select report name …',
 },
 {
 value: 'Matrix',
 },
 {
 value: 'Master-Detail',
 },
 {
 value: 'Text',
 },
 ]
 };
 } 
 
 handleChange = (event) => {
 this.setState({ name: event.target.value }); 
 };
 
 render() {
 const { options, value } = this.state;
 return (
 <div>
 <div>
 <Fragment>
 <select onChange={this.handleChange} value={value}>
 {options.map(item => (
 <option key={item.value} value={item.value}>
 {item.value}
 </option>
 ))}
 </select>
 </Fragment>
 </div>
 <WebReport name={this.state.name} />
 </div>
 );
 }
 }

Probablemente se haya fijado en la importación del componente WebReport, vamos a examinarlo más tarde.

En primer lugar, añada estados en el constructor de clase. En nuestro caso, es un vector con el nombre de los informes. Ahora examinemos render(), un método que construye la página web. La renderización se realiza cada vez que cambia el estado. Por ejemplo, cuando elegimos un elemento de la lista, se activa el manipulador de eventos onChanges. En este método se ejecute un nuevo estado de la variable name con la función setState. Después de eso, se reconstruirá el contenido de render.

Fíjese en la tag <WebReport name = {this.state.name} />.

Aquí se invoca otro componente. Como parámetro recibe el nombre selecionado del informe.

Examinemos el componente WebReport, que, al igual que Designer.js, hay que crear en el directorio components:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import React, { Component } from 'react';
 
export class WebReport extends Component {
 constructor(props) {
 super(props);
 this.state = { designer: "" };
 }
 
 componentWillReceiveProps(nextProps) {
 fetch('api/SampleData/Design?name=' + nextProps.name + '').then(response => response.text()).then(text => {
 this.setState({ designer: text });
 });
 };
 
 render() {
 return (
 <div dangerouslySetInnerHTML={{ __html: this.state.designer }} />
 );
 }
}

Este componente es para ejecutar la consulta get a backend y devolver el resultante código HTML.

La función incorporada componentWillReceiveProps (nextProps) se ejecuta cada vez que cambia la propiedad props . Es decir, cuando este componente recibe un nuevo valor al invocarse. Recibimos el nombre del informe desde la propiedad y lo sustituimos en la URL de la consulta. Luego recibimos la respuesta en formato texto. Hay que convertirla en un código seguro para luego insertarla en el DOM. El atributo dangerouslySetInnerHTML nos ayudará con esto.

Nos queda solo añadir el componente Designer a l menú. Al archivo NavMenu añada lo siguiente:

1
2
3
4
5
6
7
8
9
10

<Navbar.Collapse>
 <Nav>
 …
 <LinkContainer to={'/designer'}>
 <NavItem>
 Designer
 </NavItem>
 </LinkContainer>
 </Nav>
</Navbar.Collapse>

Y al archivo App.js esto:

1
2
3
4
5
6
7
8

…
import { Designer } from './components/Designer';
…
 <Layout>
…
 <Route path='/designer' component={Designer} />
 </Layout>
…

Ya está. Ejecuta la aplicación. En la página Designer vemos una lista desplegable:

Seleccione el nombre del informe Matrix:

Y ahora, Master-Detail:

Pase a la pestaña Report y haga clic en el botón Save:

Aparece el mensaje “saved”, que nos informa de que el informe se ha guardado con éxito en el servidor. Compruébalo:

Otro fichero aparece en la carpeta App_Data, TestReport.frx.

Con esto terminamos nuestra creación de la aplicación demo. Hemos conseguido mostrar el diseñador de informes, cargar el informe pertinente en este y guardarlo..