You are here:   Blog
Register   |  Login

 

Apr 12

Written by: Michael Washington
4/12/2014 6:46 PM  RssIcon

image

Creating reports in the LightSwitch HTML Client using ActiveReports has been covered in the article: Creating A LightSwitch HTML Report Using ActiveReports (using Parameters and Intrinsic Data). That article shows how to use the Nuget packages to create the code for you. However, if you want more than one report you have to create the code to support the additional reports manually. This article will show the process.

We will start with the example from the article: Creating A LightSwitch HTML Report Using ActiveReports (using Parameters and Intrinsic Data).

image

When we run the project and select an Order we can click on the Show Reports button…

image

…and see the report for the selected Order.

In this example we will add a second report that will show all the Orders in one report.

Starting with Visual Studio 2013 (or higher), install the ActiveReports 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.)

Server Project – Web Service

The first step is to create a web service (.asmx) that will receive a request to run the report, and any parameters, and return the report.

image

Open the Project in Visual Studio 2013 (or higher).

Right-click on the Server project and select Add then New Item.

image

Select new Code File and name it CodeBasedReport2.asmx.

Use the following code for the file:

 

<% @ WebService Language="C#" 
    Class="LightSwitchApplication.Reports.CodeBasedReportProxy2" 
    CodeBehind="LightSwitchApplication.Reports.CodeBasedReportProxy2.cs" %>

 

image

Right-click on Reports folder in  the Server project and select Add then New Item.

image

Create a new Class and name it CodeBasedReport2.cs.

Use the following code for the file:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using GrapeCity.ActiveReports;
using GrapeCity.ActiveReports.Web;
using GrapeCity.ActiveReports.Web.Models;
using LightSwitchApplication.Reports;
namespace LightSwitchApplication.Reports
{
    public class CodeBasedReportProxy2 : ReportService
    {
        [WebMethod]
        public new SetParametersResult SetParameters(Guid token, List<ParameterSurrogate> parametersSetAtClient)
        {
            // TODO: If you are using parameterized reports and you want end-users to be able to
            //       specify parameter values at runtime with the ActiveReports viewer control,
            //       derive the parameter values from the parametersSetAtClient argument. Note
            //       that for numeric values, you will need to convert the underlying value to
            //       a string and parse it into the appropriate numeric type. Then, pass the
            //       parameters to the appropriate method in the CodeBasedReportContext class,
            //       and assign the result to the report's DataSource. For example:
            //
            // string value = parametersSetAtClient[0].Value.ToString();
            // decimal amount = decimal.Parse(value);
            // CodeBasedReport.GetInstance().DataSource = CodeBasedReportContext.GetOrdersOverAmount(amount);
            // Always call the base class method and return its result
            return base.SetParameters(token, parametersSetAtClient);
        }
    }
}

 

image

We will need a copy of the web service entry point in the Client project.

Right-click on the .asmx file and copy it and paste a copy in the root of the Client project.

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

Server Project – Context Class

image

We will now create the Context class that will supply data to the report at run-time. This allows us to access data directly from the LightSwitch data pipeline so that any security and business rules are enforced.

Right-click on the Reports folder in the Server project and add a Class file. Call it CodeBasedReportContext2.cs and use the following code for the file:

 

using System;
using System.Drawing;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
namespace LightSwitchApplication.Reports
{
    public static class CodeBasedReportContext2
    {
        public static bool IsPreview()
        {
            return !AppDomain.CurrentDomain.GetAssemblies()
                .Any(a => a.FullName.StartsWith("Microsoft.LightSwitch.Server"));
        }
        public static object GetDataSource()
        {
            using (var serverContext = ServerApplicationContext.CreateContext())
            {
                var data = serverContext.DataWorkspace.ApplicationData.OrderDetails.GetQuery().Execute();
                
                var list = from OderDetails in data
                           orderby OderDetails.Order.OrderDate
                           select new
                           {
                               OrderDate = OderDetails.Order.OrderDate.ToShortDateString(),
                               ProductName = OderDetails.Product.ProductName,
                               ProductPrice = OderDetails.Product.ProductPrice,
                               Quantity = OderDetails.Quantity
                           };
                return new GrapeCity.ActiveReports.Data.ListDataSource(list.ToList());
            }
        }
    }
}

 

Server Project – Report File

image

Add a ActiveReports code-based report to the Reports folder and call it CodeBasedReport2.

image

We now need to add code that will supply the data to the report by calling the Context class (we created earlier) when the project is running.

Right-click on the report and select View Code.

Use the following code:

 

using System;
using System.Drawing;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web;
namespace LightSwitchApplication.Reports
{
    /// <summary>
    /// Summary description for CodeBasedReport.
    /// </summary>
    public partial class CodeBasedReport2 : GrapeCity.ActiveReports.SectionReport
    {
        private static CodeBasedReport2 instance = null;
        public CodeBasedReport2()
        {
            InitializeComponent();
            instance = this;
            if (!CodeBasedReportContext2.IsPreview())
            {
                this.DataSource = CodeBasedReportContext2.GetDataSource();
            };
        }
        public static CodeBasedReport2 GetInstance()
        {
            return instance;
        }
    }
}

 

image

Double-click on the CodeBasedReport2.cs file to open the report in the editor.

image

The design is the same as the other CodeBasedReport so we can simply copy the design.

See Creating A LightSwitch HTML Report Using ActiveReports (using Parameters and Intrinsic Data) for the steps.

image

You should be able to Build the project at this point with no errors.

Client Project – Screen

image

We will now create the screen to display the new report.

Right-click on the Screens folder in the HTMLClient project and select Add Screen.

image

Add a new Browse Data Screen and call it Report2.

image

Set the Properties for the Rows Layout control to Stretch to Container.

image

Add a Custom Control to the screen.

image

Click OK.

image

Set the Properties for the Label Position to None and the Sizing to Stretch to Container.

image

Click Edit Render Code.

Use the following code:

 

myapp.Report2.ScreenContent_render = function (element, contentItem) {
    $(function () {
        viewer = GrapeCity.ActiveReports.Viewer({
            element: element,
            reportService: {
                url: 'CodeBasedReport2.asmx'
            },
            uiType: 'desktop',
            documentLoaded: function () {
                arls.adjustScroll(element);
            }
        });
        var reportOption = {
            id: "LightSwitchApplication.Reports.CodeBasedReport2"
        };
        viewer.option('report', reportOption);
    });
};

 

image

Open the Main page, and make a button to open the new Report page.

image

Run the project…

image

Click the Show Report2 button…

image

The report will display.

Special Thanks

A special thanks to John Juback, 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)

2 comment(s) so far...


Gravatar

Re: Creating Multiple Reports in a Single Project Using ActiveReports

Hi Michael, can you post an example to use Active Reports on Lightswitch SL Client ?

By iVAN on   4/18/2014 7:23 AM
Gravatar

Re: Creating Multiple Reports in a Single Project Using ActiveReports

@iVAN - Unfortunately due to time constraints I am unable to fulfill requests (all the code I post is code I am using for my other projects). You can get assistance on the ComponentOne website: http://www.componentone.com/Support/

By Michael Washington on   4/18/2014 7:37 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