Embedding the Bold Reports Viewer in Xamarin with WebView

Overview

This article explains how to embed the Bold Reports Viewer inside a Xamarin application using a WebView control. It also describes how to generate a service authorization token to authenticate with a Bold Reports Server.

Prerequisites

Xamarin.Forms project setup.
Access to a Bold Reports Server instance.
Valid Report Server user credentials.

Steps

Step 1: Add WebView in MainPage.xaml

Open MainPage.xaml and add the following WebView control:

<WebView x:Name="BoldReports" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Background="Green"/>

Step 2: Generate the Service Authorization Token

Open MainPage.xaml.cs and add the following method to generate the token:

public async Task<string> GenerateTokenAsync()
{
   string userName = "guest@boldreports.com"; // Provide Report Server Username
   string password = "demo"; // Provide Report Server Password

   using (var client = new HttpClient())
   {
       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 = await client.PostAsync("https://on-premise-demo.boldreports.com/reporting/api/site/site1/token", content); // Provide Report Server URL
       string resultContent = await result.Content.ReadAsStringAsync();
       var token = JsonConvert.DeserializeObject<Token>(resultContent);

       return token.token_type + " " + token.access_token;
   }

Step 3: Embed the Report Viewer in the WebView

Use the generated token to load the Bold Reports Viewer inside the WebView:

       protected override async void OnAppearing()
       {
           base.OnAppearing();

           //string authToken = await GenerateTokenAsync();

           // Updated HTML with latest Bold Reports scripts and dynamic token
           var html = $@"
<!DOCTYPE html>
<html xmlns=""http://www.w3.org/1999/xhtml"">
   <head>
       <title>Report Viewer first HTML page</title>
   	
<!-- Report Viewer component styles -->
<link href=""https://cdn.boldreports.com/11.1.10/content/v2.0/tailwind-light/bold.report-viewer.min.css"" rel=""stylesheet"" />
<!-- Report Viewer component dependent script -->
<script src=""https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js""></script>
<script src=""https://cdn.boldreports.com/11.1.10/scripts/v2.0/common/bold.reports.common.min.js""></script>
<script src=""https://cdn.boldreports.com/11.1.10/scripts/v2.0/common/bold.reports.widgets.min.js""></script>
<!-- Report Viewer component script -->
<script src=""https://cdn.boldreports.com/11.1.10/scripts/v2.0/bold.report-viewer.min.js""></script>

<style>
       html, body {{
           height: 100%;
           width: 100%;
           margin: 0;
           padding: 0;
       }}
       .viewer-host {{
           height: 100vh; /* Full viewport height */
           width: 100vw;  /* Full viewport width */
       }}
       #viewer {{
           height: 100%;
           width: 100%;
       }}
   </style>
</head>
<body>
   <div class=""viewer-host"">
       <div id=""viewer""></div>
   </div>

   <script type=""text/javascript"">
       $(function () {{
           $(""#viewer"").boldReportViewer({{
            reportServiceUrl: 'https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer',
               reportServerUrl: 'https://on-premise-demo.boldreports.com/reporting/api/site/site1',
               serviceAuthorizationToken: '{authToken}',
               reportPath: '/Sample Reports/Company Sales'
           }});
       }});
   </script>
</body>
</html>

";

Step 4: Run the Application

Build and run the application. The Bold Reports Viewer should load and display the report within the Xamarin mobile application.

Screenshots

App Icon in Device Menu
Report Viewer displaying the report

References

For more details on creating the HTML file and embedding the viewer, refer to:
Embedding Bold Reports Viewer in HTML (Report Server Integration).

Was this article useful?

Dislike

Comments (0)