You are here:   Blog
Register   |  Login

LightSwitch News

Feb 17

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

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)

image

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

Set-Up

image

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

image

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

image

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

image

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

image

We add a ActiveReports Web Service.

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

image

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

image

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

image

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

image

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

image

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

image

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

Click the OK button

image

The database will show and you can use New Query

image

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

image

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

image

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

image

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.

image

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

image

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

image

We can drag and drop fields to design the report.

See: Documentation & Demos for assistance.

image

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

Add Run-Time Server-Side Code

image

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.

image

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

image

Copy the files…

image

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

image

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

Create Reports Screen

image

Add a new screen and call it Reports.

image

Add a Custom Control to the screen.

image

Click OK.

image

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);
    });

 

image

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

image

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

image

Run the project…

image

The report will display.

Interacting With The API

image

We can add a group of buttons…

image

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" })
};

 

image

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

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)

Tags: Printing
Categories:

8 comment(s) so far...


Gravatar

Re: Creating LightSwitch HTML Reports using ComponentOne Active Reports

How do transfers a parameters from screen to the report?

By Van Tam on   3/7/2014 11:50 PM
Gravatar

Re: Creating LightSwitch HTML Reports using ComponentOne Active Reports

@Van Tam - Please see the documentation on componentOne's website.

By Michael Washington on   3/8/2014 4:39 AM
Gravatar

Re: Creating LightSwitch HTML Reports using ComponentOne Active Reports

Thank you Michael

By Van Tam on   3/9/2014 7:09 PM
Gravatar

Re: Creating LightSwitch HTML Reports using ComponentOne Active Reports

How do display the current user name on the active report?

By Tam Nguyen on   3/11/2014 6:02 PM
Gravatar

Re: Creating LightSwitch HTML Reports using ComponentOne Active Reports

@Tam Nguyen - You could do it by passing a parameter. This will be covered in a future article, or you can send an email to ComponentOne support.

By Michael Washington on   3/11/2014 6:08 PM
Gravatar

Re: Creating LightSwitch HTML Reports using ComponentOne Active Reports

Thank you Michael

By Tam Nguyen on   3/12/2014 5:47 PM
Gravatar

Re: Creating LightSwitch HTML Reports using ComponentOne Active Reports

Hi Michael,

I followed your tutorial and all worked perfectly fine until I upload it to my sharepoint site.
Once I do, I get: "License for the WebViewer cannot be found" error message.

I contacted them about it, and they claim that WebViewer is only available in Professional version (I bough Standard).

Is there something I'm doing wrong? Is there a work around?

Kind Regards,
Vadim

By Vadim on   6/3/2014 3:42 AM
Gravatar

Re: Creating LightSwitch HTML Reports using ComponentOne Active Reports

@Vadim - See the link at the end of the article: "ActiveReports : Cloud Licensing"

By Michael Washington on   6/3/2014 3:43 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation