combit List & Label 28 - .NET Help
Programming Introduction / Tutorial / Web Reporting Overview / Use the HTML5-Viewer
In This Topic
    Use the HTML5-Viewer
    In This Topic
    Note: The HTML5 Viewer is marked as obsolete and has been replaced by the Web Report Viewer.

    The HTML5 Viewer is available in ASP.NET WebForms and ASP.NET MVC applications and supports all popular browsers. Therefore it is applicable on clients with different operating systems. It allows interactive input through Drilldown and report parameters.

    Basic Concepts

    Integration

    To integrate the HTML5 Viewer into your application proceed as follows. Further details can be found in the provided application samples for ASP.NET.

     Step 1: Add HTML5 Viewer to your application

    ASP.NET Web Forms:

    In an ASP.NET WebForms application just add the Html5ViewerControl from the combit.Reporting.Web namespace of the combit.ListLabel28.Web.dll. Please also see the example 'Web Reporting Sample' in the List & Label installation:

    <%@ Register TagPrefix="combit" Namespace="combit.Reporting.Web" Assembly="combit.Reporting.Web" %>
    <html>
    <head>
        <title><asp:Literal ID="LTViewerTitle" runat="server"></asp:Literal></title>
    </head>
    <body>
        <form method="post" runat="server">
            <div>
                <combit:Html5ViewerControl ID="Html5ViewerControl1" runat="server"></combit:Html5ViewerControl>
            </div>
        </form>
    </body>
    </html>
    

     

    ASP.NET MVC:

    @using combit.Reporting.Web
    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
    </head>
    <body>
        <div>
            @Html.Html5Viewer((string)ViewBag.InstanceName, null);
        </div>
    </body>
    </html>
    
    @Imports combit.Reporting.Web
    @Code
         Layout = Nothing
    END Code
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@ViewData("Title")</title>
    </head>
    <body>
        <div>
            @Html.Html5Viewer(DirectCast(ViewData("InstanceName"), String), Nothing);
        </div>
    </body>
    </html>                     
    

    Please also see the example in the List & Label installation directory under 'MVC Web Reporting Sample'.

     Step 2: Setup project file and other data on the server side

    The necessary routes will need to be registered in the Application_Start() function of your application (Global.asax file), even if your application is not based on ASP.NET MVC. Add the following lines:

    Html5ViewerConfig.RegisterRoutes(RouteTable.Routes);
    Html5ViewerConfig.OnListLabelRequest += Services_OnListLabelRequest;
    
    Html5ViewerConfig.RegisterRoutes(RouteTable.Routes)
    AddHandler Html5ViewerConfig.OnListLabelRequest, AddressOf Services_OnListLabelRequest
    

    Important: If you are also using MVC/Web API, the Html5ViewerConfig.RegisterRoutes function must be registered before your own routes.

     

    In the event handler the data required for the HTML5 Viewer will be passed:

    private void Services_OnListLabelRequest(object sender, ListLabelRequestEventArgs e)
    {
        ListLabel ll = new ListLabel();
       
        // set license key for List & Label (client + server). If not set, a license error will be displayed on non-development machines.
        ll.LicensingInfo = "<ToDo: insert license here>";
       
        ll.DataSource = DataAccess.SampleData.CreateProviderCollection(reportName);
       
        ll.AutoProjectFile = _reportsPath + e.ReportName;
        e.ExportPath = Path.GetTempPath(); // set temp directory;
       
        e.NewInstance = ll;
    }
    
    Private Sub Services_OnListLabelRequest(sender As Object, e As ListLabelRequestEventArgs)
        Dim ll As New ListLabel()
        ' set license key for List & Label (client + server). If not set, a license error will be displayed on non-development machines.
        ll.LicensingInfo = "<ToDo: insert license here>"
        ll.DataSource = DataAccess.SampleData.CreateProviderCollection(reportName)
        ll.AutoProjectFile = _reportsPath + e.ReportName
        e.ExportPath = Path.GetTempPath() ' set temp directory;
        e.NewInstance = ll
    End Sub
    
                   

    The name of the selected report can be set in ASP.NET WebForms by using the ReportName property of the Html5ViewerControl object. In ASP.NET MVC it can directly passed as a parameter of the HtmlHelper extension method @Html.Html5Viewer()

    In the OnListLabelRequest event it is then available again under e.ReportName, so that the corresponding data source and project file can be loaded.

     

    Options
    The Html5ViewerOptions class that you assign to the Options property of the Html5ViewerControl or pass as a parameter of the HtmlHelper extension method @Html.Html5Viewer() enables you to define where required jQuery and jQuery Mobile files should be loaded from (CDNType), which CSS files should be loaded (ThemeCSSUrl, ThemeIconsCSSUrl) or which jQuery Mobile theme should be used (DataTheme). For more information about these formatting options please see the jQuery Mobile help available online.