Web Report Designer runs completely independently in the browser and does not require any local installation of a Windows program, as is the case with Web Designer.

Requirements

• In order to use the Web Report Designer in your own ASP.NET project, the two List & Label NuGet packages combit.ListLabel30 and combit.ListLabel30.Web must be added. The other external dependencies are added automatically. Further details on the use of NuGet packages and deployment can be found under NuGet Package Support.
• Additionally locate the line builder.Services.AddControllersWithViews(); and replace it with builder.Services.AddControllersWithViews().AddNewtonsoftJson();.

Limitations

General limitations in the Web Report Designer as compared to the normal Designer:

• no interactive formula functions (AskString$, AskStringChoice$, LibraryPath$, ProjectPath$, ApplicationPath$)
• no possibility to use local file paths or formulas as source for HTML objects
• no OLE objects
• no fax/mail features
• no custom DesignerActions
• no objects drawn using callback

Integration - Create new Controller

Then create a new controller as usual - in the following the name MyWebReportDesignerController is used as an example. Derive the controller from the WebReportDesignerController class:

...
public class MyWebReportDesignerController : WebReportDesignerController
...

...
Public Class MyWebReportDesignerController
        Inherits WebReportDesignerController
...

Integration - Override important Methods

Then implement the two abstract methods OnProvideListLabel and OnProvideRepository. Pass your List & Label instance with matching data source or the Repository to be used in the respective arguments provided.

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

Integration - .NET Switch

The further procedure differs for .NET 6/.NET 8/.NET 9 and .NET 4.8.

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

If you see a startup.cs file (otherwise see below), add the following lines to the end of the Configure method:

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

    app.UseWebReportDesigner();
}
...

And in the ConfigureServices method, add this line:

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

    services.AddWebReportDesigner();
}
...

If there is no startup.cs you should have a program.cs. In this case, add app.UseWebReportDesigner(); right after any other app.Use... call and add builder.Services.AddWebReportDesigner(); right after any other builder.Services... call. 

.NET 4.8:

In the global.asax.cs/global.asax.vb file, add the following line before the RouteConfig.RegisterRoutes() call:

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

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

Integration - Using in Front-End

This completes the configuration in the back-end. The front-end can now be integrated. In the front-end, the choice of technology is completely free.

ASP.NET MVC with 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 like React, Vue.js and Angular

If other front-end technologies such as React, Vue.js or Angular are used, the JavaScript file for the Web Report Designer (WebReportDesigner.js) must be integrated and the viewer tag in the desired position in the HTML source code.

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

Further

The List & Label installation contains corresponding ASP.NET examples that show the use of the Web Report Designer in detail.