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.

Voraussetzungen

• Um den Web Report Designer im eigenen ASP.NET Projekt zu verwenden, müssen die beiden List & Label NuGet Packages combit.ListLabel30 und combit.ListLabel30.Web hinzugefügt werden. Die weiteren externen Abhängigkeiten werden dabei automatisch hinzugefügt. Weitere Details zur Verwendung der NuGet Packages und dem Deployment finden sich unter NuGet Package Unterstützung.
• Zusätzlich suchen Sie die Zeile builder.Services.AddControllersWithViews(); und ersetzen Sie sie durch builder.Services.AddControllersWithViews().AddNewtonsoftJson();.       

Einschränkungen

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

• keine interaktiven Formelfunktionen (AskString$, AskStringChoice$, LibraryPath$, ProjectPath$, ApplicationPath$)
• keine lokalen Dateipfade oder Formeln als Quelle für HTML-Objekte möglich
• keine OLE-Objekte
• keine Fax-/Mail-Funktionen
• keine eigenen DesignerActions
• keine im Callback selbst gezeichneten Objekte

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
...

...
Public Class MyWebReportDesignerController
        Inherits 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();
} 
...

...
Public Overrides Sub OnProvideListLabel(ByVal provideListLabelContext As ProvideListLabelContext)

    Dim ll As ListLabel = New ListLabel()
    ll.LicensingInfo = "<ToDo: insert your license here>"

    Dim dataSource = GetDataProvider(provideListLabelContext.RepositoryItemId)
    ll.DataSource = dataSource

    provideListLabelContext.NewInstance = ll

End Sub

Public Overrides Sub OnProvideRepository(ByVal provideFileRepositoryContext As ProvideRepositoryContext)

    provideFileRepositoryContext.FileRepository = DefaultSettings.GetRepository()

End Sub
...

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);
...

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

...
<template>
    <div class="WebReportDesigner">
        <WebReportDesigner />
    </div>
</template>
<script>
    // @ is an alias to /src
    import WebReportDesigner from '@/components/WebReportDesigner.vue'
    export default {
        name: 'WebReportDesignerView',
        components: {
            WebReportDesigner
        },
        mounted() {
            let wrdScript = document.createElement('script')
            wrdScript.setAttribute('src', 'https://localhost:5011/WebReportDesigner.js')
            document.head.appendChild(wrdScript)
        }
    }
</script>
...
<template>
    <div>
        <ll-webreportdesigner backendurl="https://localhost:5011/LLWebReportDesigner" defaultProject="305D94C6-E5DC-4BE1-BC43-12CBC532EEE6" showTutorial />
    </div>
</template>
<script lang="ts">
</script>
...

...
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="http://localhost:5184/WebReportDesigner.js"></script>
  <meta charset="utf-8" />
  <title>Angular Web Report Designer</title>
  <base href="/" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="assets/favicon.png" />
</head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>
...
<div>
    <ll-webreportdesigner backendUrl="http://localhost:5184/LLWebReportDesigner" defaultProject="305D94C6-E5DC-4BE1-BC43-12CBC532EEE6" showTutorial />
</div>
...

Ausblick

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