Integrate Bold Reports to Blazor Webassembly app

[SZL]

Dear Support,

I try integrate Bold Reports (local report viewer) to my Blazor Webassembly app following this tutorial:

https://help.boldreports.com/embedded-reporting/javascript-reporting/report-viewer/how-to/use-javascript-reportviewer-in-blazor-web-assembly-application/

but the WebApi part is not clear for me. 

Do you have any working example with blazor webassembly and bold reports?

I would like display a simple report in my blazor page for start..

How can I set the path of the report file and which folder need the report file placed?

Thank you very much!

BR, László

[SZL]

Hy,

I receive the following answer from Manoranjan R, but I not see here at this post so I insert it:

"

Hi SZL,

Thanks for contacting Bold Reports support.

Please find the web assembly sample below.
https://github.com/boldreports/blazor-webassembly-reporting-components

Reports are processed on the server side. So, we need a web API controller for server side processing. Please refer to the below documentation.
https://help.boldreports.com/embedded-reporting/javascript-reporting/report-viewer/display-ssrs-rdl-report-in-javascript-application/#create-web-api-service

Using the ReportPath property, you can provide your report name. Please refer to the below documentation.

Java script
https://github.com/boldreports/blazor-webassembly-reporting-components/blob/master/wwwroot/boldreports-interop.js#L5

Razor page:
https://github.com/boldreports/blazor-webassembly-reporting-components/blob/master/Pages/ReportViewer.razor#L28

You can place the report in any folder in your application. But you have to provide the correct path in the controller. Please refer the below code snippet.

public void OnInitReportOptions(ReportViewerOptions reportOption)

{

string basePath = _hostingEnvironment.WebRootPath;

// Here, we have loaded the sales-order-detail.rdl report from application the folder wwwroot\Resources. sales-order-detail.rdl should be there in wwwroot\Resources application folder.

System.IO.FileStream reportStream = new System.IO.FileStream(basePath + @"\Resources\sales-order-detail.rdl", System.IO.FileMode.Open, System.IO.FileAccess.Read);

reportOption.ReportModel.Stream = reportStream;

}

https://help.boldreports.com/embedded-reporting/javascript-reporting/report-viewer/report-service/create-aspnet-core-web-api-service/#add-web-api-controller

If you still have any queries on this, Please create a support ticket for this.
https://support.boldreports.com/support/tickets/create

Regards,

Manoranjan R

"

Thank you for the detailed answer!

I have some additional question following your instructions:

- The web assembly sample not contains the server side code, can I find this example server code in github too?

- The second url contains samples of Web API Services, but it is ASP.Net and ASP.Net.Core. Which nugets should I use in Blazor Server side? Do you have api example for Blazor Server side? Or should I create a new project with Asp.Net Core Web Api for reporting?

- Cannot download the sales-order-detail.rdl sample from the provided url. Probably the link is broken?

- I use Bootstrap 5 Syncfusion template in my project. If I good see the Bold Reports uses the material theme, there are theme for Bootstrap 5? After I integrate the Bold Reports CSS files to my project (I found only bootsrap4) lot of formatting issue appear in my pages (navmenu hover issue, grid page links formatting issue etc.). I found that I should be integrate compatibility css files, but when I use these CSS files the toolbar of the reportviewer is empty (no icons inside)

With original styles (little formattings issues around everywhere):

  <link rel='nofollow' href="https://cdn.boldreports.com/3.3.23/content/bootstrap4/bold.reports.all.min.css" rel="stylesheet" />

    <link rel='nofollow' href="https://cdn.boldreports.com/3.3.23/content/bootstrap4/bold.reportdesigner.min.css" rel="stylesheet" />

    <link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />

    <link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />

Compatibility styles (empty toolbar in report viewer):

    <link rel="stylesheet" rel='nofollow' rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/bootstrap4.css" />

    <link rel='nofollow' rel='nofollow' href="https://cdn.boldreports.com/3.3.23/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />

    <link rel='nofollow' rel='nofollow' href="https://cdn.boldreports.com/3.3.23/content/bootstrap4/bold.theme.compatibility.min.css" rel="stylesheet" />

This happen because I use bootstrap4 theme? Therefore I ask for bootstrap5 theme is available?

Thank you very much!

BR, László

[Manoranjan Rajendran]

Hi SZL,

Thanks for the update.

Please find the details from below table.

