Dostosowanie paska narzędzi i ustawienia eksportu w FastReport.Web dla Core

Nasi użytkownicy często potrzebują zmienić wygląd paska narzędzi lub dostosować menu eksportu, ale nie każdy wie, jak to zrobić. Załóżmy, że mamy już gotowy projekt. Jako przykład może posłużyć dowolny raport z aplikacji demonstracyjnej FastReport .NET.

Załóżmy, że dodamy kilka kolorów do naszego paska narzędzi. Musimy napisać kod, który będzie odpowiedzialny za dostosowanie go do naszych potrzeb:

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

Teraz uruchommy naszą aplikację i zobaczmy rezultat:

Przyjrzyjmy się dokładniej, jak działa customizacja paska narzędzi w FastReport Web for Core.

Wszystkie parametry dostosowywania są przechowywane jako zbiór właściwości. Istnieje kilka opcji, w jaki sposób można wprowadzić zmiany w wyglądzie paska narzędzi, ale wszystkie one sprowadzają się do dodania lub zmiany poszczególnych cech.

Rozważmy dostosowanie wyglądu z kodu, na którym widać wykaz zbiorów i cech. Oto niektóre z nich:

• Color - zmiana koloru tła paska narzędzi.
• DropDownMenuColor - ustaw kolor tła menu rozwijanego.
• DropDownMenuTextColor - ustawia kolor tekstu rozwijanego menu.
• Position - zmiana pozycji paska narzędzi w raporcie.
• Roundness - dodaj zaokrąglenie do paska narzędzi.
• ContentPosition - zmiana pozycji zawartości.
• IconColor - zmiana kolorów ikon.
• IconTransparency - dostosowanie przezroczystości ikon.
• FontSettings - dostosowanie stylów tekstu.

Załóżmy, że chcemy zmienić kolor rozwijanego menu i wyświetlić w nim różnego rodzaju opcje eksportu.

Aby zmienić wygląd menu rozwijanego, wystarczy wpisać kilka zmian w pasku narzędzi. Aby jednak wyświetlić wszystkie opcje eksportu danych, należy dodać następujący fragment kod:

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;

Jeśli uruchomimy nasz projekt, zobaczymy, że zmieniło się menu rozwijane, a opcje eksportu danych znacznie się zwiększyły:

Teraz widzimy dostosowane menu z formatami eksportu.

Ale co jeśli potrzebujemy tylko niektórych formatów? Na przykład, potrzebujemy tylko PDF, XPS i CSV. Zastosujmy to!

Musimy nieco zmienić ustawienia eksportu w zasobniku:

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

Uruchommy naszą aplikację i zobaczmy wynik:

Jeżeli tylko te opcje eksportu są wyświetlane, to znaczy, że wszystko zrobiłeś dobrze.

Tak więc, opisaliśmy jak dostosować pasek narzędzi i edytować menu rozwijane z opcjami eksportu w FastReport Web dla Core. Oprócz tych przykładów, możesz wykorzystać omówione parametry w połączeniu z innymi.

Dostosowywanie widoku obiektów w Blazorze

Należy również wspomnieć o Blazorze, który zawiera wszystko to, co zwykła wersja, ale z bardziej zaawansowaną funkcjonalnością.

Wykorzystamy projekt z poniższego artykułu: Raporty i dokumenty PDF w Blazorze.

Dostosujmy wygląd paska narzędzi.

Przejdź do pliku Pages/Index.razor.cs. W tym miejscu dostosujemy wygląd paska narzędzi, a także dodamy fragment kodu, który odpowiada za dostosowanie wyglądu paska w Blazorze:

 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,
}; 

Przejdźmy do uruchomienia naszej aplikacji i zobaczmy wyniki:

Wyobraźmy sobie, że oprócz prostego dostosowywania potrzebujemy dodać eksport do PS, HPGL, JSON i PDF.

Dodajmy następujący kod, aby to osiągnąć:

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

W ten sposób, otrzymamy ustawienia eksportu, których potrzebujemy.

Pliki Index.razor i Index.razor.cs wyglądają teraz tak:

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;
 }
 }
}

Omówiliśmy, jak dostosować wygląd obiektów i skonfigurować listę opcji eksportu w Blazorze. Teraz możesz wykorzystać omówione opcje w swoich własnych aplikacjach.