[{"id":"bf522b5c-b992-4910-b9a3-7d4c6a711342","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"fd92c740-60f2-42bc-b108-133c0baaec15","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"1809c8ed-488b-4fb9-b402-aabe76f0c6d2","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"8aa13734-ff9b-43f5-b44f-de331adbb3d7","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"8faaa45c-575e-4bf0-9034-634fac906bb8","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"56faca6f-14d3-42b0-9706-7df8e339ef70","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"eb780c12-7575-42ef-916d-9d1d66cd0152","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"3918314b-5267-494d-b520-203125daf2a2","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"97d3eeb1-76c4-4c11-bc62-db5413d6819f","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"e93f9124-e327-4056-9264-f62378c3ebb5","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"90683712-67eb-49c8-96cb-96a228a99d11","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"cf1d42c1-fe4a-4f31-83f7-97c9c7ea9b76","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"e6222e08-3705-44f2-9027-b80b72dd3a85","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"5f8d0a4e-e3c5-4f38-91ee-c0d4aa8f116d","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"1ab019cd-705f-4371-a3f3-f2925cf92826","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"2ebee074-0c53-44bf-89c4-c0deb0d210f7","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"488a368a-fad1-4022-8e64-03442a912d2c","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"9aa35d28-77db-4dbd-ade0-17163a1782be","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"5a8c2832-0b00-47dc-aa9c-2579f4d9e04c","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"c19b5fcc-8f2a-4f44-9eeb-345cbb4815a6","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"92556861-b9b0-454e-a493-4750e9d90d2c","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"5ca1a599-fa29-4d8a-8cb4-80352932149f","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"7a947fc6-0187-4b9d-b9cc-800def67c597","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"b74ce673-ba64-42ea-b124-fc006b6b727e","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"a201d71e-7541-4e64-ac8b-3ed714e41a81","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"9efb31b1-f5f2-4214-a36d-c3415649a7a0","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]}]
        
(Showing Draft Content)

Get Started With Pageless Reports

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.

image

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

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.

  1. Click the + icon on the right side of the Parameters section.

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

  1. Click the + icon on the right side of the Calculated Fields section.

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

  1. SalesMonth with the Value {Month(DateKey)}

  2. SalesChannel with the Value {Switch(ChannelKey = 1, "Store", ChannelKey = 2, "Online", ChannelKey = 3, "Catalog", ChannelKey = 4, "Reseller")}

  3. 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")}

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

image

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

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

image

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.

    image

  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

image

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.

    image

    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

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

    image

  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

  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

  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

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

image

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.