Template.html

Like every control in the TwinCAT HMI, a framework control is based on HTML code. As soon as a framework control is instantiated in the Engineering of the TwinCAT HMI, an HTML div element is automatically created for the control. The developer of the framework control can define additional HTML code for the control within the control div element.

HTML/SVG code

The definition of the HTML/SVG code is implemented in the "Template.html" file. The use of this file is optional. The Template.html file is only used if it is referenced in Description.json of the control. The Template.html file defines the basic structure of a framework control.

<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-Template tchmi-box">
   <!--Place your code here-->
</div>

The HTML/SVG code defined within this file is automatically inserted in the control div element (if the file is used) in the engineering. The code can be viewed in the browser during debugging, for example.

<div id="TcHmiFrameworkControlJs1" data-tchmi-type=" TcHmi.Controls.FrameworkPrj1.FrameworkControlJs1" data-tchmi-height="150" data-tchmi-height-unit="px" data-tchmi-left="137" data-tchmi-left-unit="px" data-tchmi-top="140" data-tchmi-top-unit="px" data-tchmi-value="True" data-tchmi-width="150" data-tchmi-width-unit="px" class="tchmi-box tchmi-control framework-control-js1" title="" style="left: 137px; top: 140px; width: 150px; height: 150px; z-index: 0; border-width: 0px;">
   <div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template tchmi-box"> 
      <!--Place your code here-->
   </div>
</div>

SVG elements can also be embedded directly.

<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template tchmi-box">
   <div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-div1 tchmi-box"></div>
   <svg class=" TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-svg1 tchmi-box" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30px" height="100%" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
      <polyline class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-svg1-arrow" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="22.865,12.5 15,20.366 7.135,12.5"></polyline>
   </svg>
   <div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-div2 tchmi-box"></div>

Within the Template.html file any number of HTML/SVG elements can be defined. All standard HTML/SVG elements are available to the developer.

In addition to the standard HTML elements, TwinCAT HMI controls can also be used in the Template.html file. See Dynamic control generation.

The user-specific HTML code should be placed within the template div ("Place your code here").

Template.html 1:

Do not assign fixed IDs

No fixed IDs may be assigned within the Template.html file. The assignment of IDs within the Template.html file would contradict the concept of multiple instantiations of a framework control, since an ID may only occur once within the HTML document. The outer control div element is automatically assigned a unique ID through the Engineering.

This ID is made available via the placeholder {Id}. A div element may be created in this way: <div id=“{Id}-subDiv“></div>

CSS classes

Within the elements in the Template.html file, CSS classes can be assigned, which are described via cascading style sheets files, either detached from the theme or depending on the theme. By default, the template class in the Style.css file is used at project level.

Access via JavaScript/TypeScript

The HTML elements defined within the Template.html file can be further processed in the Source.js/ts file. The elements can be changed during runtime or used as placeholders for dynamically created elements, for example. Processing of the HTML elements in the Source.js/ts file is optional. Static use within the Template.html file is also possible.

If the HTML elements are to be processed further in the Source.js/ts file, references to the HTML elements must be created there. References to the Template.html file are created within the PrevInit function in the Source.js file.

/** Handle template elements. Should be done before call to __previnit of super class. */
this.__elementTemplateRoot = this.getElement().find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-Template');

The listing shows the access to the template div within Template.html. A search for the template div is initiated using the ".find()" JQuery function within the main JQuery object of the control. The reference to the JQuery object of the control can be reached via ".getElement()". If additional elements are placed within the template div, they can also be found using the ".find()" JQuery function. For performance reasons, we recommend to avoid using the outer JQuery object for the search in cases with many nested elements, but to use the inner elements that are already referenced instead.

Sample:

<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-Template tchmi-box">
   <div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-div">
      <div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-div-my-element">

      </div>
   </div>
</div>

The following references result from this HTML code:

/** Handle template elements. Should be done before call to __previnit of super class. */
this.__elementTemplateRoot = this.getElement().find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-template');
this.__innerDiv = this.__elementTemplateRoot.find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-div');
this.__myElement = this.__innerDiv.find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-div-my-element');