• On this page

<aside> <img src="/icons/construction-crane_gray.svg" alt="/icons/construction-crane_gray.svg" width="40px" /> [BETA] This Feature Is Currently in Beta!

We’re working hard to shape and tune it by gathering feedback from pilot customers and early adopters.

Got Ideas or Feedback? Let Us Know!

→ [email protected]

</aside>

About

As your HMIs grow in complexity and number of pages, you will need other tools to maintain and manage your project. HELIO Components is one of those tools that can help you in two situations:

1. Allow a Part of Your HMI to Maintain its Own Piece of Local State

This could be, for example, a workflow that stores temporary state until the process is completed. Only then will it use this local state to modify the state of your machine using a PLC Connection (Data Source Type).

2. Encapsulate and Reuse a Part of Your HMI

This is usually done to prevent repetitive work while also keeping the look and feel of recurring patterns consistent and manageable. This can be, for example, a particular type of dashboard widget with a configuration that you often reuse.

Creating a Component From an Existing Element or Page

You create a Component from an existing element. For example if you would like turn a Dashboard Page into a component:

1. Open the context menu of the element.
2. Choose Create Component.

1. Use A Component to Maintain Local State

1.1 Define Component Properties to Provide Local State

The local state of your component is defined using the Component Properties property group.

You can add new properties as desired. Each property should have the following:

• A unique name

• Its Value set to Local Variable (Property Type)

  By doing this, you can define the data type and any additional metadata for it, just like you would for "normal" HMI variables.

To define a new local property:

1. Add a new entry to your property list
2. Give the variable a unique and speaking name.
3. Open the Local Variable Editor, and chose the right type as well as its initial value.

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> The property will be set to the Initial value every time the element enters the viewport.

For example, this occurs when you:

• Navigate to a Page Component.
• Open a Page Component as an overlay.
• Display a Dashboard Widget Component on the screen. </aside>

1.2 Reading the Current Value of the Property

To read and display the current value of the component, simply add a Magic Output (Element) as a child of your component and set its value to the Component Property (Property Type).

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> You can only access the value from inside the component!

</aside>