Web designer in react app example not working

2 Answers 78 Views
Report Designer - Web
Shoshanah
Top achievements
Rank 1
Iron
Shoshanah asked on 16 May 2023, 05:21 PM
I am having trouble integrating the web report designer into my react app using instructions in https://docs.telerik.com/reporting/knowledge-base/how-to-use-web-report-designer-in-react-js. 

Looking for help, I downloaded the recommended example for integrating web designer into react apps (https://github.com/telerik/reporting-samples/tree/master/WebReportDesigner%20in%20React%20Application/src).

When loading this example in Visual Studio code, I get a 404 error. I have done a NPM install and NPM start. I am new to react, so may be missing a step?

2 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 18 May 2023, 12:16 PM

Hello Shoshanah,

Thank you for the provided information regarding the issue!

I was able to reproduce the problem locally. It is caused by the fact that the script reference that retrieves the Web Report Designer JS from https://demos.telerik.com/reporting had hardcoded an older version than the latest version that we have currently released(we update the live demo after each release).

In order to avoid this problem, you can modify the script references in public/index.html as follows:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>

  <script src="https://demos.telerik.com/reporting/api/reports/resources/js/telerikReportViewer"></script>

  <script src="https://demos.telerik.com/reporting/api/reportdesigner/designerresources/js/webReportDesigner/"></script>

I will update the repo shortly with this change, please test it also on your end and let me know if that helps.

Lastly, I would like to mention that if you are using the latest LTS release of Node JS, you may need to update the versions of the react packages in the project because of an SSL issue - node.js - Error message "error:0308010C:digital envelope routines::unsupported" - Stack Overflow

Thank you for helping us improve Telerik Reporting!

Regards,
Dimitar
Progress Telerik

Stay tuned by visiting our roadmap and feedback portal pages, enjoy a smooth take-off with our Getting Started resources, or visit the free self-paced technical training at https://learn.telerik.com/.
0
Shoshanah
Top achievements
Rank 1
Iron
answered on 18 May 2023, 03:44 PM

Thank you.

One follow-up – – I noticed that all examples/instructions use a demo UrL to access web designer JavaScript , versus an installed copy of the web designer. I am planning to integrate this in our application so users can modify reports.

However, I am not able to find instructions for how to install web designer, and didn’t see and NPM package for the web designer -- is it only available in demos right now?

Shoshanah
Top achievements
Rank 1
Iron
commented on 18 May 2023, 04:23 PM

I implemented your suggested changes, including addressing the SSL issue. I’m still receiving a 404 error.

I have attached a copy of the Public/index.html and Package.json files.

 

Dimitar
Telerik team
commented on 19 May 2023, 03:43 PM

We discussed the first topic in the ticket but to also mention it here, we do not have an NPM package for the Web Report Designer yet, however, the Web Report Designer can be implemented locally by following the How to set up the Web Report Designer in .NET Core 3.1 and .NET 5+ applications - Telerik Reporting article.

On the topic of the errors, please test pulling the latest changes from the telerik/reporting-samples (github.com) repo. I just merged the change with the versions and now the React Web Report Designer example should work out of the box, let me know if that is not the case.

Tags
Report Designer - Web
Asked by
Shoshanah
Top achievements
Rank 1
Iron
Answers by
Dimitar
Telerik team
Shoshanah
Top achievements
Rank 1
Iron
Share this question
or