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 code

The definition of the HTML code is implemented in the "Template.html" file. The use of this file is optional. The Template.html file is only used, if this is referenced in the Source.js of the Control. The Template.html file defines the base structure of a framework control.

<div class="framework-control-js1-template tchmi-box">
   <!--Place your code here-->
</div>

The HTML code defined within this file is automatically inserted in within 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="framework-control-js1" 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="framework-control-js1-template tchmi-box"> 
      <!--Place your code here-->
   </div>
</div>

Within the Template.html file any number of HTML elements can be defined. All standard HTML 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. 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 instantiation 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.

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

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

If the HMTL elements are to be processed further in the Source.js 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('.framework-control-js1-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.

Example:

<div class="framework-control-js1-template tchmi-box">
   <div class="framework-control-js1-inner-div">
      <div class="framework-control-js1-inner-div-my-element">

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

The following references result from this HMTL code:

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