HMI Templates

With logiccloud HMIs you can use templates to create reusable components and pages, and use placeholders to dynamically insert data in those templates. This allows you to create a consistent look and feel for your HMI and to reuse components across multiple pages, while maintaining the flexibility to display different data in the same component. This also helps with decluttering your HMIs, especially when they grow more complex, and keeping them organized.

Templates

The templates are created as regular HMI pages. They are located inside the Templates folder inside the project tree. To create a new template, right-click on the Templates folder and select Add template. Assign a name to the template and set the resolution you want to use. You can create as many templates as you need.

Creating a template

Once you create a template page, open it and click on the background. The configuration options on the right hand side will now show you the placeholders section.

There you can add as many placeholders as you want. Later, when using this component, the placeholders will be substituted with the actual data.

After adding placeholders, you can add your first component to the canvas. You can use any component you want, and you can also add multiple components to the template. Any component that has an input field for the properties can use placeholders.

Using placeholders in your component

To use placeholders in your component, they need to be wrapped in hash signs #. For example, if you have a text component and you want to display the value of a variable, you can use the placeholder #Test1# in the text field.

Here is the example for a simple label:

Using templates on a page

After creating a template, it can be used on the page. For this, the Template Panel Compoment is used. This component is located in the Layout section of the component list. After adding the compoment, you can select the template you want to use. Click on the refresh button to sync the placeholders.

In the placeholders section, you can now add hardcoded values, or leave the placeholders to be substituted during runtime. Just make sure that the placeholders match any of your access variables.

Using navigation tags in templates

Sometimes it is necessary to navigate to the same page but with different information, e.g. when you have the same information for different machines. Then you can use a template to create a "detail view" and use navigation tags to navigate to the same page with different information. Navigation tags work like navigation parameters, so that when you navigate to a page with specific parameters, they will be substituted in the placeholders.

Creating navigation tags

To create navigation tags, select the background of your page and add the tags in the Navigation tags section on the right hand side. You can add as many tags as you need.

Using navigation tags

To use navigation tags in your templates, add a navigation item and select the tag you want to use.