Feb 17

Written by: Michael Washington
2/17/2014 9:24 AM 

NOTE: See an updated version at: Creating A LightSwitch HTML Report Using ActiveReports (using Parameters and Intrinsic Data). Also see: Creating Multiple Reports in a Single Project Using ActiveReports

You can create fully integrated HTML reports using ComponentOne’s Active Reports. The difference between this and the LightSwitch HTML reporting solution covered in the article: Creating Reports in LightSwitch HTML Client is the following:

• Active Reports has a HTML5 report viewer that fully integrates into the LightSwitch HTML page (the Microsoft report viewer is shown using dynamic injection of a object tag)
• Active Reports allows you to preview the report while in design time mode (the Microsoft report requires you to run the entire application to see the report)

Active Reports allows you to print or export the reports in many different formats including PDF, Microsoft Word and Excel.

Set-Up

Starting with Visual Studio 2013 (or higher), install the Active Reports 8 (or higher) Trial (or full product).

See the Installation guide and Documentation & Demos.

Free Technical Support (Submit questions using the online support portal at no cost during your 30-day evaluation.)

 

LightSwitch Project

Next, we create a project and add some sample data.

We add a Reports folder that we will add our report to in a later step.

We also Right-click on the root folder in the Server project, and select Add then New Item.

We add a ActiveReports Web Service.

Ensure that you name it ActiveReports.ReportService.asmx so that the sample code example will work properly.

This action will cause the Active Reports assemblies to be registered and the web.config to be updated.

Now go to the file system, and make a copy of the .asmx file and place it in the root of the HTMLClient project.

Right-click on the HTMLClient project, and use Add, then Existing Item to navigate to the file.

The file will now show.

(The reason we do this is because one copy will be used during debugging and the other used at application deployment)

Connect To The Database To Design Queries

You may find it helpful to connect to the database by opening the Server Explorer tab and right-clicking on Data Connections and selecting Add Connection.

Enter:

(localdb)\v11.0

for the Server name and Use Windows Authentication.

Click the dropdown for database name and select the file at:

..\Bin\Data\ApplicationDatabase.mdf

You can use the Test Connection button to test the connection.

Click the OK button

The database will show and you can use New Query…

…to create and test queries that you can use for your reports.

Make sure you Close Connection before trying to run the project.

For more information see:

Working with SQL Server LocalDB in LightSwitch Projects in Visual Studio 2012 (the directions also work with Visual Studio 2013).

Create The Report

Add a Active Reports code-based report to the Reports folder.

In the report designer, select the database icon on the detail line, select the SQL tab, and enter a connection string and a query for the report and click OK.

For the connection string use the following format:

Data Source=(localdb)\v11.0;AttachDbFilename= {Location of your .MDF file} ;Integrated Security=True;Connect Timeout=30;MultipleActiveResultSets=True

(replace {Location of your .MDF file} with the full path and location of the .mdf file in your project, at: ..\Bin\Data\ApplicationDatabase.mdf)

If your data is in a database external to LightSwitch you can simply connect directly to it.

Next, select View / Other Windows / Report Explorer 8 to display the Report Explorer.

The fields returned by the query will show in the Report Explorer.

We can drag and drop fields to design the report.

See: Documentation & Demos for assistance.

We can use the Preview button for a real-time preview of the report.

Add Run-Time Server-Side Code

We now need to add code that will set the connection to the data when the project is running.

Right-click on the report and select View Code.

Add the following code under InitializeComponent():

 

    // Only dynamically set ConnectionString at runtime
    // Must add a reference to System.Configuration for the following line to work
    if (System.Web.Configuration.WebConfigurationManager.ConnectionStrings["_IntrinsicData"] != null)
    {
        string connString =
            System.Web.Configuration.WebConfigurationManager.ConnectionStrings["_IntrinsicData"].ConnectionString;
        GrapeCity.ActiveReports.Data.SqlDBDataSource _dS =
            new GrapeCity.ActiveReports.Data.SqlDBDataSource();
        _dS.ConnectionString = connString;
        _dS.SQL = "Select * from Complaints order by ComplaintType";
        this.DataSource = _dS;
    }
}

 

Add Client-Side Code

Download the files at the following location and unzip them:

http://silverlight.adefwebserver.com/Files/LightSwitch/LightSwitchActiveReportsClientFiles_02162013.zip

Copy the files…

…and Paste them in their respective directories in the HTMLCLient project.

Open the default.htm file and add references to the added files.

Create Reports Screen

Add a new screen and call it Reports.

Add a Custom Control to the screen.

Click OK.

In the Properties for the control, click Edit Render Code.

Use the following code for the method:

 

    $(function () {
        viewer = GrapeCity.ActiveReports.Viewer({
            element: element,
            reportService: {
                url: 'ActiveReports.ReportService.asmx'
            },
            uiType: 'desktop'
        });
        var reportOption = {
            id: "LightSwitchApplication.Reports.ComplaintsCodeBasedReport"
        };
        viewer.option('report', reportOption);
    });

 

Set the Width and Height of all controls and groups on the page to Stretch to Container.

On the main page, make a button to open the Report page.

Run the project…

The report will display.

Interacting With The API

We can add a group of buttons…

The will create method signatures that we can implement with the following code:

 

myapp.Reports.Print_execute = function (screen) {
    viewer.print()
};
myapp.Reports.Word_execute = function (screen) {
    viewer.export("Word", function (uri) {
        window.open(uri);
    }, true, { FileName: "Document.doc" })
};
myapp.Reports.PDF_execute = function (screen) {
    viewer.export("Pdf", function (uri) {
        window.open(uri);
    }, true, { FileName: "Document.pdf" })
};

 

That allows us to create custom functionality.

 

LightSwitch and Active Reports FAQ

• My assemblies aren’t making it to production when I go to publish.
  1. In the references section of our project we need to set the GrapeCity DLLs to Copy Local set to true
  2. You can shift select all the DLLs in the references in your Visual Studio Solution Explorer and right click and go to properties to set all these values at once.
  3. These should now appear in your Bin folder when you re-deploy
• I am using a Trial Version and I am getting a “ License for viewer not found” error
  1. We need to generate a hashed key to add to our web.config
  2. Locate the tool called “WebKeyGenerator.exe” in our C:\Program Files (x86)\Common Files\ComponentOne\ActiveReports 8\<name of exe>
  3. Run this tool and you will see the <add Key=”hash”>  copy that key and add it in the appropriate location in the web.config.

 

Special Thanks

A special thanks to Bhupesh Malhotra, Ross Dederer, and Dan Beall at ComponentOne for their assistance in creating this article.

 

Links

• ActiveReports 8 User Guide NetHelp / PDF
• ActiveReports 8 Server Administrator Guide NetHelp / PDF
• ActiveReports 8 Server End User Guide NetHelp / PDF
• ActiveReports 8 Server SDK NetHelp /PDF
• Creating A LightSwitch HTML Report Using ActiveReports (using Parameters and Intrinsic Data)
• Creating Multiple Reports in a Single Project Using ActiveReports
• ActiveReports : Cloud Licensing

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 (or higher) installed to run the code)

(you must have the Active Reports 8 (or higher) Trial or full product installed to run the code)