Getting Started: SharpShooter Reports.Silverlight

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.

Product Prerequisites

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
  •          Silverlight 5.0
  •          Microsoft Silverlight 5 Toolkit
  •          SharpShooter Reports.Silverlight 6.0 or higher.

Creating a Sample Application


Step 1. Creating a Project

1)      To begin with, we should create a new Silverlight Application project in MS Visual Studio.


 

2)      Let’s call our project a ‘SilverlightApplication’


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



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

1)      Set the web application to use static port 5555. To do this, open SilverlightApplication.Web properties



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

1)      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’ in it.

The library version we are referencing to in our project is 6.5.0.86 as shown in the screenshot below.

 

 

 

2)      After that, we should add a Report Service Over HTTP template to the SilverlightApplication.Web project. 

In order to do that, right-click SilverlightApplication.Web project and choose Add->New Item in the popup menu.


     

 

Select the Report Service Over HTTP (Silverlight & WinRT) template and specify name of the service as ‘ReportService1.svc’.  Then click ‘Add’ button.


     

The ReportService class will extend the PerpetuumSoft.Reporting.Silverlight.Server.ReportServiceBase class containing implementation of WCF Service for Silverlight ReportViewer.


Step 4. Creating a Report Template

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


2)      To populate our sample application with the data we add a Dataset control from the Toolbox by double click on it.


3)      In the opened window we select the ‘Untyped’ dataset to simplify the process of adding data to our sample.

After that the dataset node (dataSet1) will appear in the designer.


      


4)      Next, open a Tables Collection Editor (by clicking the button on the right of the Tables property).

5)      Add ‘Customers’ table to the dataSet1 (click “Add” button and set ‘TableName’ property value to ‘Customers’ and ‘Name’ property value to ‘customers’).


6)      After that, 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’.


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


8)      Add the following namespaces to your code


System.Collections.Generic

System.Data

       

 

9)      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 reportSlot)

{

    base.OnLoadData(parameters, reportName, reportSlot);

    DataRow row = customers.NewRow();

    row["Name"] = "Johnson Leslie";

    row["Phone"] = "613-442-7654";

    customers.Rows.Add(row);

    row = customers.NewRow();

    row["Name"] = "Fisher Pete";

    row["Phone"] = "401-609-7623";

    customers.Rows.Add(row);

    row = customers.NewRow();

    row["Name"] = "Brown Kelly";

    row["Phone"] = "803-438-2771";

    customers.Rows.Add(row);

}

 

Note: Information about the queried document and its parameters is passed in the method's parameters.

10)   Now add the ‘ReportManager’ component (by double clicking ‘ReportManager’ on the ToolBox). This component is responsible for report generation.


After that the ReportManager node (reportManager1) will appear in the designer.


11)   Set the ReportManager property of the ReportService service. In order to do that, open ReportService properties in the Properties window.


And select reportManager1 from the list.



Step 5. Creating a Report

1)      Now we will create a report. To do this, run Report Manager Editor by right clicking reportManager1 and choosing Run Editor option.


                A 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 “Add” button.


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

        
       

 

In the opened Report Designer window select the File\New menu item, and the form shown on the screen below will appear.

      

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



Step 6. Adding and Setting Up a Silverlight ReportViewer component.


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.

 

 

      The 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 as follows:

xmlns:rss="clr-namespace:PerpetuumSoft.Reporting.Silverlight.Client;assembly=PerpetuumSoft.Reporting.Silverlight.Client"


  

 

 

Then add ReportViewer element to the Grid Section.

<rss:ReportViewer x:Name="ReportViewer1"

    ServiceUrl="http://localhost:5555/ReportService1.svc"

    ReportName="CustomersReport"/>


 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

{

public MainPage()

{

    InitializeComponent();

    Loaded += new RoutedEventHandler(MainPage_Loaded);

}

 

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

    ReportViewer1.RenderDocument();

}

}


 

 


Note: 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.

1)      To launch 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 toolbar.



The popup message indicating that the Development server has been started on port 5555 will appear in the system tray.



And the report rendering progress bar is displayed.


As a result, we will have our sample report presented.


 

Conclusion

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

If you have any questions regarding the SharpShooter Reports.Silverlight integration don’t hesitate to contact us at support@perpetuumsoft.com  

Add Feedback