HTML Reporting

Moxy produces HTML reports using a javascript library moxy.js, with the look and feel being controlled by moxy.css.  HTML reports can be included in your .NET web application as a standalone page, or embedded in any other page.  Reports are loaded using AJAX, so can be loaded and updated on demand.

HTML Page Structure

To include a Moxy HTML report in an HTML page, you can include all or any of the Moxy DIVs described below.  If you don’t want to use a particular feature, then don’t include the DIV.

Moxy DIVs

ReportTitle

The title of the report is displayed here.

ReportOptions

The report options are rendered here with an update button.  This allows the user to see and change the settings (such as date range) of the report.  When clicking the update button, the report is refreshed via AJAX.

ReportBody

The body of the report is rendered here.

ReportPages

The list of pages in the report is displayed here.  Using CSS, this can be displayed as a list or as tabs.  When the user clicks into a drilldown report, then the drilldown pages will be added to this list, allowing the user to quickly navigate between reports in their current session.

ReportNavigation

Displays a dropdown list of pages in the report, with ‘Next’ and ‘Previous’ links to provide quick navigation.

MoxySpinner

A div that contains a progress indicator.  This div will be made visible while loading a report, then hidden once the report is rendered.

Loading the Report

To load a report, instantiate a new Moxy.Report javascript object in an OnLoad event as shown in the example.

Example

<script type="text/javascript">

   var sampleReport = new Moxy.Report();

   Moxy.Helpers.OnLoad(function () {

       sampleReport.UpdateReportUrl = "/Report/UpdateReport/";

       sampleReport.ExportUrl = "/Report/ExportReport/";

       sampleReport.PublishUrl = "/Report/PublishReport/";

       sampleReport.Load('<%=ViewData["QueryId"] %>');

   });

</script>


Click to see Comments

Help comments powered by Disqus

In this section