Header & footer

The header and footer in business reports provide a consistent way to identify the content, promote the company's brand, and ensure that important information is easily accessible. Inforiver offers powerful header & footer customization capabilities and can be used to show charts, KPIs, images, and text.

Below is a sample report created using Inforiver. You can see a header with a KPI card, report title, and a donut chart. The footer contains the company logo and page number.

The header & footer module is organized as follows:

Introduction - Overview of the toolbar, header & footer sections, presets, basic interactions and basic customization options
Text - Adding formatted text and using presets like page number, data fields
Images - Adding images from local files and organizational workspace
Charts - Types of charts and customization options
KPI cards - KPI presets and customization options

1. Interface

Let's first take a look at the header/footer interface. In the edit mode, you have the 'Header & footer' tab in the toolbar and options to edit the header elements. In the read mode, you have a context menu using which you can show/hide the header/footer, turn off pagination, reset changes, and access the edit mode.

i) Edit mode

a) Click on 'Header & footer' in the 'Design' tab.

b) The 'Header & footer' tab gets enabled. You can see that there is a default header that shows the fields added and the scaling.

c) The blue box is called the 'container'. Currently, there is only one 'cell' in the container with the default fields and scaling. But containers can be split into many cells and they can be used to create elements of the types - Text, Image, Chart, KPI, and Variables. We'll be covering cell and container customization in a later section.

e) The toolbar provides a number of options and they are covered as follows:

Preset - Header & footer presets

Insert & Format - Only applicable for text elements

Cell, Container & Margin - Common customization options for all the elements

ii) Read mode

a) In the read mode, you have a context menu as highlighted in the below image. You can access the edit mode by selecting either 'Presets' to directly open the 'Header presets' panel or 'Edit' to open the 'Header & footer' tab. You can also hide or reset your changes to the header.

b) To access the footer customization toolbar, click on the icon highlighted in the below image and select either 'Presets' to directly open the 'Footer presets' panel or 'Edit' to open the 'Header & footer' tab. You can also hide or reset your changes to the footer.

c) 'Pagination' can be used to turn off pagination. Notice that currently pagination is enabled as highlighted in the status bar.

d) Turn on the toggle and you can see the scroll bar at the right and the pagination controls have been hidden in the status bar.

2. Basic interactions

As mentioned in the interface section, the header/footer containers can be split into cells and customized further. Let's first look at creating and managing cells. For cell and container customization, refer to basic customization.

a) Go to the edit mode by clicking on 'Edit' in the context menu. You can also edit the header by clicking on the 'Header & Footer' button in the Design ribbon.

In the basic interactions section, we have used the example of headers but all of these properties apply to footers as well.

b) Notice that there are two controls - one on the side and one at the top of the container.

c) Clicking on the control on the side will give options to split the container vertically. To split the container horizontally, click on the control at the bottom.

On selecting 'Split right', notice that the existing content is present in the right cell and there is a new cell on the left.

d) The container height can be adjusted by hovering on the bottom border and dragging the handle.

e) Cell widths can also be adjusted by dragging the handle that gets enabled on hovering over the cell border.

f) At the top right of each cell, you can see a 'Settings' icon. Clicking on it displays the options shown in the below image.

Type - Change the cell to one of the available types - Text, Image, Chart and KPI which are covered in subsequent sections

Copy - Copy the contents of a cell

Paste - Paste the contents of another cell

Delete - Delete the cell

3. Presets

Before looking at creating header/footer elements from scratch, let's see how to leverage presets to insert header/footer in a single click.

i) Header preset

a) In the 'Header & footer' tab, click on 'Header preset'. A side panel opens up as shown below.

b) Choose any of the presets and click 'Proceed' in the warning message.

c) You can see that the header has been updated. These can be further customized but for now, let's go ahead with the preset.

d) Click on 'Close editor' to apply the preset.

e) Note that if you want to hide the header, you can either click on the 'Hide' icon next to the editor or the 'Hide header' option in the 'Header' side panel. But we are not interested in hiding the header now. Let's see how the header preset looks in the reading view.

f) Once you close the editor, you can see the header as shown in the below image.

g) Header can be hidden in the reading view by using the context menu.

g) If you have hidden the header and want to display it again, click on the context menu and the 'Show header' option.

h) You can see the header. If you want to revert back to the default header, click on 'Reset'.

ii) Footer preset

Inforiver also offers a number of footer presets with page numbers, report titles, logos etc.

a) Click on 'Footer presets'. A side panel opens with a list of the available presets. The default preset gets applied as shown below.

b) You can choose a different one from the list. Click on 'Proceed' in the warning message.

c) You can see the footer editor showing the page number.

d) The preset can be customized further. But, for now, let's apply this preset. Click on 'Close editor'.

e) There are two ways to hide the footer in the edit mode. You can either click on the 'Hide' icon next to the editor or the 'Hide header' option in the 'Header' side panel. But we are not interested in hiding the footer now. Let's see how the footer preset looks in the reading view.

f) On closing the editor, you can see the page number in the footer section.

4. Basic customization

All cells regardless of the type (Text, Image etc.) can be formatted using the 'Cell' and 'Margin' sections of the 'Header & footer' toolbar. The header/footer containers can be formatted using the 'Container' section.

Multiple cells can be selected by using Ctrl + Click and formatting can be done at once. In the Basic customization section, we have used the example of headers but all of these properties are applicable to footers as well.

i) Cell

The 'Cell' section is highlighted below. Using the options in this section, you can align the contents, apply fill, border or shadows and more.

a) Horizontal/Vertical align - Contents in a cell can be aligned horizontally and vertically as shown below.

b) In addition to using the handles, you also have an option in the toolbar to split the container or cells.

c) On selecting two cells, you can swap them by using the 'Swap container' option.

d) Fill - Fill color can be applied to one or more cells by using the color picker.

e) Shadows can be applied to cells as shown below.

f) Borders - Borders can be applied for cells, you can set the weight, corner radius and choose a color.

ii) Container

The following options are available for the header/footer containers - Appearance and Ruler.

a) You can apply a border to the container by clicking on the 'Appearance' option. You can see a dialog box as shown below.

b) We have changed some properties as shown below. Click 'Apply'.

c) A blue border gets applied on the top. Notice that the inner controls are hidden since we turned 'off' the 'Container inner controls' option.

d) By clicking on the 'Ruler' option, you can see rulers on the top and left of the container. It shows the x and y coordinates for any point within the container.