diff --git a/_config.yml b/_config.yml index 61f146ad6..2a2fbdd29 100644 --- a/_config.yml +++ b/_config.yml @@ -30,6 +30,12 @@ navigation: styling: position: 70 title: "Styles & Appearance" + user-guide: + position: 85 + title: "Web Report Designer - User Guide" + user-guide/components: + position: 15 + title: "Report Components" styling/rendering-and-paging: position: 8 title: "Rendering and Paging" diff --git a/user-guide/app-tour.md b/user-guide/app-tour.md new file mode 100644 index 000000000..a4c497468 --- /dev/null +++ b/user-guide/app-tour.md @@ -0,0 +1,32 @@ +--- +title: App Tour +page_title: App Tour - Web Report Designer User Guide +description: Explore the Web Report Designer's panes and discover the features it offers. +slug: user-guide/app-tour +tags: web, report, design, tool, create, report, web, structure +published: True +position: 5 +--- + +# App Tour of the Web Report Designer + +The fastest way to explore the Web Report Designer and to learn its basics is to start the built-in onboarding tour, which walks you through the Report Designer's main tools. + +The app tour starts automatically the first time you open an application with an embedded Telerik Web Report Designer. To start the app tour manually, type `Start onboarding` in the search box. + + + +As illustrated by the video above, the main elements of the Web Report Designer's user interface are: + +* An interactive **Design surface** where you create and style your report. +* A **Components tray** which contains all of the items that you can add to the report. +* An **Explorer** providing a tree-based structure of everything that is already in the report, including the data structure. +* A **Properties area** which shows the properties and values for the currently selected component. +* A **Main menu** which lets you open, save, and interact with reports on a global level along with the **Asset Manager** which is where you store all of your. +* A **Preview** button which shows an exact representation of the designed report. +* A **Search box** which allows you to search the report instance for any property value, component data source, and so on. + +## See Also + +* [Create a Simple Report]({%slug web-report-designer-user-guide-getting-started%}) +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) diff --git a/user-guide/components/charts.md b/user-guide/components/charts.md new file mode 100644 index 000000000..75ca8dcca --- /dev/null +++ b/user-guide/components/charts.md @@ -0,0 +1,206 @@ +--- +title: Charts +page_title: Charts +description: Explore the available Chart report components offered by the Web Report Designer. +slug: web-report-designer-user-guide-components-charts +tags: web, report, design, components, chart, bar, line, area, column, pie, doughnut, polar, range, scatter, bubble, sparkline, ohlc +published: True +position: 5 +--- + + + +# Charts + +The Chart components in the Web Report Designer allow users to visualize data records from different [Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) storages. Charts transform numerical data into visual representations, making it easier to identify patterns, trends, and relationships in your data. + +You can use Charts to represent: + +* Trend Analysis—Show data changes over time using Line or Area charts. +* Comparison Analysis—Compare values across categories using Bar or Column charts. +* Part-to-Whole Analysis—Display proportional relationships using Pie or Doughnut charts. +* Performance Dashboards—Create visual scorecards and KPI displays. +* Financial Reporting—Present sales figures, revenue trends, and budget comparisons. +* Statistical Reports—Visualize survey results, demographic data, and analytical findings. + +![Charts Group ><](images/wrd-components-tray-charts-design-mode.png) + +## Chart Types + +The Web Report Designer provides the following chart types: + +* [Bar Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-bar-chart)—Displays data series as sets of horizontal bars, ideal for comparing amounts or values between different categories +* [Line Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-line-chart)—Displays series as sets of points connected by lines, perfect for showing trends over continuous periods +* [Area Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-an-area-chart)—Shows data as filled areas under lines, emphasizing volume and cumulative totals +* [Column Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-column-chart)—Displays data series as sets of vertical bars that are grouped by category +* [Pie Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-pie-chart)—Shows the contribution of fractional parts to a whole, commonly used for proportion comparisons +* [Doughnut Chart]({%slug web-report-designer-user-guide-components-charts%}#adding-a-pie-chart)—Similar to Pie Chart but with an open space in the center, allowing for additional information display + +## Chart Categories + +The Web Report Designer supports two main chart categories: + +* **Cartesian Charts** (Bar, Line, Column, Area)—Use the Cartesian coordinate system to plot data points in chart series. The X and Y axes define how each point's coordinates in the plot area are calculated. Cartesian charts provide a mechanism for combining data points that reside in different series but have the same category. The combine mode can be: + + * **Cluster**—Data points in the same category are positioned close together + * **Stack**—Data points are plotted on top of each other + * **Stack100**—Values of one series are presented as a percentage of the other series + +* **Pie Charts** (Pie, Doughnut)—Use the Radial coordinate system to plot each point as an arc segment where the arc's length represents the percentage this point's value is from the total sum + +The following sections demonstrate how to add different chart types and illustrate how CSV data is presented in each chart. + +>note The **Configuration** pane on the right-hand side is identical for all chart types, allowing users to specify the Data Source and configure the Categories, Series and Values groups. + +## Adding a Chart to a Report + +The next sections in this article demonstrate how to add each of the available [chart types](#chart-types) to your report. To follow along the steps below, make sure to add the proposed [data source](#adding-data-source) first. + +### Adding Data Source + +For this tutorial, use the following sample CSV data to create a CSV Data Source that will be used throughout this article: + +```csv +Category, Year, Value +Accessories, 2003,230 +Accessories,2004,340 +Bikes, 2001, 150 +Bikes, 2002, 195 +Bikes, 2003, 340 +Bikes, 2004, 265 +Clothing, 2002, 80 +Clothing, 2003, 120 +Clothing, 2004, 110 +Components, 2001, 230 +Components, 2002, 140 +Components, 2003, 280 +Components, 2004, 310 +``` + + + +After adding the data source to you report, continue by adding the desired chart type. + +### Adding a Bar Chart + +To create a Bar Chart, follow the steps below. See the video after the steps for a detailed walk-through. + +1. Click the **Bar** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer. + +1. Set the [data source](#adding-data-source) for the Chart. + +1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display. + +1. Optionally, change the Chart type. + +>caption Adding a Bar Chart and populating it with data + + + +Based on the Bar Chart type that you select during the configuration, one of the following charts will be displayed: + +|Clustered Bar|Stacked Bar|100% Stacked Bar| +|----|----|----| +|![Clustered Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-clustered-type.png)|![Stacked Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-stacked-type.png)|![100% Stacked Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-100-stacked-type.png) | + +### Adding a Column Chart + +To create a Column Chart, follow the steps below. See the video after the steps for a detailed walk-through. + +1. Click the **Column** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer. + +1. Set the [data source](#adding-data-source) for the Chart. + +1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display. + +1. Optionally, change the Chart type. + +>caption Adding a Column Chart and populating it with data + + + +Based on the Column Chart type that you select during the configuration, one of the following charts will be displayed: + +|Clustered Column|Stacked Column|100% Stacked Column| +|----|----|----| +|![Clustered Column Chart Type ](images/wrd-components-tray-charts-configure-column-chart-clustered-type.png)|![Stacked Column Type ](images/wrd-components-tray-charts-configure-column-chart-stacked-type.png)| ![100% Stacked Column Chart Type ](images/wrd-components-tray-charts-configure-column-chart-100-stacked-type.png) | + +### Adding an Area Chart + +To create an Area Chart, follow the steps below. See the video after the steps for a detailed walk-through. + +1. Click the **Area** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer. + +1. Set the [data source](#adding-data-source) for the Chart. + +1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display. + +1. Optionally, change the Chart type. + +>caption Adding an Area Chart and populating it with data + + + +Based on the Column Chart type that you select during the configuration, one of the following charts will be displayed: + +|Area|Stacked Area|100% Stacked Area| +|----|----|----| +|![Area Chart Type ](images/wrd-components-tray-charts-configure-area-chart-type.png)|![Stacked Area Type ](images/wrd-components-tray-charts-configure-stacked-area-type.png)|![100% Stacked Area Type ](images/wrd-components-tray-charts-configure-area-100-stacked-type.png)| + +### Adding a Line Chart + +To create a Line Chart, follow the steps below. See the video after the steps for a detailed walk-through. + +1. Click the **Line** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer. + +1. Set the [data source](#adding-data-source) for the Chart. + +1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display. + +1. Optionally, change the Chart type. + +>caption Adding a Line Chart and populating it with data + + + +Based on the Line Chart type that you select during the configuration, one of the following charts will be displayed: + +|Line|Stacked Line|100% Stacked Line| +|----|----|----| +|![Line Chart Type ](images/wrd-components-tray-charts-configure-line-chart-type.png)|![Stacked Line Chart Type ](images/wrd-components-tray-charts-configure-stacked-line-type.png)|![100% Stacked Line Chart Type ](images/wrd-components-tray-charts-configure-line-100-stacked-type.png)| + +|Line with Markers|Stacked Line with Markers|100% Stacked Line with Markers| +|----|----|----| +|![Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-line-with-markers-chart-type.png)|![Stacked Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-stacked-line-with-markers-type.png)|![100% Stacked Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-line-with-markers-100-stacked-type.png)| + +### Adding a Pie Chart + +To create a Pie Chart, follow the steps below. See the video after the steps for a detailed walk-through. + +1. Click the **Pie** item from the **Components** tab and configure the chart using the Configuration pane on the right-hand side of the Web Report Designer. + +1. Set the [data source](#adding-data-source) for the Chart. + +1. Design the Chart by configuring the **Categories**, **Series**, and **Values** groups based on the data you need to display. + +1. Optionally, change the Chart type. + +>caption Adding a Pie Chart and populating it with data + + + +Based on the Pie Chart type that you select during the configuration, one of the following charts will be displayed: + +|Pie Chart|Doughnut Chart| +|----|----| +|![Pie Chart Type ](images/wrd-components-tray-charts-configure-pie-chart-type.png)|![Doughnut Chart Type ](images/wrd-components-tray-charts-configure-doughnut-chart-type.png)| + +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [Overview of the Graph Report Item]({%slug telerikreporting/designing-reports/report-structure/graph/overview%}) +* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) diff --git a/user-guide/components/components.md b/user-guide/components/components.md new file mode 100644 index 000000000..f4ab14e80 --- /dev/null +++ b/user-guide/components/components.md @@ -0,0 +1,59 @@ +--- +title: Overview +page_title: Components - Overview +description: Explore the available report components offered by the Web Report Designer. +slug: web-report-designer-user-guide-components +tags: web, report, design, components, overview +published: True +position: 0 +--- + + + +# Components Overview + +Each report is constructed from [report items]({%slug user-guide/components/report-items%}). All report items that you can add to your report design are organized in different groups (categories) in the **Components** tab. + +The Components tab lists the available report components that you can add to your report design. The items are organized in groups based on their type and functionality. The tab supports two layout modes—grid and list. The list view is the default mode. + +## How to Use Components + +You can add components to your report in two ways: + +* Drag and drop—Click the report's design surface and drag a component from the Components tab onto the report. +* Click to add—Click the desired location in your report, then click the component in the Components tab. + +![Components tray in List Mode ><](images/wrd-components-tray-design-mode.png) + +|Group (Category)|Report Items| +|----|----| +|[Report Items]({%slug user-guide/components/report-items%}) - The main building blocks used in the report depending on the data that will be displayed, e.g. a TextBox item for static or data-bound text, a PictureBox for displaying images, a Barcode for showing a barcode in a label report, etc.|| +|[Tables]({%slug web-report-designer-user-guide-components-tables%}) - The Table report item is a generalized layout report item that displays report data in cells that are organized into rows and columns.|| +|Reports - The [SubReport]({%slug web-report-designer-user-guide-components-subreport%}) item enables you to display reports within reports and serves as a container, similar to the report sections, growing in size depending on its children.|| +|[Maps]({%slug web-report-designer-user-guide-components-maps%}) - The Map report item is a native Telerik Reporting item which enables you to visualize aggregate business data in a geographical manner.|| +|[Charts]({%slug web-report-designer-user-guide-components-charts%}) - The Graph report item is a native Telerik Reporting item that allows you to generate different Chart types (objects) and visually present large volumes of aggregated information.|| +|[Report Sections]({%slug user-guide/components/report-sections%}) - A Telerik report consists of different sections that may contain report items. Each report section represents a specific area on the report page and defines the rendering of its report items.|| +|[Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) - Data Source components are used to connect data items to different types of data without writing any code.|| + +## Next Steps + +* [Learn about Report Items]({%slug user-guide/components/report-items%}) +* [Configure Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) +* [Explore Report Sections]({%slug user-guide/components/report-sections%}) +* [Create Your First Report]({%slug web-report-designer-user-guide-getting-started%}) + +## See Also + +* [Report Structure]({%slug user-guide/report-structure%}) +* [Working with Tables]({%slug web-report-designer-user-guide-components-tables%}) diff --git a/user-guide/components/data-sources.md b/user-guide/components/data-sources.md new file mode 100644 index 000000000..4a992c605 --- /dev/null +++ b/user-guide/components/data-sources.md @@ -0,0 +1,249 @@ +--- +title: Data Sources +page_title: Data Sources +description: Web Report Designer offers different Data Source Components that can be used in the reports. +slug: web-report-designer-user-guide-components-data-sources +tags: web, report, design, components, data, source +published: True +position: 7 +--- + + + +# Data Sources + +The Data Source components allow users to connect to and retrieve data from various storage and database systems. Data Sources serve as the foundation for all report components, providing the data that powers your tables, charts, maps, and other report elements. + +Data Sources are essential for: + +* Database Reporting—Connect to SQL Server, Oracle, MySQL, and other relational databases. +* File-Based Data—Import data from CSV files, JSON documents, and structured text files. +* Web Services Integration—Retrieve data from REST APIs, GraphQL services, and web endpoints. +* Business Object Binding—Connect to .NET business objects and custom data providers. +* Real-Time Data—Access live data from web services and APIs. + +![Data Sources Group ><](images/wrd-components-tray-data-sources-design.png) + +## Data Source Types + +The Web Report Designer provides the following data source types: + +* [SQL Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#sql-data-source)—Connects to relational databases including Microsoft SQL Server, Oracle, MySQL, and other databases through OLE DB and ODBC connections. +* [CSV Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#csv-data-source)—Imports data from CSV documents, including files (*.csv, *.tsv, *.txt), inline strings, or data streams. +* [Web Service Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#web-service-data-source)—Retrieves JSON data from REST APIs and web services. +* [GraphQL Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#graphql-data-source)—Connects to GraphQL services to retrieve structured JSON data. +* [JSON Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#json-data-source)—Processes JSON data from local files or embedded content within reports. +* [Object Data Source]({%slug web-report-designer-user-guide-components-data-sources%}#object-data-source)—Binds report items to .NET business objects and custom data providers. + +## SQL Data Source + +To add a new SQL Data Source: + +1. Click the **SQL Data Source** item in the **Components** tab. + +1. The SQL Data Source configuration wizard appears allowing you to use either an existing connection or build a new one by providing a `connection string` to connect to the database and define the SQL statement or the stored procedure to retrieve the data: + +>caption Existing vs New SQL Connection + +![Existing vs New SQL Connection ><](images/wrd-components-tray-data-sources-sql-choose-data-connection.png) + +If you want to skip any further fine-tuning, click the **Finish** button to confirm the configured connection and close the wizard. Otherwise, you can continue applying the desired settings. The wizard may skip some of the wizard steps depending on your selection. + +The following table lists all the steps that the wizard offers: + +|Wizard Step|Description| +|----|----| +|1. Choose data connection|Select an existing or build a new data connection.| +|2. Data connection options|Specify whether to use the connection as shared or embed it in the report.| +|3. Configure data source command|Specify a *select statement* or a *stored procedure* to retrieve data from the data source. The [Query Builder]({%slug web-report-designer-query-builder%}) helps you create queries to retrieve data from a relational database for a SqlDataSource component.| +|4. Configure data source parameters|This step occurs if you select *Stored procedure* in step 3. Specify a database type and a default value or an expression to evaluate for each data source parameter.| +|5. Configure design time parameters|Specify an appropriate design time value for each data source parameter.| +|6. Preview data source results|Preview the result set returned by this data source.| + +>caption Select and Preview SQL Data + +![Select and Preview SQL Data ><](images/wrd-components-tray-data-sources-sql-select-and-preview.png) + +## CSV Data Source + +To add a new CSV Data Source: + +1. Click the **CSV Data Source** item in the **Components** tab. + +1. The CSV Data Source configuration wizard appears allowing you to use either an existing or a new CSV file, or use inline CSV text with the data: + +>caption Upload a CSV Source vs Inline + +![CSV Data Connection ><](images/wrd-components-tray-data-sources-csv-choose-data-connection.png) + +If you want to skip any further fine-tuning, click the **Finish** button to confirm the configured connection and close the wizard. Otherwise, you can continue applying the desired settings. + +The following table lists all the steps that the wizard offers: + +|Wizard step|Description| +|----|----| +|1. Choose a CSV source|Select an existing or select a new CSV file or use inline CSV data.| +|2. Modify your CSV file|If you upload a CSV file, you can make the selected file inline and modify its content.| +|3. Configure CSV Data Source - Separators|Specify the column/row separators and whether the data include headers or not.| +|4. Configure CSV Data Source - Escape Format|Specifies the [escape format]({%slug telerikreporting/designing-reports/connecting-to-data/data-source-components/csvdatasource-component/csvdatasource-escape-formats%}).| +|5. Map Columns to Type|Specify the columns types as by default they come in string type.| +|6. Preview data source results|Preview the result set returned by this data source.| + +>caption Map Column Types and Preview CSV Data + +![Map Column Types and Preview CSV Data ><](images/wrd-components-tray-data-sources-csv-map-column-types-and-preview.png) + +## Web Service Data Source + +To add a Web Service Data Source: + +1. Click the **Web Service Data Source** item in the **Components** tab. + +1. The Web Service Data Source configuration wizard appears allowing you to create new or edit an existing WebServiceDataSource component. + +>caption Setup Web Service Data Source + +![Web Service Data Source ><](images/wrd-components-tray-data-sources-web-service-data-source.png) + +If you want to skip the further settings steps, click the **Finish** button to confirm the configured connection and close the wizard. Otherwise, you can continue applying the desired settings. The wizard may skip some of the wizard steps depending on your selection. + +The following table lists all the steps that the wizard offers: + +|Wizard step|Description| +|----|----| +|1. Configure Data Retrieval|Set up the properties of the HTTP request which will retrieve data from the web service.| +|2. Configure request parameters|Specify name, type, default value or expression, and design time value for data source parameters.| +|3. Configure Basic Authentication|Specify *Username* & *password* (relevant for *Basic authentication*).| +|4. Configure 2-step authentication|Specify the 2-step (Bearer) authentication settings.| +|5. Configure authentication parameters|Specify name, type, default value or expression, and design time value for data source parameters (relevant for *2-Step authentication*).| +|6. Choose design-time data|Specify whether to: Use real data while designing the report, Upload JSON file, or Use JSON inline as hard-coded data while designing the report.| +|7. Preview data source results|Preview the result set returned by this data source.| + +>caption Preview Data from the Web Service Data Source + +![Preview Web Service Data](images/wrd-components-tray-data-sources-preview-web-service-data-source.png) + +## GraphQL Data Source + +To add a GraphQL Data Source: + +1. Click the **GraphQL Data Source** item in the **Components** tab. + +1. The GraphQL Data Source configuration wizard appears allowing you to create new or edit an existing GraphQLDataSource component. + +The wizard allows you to set up one of the following options: + +* Set up the properties of the HTTP request which will retrieve data from the GraphQL service. +* Reference an external data file. +* Use inline data string containing the data (required if Service URL or external data file is not set). + +The following configuration steps are available: + +1. Set up the **GraphQL Service URL** (e.g. `https://buybutton.store/graphql`) + +1. Provide the **Query** for data retrieval: + + ```SQL + query paginateProducts($cursor: String) { + site { + products(first: 5, after: $cursor) { + pageInfo { + endCursor + hasNextPage + } + edges { + node { + entityId + name + } + } + } + } + } + ``` + + >caption Set up GraphQL Service URL and Configure the Query + + ![GraphQL Data Source](images/wrd-components-tray-data-sources-graphql-data-source-http-request-query.png) + +1. Specify the parameter name, type, value and design time value for each data source parameter. The value can be a default value or an expression to evaluate. The design-time value should be a constant value. This is necessary for retrieving the data source schema correctly at design time: + + ![GraphQL Request Parameters](images/wrd-components-tray-data-sources-graphql-request-parameters.png) + +1. Configure Authentication settings (occurs only if an authentication method is selected in the first step): Transmits credentials as username/password pairs, encoded using base64. + +1. As a final step, you can **Preview** the result: + + ![GraphQL Preview Data](images/wrd-components-tray-data-sources-graphql-preview-data.png) + +## JSON Data Source + +By clicking the **JSON Data Source** item in the **Components** tab, the JSON Data Source configuration wizard appears, allowing you to use a new or an existing JSON file, or directly enter inline JSON content: + +>caption Upload a new JSON file vs Inline JSON data + +![Inline JSON Data Source](images/wrd-components-tray-data-sources-inline-vs-upload-file-json-data-source.png) + +>note The **Data selector** (e.g. `$.store.book[?(@.price<10)]`) is a [JSONPath](https://goessner.net/articles/JsonPath/) string which will be used to query the data. + +|Wizard step|Description| +|----|----| +|1. Choose a JSON source|Specify the JSON source that should be retrieved.| +|2. Modify your JSON file|You can make the selected file inline and modify its content (relevant when using a JSON file in step 1).| +|3. Preview data source results|Preview the result set returned by this data source.| + +## Object Data Source + +To add an `Object Data Source`: + +1. Click the **Object Data Source** item in the **Components** tab. + +1. The Object Data Source configuration wizard appears allowing you to use a business object or any other class (that was already defined) for data retrieval in the report: + +* Select Business object + + ![Object Data Source](images/wrd-components-tray-data-sources-object-data-source.png) + +* Specify the Data member + + ![Object Data Source](images/wrd-components-tray-data-sources-object-data-source-data-member.png) + +The following table lists all the steps that the wizard offers: + +|Wizard step|Description| +|----|----| +|1. Choose a business object|The selected business object type's assembly-qualified name will be stored in the data source component's DataSource property.| +|2. Choose a data member|The business object instance will be created using its default constructor. You have the option to specify a different constructor or a data member (method or property) that will return the data.| +|3. Configure data source parameters|Specify default value or expression and design-time value for data source parameters.| +|4. Preview data source results|Preview the result set returned by this data source.| + +>caption Preview Data + +![Preview Data from Object Data Source](images/wrd-components-tray-data-sources-object-data-source-preview.png) + +## Modifying Already Configured Data Sources + +Once a Data Source component is configured, it can be modified later by selecting it in the **Explorer** tab. On the right-hand side the **General** settings (dependent on the specific Data Source item) are loaded and users can further modify them: + +![GraphQL Data Source Settings](images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer-common.png) + +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [Data Source Components Overview]({%slug telerikreporting/designing-reports/connecting-to-data/data-source-components/overview%}) diff --git a/user-guide/components/images/wrd-components-report-sections.png b/user-guide/components/images/wrd-components-report-sections.png new file mode 100644 index 000000000..7c1b6a392 Binary files /dev/null and b/user-guide/components/images/wrd-components-report-sections.png differ diff --git a/user-guide/components/images/wrd-components-subreport-adding-subreport.png b/user-guide/components/images/wrd-components-subreport-adding-subreport.png new file mode 100644 index 000000000..776266576 Binary files /dev/null and b/user-guide/components/images/wrd-components-subreport-adding-subreport.png differ diff --git a/user-guide/components/images/wrd-components-subreport-bind-product-fields.png b/user-guide/components/images/wrd-components-subreport-bind-product-fields.png new file mode 100644 index 000000000..bf035230b Binary files /dev/null and b/user-guide/components/images/wrd-components-subreport-bind-product-fields.png differ diff --git a/user-guide/components/images/wrd-components-subreport-create-categories-table.png b/user-guide/components/images/wrd-components-subreport-create-categories-table.png new file mode 100644 index 000000000..f92df1a71 Binary files /dev/null and b/user-guide/components/images/wrd-components-subreport-create-categories-table.png differ diff --git a/user-guide/components/images/wrd-components-subreport-create-report-parameter.png b/user-guide/components/images/wrd-components-subreport-create-report-parameter.png new file mode 100644 index 000000000..f20c061ed Binary files /dev/null and b/user-guide/components/images/wrd-components-subreport-create-report-parameter.png differ diff --git a/user-guide/components/images/wrd-components-subreport-master-detail-hierarchy.png b/user-guide/components/images/wrd-components-subreport-master-detail-hierarchy.png new file mode 100644 index 000000000..6b02e8f07 Binary files /dev/null and b/user-guide/components/images/wrd-components-subreport-master-detail-hierarchy.png differ diff --git a/user-guide/components/images/wrd-components-subreport-new-report.png b/user-guide/components/images/wrd-components-subreport-new-report.png new file mode 100644 index 000000000..9bb9b0ddb Binary files /dev/null and b/user-guide/components/images/wrd-components-subreport-new-report.png differ diff --git a/user-guide/components/images/wrd-components-subreport-report-data-source.png b/user-guide/components/images/wrd-components-subreport-report-data-source.png new file mode 100644 index 000000000..0fff62f36 Binary files /dev/null and b/user-guide/components/images/wrd-components-subreport-report-data-source.png differ diff --git a/user-guide/components/images/wrd-components-subreport-setup-productcategoryid-report-parameter.png b/user-guide/components/images/wrd-components-subreport-setup-productcategoryid-report-parameter.png new file mode 100644 index 000000000..206aa7b04 Binary files /dev/null and b/user-guide/components/images/wrd-components-subreport-setup-productcategoryid-report-parameter.png differ diff --git a/user-guide/components/images/wrd-components-subreport-update-sql-select.png b/user-guide/components/images/wrd-components-subreport-update-sql-select.png new file mode 100644 index 000000000..5f52d498c Binary files /dev/null and b/user-guide/components/images/wrd-components-subreport-update-sql-select.png differ diff --git a/user-guide/components/images/wrd-components-subreport-urireportsource.png b/user-guide/components/images/wrd-components-subreport-urireportsource.png new file mode 100644 index 000000000..456456a22 Binary files /dev/null and b/user-guide/components/images/wrd-components-subreport-urireportsource.png differ diff --git a/user-guide/components/images/wrd-components-subreport.png b/user-guide/components/images/wrd-components-subreport.png new file mode 100644 index 000000000..ce5343de6 Binary files /dev/null and b/user-guide/components/images/wrd-components-subreport.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-area-100-stacked-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-area-100-stacked-type.png new file mode 100644 index 000000000..0340b6f1b Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-area-100-stacked-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-area-chart-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-area-chart-type.png new file mode 100644 index 000000000..2ebacd64c Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-area-chart-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-area-chart-types.png b/user-guide/components/images/wrd-components-tray-charts-configure-area-chart-types.png new file mode 100644 index 000000000..258fd7ba7 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-area-chart-types.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-area-chart.mp4 b/user-guide/components/images/wrd-components-tray-charts-configure-area-chart.mp4 new file mode 100644 index 000000000..8b507789b Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-area-chart.mp4 differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-100-stacked-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-100-stacked-type.png new file mode 100644 index 000000000..7202cd242 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-100-stacked-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-clustered-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-clustered-type.png new file mode 100644 index 000000000..b5e9ad971 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-clustered-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-stacked-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-stacked-type.png new file mode 100644 index 000000000..b67ef9a2d Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-stacked-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-type.png new file mode 100644 index 000000000..80744cc60 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.gif b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.gif new file mode 100644 index 000000000..e792864d1 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.gif differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.mp4 b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.mp4 new file mode 100644 index 000000000..d9fd1f3b1 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.mp4 differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.png b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.png new file mode 100644 index 000000000..b31aa5936 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-100-stacked-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-100-stacked-type.png new file mode 100644 index 000000000..8f6eeb7be Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-100-stacked-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-clustered-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-clustered-type.png new file mode 100644 index 000000000..870cc52c4 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-clustered-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-stacked-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-stacked-type.png new file mode 100644 index 000000000..ce2c0e209 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-stacked-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-column-chart.mp4 b/user-guide/components/images/wrd-components-tray-charts-configure-column-chart.mp4 new file mode 100644 index 000000000..f5502932b Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-column-chart.mp4 differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-doughnut-chart-type.mp4 b/user-guide/components/images/wrd-components-tray-charts-configure-doughnut-chart-type.mp4 new file mode 100644 index 000000000..ea7ca7755 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-doughnut-chart-type.mp4 differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-doughnut-chart-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-doughnut-chart-type.png new file mode 100644 index 000000000..753cce8b9 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-doughnut-chart-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-line-100-stacked-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-line-100-stacked-type.png new file mode 100644 index 000000000..32d60f894 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-line-100-stacked-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-type.mp4 b/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-type.mp4 new file mode 100644 index 000000000..5c2bc5974 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-type.mp4 differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-type.png new file mode 100644 index 000000000..4dbad665c Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-types.png b/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-types.png new file mode 100644 index 000000000..2cf40926f Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-types.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-line-with-markers-100-stacked-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-line-with-markers-100-stacked-type.png new file mode 100644 index 000000000..cbe310635 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-line-with-markers-100-stacked-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-line-with-markers-chart-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-line-with-markers-chart-type.png new file mode 100644 index 000000000..560132f0f Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-line-with-markers-chart-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-type.mp4 b/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-type.mp4 new file mode 100644 index 000000000..4c1b7891d Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-type.mp4 differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-type.png new file mode 100644 index 000000000..2591add50 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-types.png b/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-types.png new file mode 100644 index 000000000..9c48f1704 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-types.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-stacked-area-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-stacked-area-type.png new file mode 100644 index 000000000..347dca3ae Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-stacked-area-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-stacked-line-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-stacked-line-type.png new file mode 100644 index 000000000..63a64bde1 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-stacked-line-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-configure-stacked-line-with-markers-type.png b/user-guide/components/images/wrd-components-tray-charts-configure-stacked-line-with-markers-type.png new file mode 100644 index 000000000..376fb7154 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-configure-stacked-line-with-markers-type.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-design-mode.png b/user-guide/components/images/wrd-components-tray-charts-design-mode.png new file mode 100644 index 000000000..e28a74f47 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-design-mode.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts-small.png b/user-guide/components/images/wrd-components-tray-charts-small.png new file mode 100644 index 000000000..775e31e88 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts-small.png differ diff --git a/user-guide/components/images/wrd-components-tray-charts.png b/user-guide/components/images/wrd-components-tray-charts.png new file mode 100644 index 000000000..9b6199984 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-charts.png differ diff --git a/user-guide/components/images/wrd-components-tray-choropleth-map-step-1.png b/user-guide/components/images/wrd-components-tray-choropleth-map-step-1.png new file mode 100644 index 000000000..31d7d01d0 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-choropleth-map-step-1.png differ diff --git a/user-guide/components/images/wrd-components-tray-choropleth-map-step-3.png b/user-guide/components/images/wrd-components-tray-choropleth-map-step-3.png new file mode 100644 index 000000000..06522789a Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-choropleth-map-step-3.png differ diff --git a/user-guide/components/images/wrd-components-tray-choropleth-map.png b/user-guide/components/images/wrd-components-tray-choropleth-map.png new file mode 100644 index 000000000..71306d5c8 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-choropleth-map.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-csv-choose-data-connection.png b/user-guide/components/images/wrd-components-tray-data-sources-csv-choose-data-connection.png new file mode 100644 index 000000000..136692c76 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-csv-choose-data-connection.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-csv-map-column-types-and-preview.png b/user-guide/components/images/wrd-components-tray-data-sources-csv-map-column-types-and-preview.png new file mode 100644 index 000000000..4faa73713 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-csv-map-column-types-and-preview.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-csv-wizard.mp4 b/user-guide/components/images/wrd-components-tray-data-sources-csv-wizard.mp4 new file mode 100644 index 000000000..8c17b1ec2 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-csv-wizard.mp4 differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-design.png b/user-guide/components/images/wrd-components-tray-data-sources-design.png new file mode 100644 index 000000000..e011f2fd7 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-design.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-http-request-query.png b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-http-request-query.png new file mode 100644 index 000000000..81df82679 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-http-request-query.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-http-request.png b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-http-request.png new file mode 100644 index 000000000..20d1fda94 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-http-request.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer-common.png b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer-common.png new file mode 100644 index 000000000..47ab6a893 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer-common.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer.png b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer.png new file mode 100644 index 000000000..d1d07187b Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-settings.png b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-settings.png new file mode 100644 index 000000000..2c0055b75 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-settings.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-graphql-preview-data.png b/user-guide/components/images/wrd-components-tray-data-sources-graphql-preview-data.png new file mode 100644 index 000000000..7f9d30fe3 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-graphql-preview-data.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-graphql-query.png b/user-guide/components/images/wrd-components-tray-data-sources-graphql-query.png new file mode 100644 index 000000000..d16ec422a Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-graphql-query.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-graphql-request-parameters.png b/user-guide/components/images/wrd-components-tray-data-sources-graphql-request-parameters.png new file mode 100644 index 000000000..f581e6ec5 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-graphql-request-parameters.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-inline-json-data-source.png b/user-guide/components/images/wrd-components-tray-data-sources-inline-json-data-source.png new file mode 100644 index 000000000..b1d33a4e0 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-inline-json-data-source.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-inline-vs-upload-file-json-data-source.png b/user-guide/components/images/wrd-components-tray-data-sources-inline-vs-upload-file-json-data-source.png new file mode 100644 index 000000000..36bd33ff4 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-inline-vs-upload-file-json-data-source.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-object-data-source-data-member.png b/user-guide/components/images/wrd-components-tray-data-sources-object-data-source-data-member.png new file mode 100644 index 000000000..488375eb7 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-object-data-source-data-member.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-object-data-source-preview.png b/user-guide/components/images/wrd-components-tray-data-sources-object-data-source-preview.png new file mode 100644 index 000000000..2cfe3988f Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-object-data-source-preview.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-object-data-source.png b/user-guide/components/images/wrd-components-tray-data-sources-object-data-source.png new file mode 100644 index 000000000..4cef2a71a Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-object-data-source.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-preview-web-service-data-source.png b/user-guide/components/images/wrd-components-tray-data-sources-preview-web-service-data-source.png new file mode 100644 index 000000000..62996c6e3 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-preview-web-service-data-source.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-sql-choose-data-connection.png b/user-guide/components/images/wrd-components-tray-data-sources-sql-choose-data-connection.png new file mode 100644 index 000000000..58f5f8e01 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-sql-choose-data-connection.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-sql-existing-connection.png b/user-guide/components/images/wrd-components-tray-data-sources-sql-existing-connection.png new file mode 100644 index 000000000..d22d8f837 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-sql-existing-connection.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-sql-new-connection.png b/user-guide/components/images/wrd-components-tray-data-sources-sql-new-connection.png new file mode 100644 index 000000000..28002470f Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-sql-new-connection.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-sql-select-and-preview.png b/user-guide/components/images/wrd-components-tray-data-sources-sql-select-and-preview.png new file mode 100644 index 000000000..cd92cf3c7 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-sql-select-and-preview.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-upload-json-data-source.png b/user-guide/components/images/wrd-components-tray-data-sources-upload-json-data-source.png new file mode 100644 index 000000000..58795f009 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-upload-json-data-source.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources-web-service-data-source.png b/user-guide/components/images/wrd-components-tray-data-sources-web-service-data-source.png new file mode 100644 index 000000000..051c60c23 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources-web-service-data-source.png differ diff --git a/user-guide/components/images/wrd-components-tray-data-sources.png b/user-guide/components/images/wrd-components-tray-data-sources.png new file mode 100644 index 000000000..b710f0834 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-data-sources.png differ diff --git a/user-guide/components/images/wrd-components-tray-design-mode.png b/user-guide/components/images/wrd-components-tray-design-mode.png new file mode 100644 index 000000000..c3d5db455 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-design-mode.png differ diff --git a/user-guide/components/images/wrd-components-tray-grid-mode.png b/user-guide/components/images/wrd-components-tray-grid-mode.png new file mode 100644 index 000000000..7c1d8a39a Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-grid-mode.png differ diff --git a/user-guide/components/images/wrd-components-tray-maps-azure-map-wit-pie-charts-small.png b/user-guide/components/images/wrd-components-tray-maps-azure-map-wit-pie-charts-small.png new file mode 100644 index 000000000..bae68db0c Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps-azure-map-wit-pie-charts-small.png differ diff --git a/user-guide/components/images/wrd-components-tray-maps-azure-map-wit-pie-charts.png b/user-guide/components/images/wrd-components-tray-maps-azure-map-wit-pie-charts.png new file mode 100644 index 000000000..624ddade2 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps-azure-map-wit-pie-charts.png differ diff --git a/user-guide/components/images/wrd-components-tray-maps-design-mode.png b/user-guide/components/images/wrd-components-tray-maps-design-mode.png new file mode 100644 index 000000000..661c60479 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps-design-mode.png differ diff --git a/user-guide/components/images/wrd-components-tray-maps-geolocationmapgroup.png b/user-guide/components/images/wrd-components-tray-maps-geolocationmapgroup.png new file mode 100644 index 000000000..8ae57e115 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps-geolocationmapgroup.png differ diff --git a/user-guide/components/images/wrd-components-tray-maps-location-providers.png b/user-guide/components/images/wrd-components-tray-maps-location-providers.png new file mode 100644 index 000000000..1c11c59d5 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps-location-providers.png differ diff --git a/user-guide/components/images/wrd-components-tray-maps-location-tile-providers.png b/user-guide/components/images/wrd-components-tray-maps-location-tile-providers.png new file mode 100644 index 000000000..02004d369 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps-location-tile-providers.png differ diff --git a/user-guide/components/images/wrd-components-tray-maps-map-data-source.png b/user-guide/components/images/wrd-components-tray-maps-map-data-source.png new file mode 100644 index 000000000..5edadc418 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps-map-data-source.png differ diff --git a/user-guide/components/images/wrd-components-tray-maps-piegraph-mapseries.png b/user-guide/components/images/wrd-components-tray-maps-piegraph-mapseries.png new file mode 100644 index 000000000..232262990 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps-piegraph-mapseries.png differ diff --git a/user-guide/components/images/wrd-components-tray-maps-series-map-group..png b/user-guide/components/images/wrd-components-tray-maps-series-map-group..png new file mode 100644 index 000000000..63f2cc150 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps-series-map-group..png differ diff --git a/user-guide/components/images/wrd-components-tray-maps-series-map-group.png b/user-guide/components/images/wrd-components-tray-maps-series-map-group.png new file mode 100644 index 000000000..dbe2a97d1 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps-series-map-group.png differ diff --git a/user-guide/components/images/wrd-components-tray-maps.png b/user-guide/components/images/wrd-components-tray-maps.png new file mode 100644 index 000000000..fc6930cd1 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-maps.png differ diff --git a/user-guide/components/images/wrd-components-tray-report-items.png b/user-guide/components/images/wrd-components-tray-report-items.png new file mode 100644 index 000000000..a0c35ef51 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-report-items.png differ diff --git a/user-guide/components/images/wrd-components-tray-tables-crosstab-empty.png b/user-guide/components/images/wrd-components-tray-tables-crosstab-empty.png new file mode 100644 index 000000000..a134cbeb3 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-tables-crosstab-empty.png differ diff --git a/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard.png b/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard.png new file mode 100644 index 000000000..6226cf2a9 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard.png differ diff --git a/user-guide/components/images/wrd-components-tray-tables-design.png b/user-guide/components/images/wrd-components-tray-tables-design.png new file mode 100644 index 000000000..3e08c5ea8 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-tables-design.png differ diff --git a/user-guide/components/images/wrd-components-tray-tables-small.png b/user-guide/components/images/wrd-components-tray-tables-small.png new file mode 100644 index 000000000..a799cbee0 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-tables-small.png differ diff --git a/user-guide/components/images/wrd-components-tray-tables-table-empty.png b/user-guide/components/images/wrd-components-tray-tables-table-empty.png new file mode 100644 index 000000000..22da24b28 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-tables-table-empty.png differ diff --git a/user-guide/components/images/wrd-components-tray-tables-table-wizard.png b/user-guide/components/images/wrd-components-tray-tables-table-wizard.png new file mode 100644 index 000000000..be11e17c2 Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-tables-table-wizard.png differ diff --git a/user-guide/components/images/wrd-components-tray-tables.png b/user-guide/components/images/wrd-components-tray-tables.png new file mode 100644 index 000000000..7dcfecc5c Binary files /dev/null and b/user-guide/components/images/wrd-components-tray-tables.png differ diff --git a/user-guide/components/images/wrd-components-tray.png b/user-guide/components/images/wrd-components-tray.png new file mode 100644 index 000000000..00366c86a Binary files /dev/null and b/user-guide/components/images/wrd-components-tray.png differ diff --git a/user-guide/components/maps.md b/user-guide/components/maps.md new file mode 100644 index 000000000..22f2787b6 --- /dev/null +++ b/user-guide/components/maps.md @@ -0,0 +1,200 @@ +--- +title: Maps +page_title: Maps +description: Explore the available Maps report components offered by the Web Report Designer. +slug: web-report-designer-user-guide-components-maps +tags: web, report, design, components, map +published: True +position: 4 +--- + + + +# Maps + +The Maps in the Web Report Designer are report items that enable you to visualize aggregated business data in a geographical manner. Maps transform raw data into intuitive visual representations overlaid on geographical regions, which lets you identify patterns, trends, and regional insights. + +The Maps are suitable for a variety of use cases: + +* Regional sales analysis—Visualize sales performance across different states, countries, or territories. +* Demographic data visualization—Display population density, income levels, or survey results by geographic area. +* Location-based reporting—Show data points related to specific addresses, cities, or coordinates. +* Performance comparison—Compare metrics across geographical regions using different chart types. +* Distribution analysis—Understand how products, services, or resources are distributed geographically. + +![Maps Group ><](images/wrd-components-tray-maps-design-mode.png) + +## Map Types + +The Web Report Designer provides two main types of map components: + +* [Map]({%slug web-report-designer-user-guide-components-maps%}#map)—Displays data in various formats determined by the chosen Map Type: Point, Pie, or Column charts positioned on geographical locations. +* [Choropleth]({%slug web-report-designer-user-guide-components-maps%}#choropleth)—A [thematic map](https://en.wikipedia.org/wiki/Choropleth_map) that uses graded color differences to display a measure over predefined regions or areas, making it one of the most popular ways to visualize how a measure varies across a geographic area. + +## Required Data Sources + +Because of its architecture, the Map component requires two types of data sources. When adding a Map component to your report, both data sources must be available: + +* Visual map data—Geographical information provided by location and tile providers that render the actual map imagery. +* Business data—Your analytical data stored in a separate data source, with values that correspond to specific locations (displayed as charts on the map). + +## Prerequisites + +Before adding a Map report item: + +* Obtain a valid **Location Provider** key (for example, Azure key) to authenticate the requests to the location and tile provider. You must enter this key in the **ClientToken** property. +* Alternaively, if using a location and tile provider is not an option, provide the geographical coordinates of your points manually, and set up the MapSeries accordingly. + +### Location and Tile Providers + +The **Location Provider** matches the addresses or locations with geographical coordinates. The Map Report item provides support for the following location providers: + +|Location Provider|Description| +|----|----| +|Azure| The AzureLocationProvider uses the [Azure Maps Get Geocoding Request](https://learn.microsoft.com/en-us/rest/api/maps/search/get-geocoding) to get location information about the requested address. This provider was introduced in Q2 2025 as part of the transition from Bing Maps to Azure Maps.| +|Bing *(Deprecated)*|The BingLocationProvider uses the [Bing Maps Locations API](https://learn.microsoft.com/en-us/bingmaps/rest-services/locations/) to get location information about the requested address.| +|MapQuestOpenAPI (Obsolete)|The MapQuestOpenAPILocationProvider uses the MapQuest Geocoding Open API geocoding service to provide a single-line address and receive potential geographical coordinates of the geocoded location.| +|MapQuest (Obsolete) |The MapQuestLocationProvider uses the [MapQuest Geocoding API](https://developer.mapquest.com/documentation/api/geocoding/) geocoding service to provide a single-line address and receive potential geographical coordinates of the geocoded location.| + +>caution Microsoft has announced the deprecation of Bing Maps for Enterprise: +> * `Free (Basic)` accounts can use Bing Maps services until June 30, 2025. +> * `Enterprise` accounts can continue until June 30, 2028. +> +> The official Microsoft recommendation is for users to migrate to [Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/) prior to these periods to avoid service disruptions. +> Telerik Reporting introduced support for Azure Maps through dedicated providers in Q2 2025 to address the deprecation of Bing Maps for Enterprise. + +The **Tile Provider** requests and downloads the imagery data for the specified map extent. The Map Report item supports the following tile providers: + +|TileProvider|Description| +|----|----| +|AzureMapsTileProvider|Supports a variety of tile sets that let you customize the appearance and data shown on your map.| +|BingMapsTileProvider *(Deprecated)*|Uses the [Bing Maps REST Services](https://learn.microsoft.com/en-us/bingmaps/rest-services/) to request metadata information that is needed to resolve the tile requests URLs, zoom levels, tile sizes and attribution information such as the text or logo that will be displayed on the map.| +|MapQuestTileProvider *(Obsolete)*|Uses the [`MapQuest`](https://www.mapquest.com/) tile servers that provides the tiles in the **OpenStreetMap Tiles** and the **MapQuest Open Aerial Tiles** imagery sets.| + +## Creating a Report with the Map Component + +The following tutorial demonstrates how to create a Map that presents sales distribution by products across several states. + +> To follow along with the steps below, you need access to an instance of the [Adventure Works](https://github.com/microsoft/sql-server-samples/tree/master/samples/databases/adventure-works) database for [Microsoft SQL Server](https://learn.microsoft.com/en-us/sql/database-engine/install-windows/install-sql-server?view=sql-server-ver17). + + + +Since this tutorial uses the **AzureLocationProvider**, an Azure Maps subscription key is required. You can obtain a key by [creating an Azure Maps account through the Azure Portal](https://learn.microsoft.com/en-us/azure/azure-maps/quick-demo-map-app#create-an-azure-maps-account). For more information on how to access the key, refer to [Get the subscription key for your account](https://learn.microsoft.com/en-us/azure/azure-maps/quick-demo-map-app#get-the-subscription-key-for-your-account). + +### Step 1: Adding the Data Source + +Add a new [SQL Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) item with a connection to the AdventureWorks database and paste the following query in the `SELECT` statement box: + +```SQL +SELECT +PS.Name AS ProductSubCategory, +SP.Name + ', ' + CR.Name AS State, +SOD.LineTotal as LineTotal +FROM + +Production.Product AS P +INNER JOIN Production.ProductSubcategory AS PS ON P.ProductSubcategoryID = PS.ProductSubcategoryID +INNER JOIN Production.ProductCategory AS PC ON PS.ProductCategoryID = PC.ProductCategoryID +INNER JOIN Sales.SalesOrderDetail AS SOD ON P.ProductID = SOD.ProductID +INNER JOIN Sales.SalesOrderHeader AS SOH ON SOD.SalesOrderID = SOH.SalesOrderID +INNER JOIN Person.Address AS ADDR ON ADDR.AddressID = SOH.ShipToAddressID +INNER JOIN Person.StateProvince AS SP ON SP.StateProvinceID = ADDR.StateProvinceID +INNER JOIN Person.CountryRegion AS CR ON CR.CountryRegionCode = SP.CountryRegionCode + +WHERE +CR.Name IN ('Australia') +AND DATEPART(YEAR, SOH.OrderDate) IN (2003, 2004) +AND PC.Name = 'Bikes' +``` + +![Set up Map DataSource ><](images/wrd-components-tray-maps-map-data-source.png) + +### Step 2: Building the Map Charts + +1. Select the **Detail** section of the report and from the **Components** tab add a **Map** component. Set the SQL data source you have already created as the **Data source** property. + +1. Set up GeoLocationMapGroup for the `State` field: + + 2.1 Create a new GeoLocationMapGroup. + + 2.2 Add a new Grouping item. + + 2.3 Set the Expression to the `State` field. + + ![Adding a GeoLocationMapGroup ><](images/wrd-components-tray-maps-geolocationmapgroup.png) + +1. Set up the Series Group using the `ProductSubCategory` field: + + 3.1 Create a new SeriesGroup. + + 3.2 Add a new Child Group item. + + 3.3 Add a new Grouping. + + 3.4 Set the Expression to the `ProductSubCategory` field. + + ![Adding a Series Map group ><](images/wrd-components-tray-maps-series-map-group.png) + +1. Set up the **Series** type under the **PRESENTATION** section: + + 4.1 Add a new **PieMapSeries**. + + 4.2 Specify the LegendItem's Value. + + 4.3 Specify the series' Size and all other properties that the dialog offers. + + ![Adding a PieGraphMapSeries ><](images/wrd-components-tray-maps-piegraph-mapseries.png) + +### Step 3: Defining the Location and Tile Providers + +Select the location provider (for example, Azure) that will be used to geocode the `State` field. Once you obtain the key, paste it in the **ClientToken** box: + +![Defining the Location and Tile Providers ><](images/wrd-components-tray-maps-location-tile-providers.png) + +## Choropleth + +A **Choropleth** map is a thematic map where areas are shaded or colored in proportion to a statistical variable (like population density, income levels, or voting results). This specialized map component colors geographical areas according to the data values they represent. + +The Choropleth below shows the 100 most populated countries: + +![Choropleth map ><](images/wrd-components-tray-choropleth-map.png) + +>important Currently, the Web Report Designer allows only **displaying an already created** report (for example, using the Standalone Report Designer) that contains a Choropleth report item and simple fine-tuning. It is not possible to build a Choropleth from scratch in the Web Report Designer. + + + + + + +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [Map Overview]({%slug map_report_item_overview%}) +* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) +* [Adding Choropleth Maps to the Report]({%slug telerikreporting/designing-reports/report-structure/map/how-to/how-to-setup-a-choropleth-using-the-map-wizard%}) +* [Population Density Demo Report with Choropleth](https://demos.telerik.com/reporting/population-density) diff --git a/user-guide/components/report-items.md b/user-guide/components/report-items.md new file mode 100644 index 000000000..8cbe5c156 --- /dev/null +++ b/user-guide/components/report-items.md @@ -0,0 +1,135 @@ +--- +title: Report Items +page_title: Report Items - Web Report Designer User Guide +description: "Learn about report items in Telerik Reporting, their types, purposes, and how they serve as the fundamental building blocks for creating effective reports." +slug: user-guide/components/report-items +tags: telerik, reporting, report, items, components, building blocks, visualization +published: True +position: 1 +--- + + + +# Report Items + +The Report Items are visual elements used to display and organize content within a report. + +Like the other [report components]({%slug web-report-designer-user-guide-components%}) in the Web Report Designer, they are building blocks that make up the structure and layout of a report, with each item serving a specific purpose depending on the type of data being displayed. + +Report items can reside inside report sections or other report components such as Panels, Tables, Lists, and so on. The arrangement of these items creates the overall layout and visual presentation of your report. + +![Report Items - Web Report Designer User Guide - Telerik Reporting](../images/wrd-report-items-crop.png) + +## Report Item Types + +Telerik Web Report Designer provides various report items, each designed for specific data visualization needs: + +* [TextBox](#textbox-report-item)—Displays static or data-bound text with various formatting options. +* [HtmlTextBox](#htmltextbox-report-item)—Inserts HTML-formatted text with styling and formatting. +* [PictureBox](#picturebox-report-item)—Shows images from various sources (binary, URIs, Base64, SVG). +* [CheckBox](#checkbox-report-item)—Shows both text and a check mark for boolean data. +* [Barcode](#barcode-report-item)—Renders various barcode types for labeling and identification. +* [Shape](#shape-report-item)—Displays predefined shapes like lines, arrows, and geometric figures. +* [Panel](#panel-report-item)—Acts as a container to group or separate multiple report items. +* [Gauge](#gauge-report-item)—Visualizes key performance indicators (KPIs) in radial or linear formats. + +## Adding Report Items + +You can add Report Items to a report by dragging them from the **Components** panel onto the design surface of the report. Alternatively, you can also add items by consecutively clicking the report section where you want to place the item and then the report item in the **Components** panel. + +## Customizing the Report Items + +Each report item has specific properties and features that allow for extensive customization to meet your reporting requirements. To change the properties of an item, navigate to the **Properties** panel of the Web Report Designer. + +![Report Item Properties - Web Report Designer User Guide - Telerik Reporting](../images/wrd-properties-area-crop.png) + +Once you add the desired Report Items, the **Properties** panel allows you to: + +* Arrange items within sections or containers +* Resize and position items as needed +* Set properties to control appearance and behavior +* Bind items to data sources +* Apply styling and conditional formatting +* Configure interactivity options + +## TextBox + +The TextBox is used for titles, labels, and within tables. It can display both static and dynamic text, including expressions and database fields. The TextBox's flexible properties allow you to control its size and text orientation. + + + +To learn more about working with the TextBox item, see the [TextBox article in the main Telerik Reporting documentation]({%slug telerikreporting/designing-reports/report-structure/textbox %}). + +## HtmlTextBox + +The HtmlTextBox allows you to insert and display HTML-formatted text within a report. The HtmlTextBox item is ideal for scenarios where you need rich text formatting, dynamic content, or templated text in your reports. You can set its content at design time using a WYSIWYG editor, an ezxpression editor, or dynamically from a data source. + + + +To learn more about working with the HtmlTextBox item, see the [HtmlTextBox article in the main Telerik Reporting documentation]({%slug telerikreporting/designing-reports/report-structure/htmltextbox/overview %}). + +## PictureBox + +The PictureBox displays images within a report. It is ideal for product images, logos, barcodes, or any visual content in reports. The PictureBox supports various image formats, including Base64-encoded images, SVG, and common raster formats like BMP, GIF, JPEG, PNG, EXIF, and TIFF. It provides flexible data binding and layout options to fit various reporting needs. + + + +To learn more about working with the PictureBox item, see the [PictureBox article in the main Telerik Reporting documentation]({%slug telerikreporting/designing-reports/report-structure/picturebox %}). + +## CheckBox + +The Checkbox displays a check mark alongside text in a report. It visually represents boolean or multi-state data (such as approved/disapproved) and can be customized to match various data field values. Its main uses include displaying status indicators, approval states, or any scenario where a visual check mark is needed in a report. The item supports both static and data-driven content. + + + +To learn more about working with the CheckBox item, see the [CheckBox article in the main Telerik Reporting documentation]({%slug telerikreporting/designing-reports/report-structure/checkbox %}). + +## Barcode + +The Barcode item allows you to automatically generate barcodes from numeric or character data within a report. It supports both 1D and 2D barcodes. The Barcode Report Item is ideal for adding machine-readable codes to reports, such as product labels, inventory sheets, tickets, or any scenario where barcodes are needed for scanning and automation. + + + +To learn more about working with the Barcode item, see the [Barcode article in the main Telerik Reporting documentation]({%slug telerikreporting/designing-reports/report-structure/barcode/overview %}). + +## Shape + +The Shape item displays a single, predefined geometric shape (such as lines, arrows, stars, or polygons) within a report. It also allows you to create custom shapes. The Shape item is ideal for adding visual elements, separators, highlights, or decorative graphics to reports, which lets you enhance readability and visual appeal. It can also be used to represent flow, direction, or status using arrows and other shapes. + + + +To learn more about working with the Shape item, see the [Shape article in the main Telerik Reporting documentation]({%slug telerikreporting/designing-reports/report-structure/shape %}). + +## Panel + +The Panel is a container used to group or separate multiple report items for layout and organizational purposes. It is not bound to data and does not affect the data context of its contents. The Panel is perfect for structuring complex report layouts, grouping related items, and applying shared properties or visibility rules to multiple items at once. + + + +To learn more about working with the Panel item, see the [Panel article in the main Telerik Reporting documentation]({%slug telerikreporting/designing-reports/report-structure/panel %}). + +## Gauge + +The Gauge visualizes key performance indicators (KPIs) and progress toward goals. It supports both radial (circular, like speedometers) and linear (horizontal or vertical bars) gauges. You can incorporate the Gauge in dashboards and reports where you need to visualize KPIs, progress, or performance metrics at a glance, such as sales targets, speed, or completion percentages. + +### Radial Gauge + +A radial gauge is a circular visual element that looks similar to a speedometer in a car. It shows values along a curved scale, usually in the shape of a full or partial circle. The pointer on the gauge is often a needle, but it can also be a marker or a bar. This pointer moves to show the current value. + +Radial gauges are especially useful when you want to show data that feels like speed or progress, such as how fast something is going or how much of a goal has been reached. + + + +### Linear Gauge + +The Linear Gauge is represented by a horizontal or vertical scale and displays its value as a percentage of the total scale's length. To add a Linear Gauge, click the **Linear Gauge Wizard** in the **Components** tab, and then use the **Configure Linear Gauge** pane to adjust the settings. + +Depending on the gauge's orientation and range, you can create horizontal, vertical, single-range, and multi-range linear gauges. + + + +To learn more about working with the Gauge item, see the [Gauge article in the main Telerik Reporting documentation]({%slug telerikreporting/designing-reports/report-structure/gauge/overview %}). diff --git a/user-guide/components/report-sections.md b/user-guide/components/report-sections.md new file mode 100644 index 000000000..4f1d85112 --- /dev/null +++ b/user-guide/components/report-sections.md @@ -0,0 +1,50 @@ +--- +title: Report Sections +page_title: Report Sections - Web Report Designer User Guide +description: "Learn about report sections in Telerik Reporting, their types, purposes, and how they serve as the fundamental building blocks for creating effective reports." +slug: user-guide/components/report-sections +tags: telerik, reporting, report, sections, components, building blocks, layout +published: True +position: 6 +--- + + + +# Report Sections + +Report sections divide the report vertically and define specific areas on the report page where content is rendered. Each section represents a distinct area with its own rendering behavior and determines how the report items within it are processed and displayed. The Web Report Designer provides five key sections that control the structure and layout of your reports. + +![Report Sections - Web Report Designer User Guide - Telerik Reporting](./images/wrd-components-report-sections.png) + +## Adding Report Sections + +The Web Report Designer automatically creates Page Header, Detail, and Page Footer sections when you create a new report. To add a Report Header, Report Footer, and a Table of Contents, select the **Components** tab, go to **REPORT SECTIONS** and click the desired section. + + + +## Page Header Section + +The Page Header section appears at the top of every page in your report. You can use this section to display report titles, logos, or other information that will be repeated on each page. The Page Header section supports page-specific functions and expressions that let you display page information and navigation elements. + +## Page Footer Section + +The Page Footer section appears at the bottom of every page in your report. This section is commonly used to display page numbers, footer text, or per-page summary information. Like the Page Header, the Page Footer section is processed after the report data has been evaluated, allowing you to use page-specific functions and expressions. + +## Report Header Section + +The Report Header section appears only once for every report. If the report has a Page Header, the Report Header will appear after the Page Header by default. This section is perfect for displaying cover page information such as report titles, company logos, dates, or introductory content. All data fields in the Report Header must use aggregate functions since they are calculated for the entire report dataset. + +## Report Footer Section + +The Report Footer section appears only once at the very end of the report. If the report has a Page Footer, the Report Footer will appear after the Page Footer by default. Use this section to display report totals, summary information, or closing content for the entire report. Similar to the Report Header, all data-bound items in the Report Footer must use aggregate functions to calculate values across the complete report data. + +## Table of Contents Section + +The Table of Contents (TOC) section provides navigational links to report items and displays the page numbers where they can be found. Users can click on TOC entries to navigate directly to the corresponding report page. The TOC section can be positioned before or after the Report Header or Report Footer sections based on your preferences. + +For a sample report with a TOC, see the [Product Catalog Report Demo](https://demos.telerik.com/reporting/product-catalog). diff --git a/user-guide/components/subreport.md b/user-guide/components/subreport.md new file mode 100644 index 000000000..827c0adeb --- /dev/null +++ b/user-guide/components/subreport.md @@ -0,0 +1,157 @@ +--- +title: SubReport +page_title: SubReport +description: Learn how to use SubReports in the Web Report Designer to embed reports within other reports for creating master-detail hierarchies and reusable report components. +slug: web-report-designer-user-guide-components-subreport +tags: web, report, design, components, subreport, hierarchy, master, detail +published: True +position: 3 +--- + + + +# SubReport + +A SubReport is a report component that allows you to embed one report inside another report. This lets you create complex report layouts, display hierarchical data relationships, and build reusable report components that can be shared across multiple reports. + +SubReports act as containers that automatically adjust their size based on the content of the embedded report. You can use SubReports to create: + +* Master-detail relationships—Display related data in a parent-child format (for example, customers and their orders). +* Reusable components—Create shared headers, footers, or report sections that can be used across multiple reports. +* Complex layouts—Combine different data sources and report structures within a single report. +* Hierarchical data—Show nested data relationships with proper grouping and organization. + +The next video demonstrates how to [create master-detail](#) reports by using SubReports in the Telerik Web Report Designer: + + + +## Prerequisites + +Before working with SubReports, ensure you have: + +* Created and configured [data sources]({%slug web-report-designer-user-guide-components-data-sources%}) for both master and child reports. +* Planned your data relationships and report hierarchy. + +## Creating Master-Detail Reports with SubReports + +The following example demonstrates how to create a master-detail report using SubReports. The master report (*CategoriesProducts.trdp*) contains a table with Northwind **Categories** data. The SubReport (*ProductsReport.trdp*) displays Northwind **Products** records filtered by the respective `CategoryID`. + +> To follow along with the steps below, you need access to an instance of the [Northwind](https://github.com/microsoft/sql-server-samples/tree/master/samples/databases/northwind-pubs) database for [Microsoft SQL Server](https://learn.microsoft.com/en-us/sql/database-engine/install-windows/install-sql-server?view=sql-server-ver17). + +### Step 1: Building the Child Report + +1. Start with a blank report (*ProductsReport.trdp*) that will serve as the child report. Select the header and footer sections and delete them. + + ![SubReport ><](images/wrd-components-subreport-new-report.png) + +1. Add a new [SQL Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) populated with the `Northwind.Products` table: + + Here is the SQL query that selects the respective data: + + ```SQL + SELECT + [dbo].[Products].[ProductID], + [dbo].[Products].[ProductName], + [dbo].[Products].[Discontinued], + [dbo].[Products].[SupplierID], + [dbo].[Products].[CategoryID], + [dbo].[Products].[QuantityPerUnit], + [dbo].[Products].[UnitPrice], + [dbo].[Products].[UnitsInStock], + [dbo].[Products].[UnitsOnOrder], + [dbo].[Products].[ReorderLevel] + FROM [dbo].[Products] + ``` + +1. Set the **DataSource** of the report using the created SQLDataSource: + + ![Report DataSource ><](images/wrd-components-subreport-report-data-source.png) + +1. From the **Components** tab, drag two **TextBox** report items to the Detail section: + + 4.1. Select each of the TextBoxes. + + 4.2. Bind the the **Value** property of the TextBoxes to the `ProductName` and `UnitPrice` fields respectively. + + 4.3. Use the **Expression** dialog to set the desired field. + + ![Bind Product Fields ><](images/wrd-components-subreport-bind-product-fields.png) + +1. Preview the report to verify that all Products are listed. + +1. Add an integer report parameter called `ProductCategoryID` which you will use to filter by product: + + ![Create Report Parameter ><](images/wrd-components-subreport-create-report-parameter.png) + +1. Update the `SELECT` query of the added SQLDataSource and add a `WHERE` clause using an SQL parameter (which is mapped to the previously created report parameter): + + ```SQL + SELECT + [dbo].[Products].[ProductID], + [dbo].[Products].[ProductName], + [dbo].[Products].[Discontinued], + [dbo].[Products].[SupplierID], + [dbo].[Products].[CategoryID], + [dbo].[Products].[QuantityPerUnit], + [dbo].[Products].[UnitPrice], + [dbo].[Products].[UnitsInStock], + [dbo].[Products].[UnitsOnOrder], + [dbo].[Products].[ReorderLevel] + FROM [dbo].[Products] + WHERE [dbo].[Products].[CategoryID]=@sqlParamCategoryId + ``` + + ![Update SQL Select ><](images/wrd-components-subreport-update-sql-select.png) + +1. Save the report (*ProductsReport.trdp*). You will use it as a child report. + +### Step 2: Building the Master Report + +1. Create a new blank report (*CategoriesProducts.trdp*). + +1. Add a new [SQL Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) filled with the `Northwind.Categories` table: + + ```SQL + SELECT + [dbo].[Categories].[CategoryID], + [dbo].[Categories].[CategoryName], + [dbo].[Categories].[Description], + [dbo].[Categories].[Picture] + FROM [dbo].[Categories] + ``` + +1. Select the report's Detail section and use the [Table Wizard]({%slug web-report-designer-user-guide-components-tables%}) to add a table bound to the just added SQLDataSource: + + ![Create Categories Table ><](images/wrd-components-subreport-create-categories-table.png) + +1. Select the **Picture** header and change its text to **Products**. + +1. Select the data cell bound to the `Picture` field (`[=Fields.Picture]`) and add a **SubReport** item by selecting it from the **Components** tab: + + ![Adding SubReport ><](images/wrd-components-subreport-adding-subreport.png) + +1. Specify the **Inner Report** for the **SubReport** item and select the Uri option that refers to the previously created `ProductsReport.trdp`: + + ![Setup UriReportSource ><](images/wrd-components-subreport-urireportsource.png) + +1. Set up the relation between the parent and child reports: + + 7.1. Adjust the parameters. + + 7.2. Link the SubReport parameter (`ProductCategoryID`) with the master report's `CategoryID` field. + + ![Setup ProductCategoryID Report Parameter ><](images/wrd-components-subreport-setup-productcategoryid-report-parameter.png) + +1. Save the changes and preview the master report. You will see all categories listed with the respective products for each category: + + ![Master-Detail hierarchy ><](images/wrd-components-subreport-master-detail-hierarchy.png) + +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) diff --git a/user-guide/components/tables.md b/user-guide/components/tables.md new file mode 100644 index 000000000..399c0e6d8 --- /dev/null +++ b/user-guide/components/tables.md @@ -0,0 +1,128 @@ +--- +title: Tables +page_title: Tables +description: Web Report Designer offers different Table Components that can be used to visualize the data records in the reports. +slug: web-report-designer-user-guide-components-tables +tags: web, report, design, components, table, list, crosstab +published: True +position: 2 +--- + + + +# Tables + +Tables are data-bound components that organize and display information from your data sources in structured layouts. The Web Report Designer provides several table types to meet different data presentation needs, from simple lists to complex cross-tabulated summaries. + +## Table Types + +The **Components** tab offers a **Tables** section that allows users to visualize data records from different [data sources]({%slug web-report-designer-user-guide-components-data-sources%}): + +![Tables Group ><](images/wrd-components-tray-tables-design.png) + +* [List]({%slug web-report-designer-user-guide-components-tables%}#adding-a-list)—Displays data records in a free-form layout where you can arrange fields anywhere within each list item. Ideal for creating custom layouts like address cards or product catalogs. +* [Table]({%slug web-report-designer-user-guide-components-tables%}#adding-a-table)—Displays report data in a traditional grid format with rows and columns. Best for tabular data like invoices, reports, or data lists. +* [Crosstab]({%slug web-report-designer-user-guide-components-tables%}#adding-a-crosstab)—Displays aggregated data summaries grouped in rows and columns, similar to a pivot table. Perfect for cross-referencing data like sales by region and product. +* [Table Wizard]({%slug web-report-designer-user-guide-components-tables%}#using-the-table-wizard)—Guides you through creating a Table with an easy step-by-step wizard. +* [Crosstab Wizard]({%slug web-report-designer-user-guide-components-tables%}#using-the-crosstab-wizard)—Guides you through creating a Crosstab with an easy step-by-step wizard. + +## Prerequisites + +Before adding any table component, ensure you have: + +* Selected the **Detail section** of your report (required for table placement). +* Created and configured a [data source]({%slug web-report-designer-user-guide-components-data-sources%}) for your report. +* Planned your data layout and which fields you want to display. + +## Adding a List + +The List component provides the most flexibility for custom data layouts. Use Lists when you need complete control over how data appears or want to create non-tabular presentations. + +1. Drag the **List** item from the **Components** tab and drop it onto the **Detail** section of the report. +1. Bind the List to your [data source]({%slug web-report-designer-user-guide-components-data-sources%}). +1. Build your custom layout by adding report items like TextBoxes inside the List. +1. Configure the individual report items to display specific data fields. + +This video demonstrates creating a List, binding it to an SQL data source, and adding a TextBox to display customer names: + + + +## Adding a Table + +Tables organize data in a traditional row-and-column format that you can use for structured data like invoices, reports, or any tabular information. + +1. Drag the **Table** item from the **Components** tab and drop it onto the **Detail** section of the report. +1. Bind the Table to your [data source]({%slug web-report-designer-user-guide-components-data-sources%}). +1. Configure the table structure by adding or removing columns and rows as needed. +1. Add TextBox report items to cells and bind their value to the relevant fields in your [data source]({%slug web-report-designer-user-guide-components-data-sources%}). + +When you add a new Table, it starts with three columns, a header row, and a data row: + +![Empty Table ><](images/wrd-components-tray-tables-table-empty.png) + +This video shows how to add a Table report item, bind it to an already existing [CSV Data Source]({%slug web-report-designer-user-guide-components-data-sources%}), and add the necessary TextBox report items for the column headers and the data records. + + + +## Adding a Crosstab + +Crosstabs let you display aggregated data summaries with row and column groupings, similar to pivot tables. Use Crosstabs when you need to analyze data across multiple dimensions. + +1. Drag the **Crosstab** item from the **Components** tab and drop it onto the **Detail** section of the report. +1. Bind the Crosstab to your [data source]({%slug web-report-designer-user-guide-components-data-sources%}). +1. Configure the row groups and column groups. +1. Bind the value of the data cells to the relevant fields in your [data source]({%slug web-report-designer-user-guide-components-data-sources%}). +1. Configure the data aggregation in the designated cells. + +When you add a Crosstab, it includes a column group area, row group area, and data body: + +![Empty Crosstab ><](images/wrd-components-tray-tables-crosstab-empty.png) + +This video demonstrates creating a Crosstab, binding it to SQL data, and configuring row/column groups with aggregated data: + + + +## Using the Table Wizard + +The Table Wizard provides a faster way to create tables by guiding you through the setup process step-by-step. Use the wizard when you want to quickly create a table with minimal manual configuration. + +1. Click the **Table Wizard** from the **Components** tab. +1. The **Configure Table** pane appears on the right side of the Web Report Designer. +1. Follow the wizard steps to select your data source, choose fields, and configure the table layout. + +![Launching Data in a Table ><](images/wrd-components-tray-tables-table-wizard.png) + +This video shows how to use the Table Wizard to create a table with a Web Service data source and configure field selection: + + + +## Using the Crosstab Wizard + +The Crosstab Wizard simplifies creating complex cross-tabulated reports by walking you through the grouping and aggregation setup. + +1. Click the **Crosstab Wizard** from the **Components** tab. +1. The **Configure Crosstab** pane appears on the right side of the Web Report Designer. +1. Follow the wizard steps to define row groups, column groups, and data aggregation. + +![Launching Data in a Crosstab ><](images/wrd-components-tray-tables-crosstab-wizard.png) + +This video demonstrates using the Crosstab Wizard with SQL data to create a cross-tabulated report showing OrderID and Freight totals: + + + +## Next Steps + +* Add [report sections]({%slug user-guide/components/report-sections%}) to organize your report layout +* Explore other [report components]({%slug web-report-designer-user-guide-components%}) to enhance your reports + +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [Getting Started with the Crosstab]({%slug crosstab_item_get_started%}) +* [DataSources]({%slug web-report-designer-user-guide-components-data-sources%}) +* [Template Variations of the Table Report Item]({%slug table_template_items%}) diff --git a/user-guide/getting-started.md b/user-guide/getting-started.md new file mode 100644 index 000000000..755ab146f --- /dev/null +++ b/user-guide/getting-started.md @@ -0,0 +1,96 @@ +--- +title: Create Your First Report +page_title: Web Report Designer - Getting Started +description: Creating a report from scratch with the Web Report Designer offered by Telerik Reporting. +slug: web-report-designer-user-guide-getting-started +tags: web, report, design, tool, create, started +published: True +position: 8 +--- + + +# Getting Started + +This tutorial will guide you through your first steps of creating a report from scratch using the Web Report Designer. By the end of this tutorial, you will have created a basic report with a table that displays data from a web service. + +## What You'll Build + +In this tutorial, you'll create a simple report that: + +* Connects to a Telerik demo web service +* Displays data in a formatted table +* Can be previewed and exported + +## Before You Start + +Make sure you have access to: + +* Your company's instance of the Telerik Web Report Designer. +* A data source to feed the report with data. For this tutorial, you can use a data source provided by Telerik. However, you can use virtually any data source, for example, a web service, SQL, CSV, GraphQL, [and more]({%slug web-report-designer-user-guide-components-data-sources%}). + +## Creating the Report and Connecting It to Data + +1. Create a new empty report by clicking **New Report** in the main menu: + + ![Create New Report ><](images/wrd-create-new-report.gif) + +1. On the **Components** tab, go to [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) and select **Web Service Data Source**: + + ![Create Web Service Data Source ><](images/wrd-create-web-service-data-source.png) + +1. On the **Configure Data Retrieval** screen, enter the URL of the web service providing the data for your report: `https://demos.telerik.com/reporting/api/reports/formats`, and then click **Finish**. + + ![Web Service Data Source Wizard Step 1 ><](images/wrd-create-web-service-data-source-wizard-step1.png) + +Now you have a blank report that is connected to data. + +## Adding Items to Your Report + +Next, design the report by adding a Table report item to display your data. + +1. Click the report's **Detail Section** to enable adding report items. + +1. Select the **Components** tab, and then click the [**Table Wizard**]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/tools/report-wizards/table-and-crosstab-wizards%}) button: + + ![Table Wizard ><](images/wrd-table-wizard.png) + +1. Configure the Table as illustrated in the animation below. Select the data fields you want to display and arrange them in the table columns: + + ![Table Wizard Usage ><](images/wrd-table-wizard-usage.gif) + +1. (Optional) Style the Table using the **APPEARANCE** options in the Properties panel: + + ![Table Style ><](images/wrd-table-style.png) + +1. Click the **Preview** button in the top-right corner to see your completed report with a table populated with data from the web service: + + ![Preview Report ><](images/wrd-preview-report.png) + +Congratulations! You have successfully created your first report with the Web Report Designer. + +## Next Steps + +Now that you've created your first report, you can: + +* Add more [report items]({%slug user-guide/components/report-items%}) like charts, images, or text boxes +* Explore different [data source types]({%slug web-report-designer-user-guide-components-data-sources%}) +* Learn about [report sections]({%slug user-guide/components/report-sections%}) to organize your content +* Apply advanced formatting and styling options + +## Video Tutorial + +For a visual walkthrough, watch this video tutorial that demonstrates creating a report with a chart. The video covers the Visual Studio setup initially, but the Web Report Designer portion starts at the 3:08 mark: + + + +## See Also + +* [Getting Started Video Tutorial Part 1](https://www.youtube.com/embed/L-utkcB8-5c?si=bmJU9ggpSOykHdLK&start=188) +* [Getting Started Video Tutorial Part 2](https://www.youtube.com/watch?v=DXKlgq-MYIU) +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [WebServiceDataSource]({%slug telerikreporting/designing-reports/connecting-to-data/data-source-components/webservicedatasource-component/overview%}) +* [WebServiceDataSource Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/tools/data-source-wizards/webservicedatasource-wizard%}) diff --git a/user-guide/images/add-image-to-picture-box.png b/user-guide/images/add-image-to-picture-box.png new file mode 100644 index 000000000..d24d6d2e3 Binary files /dev/null and b/user-guide/images/add-image-to-picture-box.png differ diff --git a/user-guide/images/ninja_looking.png b/user-guide/images/ninja_looking.png new file mode 100644 index 000000000..1b281ceaf Binary files /dev/null and b/user-guide/images/ninja_looking.png differ diff --git a/user-guide/images/select-file-button.png b/user-guide/images/select-file-button.png new file mode 100644 index 000000000..0ed5fb99f Binary files /dev/null and b/user-guide/images/select-file-button.png differ diff --git a/user-guide/images/wrd-asset-manager-cropped.png b/user-guide/images/wrd-asset-manager-cropped.png new file mode 100644 index 000000000..85863f781 Binary files /dev/null and b/user-guide/images/wrd-asset-manager-cropped.png differ diff --git a/user-guide/images/wrd-asset-manager.png b/user-guide/images/wrd-asset-manager.png new file mode 100644 index 000000000..a75db02c8 Binary files /dev/null and b/user-guide/images/wrd-asset-manager.png differ diff --git a/user-guide/images/wrd-components-callouts.png b/user-guide/images/wrd-components-callouts.png new file mode 100644 index 000000000..8e5414157 Binary files /dev/null and b/user-guide/images/wrd-components-callouts.png differ diff --git a/user-guide/images/wrd-components-tray-cropped.png b/user-guide/images/wrd-components-tray-cropped.png new file mode 100644 index 000000000..6361920ff Binary files /dev/null and b/user-guide/images/wrd-components-tray-cropped.png differ diff --git a/user-guide/images/wrd-components-tray.png b/user-guide/images/wrd-components-tray.png new file mode 100644 index 000000000..eb156734d Binary files /dev/null and b/user-guide/images/wrd-components-tray.png differ diff --git a/user-guide/images/wrd-create-new-report.gif b/user-guide/images/wrd-create-new-report.gif new file mode 100644 index 000000000..e784502d0 Binary files /dev/null and b/user-guide/images/wrd-create-new-report.gif differ diff --git a/user-guide/images/wrd-create-web-service-data-instance.png b/user-guide/images/wrd-create-web-service-data-instance.png new file mode 100644 index 000000000..771d9bf3b Binary files /dev/null and b/user-guide/images/wrd-create-web-service-data-instance.png differ diff --git a/user-guide/images/wrd-create-web-service-data-source-wizard-step1.png b/user-guide/images/wrd-create-web-service-data-source-wizard-step1.png new file mode 100644 index 000000000..7efde8ce5 Binary files /dev/null and b/user-guide/images/wrd-create-web-service-data-source-wizard-step1.png differ diff --git a/user-guide/images/wrd-create-web-service-data-source-wizard-step2-crop.png b/user-guide/images/wrd-create-web-service-data-source-wizard-step2-crop.png new file mode 100644 index 000000000..abeb93357 Binary files /dev/null and b/user-guide/images/wrd-create-web-service-data-source-wizard-step2-crop.png differ diff --git a/user-guide/images/wrd-create-web-service-data-source-wizard-step2.png b/user-guide/images/wrd-create-web-service-data-source-wizard-step2.png new file mode 100644 index 000000000..16159bc1c Binary files /dev/null and b/user-guide/images/wrd-create-web-service-data-source-wizard-step2.png differ diff --git a/user-guide/images/wrd-create-web-service-data-source-wizard-step6.png b/user-guide/images/wrd-create-web-service-data-source-wizard-step6.png new file mode 100644 index 000000000..b5fc2bba7 Binary files /dev/null and b/user-guide/images/wrd-create-web-service-data-source-wizard-step6.png differ diff --git a/user-guide/images/wrd-create-web-service-data-source-wizard-step7.png b/user-guide/images/wrd-create-web-service-data-source-wizard-step7.png new file mode 100644 index 000000000..56b4032a4 Binary files /dev/null and b/user-guide/images/wrd-create-web-service-data-source-wizard-step7.png differ diff --git a/user-guide/images/wrd-create-web-service-data-source.png b/user-guide/images/wrd-create-web-service-data-source.png new file mode 100644 index 000000000..d5d95d345 Binary files /dev/null and b/user-guide/images/wrd-create-web-service-data-source.png differ diff --git a/user-guide/images/wrd-design-surface-cropped.png b/user-guide/images/wrd-design-surface-cropped.png new file mode 100644 index 000000000..b73a28f3e Binary files /dev/null and b/user-guide/images/wrd-design-surface-cropped.png differ diff --git a/user-guide/images/wrd-design-surface.png b/user-guide/images/wrd-design-surface.png new file mode 100644 index 000000000..8075aecdb Binary files /dev/null and b/user-guide/images/wrd-design-surface.png differ diff --git a/user-guide/images/wrd-explorer-cropped.png b/user-guide/images/wrd-explorer-cropped.png new file mode 100644 index 000000000..361c87de6 Binary files /dev/null and b/user-guide/images/wrd-explorer-cropped.png differ diff --git a/user-guide/images/wrd-explorer.png b/user-guide/images/wrd-explorer.png new file mode 100644 index 000000000..40edeb4fa Binary files /dev/null and b/user-guide/images/wrd-explorer.png differ diff --git a/user-guide/images/wrd-global-search-cropped.png b/user-guide/images/wrd-global-search-cropped.png new file mode 100644 index 000000000..b51ba22fc Binary files /dev/null and b/user-guide/images/wrd-global-search-cropped.png differ diff --git a/user-guide/images/wrd-global-search.png b/user-guide/images/wrd-global-search.png new file mode 100644 index 000000000..53b97cfb1 Binary files /dev/null and b/user-guide/images/wrd-global-search.png differ diff --git a/user-guide/images/wrd-main-menu-cropped.png b/user-guide/images/wrd-main-menu-cropped.png new file mode 100644 index 000000000..d1e4b7517 Binary files /dev/null and b/user-guide/images/wrd-main-menu-cropped.png differ diff --git a/user-guide/images/wrd-main-menu.png b/user-guide/images/wrd-main-menu.png new file mode 100644 index 000000000..ccd689db0 Binary files /dev/null and b/user-guide/images/wrd-main-menu.png differ diff --git a/user-guide/images/wrd-onboarding-guide-welcome.png b/user-guide/images/wrd-onboarding-guide-welcome.png new file mode 100644 index 000000000..68b4ad93b Binary files /dev/null and b/user-guide/images/wrd-onboarding-guide-welcome.png differ diff --git a/user-guide/images/wrd-onboarding-guide.png b/user-guide/images/wrd-onboarding-guide.png new file mode 100644 index 000000000..ed327fa01 Binary files /dev/null and b/user-guide/images/wrd-onboarding-guide.png differ diff --git a/user-guide/images/wrd-overview.gif b/user-guide/images/wrd-overview.gif new file mode 100644 index 000000000..212682e6d Binary files /dev/null and b/user-guide/images/wrd-overview.gif differ diff --git a/user-guide/images/wrd-preview-button-cropped.png b/user-guide/images/wrd-preview-button-cropped.png new file mode 100644 index 000000000..ac0f7d40b Binary files /dev/null and b/user-guide/images/wrd-preview-button-cropped.png differ diff --git a/user-guide/images/wrd-preview-button.png b/user-guide/images/wrd-preview-button.png new file mode 100644 index 000000000..1f5cd4089 Binary files /dev/null and b/user-guide/images/wrd-preview-button.png differ diff --git a/user-guide/images/wrd-preview-report.png b/user-guide/images/wrd-preview-report.png new file mode 100644 index 000000000..973f31b04 Binary files /dev/null and b/user-guide/images/wrd-preview-report.png differ diff --git a/user-guide/images/wrd-properties-area-crop.png b/user-guide/images/wrd-properties-area-crop.png new file mode 100644 index 000000000..766e32a64 Binary files /dev/null and b/user-guide/images/wrd-properties-area-crop.png differ diff --git a/user-guide/images/wrd-properties-area-cropped.png b/user-guide/images/wrd-properties-area-cropped.png new file mode 100644 index 000000000..e6f479c63 Binary files /dev/null and b/user-guide/images/wrd-properties-area-cropped.png differ diff --git a/user-guide/images/wrd-properties-area.png b/user-guide/images/wrd-properties-area.png new file mode 100644 index 000000000..d70a94b7c Binary files /dev/null and b/user-guide/images/wrd-properties-area.png differ diff --git a/user-guide/images/wrd-report-items-crop.png b/user-guide/images/wrd-report-items-crop.png new file mode 100644 index 000000000..47ffde942 Binary files /dev/null and b/user-guide/images/wrd-report-items-crop.png differ diff --git a/user-guide/images/wrd-report-sections-callouts.png b/user-guide/images/wrd-report-sections-callouts.png new file mode 100644 index 000000000..22a6f965e Binary files /dev/null and b/user-guide/images/wrd-report-sections-callouts.png differ diff --git a/user-guide/images/wrd-report-sections.png b/user-guide/images/wrd-report-sections.png new file mode 100644 index 000000000..4e349f7c1 Binary files /dev/null and b/user-guide/images/wrd-report-sections.png differ diff --git a/user-guide/images/wrd-table-style.png b/user-guide/images/wrd-table-style.png new file mode 100644 index 000000000..a7117828c Binary files /dev/null and b/user-guide/images/wrd-table-style.png differ diff --git a/user-guide/images/wrd-table-wizard-crop.png b/user-guide/images/wrd-table-wizard-crop.png new file mode 100644 index 000000000..71bd1e684 Binary files /dev/null and b/user-guide/images/wrd-table-wizard-crop.png differ diff --git a/user-guide/images/wrd-table-wizard-usage.gif b/user-guide/images/wrd-table-wizard-usage.gif new file mode 100644 index 000000000..4cbe1a6e5 Binary files /dev/null and b/user-guide/images/wrd-table-wizard-usage.gif differ diff --git a/user-guide/images/wrd-table-wizard.png b/user-guide/images/wrd-table-wizard.png new file mode 100644 index 000000000..4bd93a206 Binary files /dev/null and b/user-guide/images/wrd-table-wizard.png differ diff --git a/user-guide/report-structure.md b/user-guide/report-structure.md new file mode 100644 index 000000000..e1dd79274 --- /dev/null +++ b/user-guide/report-structure.md @@ -0,0 +1,90 @@ +--- +title: Report Structure +page_title: Report Structure - Web Report Designer User Guide +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: user-guide/report-structure +tags: telerik, reporting, report, structure, groups, sections, items +published: True +position: 10 +--- + +# 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. + +![Report Sections - Web Report Designer User Guide - Telerik Reporting](./images/wrd-report-sections-callouts.png) + +By default, every new report you create has three sections: + +* [Page Header](#page-header) +* [Page Footer](#page-footer) +* [Detail section](#detail-section) (the main content area of the report) + +In addition to the default sections above, you can also add: + +* [Table of Contents (TOC)](#table-of-contents) +* [Report Header](#report-header) +* [Report Footer](#report-footer) +* [Report Groups](#report-groups) +* [Group Header](#group-header) +* [Group Footer](#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. + +## Report Items + +[Report items]({%slug web-report-designer-user-guide-components%}) 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. + +## 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. + +For a sample report with a TOC, see the [Product Catalog Report Demo](https://demos.telerik.com/reporting/product-catalog). + +## 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 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 + +* [Create Your First Report]({%slug web-report-designer-user-guide-getting-started%}) +* [Explore the Report Components]({%slug web-report-designer-user-guide-components%}) +* [Connect Your Report to Data]({%slug web-report-designer-user-guide-components-data-sources%}) diff --git a/user-guide/user-guide-overview.md b/user-guide/user-guide-overview.md new file mode 100644 index 000000000..328dcee50 --- /dev/null +++ b/user-guide/user-guide-overview.md @@ -0,0 +1,54 @@ +--- +title: Overview +page_title: Overview - 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: user-guide/overview +tags: overview,web,report,designer,tool,design,create,report,web +published: True +position: 0 +--- + + +# Web Report Designer User Guide: An Overview + +The [Web Report Designer](https://demos.telerik.com/reporting/designer) User Guide is intended to assist the end-users of business applications that integrate [Telerik Reporting]({%slug telerikreporting/welcome-to-telerik-reporting!%}). This guide aims to provide the knowledge required for the successful crafting and maintenance of reports. The primary audience for this user guide are business application users. + +> If you are a developer who integrates Telerik Reporting into web applications, see the [application developer 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. + +![Ninja Looking ><](images/ninja_looking.png) + +![UI Overview 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 and videos that illustrates basic reporting principles, for example, how to [structure a report]({%slug user-guide/report-structure%}). + +## Next Steps + +* [Take an App Tour]({%slug user-guide/app-tour%}) +* [Create a Simple Report]({%slug web-report-designer-user-guide-getting-started%}) +* [Explore the Structure of a Report]({%slug user-guide/report-structure%}) + +{% if site.has_cta_panels == true %} +{% include cta-panel-overview.html %} +{% endif %}