Skip to content

Add WRD User Guide #1315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
3 changes: 3 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,9 @@ navigation:
designing-reports/report-designer-tools/web-report-designer/tools/table:
position: 10
title: "Table"
designing-reports/report-designer-tools/web-report-designer/user-guide:
position: 20
title: "User Guide"
designing-reports/report-designer-tools/desktop-designers:
position: 11
title: "Desktop Designers"
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Article Outline
page_title: Article Outline
description: "A description that provides a summary of the article and contains around 150 characters."
slug:
tags: tutorial,web,report,designer,tool,design,create
published: True
position: 10
---
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Article Outline
page_title: Article Outline
description: "A description that provides a summary of the article and contains around 150 characters."
slug:
tags: tutorial,web,report,designer,tool,design,create
published: True
position: 15
---
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
---
title: Creating a Simple Report
page_title: Creating a Simple Report
description: "Learn how to create your first report by using Telerik Web Report Designer: you will add a data source, a company logo, a custom title, and a graph that will display the report's data."
slug: designing-reports/report-designer-tools/web-report-designer/user-guide/creating-report-in-wrd
tags: tutorial,web,report,designer,tool,design,create
published: True
position: 5
---

# Creating a Simple Report

This tutorial demonstrates the essential steps necessary to create a new report in the [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}).

You will start from scratch by creating a blank report and styling it by adding a custom header, company logo, and title. Then, you will connect the report to a data source. Finally, you will add graphs that will visualize the report's data.

To create the report:

1. Go to the Report Designer's main **Menu** and select **New Report**. This opens the **Create a Report** dialog.
1. In the **File Name** field, enter the desired name for the report, for example, `ProductSales`.
1. In the **Save as type** drop-down, select the TRDP report type. TRDP is the recommended report type and stands for Telerik Report Definition Packed.
1. Select the location for the report and click **Save**.

![The 'Create Report' dialog of the Telerik Web Report Designer](../../../../getting-started/web-designer/images/create-trdp-report-web-designer.png)

## Styling the Report

