Skip to content

Commit 9b32ef9

Browse files
petar-i-todorovpetar-i-todorov
committed
docs: update react articles
1 parent 52807e8 commit 9b32ef9

File tree

2 files changed

+59
-77
lines changed

2 files changed

+59
-77
lines changed

‎embedding-reports/display-reports-in-applications/web-application/react-report-viewer/how-to-use-react-report-viewer-with-rest-service.md‎

Lines changed: 50 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Using with REST Service
33
page_title: Using the React Report Viewer with a Reporting REST Service
4-
description: "Understand the prerequisites and steps necessary to add the React Report Viewer component to a new React application. Learn how to display a report coming from a Telerik Reporting REST Service."
4+
description: "Understand the prerequisites and steps necessary to add the React Report Viewer component to your React application. Learn how to display a report server by a Telerik Reporting REST Service."
55
slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/react-report-viewer/how-to-use-react-report-viewer-with-rest-service
66
tags: how, to, use, react, report, viewer, with, rest, service
77
published: True
@@ -11,100 +11,84 @@ previous_url: /react-report-viewer-with-rest-service
1111

1212
# How to Use React Report Viewer with REST Service
1313

14-
This tutorial demonstrates how to add the React Report Viewer component to a new React application and display a report coming from the Telerik Reporting REST Service.
14+
This tutorial demonstrates how to add the React Report Viewer component to an existing React application and display a report served by a Telerik Reporting REST Service.
1515

1616
## Prerequisites
1717

1818
The following list describes the prerequisites for this tutorial:
1919

20-
* Review the React Report Viewer [Requirements]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/react-report-viewer/react-report-viewer-overview%}#requirements).
21-
* A running application that hosts a Reporting REST service at address /api/reports. For more information, see [Telerik Reporting REST Services]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/overview%}).
22-
* Copy of the "Product Catalog.trdp" report file from `C:\Program Files (x86)\Progress\Telerik Reporting {{site.suiteversion}}\Report Designer\Examples` placed in the folder used by the [UriReportSourceResolver](/api/telerik.reporting.services.urireportsourceresolver) in the Reporting REST service implementation.
23-
* Entry with the default connection string used by Telerik Reporting sample reports in the configuration file of the project hosting the Reporting REST service. For example:
20+
* The prerequisites from the [React Report Viewer article]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/react-report-viewer/react-report-viewer-overview%}#requirements).
21+
* A running application that hosts a Reporting REST service at address `/api/reports`. For more information, check [Telerik Reporting REST Services]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/overview%}).
22+
* A copy of the `Product Catalog.trdp` report file from the `C:\Program Files (x86)\Progress\Telerik Reporting {{site.suiteversion}}\Report Designer\Examples` directory. It needs to be placed in the folder specified in the [UriReportSourceResolver](/api/telerik.reporting.services.urireportsourceresolver) of the Reporting REST service implementation.
23+
* An entry with the default connection string used by Telerik Reporting sample reports in the configuration file of the project hosting the Reporting REST service. For example:
2424

25-
__web.config__ file:
26-
27-
````XML
25+
````XML
2826
<connectionStrings>
29-
<add name="Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString"
30-
connectionString="Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI"
31-
providerName="System.Data.SqlClient" />
32-
</connectionStrings>
27+
<add name="Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString"
28+
connectionString="Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI"
29+
providerName="System.Data.SqlClient" />
30+
</connectionStrings>
3331
````
34-
35-
__appsettings.json__ file:
36-
37-
````JSON
32+
````JSON
3833
{
39-
"ConnectionStrings": [
40-
{
41-
"name": "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString",
42-
"connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
43-
"providerName": "System.Data.SqlClient"
44-
}
45-
]
46-
}
34+
"ConnectionStrings": [
35+
{
36+
"name": "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString",
37+
"connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
38+
"providerName": "System.Data.SqlClient"
39+
}
40+
]
41+
}
4742
````
4843

4944

5045
## Using React Report Viewer in React application
5146

5247
### Steps:
5348

