How to Choose Report Layouts in a JavaScript Report Application

In this blog, we will explore the three layout options available to report authors in ActiveReportsJS, their use cases, and how to determine which layout is best for your needs. Along with some changes you can make to the layouts after they are chosen.

To start, let us review the different layout options we have: Continuous, Page, and Pageless (Dashboard).

Want to Try it Out? Download ActiveReportsJS Today!

Page Reports

Page Reports are best for having pixel-perfect positioning across the entire page. Elements are laid out in the position and size that will be reflected exactly in the final render in the viewer (some exports will not be WYSIWYG). Different controls have overflow areas and options which we will discuss later. There is also a page overflow control you can set up for your page reports for items that do not fit on a single page.

Continuous Reports

Continuous Reports are like a receipt; they grow to account for as many items as there are in the data for some controls. The horizontal positioning is consistent with what you do at design time. However, the vertical sizing will allow most visuals to stretch as more data is fed in (tables, for example, will grow to fit the data). There is still a vertical order in which, when one control ends, it accounts for the vertical order and spacing. The positioning and sizing vertically of elements at design time, in most cases, is the smallest an element can be if it is one that grows. They also have the ability to have multiple sections, which effectively allows you to make multiple continuous reports in one document. Each section can have different layouts and settings.

Pageless Reports

Pageless Reports are as they sound; they do not have pages. They render everything into a single view per section of the report. This is why they are sometimes referred to as dashboard reports in other AR resources (AR.NET). Each section will have its own canvas in the designer for you to add different elements onto the report, and people commonly have this type of report set up with dynamic click actions to add further interactivity, as they are geared for viewing in a viewer, as items like tables also now have scroll bars after they fill the planned area.

Now we have a basic understanding of each layout type in ARJS, let us go over a few use cases and then go over how each will fit a given report type.

Here are the use cases: an inventory report, a customer invoice or statement, and a year-in-review operations report.

To start, let's categorize the needs in each report.

An inventory report is likely for internal or auditing purposes only, so it is more free-form in design, as it will be built to fit and track the company's needs. Inventory is also a relatively relaxed term, so it can cover a wide variety of things. You will also likely want it to expand as needed to accommodate all the inventory data.

The invoice or statement needs to be consistent in spacing and location, as it can still be mailed. That, and the invoice system already has a built-in paradigm of additional pages after the first having a different format, and often they do not leave white space, as they tend to try to take up all available space with the table they use for the line items.

The year-in-review report is also free-form. It can have multiple styles, but we will focus on an “At A Glance” report style. One that will include visuals reviewing the year's key values for planning/positioning purposes.

Given what we highlighted as important to each use case, they match up quite easily to a layout type each. However, that is not always the case. Usually, the line between which report type to use is more muddled, so it is not this clear-cut in most use cases. In general, here are 3 tips to help determine the report layout you need.

• Static layouts work best for Pageless or Page reports, and a growing/flexible layout would be Continuous.

• If you need high interactivity in a report, a Pageless report with click actions that change a parameter is likely a good fit, while Continuous is good for the same thing across many pages.

• Anything that is a sub-report or uses sub-reports, Continuous is usually the best. As exact positioning can be hard to work with, something more flexible is better.

Here is a decision tree that walks through the main points when deciding between layout types:

As for the use cases, let us go through the process of creating each one. 

To start, the inventory report uses a continuous layout.

We are using a continuous layout because of the vertical growth required for this type of report. Each time it is run, the product amounts may vary, and you can use different sections of the report for different product categories.

After the basic steps are completed on the report, a few additional tasks need to be done.

Mainly, there is a decision about which control to use to report the inventory. There are two main tabular controls, but there are also list-type controls for a more custom look.

Tables and Tablix both grow vertically, but if you need horizontal growth/grouping, Tablix is better for summarizing grouped pairs, while the table will display row by row.

Lists and Banded Lists work the same way as tables, but they have a repeatable canvas that you can customize. They are not tabular, but they will go through the data row by row, similar to a table.

After you figure out which of these controls works best for the inventory needs. Add it to the report and fill it with the data fields.

From there, you can add separate sections to the report as needed via the section tab. This is helpful if there are multiple branches or a different format/style needed for a different inventory area. IE manufactured parts would have different information than stock raw materials, however both may be part of a companies inventory.

When it comes to an invoice, it is a more cut-and-dry structure. An area at the top with customer/business information. Part of which can be used as the mailing address on a windowed envelope if physically mailing. This is followed by a defined space for line items. If needed, there is an overflow page for items that exceed the space provided on the first page.

The tables on the page report have a bounding box that controls how big a table can grow within a defined space. You can also use overflow controls, which allow the table to continue onto a second page as needed.

Tables can also be made to take up the entire space of the bounding box and overflow, leaving the totals row on the bottom, which is a unique ability to page reports. 

Lastly, we will discuss how to work with the year-in-review pageless style report. Pageless reports are able to be both Static and Dynamic in nature. So, depending on the report's needs, interactivity can be added as needed. To start, dashboard-style reports typically present data in several ways. There are Indicator numbers and KPIs (key performance indicators), which are small values or charts that provide tailored information to help understand the trends as a whole. IE sales numbers, SLA, or other values that indicate the health of the business. Then there are also visuals, these would typically be your larger chart type controls, they are better at showing performance over time and categories as they can display more information.

Tables can be used on pageless reports; however, that is still best in the viewer, as exported or more static uses of the table will cut out data if it is not filtered to fit within the size you set for the table.

One thing discussed in (Insert Dashboard blog here) is information density. This is something to be aware of, as reports generally need to have an audience in mind when created. You want to cater to them.

Now that we have briefly discussed each use case, here is some additional information that may be of use:

The creation of all reports follows these basic steps:

• Selecting the layout needed.

• Make a data source connection to your data in the report, then start creating a data set or more.

  • Depending on your needs, you will also need to set up parameters now.

• Drag and drop controls onto the report

• Then add data to controls that run off of the data

For a more in-depth view of creating a report, please look at Report Author Guide: Quick Start

In review, ActiveReportsJS has three different report layout types for you to work with. Each layout has different strengths, but they are the foundation for the rest of the report, as they will determine how the report is rendered and flows.

Here is a useful infographic showing the rendering style of each report, as well as some information on how items work on them.

After you determine your needs, you can pick which report type to use. Typically, the overall structure and pagination needs of the report will be the first main split in determining which layout type you will use, but from there you can go as granular as needed.

Want to Try it Out? Download ActiveReportsJS Today!