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.

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. In addition, please ensure you have a stable internet connection, as it is required to access the Demo Data Hub.

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. 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.

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.

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 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 to determine the sales channel name by the channel's ID(ChannelKey) and the product category by the product's ID (ProductKey)

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

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 from the toolbox to the section's top-left corner.

3. Configure the container: Switch to the 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 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 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

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 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.

   
   

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 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

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 from the toolbox into the section area adjacent to the table from the previous step. The Chart Wizard 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.

   
   

   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.

   
   

   On the Preview page, select the Grayscale in the Select chart palette drop-down and click Finish.

   
   

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.

   
   

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.

   
   

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

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 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 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 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

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.