Apr 12

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

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).

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

…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.

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

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

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" %>

 

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

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

 

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

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

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

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

 

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

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.

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

Client Project – Screen

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.

Add a new Browse Data Screen and call it Report2.

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

Add a Custom Control to the screen.

Click OK.

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

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

 

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

Run the project…

Click the Show Report2 button…

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

• Creating A LightSwitch HTML Report Using ActiveReports (using Parameters and Intrinsic Data)
• ActiveReports : Cloud Licensing
• 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

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)