diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts.md b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts.md new file mode 100644 index 000000000..d665a2068 --- /dev/null +++ b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/charts.md @@ -0,0 +1,188 @@ +--- +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, report, components, chart, bar, line, area, column, pie, doughnut, polar, range, scatter, bubble, sparkline, ohlc +published: True +position: 5 +--- +List + + +# Charts + +The **Web Report Designer** offers a **Charts** section inside the **Components** tray allowing the end-user to visualize the data records from different [Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) storages: + +
+ >< + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Chart TypeDescription
Bar ChartDisplays data series as sets of horizontal bars, graphically summarizes and renders data categories, and enables users to easily compare amounts or values between different categories.
Line ChartDisplays series as sets of points connected by a single line and represents large amounts of data that occur over a continuous period of time.
Area ChartDisplays a series as a set of points connected by a line with the whole area filled in under the line.
Column ChartDisplays data series as sets of vertical bars that are grouped by category.
Pie ChartDisplays the contribution of fractional parts to a whole and is most commonly used to make comparisons between groups.
Doughnut ChartSimilar to the Pie Chart which has an open space in the center.
+
+ +Before adding a Chart report item, first, you need to select the **Details** section of the report. Then, you can select the desired chart type from the **Components** tray and configure it with the desired data source. + +## Bar Charts + +By clicking the `Bar` item from the **Components** tray, a new tab will appear on the right-hand side of the **Web Report Designer**: + +>caption Configuration Settings + +![Configure Bar Chart ><](images/wrd-components-tray-charts-configure-bar-chart.png) + +>note The *Configuration pane* is identical for all chart types, allowing the end-user to specify the Data Source and configure the Categories, Series and Values groups. + +You are ready to build the desired chart and use an already defined [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}). According to the data that should be displayed, it is possible to configure **Categories**, **Series** and **Values** groups. The following short video shows how to feed the chart with data from the already existing SQL Data Source that displays the total **Freight** for each **Country**: + +>caption Populating Bar Chart with Orders' Freight by ShipCountry + + + + + +### Combine Mode + +In case of having multiple series per category in the chart, it is possible to fine-tune the *combine mode* for the bar series for better illustration of the data. Telerik Reporting supports the following Bar chart types: + +![Bar Chart Type ><](images/wrd-components-tray-charts-configure-bar-chart-type.png) + +Let's have the following sample CSV data that will be used for the example: + +>caption CSV Data Source + +``` +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 +``` + + + +Now, we will create a Bar Chart that uses the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*. According to the selected Bar Chart Type, the following charts will be displayed: + +|Bar Chart Type|| +|----|----| +|**Clustered Bar**|![Clustered Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-clustered-type.png)| +|**Stacked Bar**|![Stacked Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-stacked-type.png) | +|**100% Stacked Bar**|![100% Stacked Bar Chart Type ](images/wrd-components-tray-charts-configure-bar-chart-100-stacked-type.png) | + +## Column Charts + +By clicking the `Column` item from the **Components** tray, a similar tab (like the one shown in the *Configuration Settings* above) will appear on the right-hand side of the **Web Report Designer**. The **Column** chart type is very similar to the **Bar** chart (which displays series as sets of horizontal bars) and to the **Range** Column chart (which displays series as sets of vertical bars with varying beginning and end points). + +We will use the same *CSV Data Source* and configure the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*: + +>caption Populating Column Chart + + + +According to the selected Column Chart Type, the following charts will be displayed: + +|Column Chart Type|| +|----|----| +|**Clustered Column**|![Clustered Column Chart Type ](images/wrd-components-tray-charts-configure-column-chart-clustered-type.png)| +|**Stacked Column**|![Stacked Column Type ](images/wrd-components-tray-charts-configure-column-chart-stacked-type.png) | +|**100% Stacked Column**|![100% Stacked Column Chart Type ](images/wrd-components-tray-charts-configure-column-chart-100-stacked-type.png) | + + +## Area Charts + +By clicking the `Area` item from the **Components** tray, the *Configuration Settings* pane will appear on the right-hand side of the **Web Report Designer**. We will use the same *CSV Data Source* and configure the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*: + +>caption Populating Area Chart + + + +According to the selected **Area Chart Type**, the following charts will be displayed: + +![Area Chart Type ><](images/wrd-components-tray-charts-configure-area-chart-types.png) + +|Area Chart Type|| +|----|----| +|**Area**|![Area Chart Type ](images/wrd-components-tray-charts-configure-area-chart-type.png)| +|**Stacked Area**|![Stacked Area Type ](images/wrd-components-tray-charts-configure-stacked-area-type.png) | +|**100% Stacked Area**|![100% Stacked Area Type ](images/wrd-components-tray-charts-configure-area-100-stacked-type.png) | + +## Line Charts + +By clicking the `Line` item from the **Components** tray, the *Configuration Settings* pane will appear on the right-hand side of the **Web Report Designer**. We will use the same *CSV Data Source* and configure the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*: + +>caption Populating Line Chart + + + +According to the selected **Line Chart Type**, the following charts will be displayed: + +![Line Chart Type ><](images/wrd-components-tray-charts-configure-line-chart-types.png) + +|Chart Type|Line|Line with Markers| +|----|----|----| +|**Line**|![Line Chart Type ](images/wrd-components-tray-charts-configure-line-chart-type.png)| ![Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-line-with-markers-chart-type.png) | +|**Stacked Line**|![Stacked Line Chart Type ](images/wrd-components-tray-charts-configure-stacked-line-type.png) | ![Stacked Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-stacked-line-with-markers-type.png)| +|**100% Stacked Line**|![100% Stacked Line Chart Type ](images/wrd-components-tray-charts-configure-line-100-stacked-type.png) | ![100% Stacked Line with Markers Chart Type ](images/wrd-components-tray-charts-configure-line-with-markers-100-stacked-type.png) + +## Pie Charts + +By clicking the `Pie` item from the **Components** tray, the *Configuration Settings* pane will appear on the right-hand side of the **Web Report Designer**. We will use the same *CSV Data Source* and configure the **Year** column for the *Categories*, the **Category** column for the *Series* and the **Value** column for the *Values*: + +>caption Populating Pie Chart + + + +According to the selected **Pie Chart Type**, the following charts will be displayed: + +![Pie Chart Type ><](images/wrd-components-tray-charts-configure-pie-chart-types.png) + +|Pie Chart|Doughnut Chart| +|----|----| +|![Area 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%}) + + diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/components.md b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/components.md new file mode 100644 index 000000000..6eb42bc8a --- /dev/null +++ b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/components.md @@ -0,0 +1,62 @@ +--- +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, report, components, overview +published: True +position: 0 +--- + + + +# Components - Overview + +Each report is constructed by [report items]({%slug telerikreporting/designing-reports/report-structure/overview%}) organized in different groups in the **Components** tab based on their purpose. + +
+ >< + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
GroupReport Items
Report Items
  • TextBox
  • HtmlTextBox
  • PictureBox
  • CheckBox
  • Barcode
  • Shape
  • Panel
  • Radial Gauge Wizard
  • Linear Gauge Wizard
