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,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.
+
+<img style="border: 1px solid gray;" src="images/wrd-assets-manager.png" alt="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:
+
+    <img style="border: 1px solid gray;" src="images/wrd-assets-manager-main-menu.png" alt="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:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/urU2a-d6Saw?si=YJZziPWrtOxDYci3" 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>
+
+## 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|
+    |----|----|
+    |<img style="border: 1px solid gray;" src="images/wrd-assets-manager-grid-view.png" alt="Assets Manager Grid View" />|<img style="border: 1px solid gray;" src="images/wrd-assets-manager-list-view.png" alt="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:
+
+     <img style="border: 1px solid gray;" src="images/wrd-assets-manager-view-details.gif" alt="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.
+
+     <img style="border: 1px solid gray;" src="images/wrd-assets-manager-recently-used.png" alt="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%})

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
+---
+<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. 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.
+
+<img style="border: 1px solid gray;" src="images/wrd-properties-area-conditional-formatting.png" alt="Apply Conditional formatting" caption="Applying a Conditional Formatting Rule" />  
+
+<img style="border: 1px solid gray;" src="images/wrd-properties-area-preview-conditional-formatting.png" alt="Preview Conditional formatting" caption="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*:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/sfcIkSI-Opo?si=MWpCD6GUSH1M_cVd" 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 
+
+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: 
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/rqkDyZl-CMY?si=HMyMJ49AucGHJst7" 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>
+
+## 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. 
+
+<img style="border: 1px solid gray;" src="images/wrd-alternating-row-style.png" alt="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.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/nsOPRTNkQkw?si=IU3YD6IATz1yQC1-" 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,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
+---
+<style>
+img[alt$="><"] {
+  border: 1px solid lightgrey;
+}
+</style>
+
+# 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.
+
+ <img style="border: 1px solid gray;" src="images/wrd-customizing-report-items-properties-area.png" alt="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%})

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%})