54-
1. Create new React application using the [Creating a React App](https://react.dev/learn/creating-a-react-app) tutorial.
55-
56-
````powershell
57-
npx create-react-app my-app-with-viewer
58-
cd my-app-with-viewer
59-
````
60-
61-
62-
1. Install the `@progress/telerik-react-report-viewer` NPM package by running:
49+
1. Navigate to the folder containing the `package.json` file and install the `@progress/telerik-react-report-viewer` NPM package by running:
6350

6451
````powershell
6552
npm install @progress/telerik-react-report-viewer
6653
````
6754
68-
69-
1. Once installed, import the `TelerikReportViewer` component in the `index.js` file:
55+
1. Create a new component file (for example, `ReportViewer.jsx` or `ReportViewer.tsx`), and import the `TelerikReportViewer` component:
7056
7157
````JavaScript
7258
import { TelerikReportViewer } from '@progress/telerik-react-report-viewer'
73-
````
74-
7559
76-
1. Add the React Report Viewer to the React component:
77-
78-
````JavaScript
7960
export function ReportViewer() {
80-
81-
let viewer;
82-
83-
return (
84-
<>
85-
<TelerikReportViewer
86-
ref={el => viewer = el}
87-
serviceUrl="http://localhost:59657/api/reports/"
88-
reportSource={{
89-
report: 'Report Catalog.trdp',
90-
parameters: {}
91-
}}
92-
viewerContainerStyle={{
93-
position: 'absolute',
94-
inset: '5px'
95-
}}
96-
viewMode="INTERACTIVE"
97-
scaleMode="SPECIFIC"
98-
scale={1.0}
99-
enableAccessibility={false} />
100-
<button id="refresh-button" onClick={ () => viewer.refreshReport() }>Refresh</button>
101-
<button onClick={ () => viewer.commands.print.exec() }>Print</button>
102-
<>
103-
)
61+
let viewer;
62+
63+
return (
64+
<>
65+
<TelerikReportViewer
66+
ref={el => (viewer = el)}
67+
serviceUrl="http://localhost:59657/api/reports/"
68+
reportSource={{
69+
report: 'Report Catalog.trdp',
70+
parameters: {}
71+
}}
72+
viewerContainerStyle={{
73+
position: 'absolute',
74+
inset: '5px'
75+
}}
76+
viewMode="INTERACTIVE"
77+
scaleMode="SPECIFIC"
78+
scale={1.0}
79+
enableAccessibility={false}
80+
/>
81+
<button id="refresh-button" onClick={() => viewer.refreshReport()}>
82+
Refresh
83+
</button>
84+
<button onClick={() => viewer.commands.print.exec()}>
85+
Print
86+
</button>
87+
</>
88+
);
10489
}
10590
````
10691

107-
10892
1. Style the viewer using the desired Kendo UI [Sass-Based Theme](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/overview) by adding references to the Sass-based CSS files in the `<head>` element of _public/index.html_:
10993

11094
````HTML

‎embedding-reports/display-reports-in-applications/web-application/react-report-viewer/react-report-viewer-overview.md‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,35 @@ previous_url: /react-report-viewer, /using-reports-in-applications/display-repor
1111

1212
# React Report Viewer Overview
1313

14-
> The current React Report Viewer version is `{{site.spaviewerversion}}` and should be used with `Reporting REST Service {{site.buildversion}}` or `Telerik Report Server {{site.reportserverversion}}`.
14+
> The React Report Viewer was introduced in Reporting version [R1 2022]({%slug telerikreporting/upgrade/2022/r1-2022%}). Its latest version is `{{site.spaviewerversion}}`, which should be used with `Reporting REST Service {{site.buildversion}}` or `Telerik Report Server {{site.reportserverversion}}`.
1515
16-
You can integrate the React Report Viewer component in your React applications. Note that the viewer is introduced in [R1 2022]({%slug telerikreporting/upgrade/2022/r1-2022%}).
17-
18-
The React component is built on top of the [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%}), which is the foundation for all Web-based report viewers as well.
16+
The React component is built on top of the [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%}), which is the foundation for all web-based report viewers.
1917

2018
## Requirements
2119

2220
To successfully integrate the React Report Viewer component, ensure the following:
2321

24-
1. Required React Application Version:
22+
1. Required React application version:
2523

2624
+ [React 16.8.6+](https://legacy.reactjs.org/blog/2019/02/06/react-v16.8.0.html) application
2725

28-
1. Required Service:
26+
1. Required service:
2927

30-
+ The viewer requires a running instance of [Telerik Reporting REST Services]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/overview%}) in order to display reports. Make sure to [enable Cross-Origin Requests (CORS)](https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api) in the REST Service project.
28+
+ The viewer requires a running instance of [Telerik Reporting REST Services]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/overview%}) in order to display reports. Make sure to [enable Cross-Origin Request (CORS)](https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api) in the REST Service project.
3129

3230
1. The [React Report Viewer package](https://www.npmjs.com/package/@progress/telerik-react-report-viewer) requires the following peer dependencies:
3331

34-
+ `react: ">=16.8.6"`
35-
+ `react-dom: ">=16.8.6"`
32+
+ `"react": ">=16.8.6"`
33+
+ `"react-dom": ">=16.8.6"`
3634
+ `"jquery": "^1.10.0 || ^2.2.0 || ^3.7.0"`
3735

3836
1. Required references to Kendo UI styles:
3937

40-
+ [Kendo UI Sass-Based Theme](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/overview)
38+
+ [Kendo UI Sass-based theme](https://www.telerik.com/design-system/docs/themes/get-started/introduction/#available-themes)
4139

4240
## Browser Support
4341

44-
The React viewer is based on the [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%}), thus the client browser should conform to the HTML5 Report Viewer [Browser Support]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/requirements-and-browser-support%}#browser-support).
42+
The React Report Viewer is based on the [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%}), thus they share the same browser support. For more information, check [the HTML5 Report Viewer Browser Support]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/requirements-and-browser-support%}#browser-support).
4543

4644
## See Also
4745

0 commit comments

Comments
 (0)