TablesThe Table report item is a generalized layout report item that displays report data in cells that are organized into rows and columns.
  • List
  • Table
  • Crosstab
  • Table Wizard
  • Crosstab Wizard
Report
  • SubReport
Maps
ChartsThe 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.
  • Bar Chart
  • Line Chart
  • Area Chart
  • Column Chart
  • Pie Chart
  • Doughnut Chart
Report Sections
DataSourcesData Source components are used to connect data items to different types of data without writing any code.|
  • SQL Data Source
  • CSV Data Source
  • Web Service Data Source
  • GraphQL Data Source
  • JSON Data Source
  • Object Data Source
+
+ +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) + + diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/data-sources.md b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/data-sources.md new file mode 100644 index 000000000..b23fff085 --- /dev/null +++ b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/data-sources.md @@ -0,0 +1,238 @@ +--- +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, report, components, data, source +published: True +position: 7 +--- + + + +# Data Sources + +The **Web Report Designer** offers a **Data Sources** section inside the **Components** tray allowing the end-user to fetch data from different storages: + +
+ >< + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Data SourceDescription
SQL Data SourceEnables data items to display data located in a relational database, including Microsoft SQL Server and Oracle databases, as well as OLE DB and ODBC data sources, using little or no code.
CSV Data SourceEnables data items to display data located in a CSV document, including files (*.csv, *.tsv, *.txt, and others), inline string or stream.
Web Service Data SourceEnables data items to display data located on a service in JSON format.
GraphQL Data SourceEnables data items to retrieve data in JSON format from a GraphQL service.
JSON Data SourceEnables data items to display JSON data located in a local file or saved directly into the report.
Object Data SourceProvides a way to bind the Data Report Items to a middle-tier business object.
+
+ +## SQL Data Source + +By clicking the `SQL Data Source` item in the **Components** tray, the [SQL Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/sqldatasource-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 with the wizard steps and apply the desired settings: + +|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 + +By clicking the `CSV Data Source` item in the **Components** tray, the [CSV Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/csvdatasource-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 with the wizard steps and apply the desired settings: + +|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 + +By clicking the `Web Service Data Source` item in the **Components** tray, the [Web Service Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/csvdatasource-wizard%}) appears allowing you to create new or edit an existing [WebServiceDataSource]({%slug telerikreporting/designing-reports/connecting-to-data/data-source-components/webservicedatasource-component/overview%}) 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 with the wizard steps and apply the desired settings. Note that some of the wizard steps may be skipped according to the user's selection and settings. + +|Wizard step|Description| +|----|----| +|1. Configure Data Retrieval|Setup 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*
- *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 + +By clicking the `GraphQL Data Source` item in the **Components** tray, the [GraphQL Data Source configuration wizard]({%slug desktop-graphqldatasource-wizard%}) appears allowing you to create new or edit an existing [GraphQLDataSource]({%slug graphqldatasource%}) component. + +The wizard allows you to setup one of the options: +* Setup 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). + +You are expected to see the following steps: + +1. Setup 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 Setup 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** tray, the [JSON Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/jsondatasource-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 + +By clicking the `Object Data Source` item in the **Components** tray, the [Object Data Source configuration wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/objectdatasource-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) + +|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) + +## Data Source General Settings + +Once a DataSource component is configured, it can be modified later by selecting it in the **Explorer** tab: + +![GraphQL Data Source Settings><](images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer.png) + +On the right-hand side the **General** settings (dependent on the specific Data Source item) are loaded and the user can further modify them: + +![GraphQL Data Source Settings><](images/wrd-components-tray-data-sources-graphql-data-source-settings.png) + +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [Using Parameters with the GraphQLDataSource Component]({%slug graphqldatasource-parameters%}) + + diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-area-100-stacked-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-area-100-stacked-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-area-chart-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-area-chart-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-area-chart-types.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-area-chart-types.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-area-chart.mp4 b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-area-chart.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-100-stacked-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-100-stacked-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-clustered-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-clustered-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-stacked-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-stacked-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.gif b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.gif differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.mp4 b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-bar-chart.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-100-stacked-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-100-stacked-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-clustered-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-clustered-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-stacked-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-column-chart-stacked-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-column-chart.mp4 b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-column-chart.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-doughnut-chart-type.mp4 b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-doughnut-chart-type.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-doughnut-chart-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-doughnut-chart-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-100-stacked-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-100-stacked-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-type.mp4 b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-type.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-types.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-chart-types.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-with-markers-100-stacked-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-with-markers-100-stacked-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-with-markers-chart-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-line-with-markers-chart-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-type.mp4 b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-type.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-types.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-pie-chart-types.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-stacked-area-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-stacked-area-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-stacked-line-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-stacked-line-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-stacked-line-with-markers-type.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts-configure-stacked-line-with-markers-type.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts.png new file mode 100644 index 000000000..2ea9085de Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-charts.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-csv-choose-data-connection.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-csv-choose-data-connection.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-csv-map-column-types-and-preview.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-csv-map-column-types-and-preview.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-csv-wizard.mp4 b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-csv-wizard.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-http-request-query.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-http-request-query.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-http-request.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-http-request.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-selected-in-explorer.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-settings.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-data-source-settings.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-preview-data.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-preview-data.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-query.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-query.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-request-parameters.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-graphql-request-parameters.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-inline-json-data-source.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-inline-json-data-source.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-inline-vs-upload-file-json-data-source.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-inline-vs-upload-file-json-data-source.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-object-data-source-data-member.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-object-data-source-data-member.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-object-data-source-preview.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-object-data-source-preview.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-object-data-source.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-object-data-source.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-preview-web-service-data-source.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-preview-web-service-data-source.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-sql-choose-data-connection.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-sql-choose-data-connection.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-sql-existing-connection.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-sql-existing-connection.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-sql-new-connection.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-sql-new-connection.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-sql-select-and-preview.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-sql-select-and-preview.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-upload-json-data-source.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-upload-json-data-source.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-web-service-data-source.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources-web-service-data-source.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources.png new file mode 100644 index 000000000..5dc6dbd7d Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-data-sources.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-report-items.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-report-items.png new file mode 100644 index 000000000..a0c35ef51 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-report-items.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-data-populating-from-scratch.gif b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-data-populating-from-scratch.gif new file mode 100644 index 000000000..a704c3b8c Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-data-populating-from-scratch.gif differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-empty.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-empty.png new file mode 100644 index 000000000..a134cbeb3 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-empty.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard-data-popuating.gif b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard-data-popuating.gif new file mode 100644 index 000000000..da52129b3 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard-data-popuating.gif differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard-data-populating-from-scratch.mp4 b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard-data-populating-from-scratch.mp4 new file mode 100644 index 000000000..e3eecde10 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard-data-populating-from-scratch.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard-data-populating.mp4 b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard-data-populating.mp4 new file mode 100644 index 000000000..58cb5a292 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard-data-populating.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard.png new file mode 100644 index 000000000..6226cf2a9 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-crosstab-wizard.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-list-video.mp4 b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-list-video.mp4 new file mode 100644 index 000000000..e62198e68 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-list-video.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-list.gif b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-list.gif new file mode 100644 index 000000000..30e086c9d Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-list.gif differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-data-popuating-from-scratch.gif b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-data-popuating-from-scratch.gif new file mode 100644 index 000000000..3d6ea45a4 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-data-popuating-from-scratch.gif differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-data-popuating-from-scratch.mp4 b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-data-popuating-from-scratch.mp4 new file mode 100644 index 000000000..5b593a038 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-data-popuating-from-scratch.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-empty.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-empty.png new file mode 100644 index 000000000..22da24b28 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-empty.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-wizard-data-popuating.gif b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-wizard-data-popuating.gif new file mode 100644 index 000000000..0c922ce1a Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-wizard-data-popuating.gif differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-wizard-data-popuating.mp4 b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-wizard-data-popuating.mp4 new file mode 100644 index 000000000..e4a062224 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-wizard-data-popuating.mp4 differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-wizard.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-wizard.png new file mode 100644 index 000000000..be11e17c2 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables-table-wizard.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables.png new file mode 100644 index 000000000..450b08023 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray-tables.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray.gif b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray.gif new file mode 100644 index 000000000..07779e217 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/images/wrd-components-tray.gif differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/components/tables.md b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/tables.md new file mode 100644 index 000000000..2f36975ba --- /dev/null +++ b/designing-reports/report-designer-tools/web-report-designer/user-guide/components/tables.md @@ -0,0 +1,121 @@ +--- +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, report, components, table, list, crosstab +published: True +position: 2 +--- +List + + +# Tables + +The **Web Report Designer** offers a **Tables** section inside the **Components** tray allowing the end-user to visualize the data records from different [Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) storages: + +
+ >< + + + + + + + + + + + + + + + + + + + + + + + + +
Data SourceDescription
ListDisplays data from a set of Business Objects creating a free-form data layout. You are not limited to a grid layout, you can freely place fields inside the List.
TableDisplays report data in cells that are organized into rows and columns.
CrosstabDisplays aggregated data summaries that are grouped in rows and columns. The number of rows and columns for groups is determined by the number of unique values for each row and column groups.
Table WizardThe Table wizard guides you through the process of adding a Table item to a report.
Crosstab WizardThe Crosstab wizard guides you through the process of adding a Crosstab item to a report.
+
+ +Before adding a Table report item, first, you need to select the Details section of the report. Then, you can select the desired table item type from the Components tray and configure it with the desired data source. + +## List + +By dragging the `List` item from the **Components** tray and dropping it onto the **Details** section of the report, you are ready to build the desired layout with report items like TextBoxes and use the already defined [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}). +The following short video illustrates how to add a List, bind it to an already existing [SQL Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) item and adding a TextBox report item for displaying the FirstName of the data records: + +>caption Displaying Data in a List + +![Displaying Data in a List ><](images/wrd-components-tray-tables-list.gif) + + + +## Table + +By dragging the `Table` item from the **Components** tray and dropping it onto the **Details** section of the report, you are ready to build the desired layout with report items like TextBoxes and use the already defined [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}). + +When added from a report designer, the Table contains three columns with a table header row and a details row for the data: + +![Empty Table ><](images/wrd-components-tray-tables-table-empty.png) + +The following short video illustrates how to add an empty Table report item, bind it to an already existing [CSV Data Source]({%slug web-report-designer-user-guide-components-data-sources%}), add the necessary TextBox report items for the column headers and for the data records displaying the First/Last Names: + +![Displaying CSV Data in a Table ><](images/wrd-components-tray-tables-table-data-popuating-from-scratch.gif) + + + +## Crosstab + +By dragging the `Crosstab` item from the **Components** tray and dropping it onto the **Details** section of the report, you are ready to build the desired layout with the generated empty column/row groups and body parts. + +When added from a report designer, the [Crosstab]({%slug telerikreporting/designing-reports/report-structure/table-crosstab-list/understanding-crosstab-areas%}) contains a column group, a row group and a body for crosstab data: + +![Empty Crosstab ><](images/wrd-components-tray-tables-crosstab-empty.png) + +The following short video illustrates how to add an empty Crosstab report item, bind it to an already existing [SQL Data Source]({%slug web-report-designer-user-guide-components-data-sources%}), bind the generated empty Column/Row groups and map the necessary TextBox report items for the column/row group and for the data records displaying the total sum of Freight for the respective OrderID: + + + +## Table Wizard + +By clicking the [Table Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/table-crosstab-wizard%}) item from the **Components** tray, a new tab will appear on the right-hand side of the **Web Report Designer**: + +>caption Table Wizard + +![Launching Data in a Table ><](images/wrd-components-tray-tables-table-wizard.png) + +The following short video illustrates how to add a Table report item with the wizard, bind it to an already existing [Web Service Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) item and arrange the desired fields for displaying the name and localized name of the data records: + + + +## Crosstab Wizard + +By clicking the [Crosstab Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/table-crosstab-wizard%}) item from the **Components** tray, a new tab will appear on the right-hand side of the **Web Report Designer**: + +>caption Crosstab Wizard + +![Launching Data in a Crosstab ><](images/wrd-components-tray-tables-crosstab-wizard.png) + +The following short video illustrates how to add a [Crosstab]({%slug telerikreporting/designing-reports/report-structure/table-crosstab-list/understanding-crosstab-areas%}) report item with the wizard, bind it to an already existing [SQL Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) item populated with Northwind.Orders table and arrange the desired fields for displaying the OrderID as rows and total sum of Freight of the data records: + + + +## 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/designing-reports/report-designer-tools/web-report-designer/user-guide/getting-started.md b/designing-reports/report-designer-tools/web-report-designer/user-guide/getting-started.md new file mode 100644 index 000000000..981e250f6 --- /dev/null +++ b/designing-reports/report-designer-tools/web-report-designer/user-guide/getting-started.md @@ -0,0 +1,74 @@ +--- +title: Web Report Designer - Getting Started +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, report, web, started +published: True +position: 2 +--- + + +# Getting Started + +This tutorial will guide you through your first steps of creating a report from scratch using the Web Report Designer. + +1. Create a new empty Report: + + ![Create New Report ><](images/wrd-create-new-report.gif) + +2. In the **Components** tab, under the **Data Sources** group, select the **Web Service Data Source** option: + + ![Create Web Service Data Source ><](images/wrd-create-web-service-data-source.png) + +3. Using the [WebServiceDataSource Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/tools/data-source-wizards/webservicedatasource-wizard%}), we will add a new [WebServiceDataSource]({%slug telerikreporting/designing-reports/connecting-to-data/data-source-components/webservicedatasource-component/overview%}) that will be used for the data population in our first report. + + * Enter directly the *Service URL*, e.g. *https://demos.telerik.com/reporting/api/reports/formats*, and display data located on a service in JSON format while using no code. + + ![Web Service Data Source Wizard Step 1 ><](images/wrd-create-web-service-data-source-wizard-step1.png) + + * You can **Finish** the wizard or go through the **Next** steps if other fine-tuning is necessary: + + * Configure request parameters (if such are required) + + ![Web Service Data Source Wizard Step 2 ><](images/wrd-create-web-service-data-source-wizard-step2.png) + + * Choose desing-time data - select the *Use real data while designing the report* option + + ![Web Service Data Source Wizard Step 6 ><](images/wrd-create-web-service-data-source-wizard-step6.png) + + * Preview data source results - It is expected to see the data preview in JSON format: + + ![Web Service Data Source Wizard Step 7 ><](images/wrd-create-web-service-data-source-wizard-step7.png) + + Once the wizard is completed, the Web Service Data Source object should be available in the **Explorer** tab under the **Inline DataSources** group: + + ![Web Service Data Source Wizard Step Instance ><](images/wrd-create-web-service-data-instance.png) + +4. Go back to the **Components** tab, select the report's **Detail section** and trigger the [Table Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/tools/report-wizards/table-and-crosstab-wizards%}) option: + + ![Table Wizard ><](images/wrd-table-wizard.png) + +5. Configure the Table: + + ![Table Wizard Usage ><](images/wrd-table-wizard-usage.gif) + +6. Style the Table using the [Properties Area]({%slug web-report-designer-user-guide-structure%}): + + ![Table Style ><](images/wrd-table-style.png) + +7. Congratulations! Click the **Preview** button at the top right corner to see your first report with a table, populated with data coming from a web service. The tollbar allows you to easily export the report to the desired [format]({%slug telerikreporting/using-reports-in-applications/export-and-configure/export-formats%}): + + ![Preview Report ><](images/wrd-preview-report.png) + +## See Also + +* [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/designing-reports/report-designer-tools/web-report-designer/user-guide/images/ninja_looking.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/ninja_looking.png new file mode 100644 index 000000000..1b281ceaf Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/ninja_looking.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-asset-manager-cropped.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-asset-manager-cropped.png new file mode 100644 index 000000000..85863f781 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-asset-manager-cropped.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-asset-manager.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-asset-manager.png new file mode 100644 index 000000000..a75db02c8 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-asset-manager.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-components-tray-cropped.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-components-tray-cropped.png new file mode 100644 index 000000000..6361920ff Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-components-tray-cropped.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-components-tray.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-components-tray.png new file mode 100644 index 000000000..eb156734d Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-components-tray.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-new-report.gif b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-new-report.gif new file mode 100644 index 000000000..e784502d0 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-new-report.gif differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-instance.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-instance.png new file mode 100644 index 000000000..771d9bf3b Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-instance.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-source-wizard-step1.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-source-wizard-step1.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-source-wizard-step2.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-source-wizard-step2.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-source-wizard-step6.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-source-wizard-step6.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-source-wizard-step7.png b/designing-reports/report-designer-tools/web-report-designer/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/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-source-wizard-step7.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-source.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-source.png new file mode 100644 index 000000000..338517939 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-create-web-service-data-source.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-design-surface-cropped.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-design-surface-cropped.png new file mode 100644 index 000000000..b73a28f3e Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-design-surface-cropped.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-design-surface.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-design-surface.png new file mode 100644 index 000000000..8075aecdb Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-design-surface.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-explorer-cropped.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-explorer-cropped.png new file mode 100644 index 000000000..361c87de6 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-explorer-cropped.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-explorer.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-explorer.png new file mode 100644 index 000000000..40edeb4fa Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-explorer.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-global-search-cropped.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-global-search-cropped.png new file mode 100644 index 000000000..b51ba22fc Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-global-search-cropped.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-global-search.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-global-search.png new file mode 100644 index 000000000..53b97cfb1 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-global-search.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-main-menu-cropped.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-main-menu-cropped.png new file mode 100644 index 000000000..d1e4b7517 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-main-menu-cropped.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-main-menu.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-main-menu.png new file mode 100644 index 000000000..ccd689db0 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-main-menu.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-onboarding-guide-welcome.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-onboarding-guide-welcome.png new file mode 100644 index 000000000..68b4ad93b Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-onboarding-guide-welcome.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-onboarding-guide.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-onboarding-guide.png new file mode 100644 index 000000000..ed327fa01 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-onboarding-guide.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-overview.gif b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-overview.gif new file mode 100644 index 000000000..212682e6d Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-overview.gif differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-preview-button-cropped.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-preview-button-cropped.png new file mode 100644 index 000000000..ac0f7d40b Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-preview-button-cropped.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-preview-button.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-preview-button.png new file mode 100644 index 000000000..1f5cd4089 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-preview-button.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-preview-report.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-preview-report.png new file mode 100644 index 000000000..60b145020 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-preview-report.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-properties-area-cropped.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-properties-area-cropped.png new file mode 100644 index 000000000..e6f479c63 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-properties-area-cropped.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-properties-area.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-properties-area.png new file mode 100644 index 000000000..d70a94b7c Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-properties-area.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-table-style.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-table-style.png new file mode 100644 index 000000000..a19d8885a Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-table-style.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-table-wizard-usage.gif b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-table-wizard-usage.gif new file mode 100644 index 000000000..4cbe1a6e5 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-table-wizard-usage.gif differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-table-wizard.png b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-table-wizard.png new file mode 100644 index 000000000..994606040 Binary files /dev/null and b/designing-reports/report-designer-tools/web-report-designer/user-guide/images/wrd-table-wizard.png differ diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/structure.md b/designing-reports/report-designer-tools/web-report-designer/user-guide/structure.md new file mode 100644 index 000000000..babb53d22 --- /dev/null +++ b/designing-reports/report-designer-tools/web-report-designer/user-guide/structure.md @@ -0,0 +1,61 @@ +--- +title: Web Report Designer - Structure +page_title: Web Report Designer - Structure +description: Explore the Web Report Designer's panes and discover the features it offers. +slug: web-report-designer-user-guide-structure +tags: web, report, design, tool, create, report, web, structure +published: True +position: 1 +--- + + + +# Structure of Web Report Designer + +You are expected to see the sample report and the first time a user loads the Web report designer, they will see the **onboarding guide** which walks you through the main tools in the designer: + +![Onboarding Guide Popup ><](images/wrd-onboarding-guide-welcome.png) + + +1. **Design surface** - Represents the interactive design surface where you actually create and style your report. + + ![Onboarding Guide Popup ><](images/wrd-design-surface-cropped.png) + + +2. **Components tray** - Contains all of the items that you can add to the report. + + ![Components Tray ><](images/wrd-components-tray-cropped.png) + +3. **Explorer** - Provides a tree-based structure of everything that is already in the report including data structure. + + ![Explorer ><](images/wrd-explorer-cropped.png) + +4. **Properties area** - Area on the right side which will show you all of the properties and set values for the currently selected component: + + ![Properties Area ><](images/wrd-properties-area-cropped.png) + +5. **Main menu** - At the top left, the menu allows you to open, save and interact with all of your reports on a global level along with the **Asset Manager** which is where you store all of your reports assets. + + ![Main Menu ><](images/wrd-main-menu-cropped.png) + + ![Asset Manager ><](images/wrd-asset-manager-cropped.png) + +6. **Preview** - Represents a `Preview` button which shows you a pixel perfect rendering of what the report will look like: + + ![Report Preview ><](images/wrd-preview-button-cropped.png) + +7. **Search box** - At the top we have a global **Search box** which allows you to search the report instance for any property value, component data source, etc.: + + ![Global Search ><](images/wrd-global-search-cropped.png) + + + +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) + + diff --git a/designing-reports/report-designer-tools/web-report-designer/user-guide/user-guide-overview.md b/designing-reports/report-designer-tools/web-report-designer/user-guide/user-guide-overview.md new file mode 100644 index 000000000..488debb50 --- /dev/null +++ b/designing-reports/report-designer-tools/web-report-designer/user-guide/user-guide-overview.md @@ -0,0 +1,39 @@ +--- +title: User Guide - Overview +page_title: Web Report Designer - User Guide +description: Explore the Web Report Designer's user guide and discover how to apply the powerful features of the report designer to effortlessly craft rich dynamic reports. +slug: web-report-designer-user-guide-overview +tags: overview, web, report, design, tool, create, report, web +published: True +position: 0 +--- + + + +# Web Report Designer - User Guide + +The [Web Report Designer's]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) User Guide is intended to assist the end-users of business applications that integrate [Telerik Reporting]({%slug telerikreporting/welcome-to-telerik-reporting!%}). It aims to provide the required knowledge for the successful crafting and maintenance of reports without the necessity of having any previous knowledge about the [lifecycle of the Telerik Report]({%slug telerikreporting/designing-reports/understanding-the-report-lifecycle%}) or the internal engine for processing it. + +![Ninja Looking ><](images/ninja_looking.png) + +![Web Report Designer Overview --](images/wrd-overview.gif) + +## See Also + +* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) +* [Report - Basic Structure]({%slug report_structure_groups_sections%}) +* [Getting Started with the Web Report Designer: Part 1](https://www.youtube.com/watch?v=L-utkcB8-5c) +* [Getting Started with the Web Report Designer: Part 2](https://www.youtube.com/watch?v=DXKlgq-MYIU) +