# Get Started With Pageless Reports

This tutorial guides you through the creation of a pageless report

## Content

# Introduction

A pageless report is a method for displaying data in an unpaginated manner, with content divided among sections instead of pages. This layout type is suitable for creating highly dynamic, interactive data visualizations that do not need to be printed or exported to PDF.
In this tutorial, we will build a `Pageless Sales Report` from the ground up, providing hands-on experience with the typical report design process.
By the end, you will be able to do the following:

* Create a new pageless report
* Bind the report to the OData API with multiple endpoints
* Use the OData `$select` query option to reduce the volume of retrieved data
* Create data set calculated fields
* Create the report parameter for interaction with a report reader
* Build a runtime filter panel using the `List` data region and the `Apply Parameters` interactive action
* Construct `Table` and `Chart` data regions that filter data at runtime
* Create scrollable containers

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

# Prerequisites

This tutorial assumes that you have the `Standalone Report Designer` up and running. For detailed information on how to start with the Standalone Report Designer, please visit the [linked tutorial](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App). In addition, please ensure you have a stable internet connection, as it is required to access the [Demo Data Hub](https://demodata.mescius.io/).

# Creating a New Report

To create a new report in the Standalone Report Designer, follow these steps:

1. Click on the `File` menu.
2. Select the `New` option.
3. From the templates available, choose the `Pageless Layout` template.
4. This will create a new report using the Pageless Layout template.

# Data Binding

`Data Binding` is the process that establishes a connection between the report and the data it is intended to display. In this tutorial, we will use the [MESCIUS Demo OData API](https://demodata.mescius.io/swagger/index.html?urls.primaryName=OData%2520Contoso). This API contains the sales data for a fictitious company called `Contoso`—a manufacturing, sales, and support organization with more than 100,000 products.

# Adding Data Source

You can think of the `Contoso OData API` as a "database" that you can connect to using its root URL, `https://demodata.mescius.io/contoso/odata/v1`. This API provides multiple "tables," represented by endpoints such as `/DimCustomers`, `/DimStores`, and `/DimProducts`. To establish a connection to this "database," you can create a Report DataSource using the following steps:

1. Open the `Data` panel in the property inspector and click the `Add` button.
2. In the `Data Source editor` dialog, enter `Contoso` in the `NAME` field and `https://demodata.mescius.io/contoso/odata/v1` in the `ENDPOINT` field.
3. Click the `Save Changes` button to finalize the data source creation.

![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.21410e.png)

# Adding a Supplemental Data Set

`Data Sets` represent one or more endpoints of the `Data Source`. For the `Sales Report`, we need to access data from the `/DimPromotions`, and `/FactSales` endpoints of the `Contoso Data Source` that we added in the previous section. The first data set is supplemental, and we will use it to obtain the discount information about a sales entity. Follow these steps to add the `Promotions` data set:

1. Click the `+` icon next to the `Contoso` Data Source in the Data panel.
2. In the `Data Set Editor` dialog, enter *Promotions* in the `NAME` field, */DimPromotions* in the `Uri/Path` field, and *$.value.\** in the `Json Path` field.
3. By default, each Promotion record includes 14 fields, but we don't need them all. To limit the retrieved fields, we use the OData `$select` query option via a query parameter.
4. Click the `+` icon on the right side of the Parameters section.
5. In the Parameter field of the newly added Parameter item, enter *$select*.
6. In the Value field of the same Parameter item, enter *PromotionKey, PromotionType*.
7. Click the `Validate` button.
8. Ensure that the DataBase Fields section displays `[2 items]` text.
9. Click the `Save Changes` button.

![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.a7a921.png)

# Adding the Sales Data Set

Next, we'll add the `Sales` data set. This will provide the actual data that our report will visualize.

1. Click the `+` icon next to the `Contoso` Data Source in the `Data` panel.
2. In the `Data Set Editor` dialog:
    * Enter `Sales` in the `NAME` field
    * Enter `/FactSales` in the `Uri/Path` field
    * Enter `$.value.*` in the `Json Path` field

Each `Sale` record includes 19 fields by default, but we don't need all of them. To limit the fields retrieved, we'll use the OData `$select` query option with a query parameter.

3. Click the `+` icon on the right side of the `Parameters` section.
4. For the new parameter item:
    * Enter `$select` in the `Parameter` field
    * Enter `DateKey,StoreKey,SalesAmount,ChannelKey,ProductKey,SalesQuantity,PromotionKey` in the `Value` field

Next, click the `Validate` button, and ensure that the `DataBase Fields` section displays `[7 items]`.
To simplify the report design process, we'll add several calculated fields. These are values derived from the fields returned by the data set.

5. Click the `+` icon on the right side of the `Calculated Fields` section.
6. For the new calculated field:
    * Enter *SalesYear* in the `Field Name` field
    * Enter *{Year(DateKey)}* in the `Value` field

This expression uses the [Year function](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/Functions/date-time#year) to return the sales date's year.
Repeat this process to add the following calculated fields:

7. *SalesMonth* with the `Value` *{Month(DateKey)}*
8. *SalesChannel* with the `Value` *{Switch(ChannelKey = 1, "Store", ChannelKey = 2, "Online", ChannelKey = 3, "Catalog", ChannelKey = 4, "Reseller")}*
9. *ProductCategory* with the `Value` *{Switch(ProductKey < 116, "Audio", ProductKey >= 116 And ProductKey < 338, "TV and Video", ProductKey >= 338 And ProductKey < 944, "Computers", ProductKey >= 944 And ProductKey < 1316, "Cameras", ProductKey >= 1316, "Cell Phones")}*
10. Finally, click the `Save Changes` button.

The last two expressions use the [Switch function](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/Functions/program-flow#switch) to determine the sales channel name by the channel's ID(ChannelKey) and the product category by the product's ID (ProductKey)
![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.6dd572.png)

# Adding a Report Parameter

Our Sales Report will provide the user the ability to filter sales data by sales year. We'll accomplish this by using report parameters. To create the `Year` report parameter, follow the steps outlined below:

1. Navigate to the `Data` panel and click the `+ Add` button in the `Parameters` section.
2. In the `Name` field, type `Year`.
3. From the `Data Type` dropdown, select `Integer`.
4. Set the `Hidden` flag to `True`.
5. In the `Default Value` section:
    * Select the `Non-Queried` option
    * Click the `Add` button
    * Set the default value to `2007`

![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.ac916d.png)

# Adding the Filter Panel

To enable report readers to set the `Year` parameter values, we'll use an interactive panel displaying all distinct years from the `Sales` dataset. First click inside the section's area and set the `Height` property to `10in`, then follow the next steps.

1. **Access the toolbox:** Use the `Hamburger` menu on the left side of the toolbar to expand the toolbox.
2. **Add a container:** Drag and drop the [Container report item](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Supplemental-Report-Items/Container) from the toolbox to the section's top-left corner.
3. **Configure the container:** Switch to the [Properties panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel) in the Property inspector and set the following properties for the container:

    | Property | Value |
    | -------- | ----- |
    | Name | `FilterPanel` |
    | Border Width | `0.25pt` |
    | Border Style | `Solid` |
    | Border Color | `Gainsboro` |
    | Left | `0.5in` |
    | Top | `0.5in` |
    | Width | `9in` |
    | Height | `1in` |
4. **Add a TextBox:** Drag and drop the [TextBox report item](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) from the toolbox to the top-left corner of the newly added container. Configure the TextBox with the following properties:

    | Property | Value |
    | -------- | ----- |
    | Name | `FilterPanelHeader` |
    | Value | `Click year to filter data` |
    | Font Weight | `Bold` |
    | Text Align | `Center` |
    | Vertical Align | `Middle` |
    | Left | `0.25in` |
    | Top | `0.25in` |
    | Width | `2.25in` |
    | Height | `0.5in` |
5. **Add a List:** Drag and drop the [List report item](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/List) from the toolbox to the container's area. Configure the List with the following properties:

    | Property | Value |
    | -------- | ----- |
    | Name | `YearList` |
    | Action Type | `Apply Parameters` |
    | Apply Parameters Configuration | Parameter: `Year`, Action: `Set`, Value: `{SalesYear}` |
    | Data Set Name | `Sales` |
    | Group Expression | `{SalesYear}` |
    | Text Align | `Center` |
    | Vertical Align | `Middle` |
    | Left | `2.75in` |
    | Top | `0in` |
    | Width | `6in` |
    | Height | `1in` |
    | Rows or Columns Count | `3` |
6. **Add a TextBox to the List:** Drag and drop the `TextBox` report item from the toolbox to the List's top-left corner. Configure this TextBox with the following properties:

    | Property | Value |
    | -------- | ----- |
    | Name | `YearText` |
    | Value | `{SalesYear}` |
    | Default Border Width | `0.5pt` |
    | Default Border Style | `{IIF(SalesYear = @Year, "Dashed", "None")}` |
    | Default Border Color | `Black` |
    | Text Align | `Center` |
    | Vertical Align | `Middle` |
    | Left | `0.5in` |
    | Top | `0.5in` |
    | Width | `9in` |
    | Height | `1in` |

Upon successful completion of these steps, the report design is expected to appear as follows
![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.78ba61.png)
Upon previewing the report, you'll observe that the years 2007, 2008, and 2009 are displayed in a horizontal format. Notably, the year that aligns with the current parameter's value is emphasized with a border. You can click on any year to adjust the parameter value accordingly.

# Adding the Summary Table

Next, we will add a table that displays the monthly sales for the currently selected year.

1. **Switch to Design Time**: Navigate back to the report design by clicking the `Back` button located in the top-left corner of the UI.
2. **Access the Toolbox**: Expand the toolbox by clicking on the `Hamburger` menu, located on the left side of the toolbar.
3. **Add a Table**: Drag and drop the [Table report item](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table) from the toolbox to the section's area below the filter panel added in the previous step. Set the following properties for the table:

    | Property | Value |
    | -------- | ----- |
    | Name | `SummaryTable` |
    | Border Width | `0.25pt` |
    | Border Style | `Solid` |
    | Border Color | `Gainsboro` |
    | Left | `0.5in` |
    | Top | `1.75in` |
    | Data Set Name | `Sales` |
4. **Configure Table Filter**: In the properties of the table, find the `Filter` property and click the `Add` button. In the Filters editor, click the `Add...` button, select the `SalesYear` field, and on the right side of the `=` operator, select the `Year` parameter from the drop-down list.
    ![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.9ffd11.png)
5. **Configure Table Grouping**: In the group editor of the table, click the `SummaryTable_DetailsGroup1` item. Add `{SalesMonth}` to both the `GroupingExpressions` and `SortExpressions` lists. This configuration will generate one detail row per month and sort them in ascending order.
6. **Configure Table Columns**: Right-click the [column handler](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-designer) of the 3rd column of the table and select the `Delete` command from the drop-down menu. Set the width of the 1st column to `2.5in` and the width of the 2nd column to `1.5in` by clicking the corresponding column handlers and modifying properties in the property inspector.
7. **Configure Table Cells**: Each cell of the table contains a TextBox report item that can be selected by clicking the table cells. Use the table below to set properties for these textboxes.

    | Row | Column | Property | Value |
    | --- | ------ | -------- | ----- |
    | 1st | 1st | Name | `SummaryTableHeader` |
    |  |  | Value | `Monthly sales in {@Year}` |
    | 2nd | 1st | Name | `SalesMonth` |
    |  |  | Value | `{MonthName(SalesMonth)}` |
    | 2nd | 2nd | Name | `SalesAmount` |
    |  |  | Value | `{SalesAmount}` |
    |  |  | Format | `c2` |
    | 3rd | 1st | Name | `TextTotal` |
    |  |  | Value | `Total` |
    |  |  | Font Weight | `Bold` |
    |  |  | Text Align | `Right` |
    | 3rd | 2nd | Name | `SalesAmountTotal` |
    |  |  | Value | `{Sum(SalesAmount)}` |
    |  |  | Format | `c2` |
    |  |  | Font Weight | `Bold` |

Upon successful completion of these steps, the report design is expected to appear as follows
![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.f91bd2.png)
Now, you can preview your report and switch between years in the filter panel. The table will re-render to display data for the currently selected year!

# Adding the Chart

In this section, we're going to add a chart that represents the sales amount per sales channel for the currently selected year. Here are the steps:

1. **Switch to Design Time**: Return to the report design view by clicking the `Back` button in the top-left corner of the UI.
2. **Access the Toolbox**: Click on the `Hamburger` menu on the left side of the toolbar to expand the toolbox.
3. **Add a Chart**: Drag and drop the [Chart report item](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart) from the toolbox into the section area adjacent to the table from the previous step. The [Chart Wizard](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#adding-a-chart) will then appear.
4. **Configure Chart data**: In the `Data and Type` section of the Chart Wizard, select `Sales` from the `Select Data Set` drop-down menu and choose the `Bar` plot type.
    ![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.bea5df.png)
    Then, click `Next`. In the `Bar Settings` page, add a `Data Value` setting the `Field` to `{SalesAmount}` and the `Aggregate` to `Sum`. For the `Data Categories`, set the field to `{SalesChannel}` and click `Next`.
    ![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.cdc661.png)
    On the `Preview` page, select the `Grayscale` in the `Select chart palette` drop-down and click `Finish`.
    ![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.ba4f17.png)
5. **Open the Report Explorer**: Click on the `Explorer` button underneath the `Hamburger` menu and pin the report explorer to keep it visible, facilitating navigation within the chart areas.
    ![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.33821c.png)
6. **Set general Chart properties**: In the `Report Explorer`, select the `Chart1` item. Then set the following properties in the properties panel:

    | Property | Value |
    | -------- | ----- |
    | Name | `ChartSalesPerChannel` |
    | Border Width | `0.25pt` |
    | Border Style | `Solid` |
    | Border Color | `Gainsboro` |
    | Left | `5in` |
    | Top | `1.75in` |
    | Width | `4.5in` |
    | Height | `3.5in` |
7. **Configure Chart Filter**: Find the `Filter` property within the chart properties and click the `Add` button. In the Filters editor, click `Add...`, select the `SalesYear` field, and select the `Year` parameter from the drop-down list on the right side of the `=` operator.
    ![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.9ffd11.png)
8. **Configure the Chart Header**: In the `Report Explorer`, select the `Header` item under `ChartSalesPerChannel` and set the following properties:

    | Property | Value |
    | -------- | ----- |
    | Caption | `Sales per Channel in {@Year}` |
    | Text Align | `Left` |
    | Vertical Align | `Top` |
    | Padding | `2pt` |
9. **Configure the X Axis**: Select the `X-Axis - [Plot1]` item under the `Plot Area` in the `Report Explorer`, and set the `Visible` flag in the `Line` section to `False`.
10. **Configure the Y Axis**: In the `Report Explorer`, click the `Y-Axis - [Plot1]` item under the `Plot Area`, and set these properties:

    | Property | Value |
    | -------- | ----- |
    | Title | ` ` (empty string) |
    | Line->Visible | `False` |
    | Labels->Visible | `False` |
    | Major Grid->Visible | `False` |
11. **Configure the plot**: Select the `Plot - Plot1` item under `ChartSalesPerChannel` in the `Report Explorer`, and apply the following settings:

    | Property | Value |
    | -------- | ----- |
    | Category Sort Expression | `{Sales Amount}` |
    | Category Sort Direction | `Ascending` |
    | Category Sorting Aggregate | `Sum` |
    | Label Text->Template | `{valueField.value:c2}` (this can be set in the expression editor) |

Upon successful completion of these steps, the report design is expected to appear as follows
![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.6316b2.png)
After these steps, you can preview your report and switch between years using the filter panel. Both the chart and the table will dynamically update to display data for the currently selected year!

# Adding the Details Table

Next, we will add the table that will display the details of each sale within the currently selected year. As there could be many individual sale records, the table will be scrollable and will have the frozen column headers.

1. **Switch to Design Time**: Navigate back to the report design by clicking the `Back` button located in the top-left corner of the UI.
2. **Access the Toolbox**: Expand the toolbox by clicking on the `Hamburger` menu, located on the left side of the toolbar.
3. **Add a container:** Drag and drop the [Container report item](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Supplemental-Report-Items/Container) from the toolbox to the section's area below the summary table.
4. **Configure the container:** Using the Property inspector, set the following properties for the container:

    | Property | Value |
    | -------- | ----- |
    | Name | `DetailsTableContainer` |
    | Border Width | `0.25pt` |
    | Border Style | `Solid` |
    | Border Color | `Gainsboro` |
    | Left | `0.5in` |
    | Top | `5.5in` |
    | Width | `9in` |
    | Height | `4in` |
    | Can Grow | `False` |
    | Overflow | `Auto` |
5. **Add a Table**: Drag and drop the [Table report item](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table) from the toolbox to the top-left corner of the newly added container. Set the following properties for the table:

    | Property | Value |
    | -------- | ----- |
    | Name | `SummaryTable` |
    | Left | `0in` |
    | Top | `0in` |
    | Data Set Name | `Sales` |
    | Frozen Rows | `1` |
6. **Configure Table Filter**: In the properties of the table, find the `Filter` property and click the `Add` button. In the Filters editor, click the `Add...` button, select the `SalesYear` field, and on the right side of the `=` operator, select the `Year` parameter from the drop-down list. It's the same filter as was added for the summary table and the chart.
7. **Configure Table Columns**: Right-click the [column handler](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-designer) of the 3rd column of the table and select the `Column->Insert Column->More...` command from the drop-down menu. In the `Insert Column` dialog, set the `Count` to `3` and the position to `Right` and click the `Insert` button. By clicking on the column handlers and modifying the `Width` property in the Property inspector, set the following column widths:

    | Column | Width |
    | ------ | ----- |
    | 1st | `1in` |
    | 2nd | `1.5in` |
    | 3rd | `1.75in` |
    | 4th – 6th | `1.5in` |
8. **Configure Table Cells**: Each cell of the table contains a TextBox report item that can be selected by clicking the table cells. Use the table below to set properties for these textboxes.

    | Row | Column | Property | Value |
    | --- | ------ | -------- | ----- |
    | 1st | 1st | Name | `DateHeader` |
    |  |  | Value | `Date` |
    | 2nd | 1st | Name | `DateValue` |
    |  |  | Value | `{DateKey}` |
    |  |  | Text Align | `Left` |
    | 1st | 2nd | Name | `SalesChannelHeader` |
    |  |  | Value | `Sales Channel` |
    | 2nd | 2nd | Name | `SalesChannelValue` |
    |  |  | Value | `{SalesChannel}` |
    | 1st | 3rd | Name | `ProductCategoryHeader` |
    |  |  | Value | `Product Category` |
    | 2nd | 3rd | Name | `ProductCategoryValue` |
    |  |  | Value | `{ProductCategory}` |
    | 1st | 4th | Name | `DiscountTypeHeader` |
    |  |  | Value | `Discount Type` |
    | 2nd | 4th | Name | `DiscountTypeValue` |
    |  |  | Value | `{Lookup(PromotionKey, PromotionKey, PromotionType, "Promotions")}` |
    | 1st | 5th | Name | `SalesQuantityHeader` |
    |  |  | Value | `Sales Quantity` |
    |  |  | Text Align | `Right` |
    | 2nd | 5th | Name | `SalesQuantityValue` |
    |  |  | Value | `{SalesQuantity}` |
    | 1st | 6th | Name | `SalesAmountHeader` |
    |  |  | Value | `Sales Amount` |
    |  |  | Text Align | `Right` |
    | 2nd | 6th | Name | `SalesAmountValue` |
    |  |  | Value | `{SalesAmount}` |
    |  |  | Format | `c2` |
9. **Configure Table Rows**: Click the handler of the 1st row and switch to the `TextBox` tab in the Property inspector. This way, you can set properties for all textboxes contained in the selected row simultaneously:

    | Property | Value |
    | -------- | ----- |
    | Background Color | `White` |
    | Border Width | `0.5pt` |
    | Bottom Border Style | `Solid` |
    | Border Color | `Black` |

Upon successful completion of these steps, the report design is expected to appear as follows
![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.47af41.png)
You now can preview the report, toggle between different years, and scrutinize sales statistics presented in the summary table, chart, and details table. These elements dynamically update to reflect the data corresponding to your selected year.