Jan 5

Written by: Michael Washington
1/5/2014 3:32 PM 

Note: You can use the live application at the following link: https://survey.lightswitchhelpwebsite.com/HTMLClient (use your username and password from LightSwitchHelpWebsite.com).

You can embed reports into the pages of your Visual Studio LightSwitch HTML Client applications and allow your end users to print them and export them to PDF, Microsoft Word and Excel.

We start with the application from the article: LightSwitch Survey: Handling Complex Business Logic Using WCF RIA Services.

We click on one of the Survey Results…

We see an embedded Report Viewer Control that displays the report and chart for the selected Survey.

Users can export the report to various formats for printing.

The reports can be interactive providing tooltips for charts.

 

Creating The Report

We start off with the WCF RIA Service that combines the tables into one collection. Most reports require data from several tables and a WCF RIA Service allows you to easily do this.

Because this is a Visual Studio LightSwitch 2012 application we must switch to File View (you do not need this step with Visual Studio LightSwitch 2013).

We create a Reports folder in the Server project, and we right-click on it and select Add then New Item.

We select Report or the Report Wizard.

Any WCF RIA Services will show up in the Data source drop down, so a WCF RIA Service is easily consumed in the Report designer. Intrinsic LightSwitch tables are not. To consume a LightSwitch table directly in the report designer, see the article: Printing Sql Server Reports (.rdlc) With LightSwitch.

The data source is only for designing the report. We will have to write code to provide data to the report at runtime in a later step.

We complete designing the report.

 

Include the .rdlc File in the Build

The report is an .rdlc file and it will not be included in the build in a Visual Studio 2012 project if we don’t right-click on the project and select Unload Project…

.. edit the .ls3proj file…

…add an entry for the .rdlc file…

… reload the project…

… and right-click on the project and set it as the StartUp Project.

 

Make the Report Run Fast

To only pull back the data we need we create a WCF RIA Service that takes a SurveyID so we only pull back the data we need:

 

        public IQueryable<SurveyResult> GetSurveyResultByID(int? SurveyID)
        {
            var colSurveyResult = from SurveyQuestions in this.Context.SurveyQuestions
                                  where SurveyQuestions.Survey.Id == SurveyID
                                  select new SurveyResult
                                  {
                                      SurveyId = SurveyQuestions.Survey.Id,
                                      QuestionId = SurveyQuestions.Id,
                                      Question = SurveyQuestions.Question,
                                      TotalResponses = SurveyQuestions.SurveyAnswers.Count(),
                                      ChoiceOne = SurveyQuestions.SurveyAnswers.Where(x => x.Choice == 1).Count(),
                                      ChoiceTwo = SurveyQuestions.SurveyAnswers.Where(x => x.Choice == 2).Count(),
                                      ChoiceThree = SurveyQuestions.SurveyAnswers.Where(x => x.Choice == 3).Count(),
                                      ChoiceFour = SurveyQuestions.SurveyAnswers.Where(x => x.Choice == 4).Count(),
                                      ChoiceOneText = SurveyQuestions.Choice1,
                                      ChoiceTwoText = SurveyQuestions.Choice2,
                                      ChoiceThreeText = SurveyQuestions.Choice3,
                                      ChoiceFourText = SurveyQuestions.Choice4
                                  };
            return colSurveyResult;
        }

We update the data source…

It will show as a sub query that takes a parameter.

 

Report Viewer Control

We place a Report Viewer control on a .aspx page…

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ReportViewer.aspx.cs" 
    Inherits="LightSwitchApplication.Reports.ReportViewer" %>
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" 
    Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ReportViewer</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <rsweb:ReportViewer ID="ReportViewer1" runat="server" Font-Names="Verdana"
                Font-Size="8pt" InteractiveDeviceInfos="(Collection)"
                WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt" Width="590px" Height="590px">
            </rsweb:ReportViewer>
        </div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </form>
</body>
</html>

 

… and use the following code for the code behind that takes a query string parameter for SurveyId and retrieves the results for the selected Survey:

 

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.Reporting.WebForms;
namespace LightSwitchApplication.Reports
{
    public partial class ReportViewer : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.QueryString["SurveyId"] != null)
            {
                if (!Page.IsPostBack)
                {
                    ShowReportViewer();
                }
            }
        }
        #region ShowReportViewer
        private void ShowReportViewer()
        {
            // Load the .rdlc that contains the report
            this.ReportViewer1.ProcessingMode = ProcessingMode.Local;
            this.ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report1.rdlc");
            // Get the data for the report
            ReportViewer1.LocalReport.DataSources.Add(
               new ReportDataSource("DataSet1", LoadData()));
        }
        #endregion
        #region LoadData
        private IEnumerable<SurveyResult> LoadData()
        {
            using (var serverContext = ServerApplicationContext.CreateContext())
            {
                // SurveyId is passed to the page
                int SurveyId = Convert.ToInt32(Request.QueryString["SurveyId"]);
                // Get the data from LightSwitch WCF RIA Service
                var result = from SurveyResults in serverContext.DataWorkspace.WCF_RIA_ServiceData
                                 .GetSurveyResultByID(SurveyId).Execute()
                             select SurveyResults;
                return result;
            };
        }
        #endregion
    }
}

 

Consume the Report In the LightSwitch HTML Client

To display the report in the LightSwitch HTML Client, we simply use a Custom Control.

We select Edit Render Code for the control and use the following code:

 

myapp.SurveyResults.ScreenContent_render = function (element, contentItem) {
    // Show Loading message
    var LoadingDiv = $("<div></div>");
    var Loading = $("<h1>&nbsp;&nbsp;&nbsp;&nbsp;Loading Report...</h1>");
    Loading.appendTo(LoadingDiv);
    LoadingDiv.appendTo($(element));
    // Get Report
    var HTMLContent = $("<div></div>").html(
        "<object width='650px' height='650px' data='../reports/ReportViewer.aspx?SurveyId="
        + contentItem.screen.SurveyId + "'/>"
        );
    // Make report appear on top of the Loading message
    HTMLContent.css({
        "margin-top": "-50px"
    });
    HTMLContent.appendTo($(element));
};

 

Deployment

You will need to install the Microsoft Report Viewer 2012 Runtime Package on the web server that displays the report.

 

Links

LightSwitch Survey: Handling Complex Business Logic Using WCF RIA Services

Printing With LightSwitch

Printing Sql Server Reports (.rdlc) With LightSwitch

Note, you can see this site if you have any questions about the Report Viewer Control: http://www.gotreportviewer.com

 

Download Code

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

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