# Configure Web Report Designer and Create a Basic Report

This is a step-by-step tutorial that shows how to integrate the [Web Report Designer](https://www.telerik.com/products/reporting/documentation/designing-reports/report-designer-tools/web-report-designer/overview) in `.NET 8` ASP.NET Core application in Visual Studio 2022.

* First, you will create a Web Application and add the Telerik Web Report Designer through its Visual Studio Item Template.
* Next, you'll create and style a new report.
* Then, you will add a remote DataSource and connect it to a new Graph in the report.
* At the end, you will have a web application with embedded Telerik Web Report Designer with the default `SampleReport.trdp` and the newly created `ProductSales.trdp` reports in its storage that you may preview and edit.

  ![Preview of the base report created from scratch in the web report designer.](https://www.telerik.com/products/reporting/documentation/assets/effc072d0045a0a40c8dce99f65702a2/preview-base-report-web-designer.png)

The entire process is described in the YouTube video tutorial [Getting Started with the Web Report Designer: Part 1](https://www.youtube.com/watch?v=L-utkcB8-5c).

## Setting up the Web Report Designer in .NET 8

Let's create an ASP.NET Core application in Visual Studio and embed the Telerik Web Report Designer in it:

1. Open Visual Studio 2022 and create a new project through the project template `ASP.NET Core Web App`. Name the project, for example, `Telerik.WRD.GettingStarted` and select `.NET 8.0` as a Target Framework.

2. Add the Web Designer to the project:

   1. Right-click on the project and select `Add` > `New Item...`.

      ![Visual Studio 2022 project context menu showing Add New Item for a Telerik Reporting Web Report Designer page](https://www.telerik.com/products/reporting/documentation/assets/99b5957b1c1bad312cd0ccdd6f09f462/add-vs-item-template.png)

   2. You may search for `Telerik Reporting` to list the available Reporting item templates. Add `Telerik Web Report Designer HTML5 Page 2026 Q4`. The version may vary, depending on the last Reporting version installed.

   3. Name the new page `webReportDesigner.html` (this is the default name).

      ![Visual Studio 2022 Add New Item dialog searching for and adding the Telerik Web Report Designer HTML5 page](https://www.telerik.com/products/reporting/documentation/assets/12222492c3089d38104d710c737c41f7/add-web-report-designer-page.png)

   4. Build the project when prompted by Visual Studio.

3. Configure the Web Report Designer:

   1. In the popped-up *Add new .NET Core Web Report Designer* wizard, select `Create new REST service` as we don't have an existing one.

      ![Create new Web Report Designer REST Service in the project through the wizard's 'Configure web report designer engine' page.](https://www.telerik.com/products/reporting/documentation/assets/02d4bc051b22c5655b9eeb8f3527265e/create-new-rest-service.png)

   2. On the next step, the wizard will ask for the initial report to load. Select the `Sample report definition` option to create a new sample report if you don't have any.

      ![Create sample report definition through the wizard's 'Configure report' page.](https://www.telerik.com/products/reporting/documentation/assets/e36d3efcdf84d9868700dacc9ebe0180/create-sample-report.png)

   3. When you click `Finish`, you should see a status page confirming that everything was set up correctly.

4. (optional) Open the file `launchSetting.json` in the folder `Properties` and add the next line, setting the opening page to the "profiles" > "Telerik.WRD.GettingStarted" object. Note that the name of the project and the web page may vary:

   `"launchUrl": "webReportDesigner.html"`.

   ![Visual Studio 2022 launchSettings.json file with the launchUrl set for the Telerik Reporting Web Report Designer page](https://www.telerik.com/products/reporting/documentation/assets/b1a9fa4769449a0ed7ca8613691fa7b1/launch-setting-json.png)

5. Run the project. If everything is fine, you should see the web page with the designer with the sample report opened, and the onboarding guide to walk you through the main tools in the designer.

   We recommend getting familiar with the Web Report Designer by clicking on the `Next` button in the guide. You may skip the guide at any step by pressing the button `End Tour`. Pay attention to the Search functionality of the designer that lets you locate any report item, section, or property easily.

   ![Telerik Reporting Web Report Designer onboarding guide highlighting the global Search box](https://www.telerik.com/products/reporting/documentation/assets/f4e24183f579e0dff6ea5d7e2eef2a15/web-designer-guide-search-box.png)

## Creating a New Report

Our next goal is to create a brand new report with the just configured Web Report Designer:

1. Go to the main toolbar `Menu` and select `New Report`. The `Create Report` dialog opens and lets you:

   1. Enter the `File Name`. Let's name the report `ProductSales`.
   2. Select the `Type`. Leave the `Type` to be `TRDP`, standing for *Telerik Report Definition Packed*, the recommended Declarative [Report Definition](https://www.telerik.com/products/reporting/documentation/getting-started/about-telerik-reporting#report-definition).
   3. Enter `Location`. Type `Demo` to place the report in the *Demo* subfolder.
   4. Click `Save` to apply the settings.

   ![Telerik Reporting Web Report Designer Create Report dialog configured for a new TRDP report](https://www.telerik.com/products/reporting/documentation/assets/8f206d6cbea45bb78355728398e38add/create-trdp-report-web-designer.png)

2. The new empty report should open in the designer with its default Page Header, Detail, and Page Footer sections. Let's delete the page sections by selecting them and pressing the `Delete` key on the keyboard.

3. Next, we want to add a [Report Header](https://www.telerik.com/products/reporting/documentation/report-items/report-item/report-headers-footers). Press `Ctrl+F` to focus the Search box, type `Report Header`, and press `Enter` key to focus the report section in the `Components` menu. Click the item to add the section to the report.

   ![Telerik Reporting Web Report Designer search locating the Report Header section in the Components menu](https://www.telerik.com/products/reporting/documentation/assets/9c93841f2238ab70fe8d9b42a733c062/locate-report-header-component.png)

4. Let's add the company logo to the report.

   1. We need to add a [PictureBox](https://www.telerik.com/products/reporting/documentation/report-items/picturebox) to the Report Header. You may search for the report item, drag it to the Report Header, and adjust its size and position as needed.

   2. To upload the logo, search for the `Value` property in the PictureBox and open the asset picker (`Select File...`) using the button beside the property. This dialog is the [Assets Manager](https://www.telerik.com/products/reporting/documentation/designing-reports/report-designer-tools/web-report-designer/tools/shared-resources#assets-manager), which contains report assets such as images and external stylesheets.

      ![Telerik Reporting Web Report Designer Assets Manager Select File dialog for a PictureBox image value](https://www.telerik.com/products/reporting/documentation/assets/21df4783ee929363568b3d611454cc27/select-image-for-picturebox-web-designer.png)

   3. Select the `Images` folder and click the `Upload` button to upload the image. Click on the `Browse` button to find the image on your system and open it. Add the selected image by clicking on the `Upload` button. Now the image is in the Assets Manager, and you may click `Save`. The value should be populated, and the image should be displayed in the PictureBox.

5. Add a title to the report. You may use the [TextBox](https://www.telerik.com/products/reporting/documentation/report-items/textbox) report item.

   1. Search in the global search box of the designer and drag the item from the `Components` menu to the Report Header.
   2. You may change the text inline. Double-click on the item to enter it and type `Sales by Category`.
   3. Apply Styles by selecting the TextBox, searching for *Style*, and finding the appropriate *Font* styles. Let's use the default Font "Arial", with Size 22pt, bolded, centered, and aligned to the middle.
   4. Position and realign the TextBox so that the content fits and looks beautiful.

      ![Telerik Reporting Web Report Designer TextBox styled and aligned for the Sales by Category report title](https://www.telerik.com/products/reporting/documentation/assets/54a3a4313022c899776096b52679a8b0/style-and-align-textbox-web-designer.png)

6. Our next step would be to add a [DataSource component](https://www.telerik.com/products/reporting/documentation/designing-reports/connecting-to-data/data-source-components/overview) to the Report. Let it be the [WebServiceDataSource](https://www.telerik.com/products/reporting/documentation/designing-reports/connecting-to-data/data-source-components/webservicedatasource-component/overview) fetching data from a remote source.

   1. Search for the component and add it to the report. It opens the *Configure Web Service DataSource* wizard.

   2. For `ServiceUrl`, we will add the known URL to our demo site `https://demos.telerik.com/reporting/api/data/ProductSales.min`. It points to a reliable JSON data file. Leave the other options with their default values.

      ![Telerik Reporting Web Report Designer Configure WebServiceDataSource wizard with the ServiceUrl field](https://www.telerik.com/products/reporting/documentation/assets/9be00a35aa86796bf2a208f9fb737abe/configure-web-service-data-source-web-designer.png)

   3. Skip the next page, where you may add request parameters, as we don't have any.

   4. Skip also the third page that asks whether, in design-time, you would like to use real or mocked data. We will use real data (the default setting).

   5. Preview the data on the next page and click `Finish`.

      ![Telerik Reporting Web Report Designer WebServiceDataSource wizard previewing data source results](https://www.telerik.com/products/reporting/documentation/assets/ff14fe41601f26b0c1d23a391c556f66/preview-data-web-service-data-source-web-designer.png)

   6. The wizard closes, and in the designer's `Explorer` tab, you should see the new WebServiceDataSource component with its data fields listed.

7. Next, lets add the [Graph](https://www.telerik.com/products/reporting/documentation/report-items/graph/overview) item that is going to show the sales data.

   1. Search for `Column` and drag the Column chart from the `Explorer` menu to the report Detail section. This will open a chart configurator in the right pane.

   2. Select the WebServiceDataSource from the dropdown of the Graph DataSource property. The fields will be listed.

      ![Telerik Reporting Web Report Designer configuring a Graph column chart with a WebServiceDataSource](https://www.telerik.com/products/reporting/documentation/assets/b551923cd4c9573f7192f17ed5a9a6f9/configure-column-chart-web-designer.png)

   3. Drag the `ProductCategory` field to the `Categories`.

   4. For the `Values` property, use the `LineTotal` field.

   5. Click on `Create` to render the chart with real data and show it in the report.

   6. Finally, style the column graph:

      * Find and remove the `Legend` by unchecking its `Style` > `Visible` checkbox.
      * Enter the `Titles` section, select the graph title, and uncheck the `Visible` checkbox in the `Style` section from the opened `Edit item` dialog.

      ![Telerik Reporting Web Report Designer styling a Graph column chart by hiding the legend and title](https://www.telerik.com/products/reporting/documentation/assets/26b3292a210b44eab27938e25da48d6c/style-column-chart-web-designer.png)

8. Preview the pixel-perfect report document by clicking on the designer's `Preview` button at the top right corner.

## See Also

* [Video Tutorial 'Getting Started with the Web Report Designer: Part 1'](https://www.youtube.com/watch?v=L-utkcB8-5c)
* [Video Tutorial 'Getting Started with the Web Report Designer: Part 2'](https://www.youtube.com/watch?v=DXKlgq-MYIU)
* [Implement a Common Master-Detail Report Scenario](https://www.telerik.com/products/reporting/documentation/getting-started/web-designer/improving-basic-report)
* [Web Report Designer](https://www.telerik.com/products/reporting/documentation/designing-reports/report-designer-tools/web-report-designer/overview)
* [Setting Up the Web Report Designer in .NET Applications](https://www.telerik.com/products/reporting/documentation/designing-reports/report-designer-tools/web-report-designer/how-to-set-up-in-dotnet)
* [Demo Page for Telerik Reporting](https://demos.telerik.com/reporting)
* [Telerik Reporting Homepage](https://www.telerik.com/products/reporting)
* [Reporting Forums](https://www.telerik.com/forums/reporting)
* [Reporting Blog](https://www.telerik.com/blogs/tag/reporting)
* [Reporting Videos](https://www.telerik.com/videos/reporting)
* [Reporting Roadmap](https://www.telerik.com/support/whats-new/reporting/roadmap)
* [Reporting Pricing](https://www.telerik.com/purchase/individual/reporting)
* [Reporting Training](https://learn.telerik.com/learn/course/external/view/elearning/19/reporting-report-server-training)
* [Web Report Designer User Guide](https://www.telerik.com/products/reporting/documentation/wrd-user-guide/user-guide-overview)