Getting Started with SharpShooter Reports.WinRT

Product prerequisites

The following product prerequisites are required to be installed prior to starting the project development:

⦁    Microsoft Visual Studio 2012 or higher;
⦁    .NET Framework 3.5 or higher for the Server side project and .NET 4.5 or higher for Client side project;
⦁    ASP.NET 2.0 or higher;
⦁    SharpShooter Reports.WinRT 6.5 or higher.
⦁    Microsoft Windows 8

Step 1. Creating a project with Visual Studio

1.    To create a new Windows Store project in Visual Studio, go to File tab and select “New > Project” option.
In the opened window find “Windows Store” option in the left pane, then click “Blank App (XAML)” item
in the middle pane to create a blank project template. In the “Name” box set the project name as “SampleApplication”,
then click “OK” to close the window.

 

2.    Next, we need to add a server side project to our solution. In order to do this, open File menu,
 select “Add > New Project”. In the opened window choose “Web” option in the left pane, then select
“Asp.NET Empty Web Application project“ in the middle pane. Set the name of the project as “SampleApplication.Web”,
then click “OK” to close the window.

 




Step 2. Configuring server side properties

To open server side project configuration properties right click on “SampleApplication.Web” project
and select “Properties” tab at the bottom of the context menu.


 
In the opened window select “Web” tab and make sure “Use Visual Studio Development Server”
option is checked,  type “5555” as ”Specific Port”  value. Click “Save selected items” in the File menu
to save the project properties, and then close the Properties window.



 
Creating a report service

In this step we will add the report service as our server side component.

1.    Select “SampleApplication.Web” in the Solution Explorer. Then click on “Add/New Item” in the
Project menu. Choose “SharpShooter Reports > Silverlight & WinRT” in the left pane of the opened window,
next select “Report Service Over HTTP (Silverlight & WinRT)” in the middle pane. Set the name for the
component as “ReportService.svc” and click “Add” to add the component to our server side project.


 
2.    In Solution Explorer right click on “ReportService.svc.cs” file to open the context menu, then press
“View Designer” to switch to design view.
 



Creating and populating a sample data source

