Created shared-data-source.md

_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

user-guide/assets-manager.md

@@ -0,0 +1,102 @@
+---
+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 use the Assets Manager.
+slug: web-report-designer-user-guide-assets-manager
+tags: web, report, design, tool, create, started 
+published: True
+position: 8
+---
+<style>
+img[alt$="><"] {
+  border: 1px solid lightgrey;
+}
+</style>
+
+# 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 ><](images/wrd-assets-manager.png) 
+
+## What Resources You Can Share
+
+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.
+
+* **Report Templates** (.trtx file): Offer initial report layout and styling, and allow creating reports with consistent look and feel.
+
+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.
+
+## Getting Started with Resource Sharing
+
+To invoke the Assets Manager in the Telerik Web Report Designer, follow these steps:
+
+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><](images/wrd-assets-manager-main-menu.png)  
+
+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:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/krtf6XxVKfE?si=vHgJ6gwSYen7Y1ML" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+## Default Folders
+
+Several default folders that help organize shared resources for use 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).
+
+## What Enhanced UI Features Can Be Used
+
+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><](images/wrd-assets-manager-grid-view.png) |![Assets Manager List View><](images/wrd-assets-manager-list-view.png) |
+
+* **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><](images/wrd-assets-manager-view-details.gif) 
+
+* **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><](images/wrd-assets-manager-recently-used.png)  
+
+* **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%})

user-guide/customizing-report-items/conditional-formatting.md

@@ -0,0 +1,45 @@
+---
+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
+---
+<style>
+img[alt$="><"] {
+  border: 1px solid lightgrey;
+}
+</style>
+
+# Conditional Formatting 
+
+To visually highlight important data, **Conditional formatting** lets you automatically style report items based on the values they display making 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 draw attention to numbers that need review or action.
+
+>caption Applying a Conditional Formatting Rule
+
+![Conditional formatting ><](images/wrd-properties-area-conditional-formatting.png)    
+
+![Preview Conditional formatting ><](images/wrd-properties-area-preview-conditional-formatting.png)  
+
+## 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*:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/gU749jR899U?si=RrgBdmOvMVWKH-I8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+## Formatting Multiple Items 
+
+While conditional formatting works great on individual items, applying it to multiple selected items at once is a challenge. When **multiple** items are selected, even though ConditionalFormatting is technically supported on each individual item, the designer cannot guarantee consistent behavior across all selected items. Hence, it does not allow batch editing of conditional formatting rules to make for example alternating row style for all the cells belonging to the table row. 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.
+
+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: 
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/oise1nWPJ0I?si=3yaiqnIwZxoJgdKO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+## See Also
+
+* [Web Report Designer]({%slug user-guide/overview%})
+* [Styling the Report]({%slug telerikreporting/designing-reports/styling-reports/using-styles-to-customize-reports%})

user-guide/customizing-report-items/customizing-report-items-overview.md

@@ -0,0 +1,65 @@
+---
+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
+---
+<style>
+img[alt$="><"] {
+  border: 1px solid lightgrey;
+}
+</style>
+
+# Customizing Report Items - Overview
+
+A well-styled report looks professional and polished. 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 built-in CSS-like styling model and the Properties panel.
+
+## Properties Area - What Is It For
+
+The **Properties 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:
+
+* **Style your items**: Change fonts, colors, borders, background, padding, and more.
+* **Set data bindings**: Connect report items to fields or expressions from your data source.
+* **Adjust layout**: Modify size, position, alignment, and visibility.
+* **Apply conditional formatting**: Dynamically change appearance based on data values.
+* **Configure behavior**: Set actions like navigation, visibility rules, or interactivity.
+
+![Customizing Report Items Properties Area ><](images/wrd-customizing-report-items-properties-area.png)  
+
+## What Makes the Properties Area So Useful
+
+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:
+
+* **Switch Between Views That Work for You**: 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)|
+
+* **Visualize Property Hierarchies with 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)  
+
+* **Find What You Need Fast**: 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 with a Click
+
+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
+
+* [Web Report Designer]({%slug user-guide/overview%})
+* [Conditional Formatting]({%slug wrd-conditional-formatting%})
+* [Stylesheet Formatting]({%slug wrd-stylesheet-formatting%})

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
+---
+<style>
+img[alt$="><"] {
+  border: 1px solid lightgrey;
+}
+</style>
+
+# 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):
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/HIjkZc48abM?si=aUZKq7TlyfuwBIp2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+## 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
+
+<StyleSheet>
+<StyleRule>
+  <Selectors>
+    <TypeSelector Type="Telerik.Reporting.TextBox" />
+  </Selectors>
+  <Style>
+    <BackgroundColor>LightGray</BackgroundColor>
+    <Color>DarkBlue</Color>
+    <Font>
+      <Name>Arial</Name>
+      <Size>10pt</Size>
+      <Bold>true</Bold>
+    </Font>
+  </Style>
+</StyleRule>
+</StyleSheet>
+
+```
+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%})