combit List & Label 30 - .NET Help
Programming Introduction / Tutorial / Web Reporting Overview / Use of the Web Report Designer
In This Topic
    Use of the Web Report Designer
    In This Topic

    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.

    In order to be able to use all Designer functions and objects, the Web Designer can still be used, but it requires a local Windows installation and is therefore no longer browser-independent.

     

    Requirements

    Limitations

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

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

     

    For redistribution it is important that additionally the List & Label license key (see also LicensingInfo) is specified in OnProvideListLabel() for the List & Label instance.

    Note: For a detailed implementation for DefaultSettings.GetRepository() in OnProvideRepository(), see the provided ASP.NET examples.

     

    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.