To bring data into our application we will need to establish connection with a data source, in other words,
to bind data to our application. To do this, switch to Toolbox and choose the DataSet element from Data tab
to set data structure. Add the element by double clicking on it. In the “Add Dataset” window select “Untyped dataset”
and click the “OK” button. Since we have no dataset schema available, we need to choose the Untyped dataset
as a structure in which we can keep information. (For additional information on dataset types please refer to
http://msdn.microsoft.com/en-us/library/8bw9ksd6%28v=vs.71%29.aspx.)


 
Select the added “dataSet1” element, then choose the Tables property on the Property Grid and click the button
to open the Tables Collection Editor. Click the “Add” button to add a table. Set the TableName property to “SampleData”.


 
Select the Columns property and click the button to open the Columns Collection Editor. Click the “Add” button
to add three columns to our table. Set the ColumnName property to “LastName”, “FirstName” and “Phone” accordingly. 
Make sure the DataType property for each column is set as “System.String”.


 
To display the data in our report we will need to populate our data source. To do this, open a ReportService.svc.cs file
in Code view and override OnLoadData method in service class as follows:

protected override void OnLoadData(
    System.Collections.Generic.IDictionary<string, object> parameters,
    string reportName, PerpetuumSoft.Reporting.Components.ReportSlot reportSlot)
{
    base.OnLoadData(parameters, reportName, reportSlot);
    dataTable1.Rows.Clear();
    dataTable1.Rows.Add(new object[] { "Black", "John", "123-23-23" });
    dataTable1.Rows.Add(new object[] { "Brown", "Mike", "433-32-13" });
    dataTable1.Rows.Add(new object[] { "White", "Alexander", "843-98-64" });
    dataTable1.Rows.Add(new object[] { "Gray", "Harry", "947-11-23" });
    dataTable1.Rows.Add(new object[] { "Smart", "Ben", "453-43-11" });
}



Configuring a report service.  Creating a report template.

To get started on creating and using reports in our application we will need to add a ReportManager component to it. 
The ReportManager is used for storing report templates and has a wide range of report editing and report generation features.

1.    To place the ReportManager component, switch to ReportService.svc.cs in Design view and add the ReportManager
       element to it from Toolbox by double clicking.


 
2.    Go to ReportService properties window, select “Report Manager” and from the dropdown list choose “reportManager1”
       component that we have just added.


 

3.    Double click on the component to open the ReportManager editor. Go to the “Data sources” tab and click the “Add” button.
      Set the name of the data source to “SampleData”, choose “dataSet1.SampleData” as data source value and click the “OK” button.


 
4.    Next, go to the “Reports” tab. Click the “Add” button and select the “InlineReportSlot” item. (Note: The InlineReportSlot provides
      a template, serialized in the application code. For detailed description of report slots used by the ReportManager please refer to our
      knowledge base article http://helpcenter.perpetuumsoft.com/KB/a192/reportmanager-and-reportslot.aspx.)


 

5.    Set the name for the added slot and click the “Run Designer” button to start Reports Designer:


                

6.    To create a new empty template, choose the “New” item in the File menu.
Select the “Blank C# Report” item in the Wizards Gallery and click the “OK” button.



 
7.    The process of table creation can be simplified with the use of Table Wizard. In order to do this, go to the “Insert” tab
      and click the “Table” button.


 
8.    Select “SampleData” created in step 3 as our Data Source and add all available fields from the list. Then press “Next”.
      Choose “List” as “Layout type”, and specify “Lastname “and “Firstname” as sorting fields.
 

 






9.    To improve the appearance of report, select “SimpleGrey” from “Style Collection” list in Home tab.




10.  Save changes (by pressing CTRL + S or using File menu > Save) and close the designer. Press “OK” in ReportManager.
      Now the configuration of server side part is completed.



Step 3. Configuring a client application

Adding a component


1.     Right click the “References” element in Solution Explorer of your client application. 
       In the opened context menu select “Add Reference…”
 



2.    In Windows\Extensions tab choose SharpShooter Reports.WinRT.

 

3.    Add the following lines to MainPage.xaml  (the lines to add are marked yellow):

<Page
    x:Class="SampleApplication.MainPage"
    xmlns:local="using:SampleApplication"
    xmlns:reporting="using:PerpetuumSoft.Reporting.WinRT.Client"
    mc:Ignorable="d">
  
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <reporting:ReportViewer x:Name="reportViewer"
            ServiceUrl="http://localhost:5555/ReportService.svc"
            ReportName="SampleReport" />
    </Grid>
</Page>


4.    Open MainPage.xaml.cs and add the following code (the code to add is marked yellow):

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        Loaded += MainPage_Loaded;
    }
  
    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        reportViewer.RenderReport();
    }
}



Setting the permissions


Before we run our application we need to set the permissions. Double click the “Package.appxmanifest” element
to open the Manifest designer.


 

To inform the user on export process the component uses toast notification. (Note: A toast notification is an onscreen
pop-up informing message). To enable this, press the Application UI tab and set the value of “Toast capable” option to “yes”.
In case you don’t see the above mentioned tab, make sure you selected “All Image Assets” option in Visual Assets
configuration settings.


 

To enable your application access the private networks check the “Private Networks” element on “Capabilities” tab.


 

Running an application



Make sure your sample is ready and both your projects are configured to run simultaneously. In order to do this,
right click on “SampleApplication” solution container in Solution Explorer and select “Properties” tab in the opened context menu.



 

In solution properties configuration window find “Startup Project” in the left pane, check “Multiple startup projects”
option and choose “Start” as Action parameter for both projects of your solution. Click “OK” to apply the changes and close the window.


 

Then press F5 button to run the project. If you have done everything correctly, the application will start and you will see a generated
report that displays the data we entered while creating our project.





Add Feedback