Download as PDF: GettingStarted.pdf
Download a sample: SilverlightApplication
The purpose of this user manual is
to demonstrate the main points of using SharpShooter Reports.Silverlight
software and provide necessary knowledge for getting started with the
component. You will get step by step recommendations on how to create a web
application using SharpShooter Reports.Silverlight. You will also look into the
process of creating and configuring a service, designing a report and, finally,
integrating a report viewer into the application pages.
In order to get the sample working,
the following software should be installed on your computer:
MS Visual Studio 2010 or higher
.NET Framework 4.0 or higher
ASP.NET 2.0 or higher
Microsoft Silverlight 5 Toolkit
SharpShooter Reports.Silverlight 6.0 or higher.
Creating a Sample Application
Step 1. Creating a Project
To begin with, we should create a new Silverlight
Application project in MS Visual Studio.
Let’s call our project a ‘SilverlightApplication’
creating a project we should check ‘Host the Silverlight application in a new
Web site’ option and set the name of the web-project to ‘SilverlightApplication.Web’. Additionally, don’t forget to specify
‘Silverlight 5’ version as a targeted platform.
A new Visual Studio solution will be created after
that. It will contain two projects:
client side ‘SilverlightApplication’ and
server side ‘SilverlightApplication.Web’.
Step 2. Configuring Server Side Part
Set the web application to use static port 5555. To do
this, open SilverlightApplication.Web properties
Check ‘Specific port’ option and set ‘5555’ as a value
in the Web tab of the SilverlightApplication.Web properties.
Step 3. Adding and Setting Up a WCF Service
In order to make the client interact with the server,
we need a special service. Before we create this service we need to add a reference
to ‘PerpetuumSoft.Reporting.Silverlight.Server.dll’. Right-click ‘Referеnсes’
node in the SilverlightApplication.Web project and choose ‘Add Reference’ in
the popup menu.
This will open a ‘Reference
Manager’. In order to add a correct library version reference we should browse
the \Bin folder of the installed product and find ‘PerpetuumSoft.Reporting.Silverlight.Server.dll’
The library version we are
referencing to in our project is 22.214.171.124 as shown in the screenshot below.
we should add a Report Service Over HTTP template to the SilverlightApplication.Web
order to do that, right-click SilverlightApplication.Web project and choose
Add->New Item in the popup menu.
the Report Service Over HTTP (Silverlight & WinRT) template and specify
name of the service as ‘ReportService1.svc’.
Then click ‘Add’ button.
class will extend the
PerpetuumSoft.Reporting.Silverlight.Server.ReportServiceBase class containing
implementation of WCF Service for Silverlight ReportViewer.
Step 4. Creating a Report Template
First of all we need to create a data source structure.
In order to do that, right-click ReportService1.svc.cs and choose View Designer
in the popup menu.
To populate our sample application with the data we add
a Dataset control from the Toolbox by double click on it.
In the opened window we select the ‘Untyped’ dataset
to simplify the process of adding data to our sample.
that the dataset node (dataSet1) will appear in the designer.
Next, open a Tables Collection Editor (by clicking the button on the right of the Tables property).
table to the dataSet1 (click “Add” button and set ‘TableName’ property value to
‘Customers’ and ‘Name’ property value to ‘customers’).
open a Columns Collection Editor (by clicking the button on the right of the Columns
property) and add two columns by clicking ‘Add’ button and setting ‘ColumnName’
property value to ‘Name’ and ‘Phone’.
Now we have data structure defined and it’s necessary
to fill our sample ‘Customers’ table with the data itself. Since the data of
our sample table will be populated programmatically we need to switch to source
code view by right clicking the designer area and selecting ‘View Code’ item in
the contextual menu.
Add the following
namespaces to your code
Now we will fill in the values via overriding
OnLoadData method of the ReportService class.
protected override void
OnLoadData(IDictionary<string, object> parameters, string reportName, PerpetuumSoft.Reporting.Components.ReportSlot
base.OnLoadData(parameters, reportName, reportSlot);
DataRow row = customers.NewRow();
row["Name"] = "Johnson Leslie";
row["Phone"] = "613-442-7654";
row["Name"] = "Fisher Pete";
row["Phone"] = "401-609-7623";
row = customers.NewRow();
row["Name"] = "Brown Kelly";
row["Phone"] = "803-438-2771";
Note: Information about the queried document and its parameters is passed
in the method's parameters.
Now add the ‘ReportManager’ component (by double clicking
‘ReportManager’ on the ToolBox). This component is responsible for report
After that the ReportManager node
(reportManager1) will appear in the designer.
the ReportManager property of the ReportService service. In order to do that,
open ReportService properties in the Properties window.
reportManager1 from the list.
Step 5. Creating a Report
we will create a report. To do this, run Report Manager Editor by right clicking
reportManager1 and choosing Run Editor option.
Report Manager editor will appear.
Before we start creating a report
template we need to add a data source from which the report will be generated.
2) To do
this, we need to add Customers table to the Data binding list located on the
“Data sources” tab. Click “Add” button, specify ’Name’ value as ‘Customers’ in the
appeared “Edit object name” form and
select ‘dataSet1.Customers’ from the combo box list.
In the “Reports” tab, add a new object – “InlineReportSlot” by clicking the
Set the ReportName property value to CustomersReport. ( Note: you will get the required document
from the Report Manager exactly by that name).
Then press the “Run Designer” button to launch Report
In the opened Report Designer window
select the File\New menu item, and the form shown on the screen below will
In the opened Wizards Gallery select
Standard Report in the “New” tab and press OK.
The Standard Wizard window will
appear on the screen
Set document parameters as shown in
the following picture and add a data source using the “Add” button.
Select “Customers” by double
click in the appeared tree view.
Select the fields you want to output in the report (for
example, both fields Name and Phone):
Then press “ОК” to create a template.
Now save the template and close the
Step 6. Adding and Setting Up a Silverlight
1) Now it’s time to add a Report Viewer component
to our Silverlight application to be able to display a report. In order to do
that, we should add a reference to PerpetuumSoft.Reporting.Silverlight.Client
assembly which contains ReportViewer. Right click ‘References’ of the
SilverlightApplication project in the ‘Solution Explorer’ and choose’ Add Reference’
item in the popup menu.
library is located in the \SilverlightBin folder of the installed product.
You should also add a reference to ‘System.Windows.Controls.Toolkit’
and ‘System.Xml.Linq’ assemblies.
After that, open MainPage.xaml in the Designer and add
“rss” xml namespace for the PerpetuumSoft.Reporting.Silverlight.Client assembly
Then add ReportViewer element to the
After you made changes the
UserControl section should look like this:
After that, open MainPage source
code and change/add the lines to make code look like this:
public partial class MainPage : UserControl
Loaded += new RoutedEventHandler(MainPage_Loaded);
void MainPage_Loaded(object sender, RoutedEventArgs
RenderDocument() invocation leads to the rendering of the current report on the
server and displaying it in the Report Viewer.
Step 7. Launching an Application.
our application we need to set the SilverlightApplication.Web project as a
StartUp. In order to do that, right click SilverlightApplication.Web and select
‘Set as StartUp Project’ in the popup menu.
Then launch an application by clicking
the “Start Debugging” button on the main Visual Studio
The popup message indicating that
the Development server has been started on port 5555 will appear in the system
And the report rendering progress
bar is displayed.
As a result, we will have our sample
We have examined the basic steps and
got a simple and quite operable application. In our case we did not have to
write thousand lines of code – we just used a ready-made implementation. In most
cases this will be enough. If you require a more complex behavior than the one
provided in this sample, you can change a lot of aspects in SharpShooter
Reports.Silverlight operation as well as the appearance of the Report Viewer
If you have any questions regarding the SharpShooter Reports.Silverlight
integration don’t hesitate to contact us at email@example.com