Creating Reports in LightSwitch HTML Client

Datetime:2016-08-29 03:25:11         Topic: HTML  RIA  WCF          Share        Original >>
Here to See The Original Article!!!

image

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.

image

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

image

We click on one of the Survey Results

image

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

image

Users can export the report to various formats for printing.

image

The reports can be interactive providing tooltips for charts.

Creating The Report

image

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.

image

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

image

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

image

We select Report or the Report Wizard .

image

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.

image

We complete designing the report.

Include the .rdlc File in the Build

image

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

image

.. edit the .ls3proj file…

image

…add an entry for the .rdlc file…

image

… reload the project…

image

… 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 aWCF RIA Servicethat 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;
}

image

We update the data source…

image

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

Report Viewer Control

image

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

image

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

image

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)








New