Personalización de la barra de herramientas y configuración de exportación en FastReport.Web para Core

Nuestros usuarios a menudo necesitan cambiar la apariencia de la barra de herramientas o personalizar el menú de exportación, pero no todos saben cómo hacerlo. Supongamos que ya tenemos un proyecto terminado. Como ejemplo, podemos usar cualquier informe de la aplicación de demostración FastReport .NET.

Agreguemos algunos colores a nuestra barra de herramientas. Necesitamos escribir un código que se encargará de la personalización:

ToolbarSettings toolbar = new ToolbarSettings()
{
 Color = Color.Red,
 DropDownMenuColor = Color.IndianRed,
 IconColor = IconColors.Left,
 Position = Positions.Left,
 IconTransparency = IconTransparencyEnum.Low,
};
webReport.Toolbar = toolbar;

Ahora ejecutemos nuestra aplicación y veamos el resultado:

Echemos un vistazo a cómo funciona la personalización de la barra de herramientas en FastReport Web for Core con más detalle.

Todos los parámetros de personalización se almacenan como una colección de propiedades. Hay varias opciones de cómo puede implementar cambios en la apariencia de la barra de herramientas, pero todas se reducen a agregar o cambiar parámetros.

Consideremos la personalización de la apariencia desde el código, donde puede ver una lista de colecciones y propiedades. Estos son algunos de ellos:

• Color: cambia el color de fondo de la barra de herramientas.
• DropDownMenuColor: establece el color de fondo del menú desplegable.
• DropDownMenuTextColor: establece el color del texto del menú desplegable.
• Posición: cambia la posición de la barra de herramientas en el informe.
• Redondez: agrega redondez a la barra de herramientas.
• ContentPosition: cambia la posición del contenido.
• IconColor: cambia los colores de los iconos.
• IconTransparency: ajusta la transparencia de los iconos.
• FontSettings: ajusta fino de los estilos de texto.

Supongamos que queremos cambiar el color del menú desplegable y mostrar todo tipo de opciones de exportación en él.

Para cambiar la apariencia del menú desplegable, solo necesita escribir algunos cambios en la barra de herramientas. Pero para mostrar todas las opciones de exportación de datos, debe agregar el siguiente código:

ToolbarSettings toolbar = new ToolbarSettings()
 {
 Color = Color.Red,
 DropDownMenuColor = Color.Red,
 DropDownMenuTextColor = Color.White,
 IconColor = IconColors.White,
 Position = Positions.Right,
 FontSettings = new Font("Arial", 14, FontStyle.Bold),
 Exports = new ExportMenuSettings()
 {
 ExportTypes = Exports.All
 }
 };
 model.WebReport.Toolbar = toolbar;

Si ejecutamos nuestro proyecto, veremos que el menú desplegable ha cambiado y las opciones de exportación de datos han aumentado significativamente:

Ahora vemos un menú personalizado con formatos de exportación.

Pero, ¿y si solo necesitamos ciertos formatos? Por ejemplo, solo necesitamos PDF, XPS y CSV. ¡Vamos a implementarlo!

Necesitamos cambiar ligeramente la configuración de exportación en el contenedor:

Exports = new ExportMenuSettings()
{
 ExportTypes = Exports.Pdf | Exports.Xps | Exports.Csv
}

Ejecutemos nuestra aplicación y veamos el resultado:

Si solo se muestran estas opciones de exportación, entonces hizo todo bien.

Entonces, hemos descrito cómo personalizar la barra de herramientas y editar el menú desplegable con opciones de exportación en FastReport Web for Core. Además de estos ejemplos, puede usar estos parámetros en combinación con los demás.

Personalización de la apariencia de los objetos en Blazor

También debemos mencionar Blazor, que incluye todo lo que hace una versión normal, pero con una funcionalidad más avanzada.

Usaremos el proyecto del siguiente artículo: Informes y documentos PDF en Blazor.

Personalicemos la apariencia de la barra de herramientas.

Vaya al archivo Pages/Index.razor.cs. Aquí personalizaremos la barra de herramientas y agregaremos una parte del código que se encarga de la personalización en Blazor:

 var toolbar = new ToolbarSettings
{
 FontSettings = new Font("Verdana,Arial sans-serif", 15),
 Color = Color.Red,
 DropDownMenuColor = Color.Red,
 DropDownMenuTextColor = Color.White,
 IconColor = IconColors.White,
 Position = Positions.Bottom,
 ContentPosition = ContentPositions.Center,
}; 

Ejecutemos nuestra aplicación y veamos el resultado:

Imagiee que, además de la personalización simple, necesitamos agregar la exportación a PS, HPGL, JSON y PDF.

Agreguemos el siguiente código para implementar esto:

Exports = new ExportMenuSettings()
{
 ExportTypes = Exports.PS | Exports.Hpgl | Exports.Json | Exports.Pdf 
}

Como resultado, obtendremos la configuración de exportación que necesitamos.

Por el momento, los archivos Index.razor e Index.razor.cs se ven así:

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

@page "/"
@page "/{ReportName}"
@inject NavigationManager NavManager
 
<WebReportContainer WebReport="@UserWebReport" >
 
@code {
 [Parameter]
 public string ReportName { get; set; }
 
 protected override void OnParametersSet()
 {
 base.OnParametersSet();
 
 Load();
 }
}

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
49
50
51
52
53
54
55
56
57
58
59
60
61

using System;
using System.Drawing;
using System.IO;
using FastReport;
using FastReport.Web;
using System.Data;
 
namespace Blazor.UserDebugApp.Pages
{
 public partial class Index
 {
 private readonly string directory;
 
 private const string DEFAULT_REPORT = "Simple List.frx";
 
 public WebReport UserWebReport { get; set; }
 
 Report Report { get; set; }
 DataSet DataSet { get; }
 ToolbarSettings Toolbar { get; }
 
 public Index()
 {
 directory = Path.Combine(
 Directory.GetCurrentDirectory(),
 Path.Combine("..", "Demos", "Reports"));
 
 DataSet = new DataSet();
 DataSet.ReadXml(Path.Combine(directory, "nwind.xml"));
 
 Toolbar = new ToolbarSettings
 {
 FontSettings = new Font("Verdana,Arial sans-serif", 15),
 Color = Color.Red,
 DropDownMenuColor = Color.Red,
 DropDownMenuTextColor = Color.White,
 IconColor = IconColors.White,
 Position = Positions.Bottom,
 ContentPosition = ContentPositions.Center,
 Exports = new ExportMenuSettings()
 {
 ExportTypes=Exports.PS|Exports.Hpgl|Exports.Json|Exports.Pdf
 }
 };
 }
 
 private void Load()
 {
 Report = Report.FromFile(
 Path.Combine(
 directory,
 string.IsNullOrEmpty(ReportName) ? DEFAULT_REPORT : ReportName));
 
 Report.RegisterData(DataSet, "NorthWind");
 
 UserWebReport = new WebReport();
 UserWebReport.Report = Report; 
 UserWebReport.Toolbar = Toolbar;
 }
 }
}

Ya sabemos cómo personalizar la apariencia de los objetos y configurar la lista de opciones de exportación en Blazor. Ahora puede usar las opciones propuestas en sus propias aplicaciones.