View Builder

You can add components and containers, and customize the layout for both free-form and fixed placement.

Written By Evolo Support

Last updated 2 days ago

The View Builder is used to edit both free-placement and fixed-placement views.

Among other things, you can:

  • add components

  • use containers to group content

  • upload background images

  • build free-placement views

  • build views with fixed layouts

  • Set up dashboards and widgets

Open the view builder

  1. Go to Configuration and select Views.

  2. Find the view you want to edit.

  3. Click the icon to open the view builder.

Menu functions

The view builder has its own menu with functions and tools.

Drag or Point

Use Drag to move around the view or zoom.
Use Point to select and highlight elements.

Reset Position

Resets the view to the center.

Go to View

Opens the view in user mode.

Close

Closes the display builder and returns to the overview.

Shortcuts

You can use these shortcuts in the view builder:

  • Shift toggles between point and drag or zoom

  • Ctrl + click selects multiple items; click again to deselect an item

  • Arrow keys move selected items

  • Ctrl + C and Ctrl + V copy and paste elements

  • Ctrl + Z undoes a deletion

Components

Components are used to display or control data points, or as visual elements in the view.

  • Diode: Displays a Boolean value.

  • Value: Displays a numeric value with an icon and label.

  • Switch: Toggles a Boolean value between 0 and 1 or sets a numeric value to on or off.

  • Pulse button: Sets the value to 1 while held down.

  • Number Input: Allows the user to enter a numeric value.

  • Static text: Displays text on the screen.

  • Drop-down menu: Displays and changes predefined values.

  • Text List: Displays selected text instead of the data point’s value.

  • Slider: Adjusts a value within a range.

  • Link: Creates a clickable link.

  • Timestamp: Displays the time associated with a data point.

  • Line break: Creates spacing and structure in the display.

  • Comment Field: Allows the user to write and save comments.

  • Gauge: Displays a data point as a gauge.

  • Graph: Displays data points in a graph.

  • Compensation curve: Links an input value to an output value.

  • Level gauge: Displays the level in a tank or container.

Containers

Containers are used to group components or build the layout in the view.

  • Room: Quick setup with predefined components.

  • Panel: Displays as a control panel at the bottom.

  • Image: Used as a background, such as a floor plan or process diagram.

  • Box: Flexible container with tabs and components.

  • Dynamic SVG: Changes the SVG based on data points.

  • HVAC Symbols: Displays technical symbols indicating status or operation.

  • Shapes: Used as simple visual symbols and backgrounds.

  • Table: Displays components in rows and columns.

Build dashboards

You can use the view builder to set up dashboards.

With fixed placement, you can build dashboards using widgets and cards.

Examples of widgets include:

  • Indoor climate

  • Alarms

  • Ventilation

  • Calendar

You can also set up a dashboard for each building.

For a building dashboard, you can, for example, display:

  • indoor climate statistics by floor

  • a summary of active alarms

  • status of ventilation systems

Set measurement types for components

Link measurement types to components to use them in dashboards, reports, and views.

  1. Open the view’s information.

  2. Go to the Components tab.

  3. Select a measurement type for each component.

Room - Temperature will instruct the system to display the value from this component in the Dashboard’s Indoor Climate widget.

Import and Export

You can export and import views to work faster.

Export

Export components and containers to Excel.

This can be useful when you want to:

  • copy layouts

  • make major changes outside the view

Import

Import a template file or an edited export back into the view.

Before confirming the import, you can view a preview of components and containers.

Tips and Tricks

  • First, export an existing view if you want to use it as a template.

  • Use Ctrl + click to edit multiple elements at once.

  • Adjust the width and height of the view so that the content displays correctly on different screens.

  • Use free placement when the positioning of the elements is important.

  • Use fixed placement when you want a neat and standardized dashboard.

  • Use Ctrl + Z if you accidentally delete something.

Related articles