Using the interactive functions in standard TwinCAT HMI projects
Both the Interactive Dashboard and the Interactive Chart function can be integrated into any TwinCAT HMI project independently of the One Click Dashboard. This requires a valid TwinCAT Analytics Runtime or Runtime Base license (TF3550 or TF3551) on the target system.
Installation of the NuGet packages
The required components (Analytics Framework Controls and the Analytics Server Extension) can be integrated into the HMI project via NuGet packages. To do this, the packages "Beckhoff.TwinCAT.HMI.Analytics.ControlsExtension" and "Beckhoff.TwinCAT.HMI.Analytics.Controls" must be installed in the NuGet Package Manager.
After installation, the "TcHmiAnalytics" server extension is located in the HMI project under the server node. If this does not start automatically, it must be started manually by right-clicking on the extension.
Adding the Layout Manager control
Dynamic and user-specific layouts can be created using the Layout Manager control. The Layout Manager control can be inserted into the HMI project via the toolbox using drag and drop. It is located in the "Beckhoff.TwinCAT.HMI.Analytics" area. The Layout Manager is similar to the Container Control. The difference is that the controls can be repositioned in the browser.

Setting the properties of the Layout Manager control
For the Layout Manager control to function optimally, the following properties should be set:
Name | Description |
---|---|
Identifier | Once layouts have been saved with the server extension, the identifier should no longer be changed. Otherwise, saved layouts can no longer be assigned. |
WidthMode | Selection “Value” should not be changed. |
HeightMode | Selection “Value” should not be changed. |
The following parameters can be set optionally:
Name | Description |
---|---|
DarkMode | Selects whether to display the control in DarkMode. |
MobileViewWidth | Pixel width from which to switch to Mobile View. |
Number of columns | Number of columns that the layout should include in the normal view. |
Grid Gap | Percentage distance between the controls that are positioned on the Layout Manager. |
UseCustomRowHeight | This parameter can be used to activate the fixed row height, which can be set using the RowHeight parameter. Otherwise, a dynamically scaled height is used. |
RowHeight | This parameter can be used to specify the row height in pixels. |
LockControls | This parameter can be used to prevent interaction with the existing controls in the layout in Edit mode. |
IsAnalyticsUse | This property should only be activated if the Layout Manager control is used in an Analytics-One-Click-Dashboard. This positions the menu of the Layout Manager control appropriately on the layout. |
MenuControlSymbol | A control of the "Menu" type (also from the "Beckhoff.TwinCAT.HMI.Analytics" area) can optionally be linked here. This should always be visible on the dashboard and placed on the "Desktop.view". The Edit mode can also be opened and closed via the Menu control. |
Adding controls
Any controls can then be added to the Layout Manager control. These can be moved as required in HMI engineering.
![]() | If a layout has been saved for a user using the interactive function, the items are loaded from the saved layout. If further controls are added at a later date, they are sorted into a free space within the layout. Removed controls, on the other hand, disappear directly from the layout. |

![]() | Interactive chart controls can also be added in the web browser. |
Building the project
To be able to use the functions of the Interactive Dashboard and Interactive Charts, the project must be built with user authentication.

Making user-specific changes
The interactive functions can then be used in the web browser. Information on the use of the Interactive Dashboard and the Interactive Chart can be found on the following pages.
Exporting and importing layout and chart configurations
The configurations of layouts and charts saved in the "TcHmiAnalytics" server extension can be exported and imported. This is useful if the configurations are to be transferred from a remote project (e.g. running on an HMI server) to a local project. Alternatively, the configuration of a remote project can also be updated.
The configurations can be exported and imported into the server extension via the Config page of the respective HMI project.
