diff --git a/_config.yml b/_config.yml index 3667892f2..8171b0fa1 100644 --- a/_config.yml +++ b/_config.yml @@ -45,8 +45,11 @@ navigation: user-guide/components: position: 15 title: "Report Components" + user-guide/customizing-report-items: + position: 15 + title: "Customizing Report Items" styling/rendering-and-paging: - position: 8 + position: 20 title: "Rendering and Paging" styling/rendering-and-paging/design-considerations-for-report-rendering: position: 15 diff --git a/user-guide/assets-manager.md b/user-guide/assets-manager.md new file mode 100644 index 000000000..840ca6272 --- /dev/null +++ b/user-guide/assets-manager.md @@ -0,0 +1,95 @@ +--- +title: Sharing Resources +page_title: Web Report Designer - Assets Manager +description: To share resources when crafting reports in Telerik Reporting and the Web Report Designer, you can use the Assets Manager. +slug: web-report-designer-user-guide-assets-manager +tags: web, report, design, tool, create, started +published: True +position: 8 +--- + +# Sharing Resources with Assets Manager + +To share resources (like company logo, data files) when crafting reports in the [Web Report Designer](https://demos.telerik.com/reporting/designer), Telerik Reporting offers the **Assets Manager** tool. It is designed to help report authors manage shared resources used across multiple reports. It provides centralized resource management which allows uploading, organizing, renaming, and deleting various types of assets directly on the server. The **Assets Manager** ensures a unified consistent look and feel across reports and enables teams to work together - data experts can manage sources, while designers focus on presentation. + +Assets Manager + +You can share and reuse: + +* **Images** (e.g., logos, backgrounds): Suitable for using a company logo accross multiple reports when the logo is stored at one centralized place. + +* **Data files** (e.g., CSV, JSON, shapefiles): Share common data that can be reused accross multiple users. + +* **Stylesheets** (for consistent report styling): Styles created in a report can be exported and then used in other reports. + +* **Shared Data Sources** (predefined connections to data): Enable report designers to easily create and reuse a data source component across multiple reports. Read more in [Shared Data Source]({%slug shared-data-source-web-report-designer-user-guide%}) + +* **Report Templates** (.trtx file): Offer initial report layout and styling, and allow creating reports with consistent look and feel. Read more in [Creating and Using Report Templates in Web Report Designer]({%slug web-report-designer-report-templates%}). + +Once uploaded, assets can be reused in multiple reports, ensuring consistency and reducing duplication. For example, updating a company logo in the Assets Manager updates it across all reports using that asset. + +## Sharing a Resource + +To share a resource (e.g. an image), you need to invoke the **Assets Manager** in the Telerik Web Report Designer: + +1. Launch the Web Report Designer in your browser. + +1. Click the **Main Menu** at the top left corner. + +1. Select "Assets Manager" from the menu options: + + Assets Manager Main Menu + +You do not always need to go through the menu. When you are editing a report item like a PictureBox, just click the asset picker next to the `Value` field. This will instantly open the Assets Manager so you can select an image right away: + + + +## Resource Folders + +Several default folders that help organizing shared resources for usage across multiple reports are created automatically and cannot be renamed or deleted by end-users, though developers can configure them differently on the backend. + +The main root folder contains three predefined subfolders: + +* **Data** (Stores data files like .csv, .json, and shapefiles used in Map items) + +* **Images** (Contains image files used in PictureBox items, backgrounds, logos, etc.) + +* **Styles** (Holds stylesheets (e.g., .trdx, .css) used for consistent styling across reports. + +Users can create subfolders within these categories to better organize their assets. Developers can configure different predefined folders on the backend if needed. + +### Reports + +The `Reports` folder is a dedicated folder for storing report definitions which includes all available reports on the server. It is possible to organize them into subfolders, grouping the reports by category, department, or purpose. Shared reports that can be reused as SubReports in other designs. + +### Shared Data Sources + +The [Shared Data Sources]({%slug shared-data-source-web-report-designer-user-guide%}) folder within the Assets Manager contains reusable data source definitions (.sdsx files) that can be shared across multiple reports. Each .sdsx file encapsulates the configuration for a data source, including: Connection strings, Queries or endpoints, Parameters, Metadata (e.g., name, description). + +## Enhanced UI Features + +To help you manage your shared resources with ease and flexibility the Assets Manager is packed with a rich set of UI intuitive features: + +* **Choose Your View: Grid or List** + + Prefer a visual layout or a compact list? You can switch between Grid View and List View depending on your workflow. Grid View even supports column resizing for better visibility. + + |Grid View|List View| + |----|----| + |Assets Manager Grid View|Assets Manager List View| + +* **Manage Files Effortlessly**: Upload, download, rename, move, or delete files and folders - all in one place. You can even drag and drop files directly into the manager for quick uploads. + +* **View Asset Details Instantly**: Want to see more info about a file? Just select an asset and toggle the `View Details` button. A panel on the right will show metadata like file name, type, and size: + + Assets Manager View Details + +* **Quick Access to Recent Assets**: No need to search for files you just used - your recently accessed assets are tracked and easily accessible. + + Assets Manager Recently Used + +* **Organize Reports for Report Books**: If you are creating a Report Book, use the Assets Manager to select and organize individual reports into a cohesive, multi-report document. + +## See Also + +* [Web Report Designer]({%slug user-guide/overview%}) diff --git a/user-guide/customizing-report-items/conditional-formatting.md b/user-guide/customizing-report-items/conditional-formatting.md new file mode 100644 index 000000000..139b70a6e --- /dev/null +++ b/user-guide/customizing-report-items/conditional-formatting.md @@ -0,0 +1,59 @@ +--- +title: Conditional Formatting +page_title: Web Report Designer - Conditional Formatting +description: Learn how to apply conditional formatting in Telerik Web Report Designer to dynamically style report items based on data values or expressions, improving readability and visual impact. +slug: wrd-conditional-formatting +tags: web, report, design, customize, style, condition, formatting, properties, area +published: True +position: 1 +--- + + +# Conditional Formatting + +To visually highlight important data, **Conditional formatting** lets you automatically style report items based on the values they display. This makes your reports more dynamic and easier to read. For example, you can set a TextBox showing revenue to turn red if the value drops below 10,000. This helps you draw attention to numbers that need review or action. + +Apply Conditional formatting + +Preview Conditional formatting + +## Formatting a Single Item + +Watch this quick tutorial to learn how to apply conditional formatting to a LineTotal TextBox in a table - changing its color to red when the *value is less than 50*: + + + +## Formatting Multiple Items + +If you want to apply the same rule to the entire row with data, it requires you to apply rules **individually** to each item: +* Select each TextBox (or other report item) one at a time. +* Add the same conditional formatting rule manually. + +>tip To save time, you can group items inside a Panel and apply the conditional formatting to the panel itself. This way, all nested items inherit the style based on the condition. This approach is shown in the following video: + + + +## Alternating Row Style + +To make it easier for users to distinguish between rows, especially in large tables or lists, applying alternating background colors (e.g., white and orange) improves readability. + +Alternating Row + +This is done by setting the following conditional formatting rule to one single item or all items within the row. + +|Expression|Operator| Value| +|----|----|----| +|= RowNumber()%2|Equal|1| + +The following video shows how to achieve alternating row style which prevents misreading values by visually separating rows, which is critical for accuracy in data-heavy reports. + + + +## See Also + +* [Web Report Designer]({%slug user-guide/overview%}) +* [Styling the Report]({%slug telerikreporting/designing-reports/styling-reports/using-styles-to-customize-reports%}) diff --git a/user-guide/customizing-report-items/customizing-report-items-overview.md b/user-guide/customizing-report-items/customizing-report-items-overview.md new file mode 100644 index 000000000..99c875374 --- /dev/null +++ b/user-guide/customizing-report-items/customizing-report-items-overview.md @@ -0,0 +1,64 @@ +--- +title: Overview +page_title: Web Report Designer - Customizing Report Items Overview +description: Learn how to customize the visuals of your report using the fine-grained, built-in styling model, similar to the Cascading Style Sheets (CSS) model. +slug: web-report-designer-customizing-report-items +tags: web, report, design, customize, style, condition, formatting, properties, area +published: True +position: 0 +--- + + +# Customizing Report Items - Overview + +Styling report items serves both, functional and aesthetic, purposes. Visual consistency (e.g., using a theme or style rules) improves user experience and brand alignment. It allows you to improve readability and clarity in your reports. Applying different colors or fonts distinguishes separate sections or highlight key information. +To customize or style report items in the Telerik Web Report Designer, you can use its + +* [Confitional Formatting]({%slug wrd-conditional-formatting%}) option +* Built-in CSS-like [styling model]({%slug wrd-stylesheet-formatting%}) +* Properties Area. + +## Properties Area + +The **Properties Area** represents the section on the right-side where you can view and edit the properties of the currently selected report item. This area lets you control how each report item looks and behaves. Whether you are working with a TextBox, Table, Chart, or Image, this panel gives you access to all the relevant settings in one place: + +* **Appearance**: Change fonts, colors, borders, background, padding, and more. Apply [conditional formatting]({%slug wrd-conditional-formatting%}): dynamically change appearance based on data values. +* **Data**: Connect report items to fields or expressions from your data source. +* **Layout**: Modify size, position, alignment, and visibility. +* **Behavior**: Set actions like navigation, visibility rules, or interactivity. + + Customizing Report Items Properties Area + +### Key Features + +The Properties Area in the Web Report Designer is designed to make customizing your report items smooth and intuitive. Here’s how it helps you work smarter: + +* **Different Views**: Choose the layout that fits your style: + + * **Categorized View**: Groups properties by function (like Appearance, Layout, Data), making it easier to find what you need. + * **Alphabetical View**: Lists everything in order - perfect if you know exactly what you're looking for. + +|Categorized|Alphabetical| +|----|----| +|![Properties Area Categorized View ><](images/wrd-properties-area-categorized-area.png) |![Properties Area Alphabetical View><](images/wrd-properties-area-alphabetical-view.png)| + +* **Indent Guides**: In case of nested properties Indent Line Guides help you see how settings are structured, so you can navigate complex items with confidence: + +![Indent Line Guides in Properties Area ><](images/wrd-properties-area-indent-line-guides.png) + +* **Search Box**: Use the Global Search bar at the top to instantly locate any property or editor. No more scrolling through long lists! + +![Properties Area Global Search ><](images/wrd-properties-area-global-search.gif) + +* **Reset Value**: If you have made a change you want to undo, note that each editable property has a `Reset button` next to it. Just click it to revert that setting to its default - without affecting anything else. + +![Properties Area Reset Button ><](images/wrd-properties-area-reset-button.gif) + +## See Also + +* [Conditional Formatting]({%slug wrd-conditional-formatting%}) +* [Stylesheet Formatting]({%slug wrd-stylesheet-formatting%}) diff --git a/user-guide/customizing-report-items/images/wrd-alternating-row-style.png b/user-guide/customizing-report-items/images/wrd-alternating-row-style.png new file mode 100644 index 000000000..18ec88276 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-alternating-row-style.png differ diff --git a/user-guide/customizing-report-items/images/wrd-apply-external-stylesheet.png b/user-guide/customizing-report-items/images/wrd-apply-external-stylesheet.png new file mode 100644 index 000000000..6a4240a6e Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-apply-external-stylesheet.png differ diff --git a/user-guide/customizing-report-items/images/wrd-customizing-report-items-properties-area.png b/user-guide/customizing-report-items/images/wrd-customizing-report-items-properties-area.png new file mode 100644 index 000000000..597163677 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-customizing-report-items-properties-area.png differ diff --git a/user-guide/customizing-report-items/images/wrd-preview-external-stylesheet.png b/user-guide/customizing-report-items/images/wrd-preview-external-stylesheet.png new file mode 100644 index 000000000..bf28f54d3 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-preview-external-stylesheet.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-alphabetical-view.png b/user-guide/customizing-report-items/images/wrd-properties-area-alphabetical-view.png new file mode 100644 index 000000000..d5ca2ea39 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-alphabetical-view.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-categorized-area.png b/user-guide/customizing-report-items/images/wrd-properties-area-categorized-area.png new file mode 100644 index 000000000..90a389f46 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-categorized-area.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-conditional-formatting.png b/user-guide/customizing-report-items/images/wrd-properties-area-conditional-formatting.png new file mode 100644 index 000000000..d63a5fc66 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-conditional-formatting.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-global-search.gif b/user-guide/customizing-report-items/images/wrd-properties-area-global-search.gif new file mode 100644 index 000000000..4816acbe7 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-global-search.gif differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-indent-line-guides.png b/user-guide/customizing-report-items/images/wrd-properties-area-indent-line-guides.png new file mode 100644 index 000000000..494df3428 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-indent-line-guides.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-preview-conditional-formatting.png b/user-guide/customizing-report-items/images/wrd-properties-area-preview-conditional-formatting.png new file mode 100644 index 000000000..031b09c47 Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-preview-conditional-formatting.png differ diff --git a/user-guide/customizing-report-items/images/wrd-properties-area-reset-button.gif b/user-guide/customizing-report-items/images/wrd-properties-area-reset-button.gif new file mode 100644 index 000000000..397fd323b Binary files /dev/null and b/user-guide/customizing-report-items/images/wrd-properties-area-reset-button.gif differ diff --git a/user-guide/customizing-report-items/stylesheet-formatting.md b/user-guide/customizing-report-items/stylesheet-formatting.md new file mode 100644 index 000000000..4683bab6b --- /dev/null +++ b/user-guide/customizing-report-items/stylesheet-formatting.md @@ -0,0 +1,98 @@ +--- +title: StyleSheet Formatting +page_title: Web Report Designer - StyleSheet Formatting +description: Learn how to customize the visuals of your report using the fine-grained, built-in styling model, similar to the Cascading Style Sheets (CSS) model. +slug: wrd-stylesheet-formatting +tags: web, report, design, customize, style, condition, formatting, properties, area +published: True +position: 3 +--- + + +# StyleSheet Formatting + +To keep your report design clean, consistent, and easy to manage StyleSheets in the Web Report Designer let you apply centralized, reusable styles - just like CSS in web development. + + +To apply formatting via external stylesheets, you can use a CSS-like styling model that allows centralized and reusable styling across multiple report items. + +## How to Create a StyleSheet + +In the Web Report Designer: + +1. Select the **Report** object. + +1. Go to the StyleSheet property. + +1. Click the `+` button to open the **StyleRule Collection Editor**. + +1. Click Add to create a new StyleRule. + +1. Define the Style (e.g., background color, font, borders). + +1. Add Selectors to target specific items (e.g., all TextBox, PictureBox items). + +The following tutorial shows how to define a StyleRule in the report's StyleSheet and apply the style to multiple items using selectors (e.g., by item name or type): + + + +## Using External StyleSheets + +If you want to keep your styles in a separate file, use an external StyleSheet (XML format) to define and apply styles across reports. An external StyleSheet is an XML file that contains StyleRules. These rules define how report items should look - similar to CSS in web development. You can apply styles based on: + +* **TypeSelector**: Applies to all items of a specific type (e.g., all TextBox items). +* **AttributeSelector**: Applies to items with specific attributes. +* **StyleSelector**: Applies to items with a specific StyleName. +* **DescendantSelector**: Applies to items nested within others. + +To add an External StyleSheet in the Web Report Designer: + +1. Select the **Report** object. + +1. Go to the **External style sheets** property. + +1. Click the `+` button to add an external StyleSheet. + +You can define an external style sheet with: + +* **Absolute** Path/URL: for example *C:\Application1\StyleSheets\StyleSheet1.xml* or *https://www.mysite.com/Application1/StyleSheets/StyleSheet1.xml* +* **Relative** Path/URL: for example *.\StyleSheets\StyleSheet1.xml* or *~/StyleSheets/StyleSheet1.xml* + +![Apply External StyleSheet ><](images/wrd-apply-external-stylesheet.png) + +## Sample StyleRule + +Here's an example that styles all TextBox items with a light gray background, dark blue text, and bold Arial font: + +```XML + + + + + + + + + + +``` +And here's how it looks in the report preview: + +![Preview External StyleSheet ><](images/wrd-preview-external-stylesheet.png) + +## See Also + +* [Web Report Designer]({%slug user-guide/overview%}) +* [Styling the Report]({%slug telerikreporting/designing-reports/styling-reports/using-styles-to-customize-reports%}) diff --git a/user-guide/expression-editor.md b/user-guide/expression-editor.md new file mode 100644 index 000000000..d693cfd05 --- /dev/null +++ b/user-guide/expression-editor.md @@ -0,0 +1,55 @@ +--- +title: Expression editor +page_title: Expression editor - Web Report Designer User Guide +description: "Learn more about the Expression editor in Web Report Designer, where and how you may configure and use it in your Reports." +slug: expression-editor-web-report-designer-user-guide +tags: expression,editor,web,report,designer,design,create,report,web +published: True +reporting_area: WRDHTML5, WRDBlazorWrapper +position: 100 +--- + + +# Customize Report Behavior Using the Expression Editor + +Instead of manually entering fixed values, you can use expressions to make your report items smarter and more dynamic. This means your reports can automatically adapt to changing data or conditions—saving you time and reducing errors. The expression editor helps you build these expressions easily, offering ready-to-use elements and clear descriptions so you can focus on getting the result you need without digging through documentation. + +With expressions, you can quickly build your pricing logic by combining database fields with custom values—just type your formula or double-click elements to add them. + +![How to create an Expression Editor ><](images/CreatingExpressionEditorWRD.png) + +## Designing Expressions with Built-in Elements + +By using the predefined expression components in the Web Report Designers, you can build flexible expressions with minimal effort, eliminating the need for coding or manual calculations. + +| Name | Description | +| ------ | ------ | +| `Constants` | Use fixed values like numbers, text, dates, and booleans to ensure consistent logic and formatting that stays unchanged during report execution | +| `Fields – mainDataSource` | Represent the actual data columns from your connected data source | +| `Functions` | Predefined formulas that perform calculations or logic using values like fields, constants, or other functions to create dynamic expressions | +| `Global Objects` | Built-in objects that provide access to report-wide information such as current user identity, execution time, page numbers, rendering format, and environment details | +| `Operators` | Symbols used in expressions to perform calculations, comparisons, logic, or string operations—like '+', '=', 'AND', or 'LIKE'. | +| `Report Parameters` | User-defined inputs that control report content, filtering, or layout—often used to pass values, filter data, or link related reports | +| `Reporting Constants` | Predefined values used to control report layout and styling—such as alignment, borders, image sizing, and page behavior | + + + +>tip You can add a new line as a string in the Expression with the `Edit Expression` dialog. +> +>```` +>= Fields.FirstLine + " +>" + Fields.SecondLine +>```` +> +>The result will be the values of the two fiedls being displayed one above the other in the corresponding report item. + +## See Also + +* [Functions Overview]({%slug telerikreporting/designing-reports/connecting-to-data/expressions/expressions-reference/functions/overview%}) +* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%}) +* [Approaches for Adding Report Parameters]({%slug telerikreporting/designing-reports/connecting-to-data/report-parameters/how-to-add-report-parameters%}#web-report-designer) +* [Aggregate Functions Overview]({%slug telerikreporting/designing-reports/connecting-to-data/expressions/expressions-reference/functions/aggregate-functions%}) diff --git a/user-guide/images/AllSharedDataSources.png b/user-guide/images/AllSharedDataSources.png new file mode 100644 index 000000000..a7f349d4d Binary files /dev/null and b/user-guide/images/AllSharedDataSources.png differ diff --git a/user-guide/images/CreatingExpressionEditorWRD.png b/user-guide/images/CreatingExpressionEditorWRD.png new file mode 100644 index 000000000..f19244f48 Binary files /dev/null and b/user-guide/images/CreatingExpressionEditorWRD.png differ diff --git a/user-guide/images/CreatingSdsxFile.png b/user-guide/images/CreatingSdsxFile.png new file mode 100644 index 000000000..64386ccf5 Binary files /dev/null and b/user-guide/images/CreatingSdsxFile.png differ diff --git a/user-guide/images/CreatingSharedDataSource.png b/user-guide/images/CreatingSharedDataSource.png new file mode 100644 index 000000000..ae92fee1e Binary files /dev/null and b/user-guide/images/CreatingSharedDataSource.png differ diff --git a/user-guide/images/QueryBuilderWRD.png b/user-guide/images/QueryBuilderWRD.png new file mode 100644 index 000000000..952c367c5 Binary files /dev/null and b/user-guide/images/QueryBuilderWRD.png differ diff --git a/user-guide/images/SchemaRestrictionsQueryBuilderWDR_1.png b/user-guide/images/SchemaRestrictionsQueryBuilderWDR_1.png new file mode 100644 index 000000000..3ce99725d Binary files /dev/null and b/user-guide/images/SchemaRestrictionsQueryBuilderWDR_1.png differ diff --git a/user-guide/images/SchemaRestrictionsQueryBuilderWDR_2.png b/user-guide/images/SchemaRestrictionsQueryBuilderWDR_2.png new file mode 100644 index 000000000..e239fe0fc Binary files /dev/null and b/user-guide/images/SchemaRestrictionsQueryBuilderWDR_2.png differ diff --git a/user-guide/images/wrd-assets-manager-grid-view.png b/user-guide/images/wrd-assets-manager-grid-view.png new file mode 100644 index 000000000..f3606fd3f Binary files /dev/null and b/user-guide/images/wrd-assets-manager-grid-view.png differ diff --git a/user-guide/images/wrd-assets-manager-list-view.png b/user-guide/images/wrd-assets-manager-list-view.png new file mode 100644 index 000000000..f1ac38d96 Binary files /dev/null and b/user-guide/images/wrd-assets-manager-list-view.png differ diff --git a/user-guide/images/wrd-assets-manager-main-menu.png b/user-guide/images/wrd-assets-manager-main-menu.png new file mode 100644 index 000000000..36468e4dd Binary files /dev/null and b/user-guide/images/wrd-assets-manager-main-menu.png differ diff --git a/user-guide/images/wrd-assets-manager-recently-used.png b/user-guide/images/wrd-assets-manager-recently-used.png new file mode 100644 index 000000000..af29b813f Binary files /dev/null and b/user-guide/images/wrd-assets-manager-recently-used.png differ diff --git a/user-guide/images/wrd-assets-manager-view-details.gif b/user-guide/images/wrd-assets-manager-view-details.gif new file mode 100644 index 000000000..30d53258d Binary files /dev/null and b/user-guide/images/wrd-assets-manager-view-details.gif differ diff --git a/user-guide/images/wrd-assets-manager.png b/user-guide/images/wrd-assets-manager.png new file mode 100644 index 000000000..b3eed0fae Binary files /dev/null and b/user-guide/images/wrd-assets-manager.png differ diff --git a/user-guide/images/wrd-using-query-builder.gif b/user-guide/images/wrd-using-query-builder.gif new file mode 100644 index 000000000..43b3ea666 Binary files /dev/null and b/user-guide/images/wrd-using-query-builder.gif differ diff --git a/user-guide/images/wrd-workspace-preferences-main-menu.png b/user-guide/images/wrd-workspace-preferences-main-menu.png new file mode 100644 index 000000000..4a3b3bd5e Binary files /dev/null and b/user-guide/images/wrd-workspace-preferences-main-menu.png differ diff --git a/user-guide/images/wrd-workspace-preferences-snap-to-snap-lines.gif b/user-guide/images/wrd-workspace-preferences-snap-to-snap-lines.gif new file mode 100644 index 000000000..a6e77cb46 Binary files /dev/null and b/user-guide/images/wrd-workspace-preferences-snap-to-snap-lines.gif differ diff --git a/user-guide/images/wrd-workspace-preferences.png b/user-guide/images/wrd-workspace-preferences.png new file mode 100644 index 000000000..781872835 Binary files /dev/null and b/user-guide/images/wrd-workspace-preferences.png differ diff --git a/user-guide/query-builder.md b/user-guide/query-builder.md new file mode 100644 index 000000000..5896ecf9e --- /dev/null +++ b/user-guide/query-builder.md @@ -0,0 +1,144 @@ +--- +title: Query Builder +page_title: Query Builder in the Web Report Designer +description: "Learn more about the Query Builder in the Web Report Designer and how to use it to create basic queries easily in Telerik Reporting." +slug: user-guide/query-builder +tags: query,builder,web,report,designer +published: True +reportingArea: WRDHTML5, WRDBlazorWrapper +position: 200 +--- + + + +# Web Report Designer – Query Builder for Easy Data Selection + +The Web Report Designer gives you two easy ways to build queries: a visual tool (where you click and select options) and a text tool (where you type the query). A query is just a set of instructions that tells the system what data you want from a database. This data is used by something called a SqlDataSource, which connects your report to the database. The Query Builder works with most common data providers (like ADO.NET, ODBC, or OLEDB) as long as they can share details about the columns in the database using a feature called `GetSchema`. + +![The Graphical SQL Query Builder Form of the Web Report Designer ><](images/QueryBuilderWRD.png) + +The graphical query builder helps you find information in a database without writing code. You can click to choose the tables and columns you need, and then see the results. If you use more than one table, you need to show how the tables are connected. + +## Schema Restrictions + +As of 2025 Q1, the Web Report Designer’s Query Builder has a new option called [Schema Restrictions](/api/telerik.reporting.sqldatasource#Telerik_Reporting_SqlDataSource_SchemaRestrictions). This option lets you choose which parts of the database to load by listing them with commas. It helps report creators see only the needed information and makes loading faster. + +```` +null,Production,ProductCategory +```` + +> Schema restrictions are sensitive to uppercase and lowercase letters, and empty values are allowed. If you need to set a value to nothing, use the word null as shown in the example. These rules only work with .NET 8 or newer. + +![Image of the SQL Data Source wizard showing the schema restrictions field ><](images/SchemaRestrictionsQueryBuilderWDR_1.png) + +![Image of the SQL Data Source wizard showing the query builder dialog ><](images/SchemaRestrictionsQueryBuilderWDR_2.png) + +## Query Builder Areas + +The following sections describe the function of each area + +| Name | Description | +| ------ | ------ | +| [Database View](#database-view-pane) | Displays a structured list of tables and views grouped by database sections | +| [Selected Fields](#selected-fields-pane) | Displays the list of field names from the selected items in the database view | +| [Relationships](#relationships-pane) | Displays how the selected tables are connected | +| [Filters](#filters-pane) | Displays a list of options you can use to filter tables or views | +| [Result](#result-pane) | Displays example data for the query that was created automatically | + +### Database View Pane + +On the left side of the screen, you’ll see the Database View. It shows details about the database items you’re allowed to access, based on your login. The items are organized in a tree structure by category. Click a category to see its tables and views, and click a table or view to see its columns. + +When you check a column in this pane, it will automatically move to the Selected Fields pane. If you check a table, all its columns will be added to the Selected Fields pane. If you check more than one table, the Relationship Editor pane will open automatically. + +### Selected Fields Pane + +The Selected Fields pane shows the columns you chose to include in your query. These columns become the set of fields used for your report. You can use these fields to display data in tables, charts, and other report elements when viewing the report. + +The following columns are displayed: + +| Name | Description | +| ------ | ------ | +| Column name | Displays the names of the selected fields, grouped by the table or view they come from | +| Alias | If the last added field name is already used, an alias will be created automatically. You can also change or add aliases manually | +| Grouped | Displays a checkbox that lets you choose if the field should be used for grouping | +| Aggregate | Displays the calculation that will be applied to the field. You can choose `Count`, `Max`, `Min`, `Average`, or `Sum`. If a field is grouped, it cannot have a calculation. By default, `Sum` is used for all fields that are not grouped when the `Grouped` checkbox is selected | +| Sorting type | Displays the sorting type for the field. You can choose `(none)`, `Ascending` (A to Z or smallest to largest), or `Descending` (Z to A or largest to smallest). By default, `(none)` is selected, which means the field will not be sorted | +| Sort order | Displays the order in which the field sortings should be applied | +| Remove | Includes a button to remove this field from the query. You will be asked to confirm before the field is deleted | + +### Relationships Pane + +The Relationships pane shows how the selected tables are linked together, using SQL JOIN statements (which are instructions that tell the database how to combine data from different tables). + +The following option is available: + +* __Add new relationship__ Opens the relationship editor, which lets you set up connections between tables or views. These relationships tell the system how to combine data. When using multiple relationships in a query, each new table must be related to one that is already included. + +The following columns are available: + +| Name | Description | +| ------ | ------ | +| Left table | Displays the name of the first table that is part of the join relationship | +| Join type | Displays the type of SQL join used in the automatically created query. The join types you can choose from are `Inner`, `Left`, `Right`, `Outer`, and `Unrelated` | +| Right table | Displays the name of the second table that is part of the join relationship | +| Left table field | Displays which field from the left table will be used to match data in the join statement | +| Operator | Displays the operator used on the left and right fields from the joined tables | +| Right table field | Indicates which field from the right table should be used in the join statement | +| Edit/Remove | Contains buttons to edit or remove the current relationship | + +### Filters Pane + +The Filters pane shows the conditions used to narrow down the data you see. These conditions help the system choose only the rows that match and create a rule for finding them. + +The following option is available: + +| Name | Description | +| ------ | ------ | +| Logical operator | Choose how the filters in this group should work together. The available options are `And` and `Or` | +| Add Expression | Add a new filter expression to the current group | +| Add Group | Add a new filter group that can have a different logical operator. Filter groups can be defined hierarchically | +| Close | Remove the current filter group and all of its child filter expressions | + +The following columns are displayed: + +| Name | Description | +| ------ | ------ | +| Field Name | Displays the name of the field to apply the criteria | +| Operator | The operator to use in the filter expression | +| Value/Parameter name | The value or parameter name to add to the query | +| Preview value | The value to use for the Result pane | +| Delete | Remove the current filter expression from the expression group | + +### Result Pane + +The Result pane shows the query that is created based on your choices in the other sections. It can also give you a preview of the data that will appear when the query runs. The columns you see in the results are the fields you selected earlier. + +The report does not store the actual data. The data is only fetched when the report is generated. + +The following options are available: + +* __Preview button__ Preview the query created from your selections or see the data it will return + +* __SQL/Data switch__ Choose whether to preview the SQL query that was created for you or the data it will return. + +![How to use the Query Builder ><](images/wrd-using-query-builder.gif) + +## Query Builder State + +When you click Save, the [SqlDataSource Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/tools/data-source-wizards/sqldatasource-wizard/overview%}) Select Statement will be replaced by the new SQL query that was generated. + +The Query Builder keeps your current settings. But if you change the SQL query manually and then use the Query Builder again, it will replace your changes with its own version. + +## 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/shared-data-source.md b/user-guide/shared-data-source.md new file mode 100644 index 000000000..424ac2486 --- /dev/null +++ b/user-guide/shared-data-source.md @@ -0,0 +1,65 @@ +--- +title: Shared Data Source +page_title: Shared Data Source - Web Report Designer User Guide +description: "Learn more about the Shared Data Source Component in Web Report Designer, where and how you may configure and use it in your Reports." +slug: shared-data-source-web-report-designer-user-guide +tags: shared,data,source,web,report,designer,design,create,report,web +published: True +reporting_area: WRDHTML5, WRDBlazorWrapper +position: 10 +--- + + +# Sharing and Reusing a Data Source + +Instead of configuring a data connection every time you build a report, the Shared [Data Source]({%slug web-report-designer-user-guide-components-data-sources%}) component lets you set it up once and reuse it across multiple reports. This saves you time, reduces errors, and keeps your data connections consistent. Whether you're pulling data from a database, a file, or a web service, this approach helps you stay organized and efficient. + +You can easily connect your reports to a variety of data sources — giving you flexibility to work with the formats you already use, such as: + + * [SqlDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#sql-data-source) + * [WebServiceDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#web-service-data-source) + * [ObjectDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#object-data-source) + * [JsonDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#json-data-source) + * [CsvDataSource]({%slug web-report-designer-user-guide-components-data-sources%}#csv-data-source) + +## Configuring a Shared Data Source + +To create a shared data source: + +1. In the Web Report Designer, open an existing report that already has a data source. +1. Go to the **Explorer** tab, click the ellipsis button (**...**) next to the data source, and then select **Save as Shared Data Source** from the context menu. + + ![Saving a data source as Shared ><](images/CreatingSharedDataSource.png) + +After saving a data source as shared, the Web Report Designer generates an `.sdsx` file. This file represents the shared data source definition that you can open directly in the designer for further configuration. + + ![Creating a SDSX file ><](images/CreatingSdsxFile.png) + +To view all existing Shared Data Sources, open the [Assets Manager]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/tools/shared-resources%}#assets-manager) from the main menu. + + ![Use Assets Manager to view your Shared Data Sources ><](images/AllSharedDataSources.png) + +The next video demonstrates how to create a Shared Data Source from an existing report. + + + +## Differences between Shared Data Source and Data Source + +In the Web Report Designer, both Data Source and Shared Data Source are used to define connections to external data. However, they differ in scope, usage, and maintainability. + +| Data Source | Shared Data Source | +| ------ | ------ | +| Defined within a single report | Defined outside of individual reports and stored as an `.sdsx` filee | +| Cannot be reused across other reports | Can be reused across multiple reports | +| Changes to the data source affect only the report where it is defined | Changes to the shared data source affect all reports that reference it | +| Suitable for simple or one-off reports | Ideal for centralized data management and large-scale reporting solutions | + +## See Also + +* [Web Report Designer User Guide: An Overview]({%slug user-guide/overview%}) +* [App Tour of the Web Report Designer]({%slug user-guide/app-tour%}) +* [Create a Simple Report]({%slug web-report-designer-user-guide-getting-started%}) diff --git a/user-guide/workspace-preferences.md b/user-guide/workspace-preferences.md new file mode 100644 index 000000000..0408b3275 --- /dev/null +++ b/user-guide/workspace-preferences.md @@ -0,0 +1,56 @@ +--- +title: Workspace Preferences +page_title: Web Report Designer - Workspace Preferences +description: The Workspace Preferences section is designed to let users customize the look and behavior of their design environment for better productivity and comfort. +slug: web-report-designer-user-guide-workspace-preferences +tags: web, report, design, workspace, settings, preferences +published: True +position: 9 +--- + +# Workspace Preferences in Web Report Designer + +The **Workspace Preferences** section provides options to personalize the designer interface without affecting the actual report content. These settings are user-specific and typically stored in the browser or session. + +Workspace Preferences + +To start the Preferences panel: + +1. Launch the Web Report Designer in your browser. + +1. Click the **Main Menu** at the top left corner. + +1. Select "Workspace Preferences" from the menu options: + + Workspace Preferences + +The Workspace Preferences offer the following main categories of settings: + +## Snapping + +* **Snap to grid lines** (*Currently Not Supported*)—Snapping to grid lines means that when you move or resize report items (like TextBoxes, Tables, Charts) on the design surface, their edges automatically align to the nearest grid line. + + The design surface has an invisible or visible grid. When snapping is enabled: + + * Moving an item → It jumps to the nearest grid intersection. + * Resizing an item → Edges align with grid lines. + + When disabled: You can freely position items without restrictions. + +* **Snap to snap lines**—Helps you position elements relative to each other (e.g., aligning text boxes, charts, or tables). Snap lines appear temporarily as you drag items and they are based on the edges or centers of nearby items. + +Snap to snap lines + + +>tip Snap to grid uses a static grid on the canvas, while snap lines are dynamic and context-sensitive, appearing only when items are near each other. + +## General + + +* **Preserve open reports on exit**—Controls whether the designer remembers which reports you had open when you close the application and restores them the next time you start it. Useful for continuing work without manually reopening each report. + +* **Collect non-personal usage data**—Controls whether to collect non-personal usage data on the usage of the designer's components and wizards/tools. The reason we want to analyse this data is to improve the web designer based on its actual usage feedback. + +## See Also + +* [Web Report Designer]({%slug user-guide/overview%})