combit List & Label 30 - .NET Hilfe
Einführung in die Programmierung / Tutorial / Web Reporting Leitfaden / Verwendung des Web Report Designers
Verwendung des Web Report Designers

Der Web Report Designer läuft vollkommen unabhängig im Browser und bedarf keinerlei lokaler Installation eines Windows-Programms, wie es beim Web Designer der Fall ist.

Um alle Designer-Funktionen und -Objekte vollständig verwenden zu können, kann weiterhin der Web Designer verwendet werden, der jedoch eine lokale Windows Installation voraussetzt und somit auch nicht mehr browserunabhängig ist.

 

Voraussetzungen

Einschränkungen

Generelle Einschränkungen im Web Report Designer im Vergleich zum normalen desktopbasierten Designer:

Einbindung - Neuen Controller erstellen

Legen Sie anschließend wie üblich einen neuen Controller an - im Folgenden wird als Beispiel der Name MyWebReportDesignerController verwendet. Leiten Sie den Controller von der Klasse WebReportDesignerController ab:

...
public class MyWebReportDesignerController : WebReportDesignerController
...

 

Einbindung - Wichtige Methoden überschreiben

Implementieren Sie dann die beiden abstrakten Methoden OnProvideListLabel und OnProvideRepository. Übergeben Sie in den jeweils bereitgestellten Argumenten Ihre List & Label-Instanz mit passender Datenquelle bzw. das zu verwendende Repository.

...
public override void OnProvideListLabel(ProvideListLabelContext provideListLabelContext)
{
    ListLabel ll = new ListLabel();
    ll.LicensingInfo = "<ToDo: insert your license here>"

    var dataSource = GetDataProvider(provideListLabelContext.RepositoryItemId);
    ll.DataSource = dataSource;

    provideListLabelContext.NewInstance = ll;
}

public override void OnProvideRepository(ProvideRepositoryContext provideFileRepositoryContext)
{
    provideFileRepositoryContext.FileRepository = DefaultSettings.GetRepository();
} 
...

 

Für die Weitergabe ist es wichtig, dass zusätzlich unbedingt der List & Label Lizenzschlüssel (siehe auch LicensingInfo) in OnProvideListLabel() für die List & Label-Instanz angegeben wird.

Hinweis: Eine detaillierte Implementierung für DefaultSettings.GetRepository() in OnProvideRepository() finden Sie in den mitgelieferten ASP.NET Beispielen.

 

Einbindung - .NET Weiche

Die weitere Vorgehensweise unterscheidet sich bei .NET 6/.NET 8/.NET 9 und .NET 4.8.

 

.NET 6/.NET 8/.NET 9:

Wenn Sie die Datei startup.cs vorfinden (ansonsten siehe unten), fügen Sie die folgenden Zeilen am Ende der Configure-Methode hinzu:

...
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // do some other stuff here
    // ...

    app.UseWebReportDesigner();
}
...

Und in der ConfigureServices-Methode fügen Sie noch diese Zeile hinzu:

...
public void ConfigureServices(IServiceCollection services)
{
    // do some other stuff here
    // ...

    services.AddWebReportDesigner();
}
...

 

Wenn es die Datei startup.cs nicht gibt, sollten Sie die Datei program.cs haben. In diesem Fall fügen Sie app.UseWebReportDesigner(); direkt nach jedem anderen app.Use...-Aufruf und builder.Services.AddWebReportDesigner(); direkt nach jedem anderen builder.Services...-Aufruf hinzu. 

 

.NET 4.8:

Fügen Sie in der Datei global.asax.cs/global.asax.vb vor dem RouteConfig.RegisterRoutes()-Aufruf die folgende Zeile ein:

...
WebReportDesignerConfig.RegisterRoutes(RouteTable.Routes);
...

 

Einbindung - Integration in ein Frontend

Damit ist nun die Konfiguration im Backend abgeschlossen. Nun kann das Frontend integriert werden. Im Frontend ist die Wahl der Technologie vollkommen frei.

ASP.NET MVC mit Razor View

...
@using combit.Reporting.Web
@{
    Layout = null;
}
<!DOCTYPE html>
@Html.WebReportDesigner() 
...
...
@using combit.Reporting.Web
@{
    Layout = null;
    string repositoryId = "305D94C6-E5DC-4BE1-BC43-12CBC532EEE6";
}
<!DOCTYPE html>
@Html.WebReportDesigner("Web Report Designer", repositoryId)
...

JavaScript wie React, Vue.js und Angular

Wenn andere Frontend Technologien wie z. B. React, Vue.js oder Angular verwendet werden, muss die Javascript-Datei für den Web Report Designer (WebReportDesigner.js) eingebunden werden und das Designer-Tag an der gewünschten Stelle im HTML-Quellcode.

...
import { useExternalScript } from './hooks/useExternalScript';
export const WebReportDesigner = () => {
    const state = useExternalScript("https://localhost:7146/WebReportDesigner.js");
    return (
        <div>
            <div>
                <title>Web Report Designer</title>
            </div>
            <div>
                {state === "loading" && <p>Loading...</p>}
                {state === "ready" && <ll-webreportdesigner backendurl="https://localhost:7146/LLWebReportDesigner" defaultProject="305D94C6-E5DC-4BE1-BC43-12CBC532EEE6" showTutorial />}
            </div>
        </div>
    );
}
...

 

Ausblick

In der List & Label Installation finden sich entsprechende ASP.NET Beispiele, die die Verwendung des Web Report Designers im Detail zeigen.