Creating Reusable Headers and Footers (#1952)

dessyordanova · yordan-mitev · web-flow · commit 0452d76bb151 · 2025-12-17T18:21:37.000+02:00
* Creating Reusable Headers and Footers

* small changes

* Update user-guide/components/SubReport/creating-nested-hierarchy-with-subreports.md

Co-authored-by: Yordan &lt;60105689+yordan-mitev@users.noreply.github.com&gt;

* Update user-guide/components/subreport/creating-reusable-headers-and-footers.md

Co-authored-by: Yordan &lt;60105689+yordan-mitev@users.noreply.github.com&gt;

* Update user-guide/components/subreport/creating-reusable-headers-and-footers.md

Co-authored-by: Yordan &lt;60105689+yordan-mitev@users.noreply.github.com&gt;

* Update user-guide/components/subreport/creating-reusable-headers-and-footers.md

Co-authored-by: Yordan &lt;60105689+yordan-mitev@users.noreply.github.com&gt;

* Update user-guide/components/subreport/creating-reusable-headers-and-footers.md

Co-authored-by: Yordan &lt;60105689+yordan-mitev@users.noreply.github.com&gt;

* Update user-guide/components/subreport/creating-reusable-headers-and-footers.md

Co-authored-by: Yordan &lt;60105689+yordan-mitev@users.noreply.github.com&gt;

* Update user-guide/components/subreport/creating-reusable-headers-and-footers.md

Co-authored-by: Yordan &lt;60105689+yordan-mitev@users.noreply.github.com&gt;

* Update user-guide/components/subreport/creating-reusable-headers-and-footers.md

Co-authored-by: Yordan &lt;60105689+yordan-mitev@users.noreply.github.com&gt;

* Update user-guide/components/subreport/creating-reusable-headers-and-footers.md

Co-authored-by: Yordan &lt;60105689+yordan-mitev@users.noreply.github.com&gt;

* Update user-guide/components/subreport/creating-reusable-headers-and-footers.md

Co-authored-by: Yordan &lt;60105689+yordan-mitev@users.noreply.github.com&gt;

---------

Co-authored-by: Yordan &lt;60105689+yordan-mitev@users.noreply.github.com&gt;
diff --git a/user-guide/components/SubReport/creating-nested-hierarchy-with-subreports.md b/user-guide/components/SubReport/creating-nested-hierarchy-with-subreports.md
@@ -19,9 +19,7 @@ The main benefits of this approach are:
 * Works naturally with hierarchical object models or JSON data.
 * Cleaner and more maintainable for multi-level hierarchies.
 
-The example in this tutorial shows how to present and organize a report when the used data has a nested (hierarchical) structure. To illustrate the hierarchical structure of the data used in the tutorial, see the JSON data below. It represents a collection of Categories, where each category contains a **nested** list of its Products.
-
-Let's have the sample [JSON data](https://github.com/telerik/reporting-samples/blob/master/Sample%20Reports/Data%20Files/Categories-Products-Nested-Data.json) representing a collection of Categories. Each category contains a nested list of its Products. This is a piece of the JSON content to better understand the Categories-Products hierarchical structure.
+The example in this tutorial shows how to present and organize a report when the used data has a nested (hierarchical) structure. The [JSON data for this report](https://github.com/telerik/reporting-samples/blob/master/Sample%20Reports/Data%20Files/Categories-Products-Nested-Data.json) represents a collection of Categories. Each category contains a **nested** list of its Products. 
 
 A complete step-by-step video is available here:
 
@@ -47,7 +45,9 @@ To design a report that represents a hierarchy:
 
 1. Navigate to the **INNER REPORT** section and select the **UriReportSource** Type. Now, you need to create a separate report that will be used as a container for the products for each category.
 
-1. Create another report (`ProductsReport.trdp`) and add two TextBox items.
+1. Create another report (`ProductsReport.trdp`).
+
+1. Remove the default header/footer and add two TextBox items (or other Report items according to the data you need to display).
  
 1. Using the search box, navigate to the **Value** field and bind to `=Fields.ProductName` and `=Fields.Price` respectively. Save the child report.
 
diff --git a/user-guide/components/SubReport/creating-org-hierarchy-with-subreports.md b/user-guide/components/SubReport/creating-org-hierarchy-with-subreports.md
@@ -26,8 +26,7 @@ CEO
  │    │    ├── Accountants
 </pre>
 
-The approach demonstrated here uses a recursive SubReport to construct an hierarchy from flat data. The main report references itself in a SubReport item, and each SubReport filters its data using a report parameter passed from its parent. This process continues recursively, building the hierarchy until no more child items remain:
-
+The approach demonstrated here uses a recursive [SubReport]({%slug web-report-designer-user-guide-components-subreport%}) to construct an hierarchy from flat data. The main report references itself in a SubReport item, and each SubReport filters its data using a report parameter passed from its parent. This process continues recursively, building the hierarchy until no more child items remain:
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/pzGIhgwfwZk?si=Cl3zj-v9Cuy4DJDb" 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>
 
diff --git a/user-guide/components/subreport/creating-reusable-headers-and-footers.md b/user-guide/components/subreport/creating-reusable-headers-and-footers.md
@@ -0,0 +1,63 @@
+---
+title: Creating Reusable Headers and Footers
+page_title: Creating Reusable Headers and Footers
+description: Learn how to use SubReports in the Web Report Designer to create reusable header and footers.
+slug: creating-reusable-headers-and-footers
+tags: web, report, design, components, subreport, header, footer, reuse
+published: True
+reportingArea: WRDHTML5, WRDBlazorWrapper
+position: 4
+---
+
+# Creating Reusable Headers and Footers with SubReport
+
+The SubReport item is perfect for creating reusable report components that can be embedded in larger reports later.
+
+Here's a step-by-step tutorial for creating a reusable part of a report (for example, header and footer) using a SubReport:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/sMgP2iNkvvM?si=A7g7W7pBGyzlEt9y" 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>
+
+## Creating the Header Report
+
+1. Create a new report (for example, `HeaderReport.trdp`).
+
+1. Remove the default header and footer.
+
+1. Add elements like company logos and report titles in the Page Header section.
+
+1. Preview and save this report as a standalone file. This will serve as your reusable header part of a bigger report.
+
+## Creating the Footer Report
+
+1. Create a new report (for example, `FooterReport.trdp`).
+
+1. Remove the default header and footer.
+
+1. Add elements like information text or any other meaningful content to the footer part of a report.
+
+1. Preview and save this report as a standalone file. This will serve as your reusable footer part of a bigger report.
+
+## Adding SubReports to Your Main Report
+
+1. Create a new report that will serve as the main report.
+
+1. Select the Details section and add a SubReport item.
+
+1. Navigate to the **INNER REPORT** section and select the **UriReportSource** option.
+
+1. For the **Uri** field, select the `HeaderReport.trdp`.
+
+1. Preview the report to see that the header content is successfully included.
+
+1. Select the Details section again and add another SubReport item.
+
+1. Navigate to the **INNER REPORT** section and select the **UriReportSource** option.
+
+1. For the **Uri** field, select the `FooterReport.trdp`.
+
+
+
+## See Also
+
+* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%})
+* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%})
diff --git a/user-guide/components/subreport/overview.md b/user-guide/components/subreport/overview.md
@@ -23,7 +23,7 @@ A SubReport is a report component that allows you to embed one report inside ano
 SubReports act as containers that automatically adjust their size based on the content of the embedded report. You can use SubReports to create:
 
 * [Master-detail relationships]({%slug web-report-designer-user-guide-creating-master-detail-report%})&mdash;Display related data in a parent-child format (for example, categories and their products). The master report with categories passes a report parameter (CategoryID) to the child report with products to filter the relevant hierarchical data.
-* Reusable components&mdash;Create shared headers, footers, or report sections that can be used across multiple reports.
+* [Reusable components]({%slug creating-reusable-headers-and-footers%})&mdash;Create shared headers, footers, or report sections that can be used across multiple reports.
 * Complex layouts&mdash;Combine different data sources and report structures within a single report.
 * [Hierarchical data]({%slug wrd-user-guide-create-nested-hierarchy-with-subreport%})&mdash;Show nested data relationships with proper grouping and organization. The Web Report Designer provides an alternative approach to parameter binding for hierarchical data using the **DataSource** property of the **SubReport** item. This method is cleaner when your detail report is fully data-bound (not just a table inside it) and works well for hierarchical nested data scenarios.
 * [Organization Structure]({%slug wrd-user-guide-create-org-hierarchy-with-subreport%})&mdash;Use recursive SubReports and a self-referencing flat data source. The hierarchy is achieved by having the main report reference itself as a SubReport, passing a parameter that filters child records based on the parent’s ID.
