# Get Started with Master-Detail Reports for Nested DataSets

Learn how you can create a master-detail report using nested datasets in ActiveReportsJS Designer.

## Content

A master-detail report is a report that displays data structures that are related to each other by hierarchical relationships. For example, you can use such a report to visualize a list of orders where each order contains the header(master data) and line items(detail data). ActiveReportsJS offers multiple ways to create master-detail reports. This tutorial will show you how to create a master-detail report from a single hierarchical data set that contains objects like the following:

```json
{
    "Name": "Long-Sleeve Logo Jersey, L",
    "ProductNumber": "LJ-0192-L",
    "Color": "Multi",
    "Size": "L",
    "ProductListPriceHistories": [
        {
            "StartDate": "2011-05-31T00:00:00Z",
            "EndDate": "2012-05-29",
            "ListPrice": 48.0673,
        },
        {
            "StartDate": "2012-05-30T00:00:00Z",
            "EndDate": "2013-05-29",
            "ListPrice": 48.0673,
        },
        {
            "StartDate": "2013-05-30T00:00:00Z",
            "EndDate": null,
            "ListPrice": 49.99,
        }
    ]
}
```

This tutorial builds the `Product Inventory` report from the ground up, providing experience with the typical report designing process. By the end, you will be able to do the following:

* Create a new report
* Bind the report to the OData API
* Use the OData [$select](https://www.odata.org/getting-started/basic-tutorial/#select) and [$filter](https://www.odata.org/getting-started/basic-tutorial/#filter) query options to reduce the volume of retrieved data
* Use the OData [$expand](https://www.odata.org/getting-started/basic-tutorial/#expand) query option to retrieve hierarchical data
* Use field tags to define the data type of a field.
* Create a [Table data region](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table) to display the `Master` data.
* Format rows, columns, and cells of the table.
* Add a nested [List data region](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/List) to display the `Detail` data.
* Use the [Format](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/Functions/conversion#format) function to display formatted data.

Upon completing all tutorial steps, the final report will look like this: [live demo](/activereportsjs/demos/Reports/GetStartedWithNestedDataSets/purejs).

### Prerequisites

The following content assumes that you have the Standalone Report Designer running. Visit the [tutorial](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App) for detailed information. A stable internet connection is also required to access the [Demo Data Hub](https://demodata.mescius.io).

### Creating a New Report

In the standalone report designer, click the [File menu](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App#file-menu) and select the [Continuous Page Layout](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/Report-Layouts#continuous-page-layout) template for a newly created report. Click anywhere on the gray area around the report layout to load the report properties in the [properties panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel). In the `Margins` section, set the `Style` property to `Narrow` to change the [report page](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/layout-properties#page-settings) margins size.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch creating a new report in action
DOC-SUMMARY-TAG-CLOSE
![CreatingNewReport](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/CreatingNewReport.0fdcfd.gif)
DOC-DETAILS-TAG-CLOSE

### Data Binding

[Data Binding](/activereportsjs/docs/v6.1/ReportAuthorGuide/Databinding) establishes a connection between a report and the data it displays. For this demo, we use the [MESCIUS Demo OData API](https://demodata.mescius.io/swagger/index.html?urls.primaryName=OData%20AdventureWorks) that contains the data for a fictitious company called `AdventureWorks` that manufactures and sells bicycles worldwide.

### Adding Data Source

You can think of the [AdventureWorks OData API](https://demodata.mescius.io/swagger/index.html?urls.primaryName=OData%20AdventureWorks) as the "database" that you can connect to using its root URL `https://demodata.mescius.io/adventureworks/odata/v1`, and that has multiple "tables" which presented with endpoints such as [/Customers](https://demodata.mescius.io/adventureworks/odata/v1/Customers), [/Stores](https://demodata.mescius.io/adventureworks/odata/v1/Stores), and [/Products](https://demodata.mescius.io/adventureworks/odata/v1/Products). Using the following steps, you can create a Report DataSource that establishes the connection to such a "database."

* Open the [Data panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#data-panel) of the property inspector and click the `Add` button.
* In the Data Source editor dialog, type `AdventureWorks` in the `NAME` field and `https://demodata.mescius.io/adventureworks/odata/v1` in the `ENDPOINT` field.
* Click the `Save Changes` button.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch adding the data source in action
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithMasterDetailReportsUsingNestedDataRegions/AddingDataSource.gif)
DOC-DETAILS-TAG-CLOSE

### Adding Data Set

Data Sets represent one or more endpoints of the Data Source. For the `Product Inventory` Report, we need to access the data from the [/Products](https://demodata.mescius.io/adventureworks/odata/v1/Products) and [/ProductListPriceHistories](https://demodata.mescius.io/adventureworks/odata/v1/ProductListPriceHistories) endpoints of the `AdventureWorks` Data Source that we added in the previous section. These end-points are related by the `ProductId` field, and we can use this relationship to select the hierarchical data with the single query.

Use the following steps to add the `Products` data set:

* Click the `+` icon near `AdventureWorks` in the Data panel.
* In the Data Set Editor dialog, type `Products` in the NAME field, `/Products` in the Uri/Path field, and `$.value.*` in the `Json Path` field.
* By default, each `Product` record includes 25 fields, but we don't need them all. Therefore we limit the retrieved fields by applying the OData [$select query option](https://www.odata.org/getting-started/basic-tutorial/#select) via a query parameter.
    * Click the `+` icon on the right side of the `Parameters` section.
    * Type `$select` in the `Parameter` field of the newly added `Parameter` item.
    * Type `ProductNumber,Name,Color,Size` in the `Value` field of the same `Parameter` item.
* By applying the [$filter query option](https://www.odata.org/getting-started/basic-tutorial/#filter), we can further reduce the volume of data retrieved.
    * Click the `+` icon on the right side of the `Parameters` section.
    * Type `$filter` in the `Parameter` field of the newly added `Parameter` item.
    * Type `ProductId+gt+714+and+ProductSubCategoryId+eq+21` in the `Value` field of the same `Parameter` item.
* By applying the [$expand query option](https://www.odata.org/getting-started/basic-tutorial/#expand), we request the hierarchical data where each product data contains its price history.
    * Click the `+` icon on the right side of the `Parameters` section.
    * Type `$expand` in the `Parameter` field of the newly added `Parameter` item.
    * Type `ProductListPriceHistories` in the `Value` field of the same `Parameter` item.
* Click the `Validate` button.
* Ensure that the `DataBase Fields` section displays `[5 items]` text.
* Ensure that the `Nested DataSets` section displays the `ProductListPriceHistories` text.
* Click the `ProductListPriceHistories` text to switch to the properties of the nested dataset.
* Expand the `DataBase Fields` section and set the `DataField` property of the `StartDate` and the `EndDate` fields to `StartDate[Date]` and `EndDate[Date]`, respectively.
* Click the `Save Changes` button.

The created dataset returns the list of products with the price history for each product. You can see the data set tree reflects this structure.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch adding the data set in action(partially)
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithMasterDetailReportsUsingNestedDataRegions/AddingDataSet.gif)
DOC-DETAILS-TAG-CLOSE

### Adding Table Data Region

To display the product information(master data) we will use the [Table Data Region](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table). There are several ways to [add a new table](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#adding-a-table) into the report. We will use the quick way for this tutorial:

* Expand the `Products` data set in the Data panel using the chevron-down icon.
* Click the `Select fields` icon near the `Products` data set name.
* Select `ProductNumber`, `Name`, `Color`, and `Size` fields.
* Drag and Drop selected fields into a top left corner of a report layout.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch adding the table in action
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithMasterDetailReportsUsingNestedDataRegions/AddingTable.gif)
DOC-DETAILS-TAG-CLOSE
The newly created table has four [columns](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-columns), one per each field of the dataset, the [header row](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-header) that displays the field names, and the [details row](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#details) that shows the values of the fields.

### Formatting Table Columns

All the columns of the newly created table have the same width, and it needs to be adjusted according to the data displayed in each column. To do this, click anywhere inside the table so that it shows the [columns and rows handlers](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-designer) and follow the next steps:

* Click the first column handler and set its `Width` to `2.5in` in the Properties panel
* Click the second column handler and set its `Width` to `2in` in the Properties panel
* Click the third column handler and set its `Width` to `1in` in the Properties panel
* Click the fourth column handler and set its `Width` to `2in` in the Properties panel

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch setting column widths in action
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithMasterDetailReportsUsingNestedDataRegions/SettingColumnWidths.gif)
DOC-DETAILS-TAG-CLOSE

### Adding Table Rows

The table currently has only two rows. The following steps add one more row for the [table header](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-header) to show the report title and two more rows for the [table details](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#details) to display the product price history.

* Right-click the first row handler and select the `Row > Insert Row Above` item the drop-down menu
* In the same manner, insert two rows below the last row.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch adding rows below the details in action
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithMasterDetailReportsUsingNestedDataRegions/AddingTableRows.gif)
DOC-DETAILS-TAG-CLOSE

### Merging Table Cells

The first row of the table will display the report title. Therefore, it is convenient to merge the cells of the first row:

* Click the first cell of the first row, press the `Ctrl` button on Windows or `Cmd` on Mac OS, and click the 2nd, 3rd, and 4th cells on the same row
* Right click on the selection and select the `Cells > Merge Cells` item in the drop-down menu. The row now has a single cell that occupies four columns

Repeat the same procedure for the last two rows of the table - they will host the title and the nested [List](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/List) for the detail data.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch merging cells of the first row in action
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithMasterDetailReportsUsingNestedDataRegions/AddingTableRows.gif)
DOC-DETAILS-TAG-CLOSE

#### Formatting the Report Title

The first row of the table should display the report title. Follow the next steps to format the row accordingly.

* Click the handler of the first row and set its `Height` property to `0.5in` in the Property Inspector
* Switch to the `TextBox` tab in the Property inspector and set the following properties for the text of the report title

| Property | Value |
| -------- | ----- |
| Value | Product Inventory |
| Color | #3da7a8 |
| Font Size | 24pt |
| Font Weight | Bold |
| Vertical Align | Middle |

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch formatting the title in action
DOC-SUMMARY-TAG-CLOSE
![FormattingTitle](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/FormattingTitle.ea4655.gif)
DOC-DETAILS-TAG-CLOSE

### Formatting Column Headers

The second row of the table contains the column headers. Using the same steps as for the report title, set the following properties for the row height and the text displayed in the row's cells.

| Property | Value |
| -------- | ----- |
| Row Height | 0.5in |
| Border Width | 2pt |
| Border Style | None None None Solid |
| Bolder Color | #40cddf |
| Font Weight | Bold |
| Vertical Align | Middle |

### Formatting Master Data

The third row of the table repeats for each data record of the `Products` dataset. Set the following properties for the row height and the text displayed in the cells of the row.

| Property | Value |
| -------- | ----- |
| Row Height | 0.4in |
| Border Width | 1pt |
| Border Style | None Dotted None None |
| Border Color | #ccc |
| Vertical Align | Middle |

### Formatting Detail Data Title

The 4th row of the table should display the title of the nested [List](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/List) for the detail data. Set the following properties for the row height and the text displayed in the cells of the row.

| Property | Value |
| -------- | ----- |
| Row Height | 0.4in |
| Value | Price History |
| Font Size | 12pt |
| Font Weight | Bold |
| Vertical Align | Middle |

### Adding nested data region

The last row of the table should display the price history for the current product. To do that, add the nested [List](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/List) to the row using the following steps:

* Click the handler of the last row and set its `Height` property to `0.35in` in the Property Inspector
* Expand the toolbox using the `Hamburger` menu located on the toolbar's left side
* Drag and drop the [List](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/List) item from the toolbox into the last row of the table
* In the Property Inspector of the newly added List set the `DataSet Name` property to `ProductListPriceHistories`

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch adding the nested list in action
DOC-SUMMARY-TAG-CLOSE
![AddingNestedList](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/AddingNestedList.5b730a.gif)
DOC-DETAILS-TAG-CLOSE

### Displaying the detail data

Drag and drop two [TextBox](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) items from the toolbox into the `List` and set the following properties for newly added textboxes:

| Property | 1st textbox | 2nd textbox |
| -------- | ----------- | ----------- |
| Value | {Format(StartDate, "d")} - {IIF(EndDate, Format(EndDate, "d"), Format(Now(), "d"))} | {Format(ListPrice, "c2")} |
| Color | #0096aa | #0096aa |
| Text Align | *Leave as Default* | Right |
| Left | 0 | 6.25in |
| Top | 0 | 0 |
| Width | 3.25in | 1.25in |
| Height | 0.35in | 0.35in |

### Preview the report output

You can now [preview](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App#preview-button) the report output and notice that the following information is displayed for each product:

* Product Name, Number, Size, and Color(Master data)
* Product Price History(Detail data)

The final version of the report is available at the [demo website](/activereportsjs/demos/Reports/GetStartedWithNestedDataSets/purejs).