HTML Widget

<< Click to Display Table of Contents >>

HTML Widget

This widget displays Hyper Text Markup Language (HTML) snippets. HTML is the standard markup language for creating web pages. Therefore, text, photos, and videos can be added to an HTML widget. Other uses of the widget include adding hyperlinks to other resources or a closed circuit television feed of your facility. The HTML widget displays the content as it has been configured in the widget properties.

 

Widget Properties

 

To add content or change properties of the HTML widget, open the Widget Editor by selecting the More Options Ent-More_Options-Icon icon in the upper right corner of the widget to display the drop-down menu and then select the Edit menu option.

Ent-HTML_Widget_Editor

Widget Title – By default, the widget title is HTML. The title can be modified.

Widget Color – The color of the widget can be changed using the Change Widget ThemeEnt-Theme_Color_Iconicon to the left of the widget title.

Cancel – Select the Close without Saving Ent-Close_icon button to exit the Widget Editor without saving changes.

Save – Changes will be applied to the widget by clicking on the Save Ent-Widget_Save-Icon button. The Widget Editor screen will close after the save operation is complete.

Help – The Help Ent-Help-Icon button connects to the online documentation related to the specific widget.

 

The Widget Editor includes two tabs used to define what and how the widget contents are displayed:

HTML – Use this tab to define the HTML tags and content that will be displayed in the widget. Content can be edited using either the Plain Text Editor or the Rich Text Editor. The Rich Text Editor, also known as a WYSIWYG (What You See Is What You Get) editor, allows users to edit and format text as it will be displayed in the HTML widget. Some formatting includes font size, font style, font color, indentation, and inserting tables. Note that when inserting tables, the rich text editor does not properly allow formatting of the tables, however, the tables can still be formatted by using Cascading Style Sheets (CSS) styling.

JavaScript – Use this tab to define JavaScript that will be included when the widget is displayed.

 

Simple Example using the Plain Text Editor

 

This is a simple example using the HTML widget.

 

In the HTML section, place the following code:

<p id="testP">Test</p>

 

In the Javascript section, place the following code:

$(document).ready(function () {

//alert("test");

 

$("#testP").click(function () {

alert("testP clicked");

});

});

 

You can now click the word "testP" and an alert should fire.

 

 

Example Using Hyperlink in the Plain Text Editor

 

This is a simple example of how to setup an HTML Widget to display a live stream video.

 

On the HTML tab, paste:

 

<iframe width="640" height="360" src="https://www.youtube.com/embed/E9otybnxkhA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

 

Ent-HTML_Widget-Sample

 

 

Note: Youtube creates a simple embed snippet for all their videos through their sharing menu. Right-click on the window and select the Copy embed code and paste the snippet in as the HTML tab.