Report Visual Design

The Report Studio is still under development and has not officially been released. Be warned that code may change such that reports you create with this pre-release trial version might need to be updated in order to continue working after your next VTScada update.

Until the official release, documentation for the Report Studio will open in response to the F1 key but will not be shown in the menu system. To view a table of contents for the complete chapter, navigate to The Report Studio

Determine the layout and cosmetics of your report with spacers, images, text and containers.

Add Spacers

Represented in the Report Studio as a bar with a vertical arrow, these are replaced by empty space of the specified height in pixels when the report runs. The space in the generated report will match what you see on the screen. (Some variation is possible depending on whether the selected destination is HTML, PDF, or other.) Note that adjacent elements will touch if you do not place a spacer between them.

Example of a report spacer

A spacer between text and a table

Add Images

The VTScada logo is provided as a sample image. Drag it to the report, then use the Image Properties panel to select and adjust any image you prefer. Click the [...] button to the right of the image name to open the Select Image dialog.

Images must be part of your application before they can be included in the report. To import a new image into your application, click the + button at the bottom left of the Select Image dialog. The process is the much the same as for adding images in the Idea Studio except that images cannot be dragged from the Windows File Explorer to the Report Studio. Refer to Import Images.

Image properties panel for a report

The Report Studio Image Properties panel

Add Text

Use text to give your report a title or to add relevant notes between other elements.

Drag the Sample Text to your report and edit to suit using the Text Properties panel. You cannot include line breaks in your text, but long text will flow over multiple lines as required when the report is built for PDF or HTML.

Text properties for a report

The Report Studio Text Properties panel

Note the tool for creating a parameterized phrase (circled in the preceding image). Instructions for this tool are provided in Parameterized Phrases.

When building a parameterized phrase, you can include any text in addition to selected parameter variables. Be sure to leave spaces to ensure that words do not run together unless that is your intent. For example:

Sample Report Generated on %[RunDate] at %[RunTime]

Containers

Organize the layout of report pages in The Report Studio with resizable containers that order their contents vertically or horizontally. These are components that can contain all other components, including other containers, making them a versatile tool in optimizing use of space.

Imagines, line charts and spacers are pictured inside two vertical containers that are both places inside one horizontal container.

Report components organized by two vertical containers (yellow) inside one horizontal container (blue).

Using Containers

Containers are accessible within the "Components" sidebar of Report Studio, denoted as "Container (V)" for a vertical-ordering container and "Container H" for horizontal. Drag and drop either onto the canvas to get started.

Component icons representing vertical and horizontal containers are pictured in the Components panel.

You may notice that a container first appears on the canvas as a tiny box. Note its blue color when you first drop it and its white color when you click outside of it. This visual aid indicates where the focus is. Be mindful of which container is in focus when deleting components. Deleting a container will also delete all components it holds.

When clicking and dragging any component in or around a container, blue ribbons will appear around it or any pre-existing components to indicate where the new one will be accepted.

You may drag and drop other components into a container and it will automatically resize to fit them. Containers can hold as many components as you would like but will only order them vertically or horizontally (Think of them as mini canvases).

Spacers work with Containers. They can be placed between these components to customize buffer space. The Spacer symbol will reorient itself once it is in place, although their icon may not change as you drag and drop them.

Components can be removed from containers and placed elsewhere on the canvas, containers moved this way can do so without compromising the integrity of their contents.

Container Properties

The horizontal container showcased above displays properties like this.

When a container is in focus, a corresponding properties menu will appear in the upper-right sidebar menu of Report Studio. Container properties may possess the following controls for placement of each component within the container's context:

Float Component Upwards

Float Middle

Float Component towards the Middle

Float Bottom

Float Component towards the Bottom

Fill Space

Fill Space Vertically, allowing the component to reach its maximum height (applies to Vertical Container Only).

Stretch to Fit

Stretch to Fit. Without exceeding the maximum height or width of the component, this will center it within the available space of a container along its primary axis. Multiple 'Stretch to Fit' components in the same container will share the space evenly, even across different screen sizes.

Clicking a component's name in the container properties window will focus on the component instead and open up the component's properties. For more information on controls, see Report Studio Tools.

These properties will default to 'Float Upwards' for the component if it is moved elsewhere within the canvas.

Alignment within the context of containers is only available along the vertical axis. To change horizontal alignment, view the individual component properties.

Rendering Containers in Different Formats

Container lines are not visible in the rendered report from Report Studio (see Printing Reports for more information). Container use is translated in various ways across the available file types, as follows:

HTML

Container-organized layouts translate readily into HTML through the use of formatted <div> tags.

CSV

As a minimalist file type, CSV formatting will ignore line charts and complex images. It will translate container layouts into one vertical layout ordered left-to-right and by component depth within the containers (see tables numbered in orange below).

The table order in the report above translates to a vertical layout below in CSV formatting

Container tables CSV translation example

Excel (.xlsx)

Container-organized layouts can be replicated consistently in Excel, with some tables undergoing resizing to accommodate all text sizes. Table cells are all translated into a uniform size, as determined by the largest text a cell is required to fit, so text in a smaller font may appear to be given more space than necessary.

Line chart data is accessible as a table on a separate sheet within the Excel file.