Report layouts (Report+)

With Report+, you can build no-code paginated reports using preset designs, header/footer formatting capabilities, row/column/section breaks, summary/list/comparison views and more in a matter of minutes.

In the 'Design' tab, you can see the 'Report+' section highlighted in the below image. Let's take a detailed look.

Click on the 'Report+' icon. You can see that the visual gets updated as shown below. There is a menu below the toolbar which provides options for views. There is a table header and footer which is inserted automatically based on the data available.

1. Report+ views

On the left side of the menu, there are two options - 'Summary' and 'Category dropdown'. On the right, the two icons indicate the 'List view' and 'Compare view'.

i) Summary view

Click on the 'Summary' option. You can see a summary of the categories and the corresponding measures.

On clicking a particular category, you can navigate to the corresponding page.

ii) Category dropdown

You can navigate to any page in the report using the category dropdown. By default, the first page is shown. Click on another category.

You can now see the details for the selected category. Notice that the KPI card gets updated with the selected category's values.

Note that if 'Row break' is not applied to the highest hierarchy level, you can compare different combinations of the category and its parent category. In this example, a row break is applied for subcategories, hence you can compare Beverages -> Juices and Water -> Mineral water.

iii) List view

By default, the list view is selected. You can see each category on a single page in this view.

iv) Compare view

In the 'Compare view', you can see the categories side by side as shown below. This helps in the easy comparison of multiple categories.

Note that you can view multiple categories on each side by clicking on the dropdown as shown below.

2. Report & table headers

By default, the report header is hidden and there is a table header enabled which is customized based on the data assigned to the visual. In this example, since we have 3 measures, the variances for the primary measure relative to the additional measures are shown in the KPI card. On the left, you can see the fields added, date and category name.

a) As you hover over the header, you can see two context menus. One is for the report header and the other is for the table header.

b) Click on the outermost context menu - this corresponds to the report header. You can see the 'Show header' option.

c) The report header gets enabled as shown in the below image.

d) Let's navigate to the next page using the page navigation controls.

e) You can see that the report header shows the same values as it relates to the entire table, whereas the table header gets updated to reflect the values for the category in this page.

f) Let's hide the report header. Click on the context menu and select 'Hide'.

g) Double-click on the table header. In the 'Header & footer' customization toolbar, you can see the 'Table header' option.

h) On clicking 'Table header', you can see the header presets in the side panel. To learn more about the presets and customization, refer to Header & footer.

3. Footer

By default, the table footer gets enabled which shows the page number.

a) The table footer can be customized by double-clicking on the header or selecting 'Edit' from the table footer context menu.

b) The 'Header & footer' customization toolbar is shown below. To learn more about the customizations, refer to Header & footer.

4. Customization options

You can apply customizations such as page total, and margins, and customize the summary and compare views. These options are highlighted in the below image.

i) Page total

On clicking the 'Page total' option, the total of the rows on each page is added at the bottom as shown in the below image.

ii) Margin

Margins can be chosen from the available options or you can define custom margins. By default, a 10px margin is applied.

You can define custom horizontal and vertical padding by clicking on 'Custom'.

In the dialog box, you can set the desired margin and click 'Apply'.

iii) Style

Style options are applicable for the summary view and compare view. The options available in the summary view are shown below.

There are additional options in the compare view as shown below.

a) Space between grids

You can increase the space between the left and right grids by increasing the 'Space between grids' as shown below.

b) Inlay style

By default, each category has a border around it. To turn it off, turn the 'Inlay style' toggle off. The 'Border thickness' and 'Header border color' fields are disabled when the inlay style is off.

When the inlay style is off in the summary view, the report looks like the below image.

c) Header border thickness and color

Border thickness and color can be customised using the highlighted options.

The same customizations in the summary view are shown below.

d) Detail height type

By default, the detail height for each category is based on the number of rows. Since the number of rows in Water is less than in Beverages, you can see the detail height is less.

You can also define custom heights for the details as shown below. The detail height should be between 0 px and 300 px.

If the defined detail height is more than the auto height (ie. the height at which all the rows fit without scroll), then the defined height is not considered. In this example, at 130 px there is no vertical scroll.

If the detail height is increased to 200 px, there is no change in the height.

e) Space between rows

The space between rows can be increased/decreased using the option highlighted in the below image.

f) Sync scroll

By default, scrolling in one category affects all the other categories. But if needed, this behaviour can be turned off by using the 'Sync scroll' toggle. Note that this is only applicable for vertical scroll.

In the next section, we'll be covering display and themes.