Newly created reports contain three default [report sections]({%slug report_structure_groups_sections%}#report-sections): `page header`, `page footer`, and `detail` section. They are empty initially. When customizing the report, you may add or delete sections, and add [report items]({%slug telerikreporting/designing-reports/report-structure/overview%}) to them, for example, TextBoxes and PictureBoxes.

To style the sample report:

1. Delete the default page header (at the top of the page) and page footer (at the bottom of the page) by selecting each of them and pressing the `Delete` keyboard key. Let's leave the detail section (the main body of the report).
1. Add a report header section to the report:

2.1. Use `Ctrl+F` to focus the search box.
2.2. Type `Report Header`, and press `Enter`. This will focus on the **Page Header** report section in the **Components** menu.
2.3. Click the **Report Header** item to add this section to the report.

![Searching for the 'Report Header' and locating it in the web designer's 'Components' menu.](../../../../getting-started/web-designer/images/locate-report-header-component.png)

1. Add a company logo to the report header by using a picture box:

3.1. Use `Ctrl+F` to focus the search box.
3.2. Type `PictureBox`, and press `Enter`. This will focus on the **PictureBox** report component in the **Components** menu.
3.3. Click the **PictureBox** item and drag it to the report header. Adjust its size and position as needed.
3.4. Make sure that the picture box is focused (selected), and locate the **DATA** category in the properties area of the Web Report Designer. The properties area is the pane on the right, which contains properties specific to the currently selected report item.
3.5. Go to **DATA** > **Value** and click the ![The 'Select file...' button in the Telerik Web Report Designer](./images/select-file-button.png) button to open the Assets Manager.
3.6. Select the **Images** folder and then click the **Upload** button to upload an image from your device.
3.7. Select the newly uploaded image and click **Save**.

![Saving a new image in the Assets Manager of the Telerik Web Report Designer.](./images/add-image-to-picture-box.png)

1. Add a title to the report by using a text box:

4.1. Use `Ctrl+F` to focus the search box.
4.2. Type `TextBox`, and press `Enter`. This will focus on the **TextBox** report component in the **Components** menu.
4.3. Click the **TextBox** item and drag it to the report header. Adjust its size and position as needed.
4.4. Double-click on the text box and type `Sales by Category`.
4.5. To change the text font, go to **APPEARANCE** > **Style** > **Font** in the properties area pane on the right and apply the desired styles, for example, Arial with size 22 pt in bold.

![The TextBox 'Sales by Category' styled and aligned in the Telerik Web Report Designer.](../../../../getting-started/web-designer/images/style-and-align-textbox-web-designer.png)

## Adding the Report Data

The report in this tutorial will visualize data fetched from a remote source that is accessible through a URL.

To add data to the report:

1. Locate the **DATA SOURCES** category in the **Components** menu of the Web Report Designer.
1. Click the **Web Service Data Source** item to start the data source configuration wizard.
1. Click the **TextBox** item and drag it to the report header. Adjust its size and position as needed.
1. In the **Service URL** field, enter `https://demos.telerik.com/reporting/api/data/ProductSales.min` — the URL of the service providing the data for the report.
1. Skip the next pages, until you reach the **Preview data source results** page, where you may view the data and click `Finish` to close the wizard.

![The last page of the 'Configure WebServiceDataSource' wizard in the web designer shows the 'Preview data source results'.](../../../../getting-started/web-designer/images/preview-data-web-service-data-source-web-designer.png)

## Adding a Chart

To visualize the data you will add a Column Chart component:

1. Locate the **CHARTS** category in the **Components** menu of the Web Report Designer.
1. Click the **Column** item and drag it to the detail section of the report. This will load the Column Chart configurator on the right.
1. In the **DATA** > **Data Source** dropdown, select `webServiceDataSource1` — this will populate the **Data Source Fields** in the Column Chart configurator.

![Configuring the Column Chart in the web report designer.](../../../../getting-started/web-designer/images/configure-column-chart-web-designer.png)

1. Drag the `ProductCategory` field from **DATA** > **Data Source Fields** to **FIELDS ARRANGEMENT** > **Categories**.
1. Drag the `LineTotal` field from **DATA** > **Data Source Fields** to **FIELDS ARRANGEMENT** > **Values**.
1. Click **Create** to add the configured chart to the report.

## Styling the Chart

Optionally, you can adjust the appearance of the Chart:

1. Select the Graph in the report detail section.
1. In the configuration pane on the right, go to **PRESENTATION** > **Legend** > **Style** and clear the **Visible** checkbox. This will remove the legend from the Chart.
1. Go to **PRESENTATION** > **Titles** and select the `graphTitle1` item to open the **Edit Item** dialog.
1. Expand the **Style** category and clear the **Visible** checkbox. This will remove the Chart's title.

![Styling the Column Chart in the web report designer.](../../../../getting-started/web-designer/images/style-column-chart-web-designer.png)

## Next Steps

* [Implement a Common Master-Detail Report Scenario]({%slug telerikreporting/getting-started/web-designer/improving-basic-report%})

## 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)
* [Web Report Designer](%{slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%})
* [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)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
title: Web Report Designer User Guide
page_title: Web Report Designer User Guide
description: "Explore the Web Report Designer user guide and discover how to apply the powerful features of the report designer to effortlessly craft rich dynamic reports."
slug: telerikreporting/designing-reports/report-designer-tools/web-report-designer/user-guide/overview
tags: overview,web,report,designer,tool,design,create,report,web
published: True
position: 1
---

# Web Report Designer User Guide: An Overview

The Web Report Designer User Guide is intended to assist the users of business applications that integrate Telerik Reporting. It aims at providing the knowledge required for the successful crafting and maintenance of reports. Although this user guide is nested in the common developer docs, its primary audience are business application users.

> If you are a developer who integrates Telerik Reporting into web applications, see the [developer-oriented technical section]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) of the Web Report Designer documentation or the [Getting Started tutorial]({%slug telerikreporting/getting-started/web-designer/set-up-and-create-basic-report%}).

## What is the Web Report Designer?

The Web Report Designer is a tool developed to let business application users design, create, and export reports directly in their web browser without needing any additional software. The reports can source their data from various databases, for example, relational, multi-dimensional, ORM, or custom data-layer-based data sources.

![Main areas and functionalities of the Telerik Web Report Designer](./images/wrd-components-callouts.png)

1. Main menu—allows you to open or close reports, create new ones, access workspace-related preferences and more.
1. Components tab—provides access to all components that you can include in you report, for example, items, tables, charts, sections and others.
1. Currently opened report—allows you to switch between the opened reports.
1. Explorer tab—represents the structure of the report as a tree.
1. Search box—enables the quick access to report items and components.
1. Design surface—represents the layout of the report.
1. Properties area—provides access to the properties of the currently selected report component.

## What's in this User Guide?

This user guide includes articles that describe common scenarios related to the design and configuration of reports. In addition, you will also find conceptual information that illustrates basic reporting principles, for example, how to [structure a report]({%slug designing-reports/report-designer-tools/web-report-designer/user-guide/report-structure%}).

## Next Steps

* [Create a Simple Report]({%slug designing-reports/report-designer-tools/web-report-designer/user-guide/creating-report-in-wrd%})
* [Explore the Structure of a Report]({%slug designing-reports/report-designer-tools/web-report-designer/user-guide/report-structure%})

{% if site.has_cta_panels == true %}
{% include cta-panel-overview.html %}
{% endif %}

## See Also

* [Reference 1]()
* [Reference 2]()
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
---
title: Report Structure
page_title: Report Structure
description: "Learn which elements build the structure of the reports created in the Telerik Web Report Designer and use these report elements to convey information effectively."
slug: designing-reports/report-designer-tools/web-report-designer/user-guide/report-structure
tags: telerik, reporting, report, structure, groups, sections, items
published: True
position: 8
---

# The Basic Structure of a Report

Each report consists of sections that divide the report vertically and [report items](#report-items) that you place in each section. A report section represents a specific area on the report page and defines what items can be placed in that area and how these items will appear.

By default, every new report you create has three sections:

* Page Header
* Page Footer
* Detail section (the main content area of the report)

In addition to the default sections above, you can also add:

* Table of Contents (TOC)
* Report Header
* Report Footer
* Report Groups
* Group Header
* Group Footer

## Page Header

The Page Header section is printed at the top of every page. In reports with multiple pages, you can use the Page Header to place the same content at the beginning of every page, for example, the report title.

>The Page Header can display only the content that fits within the boundaries of the section. Any content that doesn't fit within the section will be clipped.

## Page Footer

The Page Footer section appears at the end of every page. Use the Page Footer to print page numbers or page-specific information. You can hide the Page Footer on pages of your choice, for example, on all even pages or on the first and last page of the report. By hiding this section, you can free page space for the rest of the report content.

## Detail Section

The Detail section displays the detailed information and is printed once for every row in the data source. This is where you place the report items that constitute the main body of the report.

## Table of Contents

The Table of Contents (TOC) is a list that contains links to the report items along with their page numbers. Clicking a link in the TOC takes the user to the page that contains the specified report item. You can display the TOC before or after the Report Header or Report Footer.

## Report Header

Use the report header to place information typical for a cover page, such as logos, titles, or dates. The Report Header section is printed once, at the beginning of the report:

* If you place a Page Header on the first page, the Report Header will appear after it.
* If the report has a TOC section, you can place it before or after the Report Header.

## Report Footer

Use the report footer to print report totals or other summary information for the entire report. The Report Footer section is printed once at the end of the report:

* If you place a Page Footer on the last page, the Report Footer will appear before it.
* If the report has a TOC section, you can place it before or after the Report Header.

## Report Items

Report items are the individual elements or components that make up a report. They display various types of report data, such as barcodes, charts, tables, and so on. A sales report, for example, may contain the following items:

* Text boxes displaying the report title, date, and other descriptive information.
* Images representing the company logo or brands.
* Charts showing sales data, such as product sales by region.

## Report Groups

Report groups allow you to visually separate logically related data sets. To show the group boundaries and display introductory and summary information for each group, you can use group header and footer sections. For example, you can use different report groups to represent the detailed sales data for each region, and the group header may contain the name of the region while the footer can contain the total number of sales for that specific region.

## Group Header

The Group Header section is printed at the beginning of each new group of records. Use the group header to print the group name. For example, in a report that is grouped by product, use the group header to print the product name.

## Group Footer

The Group Footer section is printed at the end of each group of records. Use a group footer to print a summary related to the group.

## Next Steps

* [Reference 1]()
* [Reference 2]()

## See Also

* [Reference 1]()
* [Reference 2]()