Getting Started with Universal Windows Platform Application

This section describes how to embed the Report Server report with UWP application using ReportViewer.

Create your first SfReportViewer application in UWP

Create a new Universal Windows Platform project through Visual Studio Designer.

Add SfReportViewer control from XAML

This section demonstrates how to create an application using SfReportViewer control from XAML. For that, you must add the SfReportViewer reference to your application.

Add Assembly reference

Right-click on the reference folder in solution explorer and select Add Reference.
Choose Universal Windows Platform -> Extensions -> Syncfusion Controls for UWP XAML.
Add the following namespace in your XAML page.
```
xmlns:Reports="using:Syncfusion.UI.Xaml.Reports"
```
NOTE

Adding the extension Syncfusion Controls for UWP XAML, adds all the Syncfusion UWP controls, you can also add the SfReportViewer reference and its dependent assemblies from the following location. C:\Program Files (x86)\Syncfusion\Report Platform SDK\Assemblies for Universal Windows Platform\
You can initialize the SfReportViewer control in XAML as follows.
```
<Reports:SfReportViewer x:Name="ReportViewer"/>
```
You can also create SfReportViewer control through code with the help of following namespace.
```
using Syncfusion.UI.Xaml.Reports;
```

Add SfReportViewer control from Toolbox

Drag and drop SfReportViewer control from toolbox to design page of your application, Syncfusion.SfReportViewer.UWP assembly will be added automatically to an application.
Right-click on the reference folder in solution explorer and select Add Reference.
Add the following dependent assemblies,
- Syncfusion.DocIO.UWP
- Syncfusion.Pdf.UWP
- Syncfusion.SfGridCommon.UWP
- Syncfusion.SfChart.UWP
- Syncfusion.SfGauge.UWP
- Syncfusion.SfCellGrid.UWP
- Syncfusion.SfInput.UWP
- Syncfusion.SfMaps.UWP
- Syncfusion.SfShared.UWP
- Syncfusion.SfTreeNavigator.UWP
- Syncfusion.XlsIO.UWP

Load Report Server Report

This section demonstrates how to run Report Server report to using SfReportViewer control.

Set the Report Server ReportPath, ServiceAuthorizationToken and ReportServiceURL in the ReportViewer properties.

 ReportViewer.ReportPath = @"/Sample Reports/Company Sales";
 ReportViewer.ServiceAuthorizationToken = this.GenerateToken("http://reportserver.syncfusion.com/", "guest", "demo");
 ReportViewer.ReportServiceURL = @"http://reportserver.syncfusion.com/ReportService/api/Viewer";
 ReportViewer.RefreshReport();

NOTE

In case, if we have to load the reportPath using guid instead of report location then we have a support to set guid of the report in ReportPath as like as ‘ReportViewer.ReportPath = @”91f24bf1-e537-4488-b19f-b37f77481d00”’.

public string GenerateToken(string serverUrl, string userName, string password)
 {
     using (var client = new HttpClient())
     {
         client.BaseAddress = new Uri(serverUrl);
         client.DefaultRequestHeaders.Accept.Clear();

         var content = new FormUrlEncodedContent(new[]
         {
         new KeyValuePair<string, string>("grant_type", "password"),
         new KeyValuePair<string, string>("username", userName),
         new KeyValuePair<string, string>("password", password)
         });

         var result = client.PostAsync("/api/Token", content).Result;
         string resultContent = result.Content.ReadAsStringAsync().Result;
         var token = JsonConvert.DeserializeObject<Token>(resultContent);
            
         return token.token_type + " " + token.access_token;    
     }    
 }    

public class Token
 {
     public string access_token { get; set; }

     public string token_type { get; set; }

     public string expires_in { get; set; }

     public string userName { get; set; }

     public string serverUrl { get; set; }

     public string password { get; set; }
 }

Run the sample application the following output will be displayed as result.

Load RDL reports

This section demonstrates how to run RDL report using SfReportViewer control.

