v2.1.0
v2.2.0v2.1.0v2.0.0v1.2.0

Report Layouts

In ActiveReportsJS, a report typically consists of two types of content:

  • Static content, such as a company logo of a report title, does not change its size at runtime.
  • Dynamic content includes data regions, such as a Table, that visualize the bound data and can grow both vertically and horizontally at runtime.

When a reader previews the report or exports it to one of the supported formats, the ActiveReportsJS engine produces the paginated output by default. The Page Size, Margins, and Orientation are loaded into the Properties panel if you select the Report item in the Report Explorer or click anywhere on the gray area around the page layout.

Expand to watch creating a new report and setting page margins in action

Creating a new report

Visit the Report Properties page for more information about Page Size, Margins, and other properties of the Report object.

A report creation process starts with choosing between Continuous Page Layout and Fixed Page Layout. The layout type determines how the report output arranges the dynamic content into output pages.

Continuous Page Layout

The Continuous Page Layout lets a data region grow until there is no more space on the current page and then produces a new one. Suppose, we have a report containing the Table that visualizes the Product List. The first and the second rows print the report title, column headers, and page numbering on each page. The third row repeats for each data record.

Table in Continuous Layout

At runtime, the report output generates four pages to accommodate the growing table content.

Continuous Layout Output

Data regions might have "hard" page breaks, as in the Get Started With Tabular Report demo. In that case, continuous page layout lets a data region grow until the hard page break occurs and then produces the new page.

The same principle applies for a Tablix data region that can grow in horizontal direction - once there is no more space on the page or the hard page break occurs, the Continous Page Layout generates the new page.

The Galley mode allows you to preview a Continuous Page Layout without pagination applied. The page size and margins are ignored, but hard page breaks still occur. This preview mode makes a lot of sense for non-printable, dashboard-like views, such as the Drill-Down Report.

Fixed Page Layout

The Fixed Page Layout lets you specify how much space a data region should take on a page and where it should continue if new pages are required to accommodate growing content. In addition, it has advanced data binding capabilities.

Fixed Size

Data regions in fixed layout reports have the Fixed Width and Fixed Height properties to specify the size that could be taken at runtime.

Suppose, we have a report containing a Table that visualizes the Product List. The first and the second rows print the report title, column headers, and page numbering on each page. The third row repeats for each data record. The Fixed Height property of the table is set to 7in:

Table in Fixed Layout

At runtime, the report output divides the growing table content into six chunks of 7in height and places each chunk on a new page. The last chunk does not have enough data to fill in the full height, printing empty rows instead(this behavior is optional).

Fixed Layout Output

Overflow Place Holder

The Fixed Page Layout allows you to specify the location and the size of those above chunks by adding pages at design-time and using the OverflowPlaceHolder report item. For instance, the report layout in the Get Started with Fixed Reports demo has two pages at design-time. The first one includes the Invoice header and the Order Details table. If this table does not fit on the single page, the report prints the remaining rows on the second, third, etc., pages that do not repeat the header.

Fixed Layout With Overflow

Data regions in fixed layout reports have Overflow Name property that points to the OverflowPlaceHolder.

Expand to watch adding a new page, and setting the overflow place holder in action

Setting overflow place holder

Initially, an OverflowPlaceHolder derives its size from the Fixed Width and Fixed Height properties of the "parent" data region. However, you can change this size to make subsequent data chunks larger or smaller than the first one. The OverflowPlaceHolder also has the Overflow Name property that allows you to build a layout chain starting from the data region and processing through several placeholders.

Overflow Chain

Data regions might have "hard" page breaks between group instances or otherwise. In that case, a fixed page layout lets a data region grow until the hard page break occurs and then moves to the next OverflowPlaceHolder in the chain.

Fixed Layout Data Binding

The Fixed Page Layout allows you to create master-detail reports where each master record restarts those above layout chain to print detail data. An example of such a report is a catalog where each product category(the master record) displays the title page followed by the price list(detail data).

Fixed Data Binding

This feature can be implemented by using the following properties of the Report object that loaded into the Properties panel if you select the Report item in the Report Explorer or click anywhere on the gray area around the page layout.

DATA Section

  • The Data Set Name points to the data set where the data come from.
  • The Sort Expressions is the collection of items that allows you to arrange the appearance of data records. Each item consists of the expression and the sort direction.
  • The Filters Editor allows you to filter out certain data records. For instance, the product catalog displayed above prints only two out of eight product categories. To achieve that, we set the following filter for the fixed page layout.

Fixed Data Filter

GROUP section

  • The Name is the group Id. It can be safely ignored.
  • The Group Expressions is the collection of bound field references or more advanced expressions. Unique values of group expressions generate master records. For instance, the product catalog example has the {categoryId} group expression.
  • The Label expression determines the text of a master record link in the Report Map.
  • The Filters Editor of a group allows you to filter out certain group instances.