[{"id":"a20f26ac-cd31-4e4d-9454-1e035b0f1587","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"3604b8ce-1da0-413f-8274-7df0f7173573","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"7fce7040-1bb1-4a61-9fb7-2e19d569de50","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"0eb72dd3-8f8f-4039-93a8-500bbde2301e","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"ac046cee-82b9-4edf-a642-ae6d7cb21ebf","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"75b66fd4-b740-443d-bc6e-1782048b60a6","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"dde44832-bb5c-45f3-8ebf-3badbc613cd9","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"43de3664-261b-4cf9-9945-fb519251f4c7","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"2f064d57-b088-4bc5-a628-4e0d7e1a0c65","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"f290406b-ced1-4c52-abad-979160a79f6b","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"1864834b-08ce-43f1-891b-c3cca6e04e95","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"f96cfec1-420c-4ca7-ab0a-cab482731073","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"3f2ea860-c764-43d8-ae3f-6e3b0314ce67","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"81eb70e8-f770-4384-9167-bc7c755ad052","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"d0dff477-9f56-483a-a9fc-cab648905b41","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"793a62d7-460d-4699-9304-edb2941268ac","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"2d6ebfad-f7d1-4cc5-8ba1-fdace3472056","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"c8c7b5d5-f5bd-4b68-a12f-3aae9804a844","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"577a09da-dea1-42db-812f-4eeaa9274ece","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"8ddd80d5-886f-41b8-8e3f-f73aa8146c8d","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"e0909540-8bde-4587-bb4d-02445746db2a","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"464b8e03-462d-4aed-8818-05d32ec3bf00","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"f235557b-9781-471f-bf03-38bae6e3e953","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"fd5d021d-0210-4d74-ba42-1a39ef14a385","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"548568fe-dbd1-4da5-a489-d9b3edf75329","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"a0c823ed-e22b-493b-aded-4d201c0fa480","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"d19bc9cd-ff53-4b0d-ab7e-a68c1497c4c6","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"94759fce-692f-4779-b5f3-fce5c58f242c","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"27658163-a479-432f-a192-dbed286beb3e","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]}]
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.
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.
To create a new report in the Standalone Report Designer, follow these steps:
Click on the File
menu.
Select the New
option.
From the templates available, choose the Pageless Layout
template.
This will create a new report using the Pageless Layout template.
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.
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:
Open the Data
panel in the property inspector and click the Add
button.
In the Data Source editor
dialog, enter Contoso
in the NAME
field and https://demodata.mescius.io/contoso/odata/v1
in the ENDPOINT
field.
Click the Save Changes
button to finalize the data source creation.
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:
Click the +
icon next to the Contoso
Data Source in the Data panel.
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.
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.
Click the +
icon on the right side of the Parameters section.
In the Parameter field of the newly added Parameter item, enter $select.
In the Value field of the same Parameter item, enter PromotionKey, PromotionType.
Click the Validate
button.
Ensure that the DataBase Fields section displays [2 items]
text.
Click the Save Changes
button.
Next, we'll add the Sales
data set. This will provide the actual data that our report will visualize.
Click the +
icon next to the Contoso
Data Source in the Data
panel.
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.
Click the +
icon on the right side of the Parameters
section.
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.
Click the +
icon on the right side of the Calculated Fields
section.
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:
SalesMonth with the Value
{Month(DateKey)}
SalesChannel with the Value
{Switch(ChannelKey = 1, "Store", ChannelKey = 2, "Online", ChannelKey = 3, "Catalog", ChannelKey = 4, "Reseller")}
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")}
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)
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:
Navigate to the Data
panel and click the + Add
button in the Parameters
section.
In the Name
field, type Year
.
From the Data Type
dropdown, select Integer
.
Set the Hidden
flag to True
.
In the Default Value
section:
Select the Non-Queried
option
Click the Add
button
Set the default value to 2007
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.
Access the toolbox: Use the Hamburger
menu on the left side of the toolbar to expand the toolbox.
Add a container: Drag and drop the Container report item from the toolbox to the section's top-left corner.
Configure the container: Switch to the Properties panel in the Property inspector and set the following properties for the container:
Property | Value |
---|---|
Name |
|
Border Width |
|
Border Style |
|
Border Color |
|
Left |
|
Top |
|
Width |
|
Height |
|
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 |
|
Value |
|
Font Weight |
|
Text Align |
|
Vertical Align |
|
Left |
|
Top |
|
Width |
|
Height |
|
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 |
|
Action Type |
|
Apply Parameters Configuration | Parameter: |
Data Set Name |
|
Group Expression |
|
Text Align |
|
Vertical Align |
|
Left |
|
Top |
|
Width |
|
Height |
|
Rows or Columns Count |
|
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 |
|
Value |
|
Default Border Width |
|
Default Border Style |
|
Default Border Color |
|
Text Align |
|
Vertical Align |
|
Left |
|
Top |
|
Width |
|
Height |
|
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.
Next, we will add a table that displays the monthly sales for the currently selected year.
Switch to Design Time: Navigate back to the report design by clicking the Back
button located in the top-left corner of the UI.
Access the Toolbox: Expand the toolbox by clicking on the Hamburger
menu, located on the left side of the toolbar.
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 |
|
Border Width |
|
Border Style |
|
Border Color |
|
Left |
|
Top |
|
Data Set Name |
|
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.
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.
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.
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 |
|
Value |
| ||
2nd | 1st | Name |
|
Value |
| ||
2nd | 2nd | Name |
|
Value |
| ||
Format |
| ||
3rd | 1st | Name |
|
Value |
| ||
Font Weight |
| ||
Text Align |
| ||
3rd | 2nd | Name |
|
Value |
| ||
Format |
| ||
Font Weight |
|
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!
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:
Switch to Design Time: Return to the report design view by clicking the Back
button in the top-left corner of the UI.
Access the Toolbox: Click on the Hamburger
menu on the left side of the toolbar to expand the toolbox.
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.
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
.
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.
Set general Chart properties: In the Report Explorer
, select the Chart1
item. Then set the following properties in the properties panel:
Property | Value |
---|---|
Name |
|
Border Width |
|
Border Style |
|
Border Color |
|
Left |
|
Top |
|
Width |
|
Height |
|
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.
Configure the Chart Header: In the Report Explorer
, select the Header
item under ChartSalesPerChannel
and set the following properties:
Property | Value |
---|---|
Caption |
|
Text Align |
|
Vertical Align |
|
Padding |
|
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
.
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 |
|
Line->Visible |
|
Labels->Visible |
|
Major Grid->Visible |
|
Configure the plot: Select the Plot - Plot1
item under ChartSalesPerChannel
in the Report Explorer
, and apply the following settings:
Property | Value |
---|---|
Category Sort Expression |
|
Category Sort Direction |
|
Category Sorting Aggregate |
|
Label Text->Template |
|
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!
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.
Switch to Design Time: Navigate back to the report design by clicking the Back
button located in the top-left corner of the UI.
Access the Toolbox: Expand the toolbox by clicking on the Hamburger
menu, located on the left side of the toolbar.
Add a container: Drag and drop the Container report item from the toolbox to the section's area below the summary table.
Configure the container: Using the Property inspector, set the following properties for the container:
Property | Value |
---|---|
Name |
|
Border Width |
|
Border Style |
|
Border Color |
|
Left |
|
Top |
|
Width |
|
Height |
|
Can Grow |
|
Overflow |
|
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 |
|
Left |
|
Top |
|
Data Set Name |
|
Frozen Rows |
|
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.
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 |
|
2nd |
|
3rd |
|
4th – 6th |
|
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 |
|
Value |
| ||
2nd | 1st | Name |
|
Value |
| ||
Text Align |
| ||
1st | 2nd | Name |
|
Value |
| ||
2nd | 2nd | Name |
|
Value |
| ||
1st | 3rd | Name |
|
Value |
| ||
2nd | 3rd | Name |
|
Value |
| ||
1st | 4th | Name |
|
Value |
| ||
2nd | 4th | Name |
|
Value |
| ||
1st | 5th | Name |
|
Value |
| ||
Text Align |
| ||
2nd | 5th | Name |
|
Value |
| ||
1st | 6th | Name |
|
Value |
| ||
Text Align |
| ||
2nd | 6th | Name |
|
Value |
| ||
Format |
|
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 |
|
Border Width |
|
Bottom Border Style |
|
Border Color |
|
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.