Queries	Details
The web assembly sample not contains the server side code, can I find this example server code in github too?	Yes, please find the sample from below link, https://github.com/boldreports/demo-services
The second url contains samples of Web API Services, but it is ASP.Net and ASP.Net.Core. Which nugets should I use in Blazor Server side?  Do you have api example for Blazor Server side?   Or should I create a new project with Asp.Net Core Web Api for reporting?	You have to use the ASP.NET core for Blazore server application. Please find the Blazor server sample from below link, https://github.com/boldreports/blazor-reporting-components   If you want, you can create the separate API for report processing.
Cannot download the sales-order-detail.rdl sample from the provided url. Probably the link is broken?	Please download the report from below link, http://www.syncfusion.com/downloads/support/directtrac/general/ze/sales_order_detail109018224   Get the all sample reports from below GitHub location, https://github.com/boldreports/demo-services/tree/master/Resources/docs https://github.com/boldreports/demo-services/tree/master/Resources/demos/Report
I use Bootstrap 5 Syncfusion template in my project. If I good see the Bold Reports uses the material theme, there are theme for Bootstrap 5? After I integrate the Bold Reports CSS files to my project (I found only bootsrap4) lot of formatting issue appear in my pages (navmenu hover issue, grid page links formatting issue etc.). I found that I should be integrate compatibility css files, but when I use these CSS files the toolbar of the reportviewer is empty (no icons inside)	If you are using Bold Reports and syncfusion control. You have to use the compatibility styles and scripts. Please refer to the below documentation for this. https://help.boldreports.com/embedded-reporting/blazor-reporting/report-viewer/how-to/use-bold-reports-with-syncfusion-blazor/   Issue may occurs due to some scripts referring order. Could you please share your _host.cshtml with us. We will check the issues with our end and share the details.
his happen because I use bootstrap4 theme? Therefore I ask for bootstrap5 theme is available?	No, we don’t have support for Bootstrap 5 theme.

Regards,

Manoranjan R

[SZL]

Thank you, I will check all of the infos.

[Manoranjan Rajendran]

Hi SZL,

Thanks for the update.

Let us know if you have any other queries on this.

Regards,

Manoranjan R

[SZL]

Hello,

Sorry for delay. So I think it is a good practice to separate the report viewer inside the Blazor.Server app. In this case the boldreport css files will not modify the main project styles.

So I created an ASP.NET.CORE controller and view inside the Blazor.Server app with its own _Layout.cshtml.

I load the boldreport references inside this _Layout.cshtml and I load the reportviewer into an IFrame with POST target.

I attach my sample project that works well! After run the project please click on "POST demo" button without any input modification and the report will appear inside the iframe.

So the complete scenario works very well inside the sample project, but unfortunatelly not in my production project.

I discovered that the only difference in the two project are these lines in the Program.cs file: 

builder.Services.AddControllersWithViews().AddAllJsonOptions();

Can you help me please why these lines kills the Bold Report loading inside the iframe?

When I comment out these lines the above conception works well in my production project too.

Thank you for help!

BR, László

Attachment: IframeDemo_8443927c.zip

[Manoranjan Rajendran]

Hi SZL,

Thanks for the update.

We will check and share the details of this on or before March 9th, 2022. Meanwhile, could you please check your application by adding DefaultCaseControllerConfigAttribute attribute in controller. Please refer to the below documentation for this. Please check and share the details with us.

https://help.boldreports.com/report-viewer-sdk/how-to/use-the-report-viewer-with-camel-case-serializer-settings-application/

Regards,

Manoranjan R

[Manoranjan Rajendran]

Hi SZL,

We have tested the reported issue from our end. We were unable to add your mentioned code to the attached sample and are throwing compilation errors. Could you please share the sample, including your issue code. It is helpful for our further validation.

Could you please confirm that the earlier provided solution did not resolved your issue?

Regards,

Manoranjan R

[SZL]

Hello,

I attach a new sample with the affected code in the Program.cs file:

So when you comment out the above lines in the attached sample project, the report viewer will work.

When you run the above code without any change in the sample project, the report viwer will not load the report (there are no any error message, only the report viewer area is empty).

Thank you!

BR, SZL

Attachment: IframeDemo2_aae83ead.zip

[Manoranjan Rajendran]

Hi SZL,

Thanks for the update.

We were able to reproduce the reported issue. We are checking with issue cause. We will share the details of this on or before March 16th, 2022.

Regards,

Manoranjan R

[Manoranjan Rajendran]

Hi SZL,

We have validated the reported issue. When you use the DefaultContractResolver ​in your application, the property name is serialized with a camel case. To resolve this issue, we suggest changing the property name in boldreports-interop.js.

Issue snap:

Change to the below code snippet:

reportPath: reportViewerOptions.ReportName,

reportServiceUrl: reportViewerOptions.ServiceURL,

Regards,

Manoranjan R

[SZL]

Thank you very much!

[Manoranjan Rajendran]

Hi SZL,

Thanks for the update.

Let us know if you need any other assistance with this.

Regards,

Manoranjan R

[SZL]

Hi,

No, thank you, its working fine!

Have a nice day!

BR, László

[Manoranjan Rajendran]

Hi SZL,

Thanks for the update.

Have a nice day!

Regards,

Manoranjan R