# Integrating Your Telerik Report in Web Applications

This guide targets [users who want to build custom reports and, then, present them in applications of their choice](https://www.telerik.com/products/reporting/embedded-reporting.aspx). For the purposes of this tutorial, the scenario will display the report in an ASP.NET Core application.

* First, you will install Telerik Reporting.
* Next, you will create a sample report by using the Standalone Report Designer.
* Finally, you'll create from scratch an ASP.NET Core application and add an Html5 Report Viewer with the necessary Reporting REST Service through our Visual Studio item template.

At the end, you'll be able to see the report in the web browser, export it in different formats, and print it.

For the first-steps scenario on designing a Telerik Report and exporting it to PDF, refer to the getting started guide on [designing a report](https://www.telerik.com/products/reporting/documentation/getting-started/first-steps-designing).

## Prerequisites

The following prerequisites are required for accomplishing the scenario in this tutorial. For more information on the third-party tooling versions supported by Telerik Reporting, refer to the [list with system requirements](https://www.telerik.com/products/reporting/system-requirements).

* Install Microsoft SQL Server Management Studio.

## Step 1: Install Telerik Reporting

The steps to accomplish the installation of the Telerik Reporting controls and services are fully described in the [Telerik Reporting installation steps in the designing guide](https://www.telerik.com/products/reporting/documentation/getting-started/first-steps-designing#step-1-install-telerik-reporting).

## Step 2: Create, Populate, and Style the Sample Report

Next, create the report that you will integrate in your web application. The steps required to create, populate with data, and style the report are described in the [report creation and styling steps in the designing guide](https://www.telerik.com/products/reporting/documentation/getting-started/first-steps-designing#step-2-create-the-sample-report).

Once you have your report, save it as `DemoReport.trdp`. In the next step, you will integrate the TRDP report in the application.

## Step 3: Integrate and Display the Report

In this final step, you'll integrate your report in an ASP.NET Core web application in .NET 8 and display the project with the HTML5 Report Viewer.

1. Open **Visual Studio 2022**. From the **Start** window, choose **Create a new project**.

2. Select **ASP.NET Core Web App** and name it **TelerikWebApp**. In the **Additional information** window, select **.NET8.0 (Long-term support)** and leave the rest of the settings as default. Click **Create**.

3. Right-click the project. Select **Add** > **New Item** > **Telerik HTML5 Report Viewer Page \[version]**. Name the file `index.html`.

4. In the **Configure reporting engine** dialog, leave the selections in the same way they are set by default, that is, **REST Service** > **Create new Rest Service**. Click **Next**.

   ![Page for Configuring the Rest Service for the Report Viewer](https://www.telerik.com/products/reporting/documentation/assets/7125dd606f92696f0ddca4258a6b3bb7/restsrervice.png)

5. Click **Sample report definition** and, then, **Next** > **Finish**.

6. Run the project to make sure everything works as expected. Navigate to the `index.html` page to make sure you see the sample report.

7. Let's add your own `DemoReport.trdp` report to the application. Note that the Visual Studio Item Template has created a `Reports` folder in your application which contains a default `SampleReport.trdp` report. To add the `DemoReport.trdp` to the same folder, right-click the folder, select **Add** > **Existing Item** and navigate to your report.

8. Open the `index.html` file that hosts the HTML5 Report Viewer in the `wwwroot` folder. Find the `reportSource` property of the `#reportViewer1` element that is set up in the `document.ready` event handler of the page. Change its inner `report` element from `"SampleReport.trdp"` to `"DemoReport.trdp"`.

9. Now, you have to include the connection string in the `appsettings.json` file because you added a named connection string to the report. If the report uses an embedded connection, you do not have to add it again to the Visual Studio project.

   The JSON configuration file looks similar to the following:

   ```JSON
   {
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*",
     "ConnectionStrings": [
       {
         "name": "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString",
         "connectionString": "Data Source=(local)\\MSSQLSERVER01;Initial Catalog=AdventureWorks;Integrated Security=SSPI",
         "providerName": "System.Data.SqlClient"
       }
     ]
   }
   ```

   The following image shows how the viewer will display the report upon running the project and navigating to the `index.html` page in the browser.

   ![The Demo Report Previewed in the Report Viewer](https://www.telerik.com/products/reporting/documentation/assets/f5f13738a5a62702dcbb594d147d714b/demoreportinviewer.png)

That was it! Now you are ready to deep-dive into Telerik Reporting and take full advantage of its more advanced functionalities!

## Next Steps

* [Designing Reports Overview](https://www.telerik.com/products/reporting/documentation/designing-reports/overview)
* [Group Explorer](https://www.telerik.com/products/reporting/documentation/designing-reports/report-designer-tools/desktop-designers/tools/group-explorer)
* [Report Parameter](https://www.telerik.com/products/reporting/documentation/designing-reports/connecting-to-data/report-parameters/overview)