Set the ReportPath, ProcessingMode properties of SfReportViewer in page loaded event.

   ReportViewer.ReportPath = @"~/App_Data/GroupingAgg.rdl";
   ReportViewer.ProcessingMode = ProcessingMode.Remote;

NOTE

Add your report files to your Web service application’s App_Data folder. You can obtain sample rdl/rdlc files from Syncfusion installed location (%userprofile%\AppData\Local\Syncfusion\EssentialStudio\20.4.0.48\Common\Data\ReportTemplate).

Create WebAPI service for SfReportViewer

SfReportViewer control requires WebAPI service to process and render RDL/SSRS reports. This section helps you to create WebAPI service for rendering RDL/SSRS reports to set the ReportServiceURL property of SfReportViewer.

Open Visual Studio and create a new project by clicking New Project. Select the Web category, select the ASP.NET Web Application template, and then click OK. The following screenshot displays the Project Creation Wizard.
Add following references to your application.
- System.Web.Routing
- System.Net.Http
- System.Net.Http.WebRequest
- System.Net.Http.Formatting
- System.Web.Http
- System.Web.Http.WebHost
- Syncfusion.Linq.Base
- Syncfusion.EJ
- Syncfusion.EJ.MVC
- Syncfusion.EJ.ReportViewer
- Syncfusion.Pdf.Base
- Syncfusion.XlsIO.Base
- Syncfusion.DocIO.Base
- Syncfusion.Shared.Wpf
- Syncfusion.Chart.Wpf
- Syncfusion.Gauge.Wpf
- Syncfusion.SfMaps.Wpf
NOTE

Refer the above assemblies from the installed location, C:\Program Files (x86)\Syncfusion\Report Platform SDK\Assemblies
Refer System.Web.Http, System.Web.Http.WebHost, System.Net.Http.WebRequest and System.net.Http.Formatting assemblies from ASP.NET WebApi NuGet package.
Add WebAPI controller to your application as shown in below screen shot.

Inherit IReportController

The ApiController inherits the IReportController and you can add the following code example to its methods definition in order to process the report file. The interface IReportController contains the required actions and helper methods declaration to process the report. The ReportHelper class contains helper methods that helps to process Post/Get request from control and return the response to control.

using System;
using Syncfusion.EJ.ReportViewer;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Syncfusion.Reports.EJ;
using System.Collections;

namespace WebAPIService
{
    public class ReportAPIController: ApiController, IReportController
    {
        //Post action for processing the rdl/rdlc report 
        public object PostReportAction(Dictionary<string, object> jsonResult)
        {
            return ReportHelper.ProcessReport(jsonResult, this);
        }

        //Get action for getting resources from the report
        [System.Web.Http.ActionName("GetResource")]
        [AcceptVerbs("GET")]
        public object GetResource(string key, string resourcetype, bool isPrint) 
        {
            return ReportHelper.GetResource(key, resourcetype, isPrint);
        }
        
        //Method will be called when initialize the report options before start processing the report        
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            //You can update report options here
        }
        
        //Method will be called when reported is loaded
        public void OnReportLoaded(ReportViewerOptions reportOption) 
        {
            //You can update report options here
        }
    }
}

WebAPI Routing

Right click the project, select Add and select Global.asax file from the listed templates.

You can route the WebAPI in Application_Start event into Global.asax file as follows.

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.Web.Http;

namespace WebAPIService
{
    public class Global : System.Web.HttpApplication
    {
       protected void Application_Start(object sender, EventArgs e)
       {
           System.Web.Http.GlobalConfiguration.Configuration.Routes.MapHttpRoute(
           name: "DefaultApi",
           routeTemplate: "api/{controller}/{action}/{id}",
           defaults: new { id = RouteParameter.Optional });
           AppDomain.CurrentDomain.SetData("SQLServerCompactEditionUnderWebHosting", true);
       }        
    }
}

Run the WebAPI service application, copy the URL.

Assign the URL to ReportServiceURL property of SfReportViewer in page loaded event.

ReportViewer.ReportServiceURL = @"http://localhost:51332//api/RDLReport/";
ReportViewer.RefreshReport();

Run the sample UWP application the following output will be displayed as result.