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

In ASP.NET WebForms you place the Html5ViewerControl on the website. In ASP.NET MVC you can use the HtmlHelp extension method.

On the server side you set the DataSource, the project file, the temp path and some optional properties in an event that is called by the HTML5 Viewer.

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:

ASP.NET MVC:

cshtml
vbhtml

@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:

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:

C#
VB.NET

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.

Send Feedback