HTML Widget

<< Click to Display Table of Contents >>

EQuIS 7  >>  Enterprise > Widgets >

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 dashboard_chooser icon in the upper right corner of the widget to display the drop-down menu and then select the Edit menu option.

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 Themecolor_iconicon to the left of the widget title.

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

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

 

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>

 

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.

 

 

Setup Dashboard Navigation Buttons

 

The HTML widget has the ability of being a dashboard navigator using buttons to navigate to specific dashboards. A button can be configured to go to any dashboard with only the Dashboard ID. The Dashboard ID can be found in the URL (i.e., ...Default.aspx?d=dashboardId). Each button can be clicked to navigate to the dashboard or can also be clicked with the CTRL key pressed to open the dashboard in a new tab.

 

Adding Dashboard Navigation Buttons

1.Add an HTML widget to a dashboard.

2.Open the widget editor and copy and paste the following line of code in the HTML tab using the plain text editor:

a)<input type="button" class="md-button md-raised" onclick={openDashboard(myDashboardId)} value="myButtonName" />

b)Change myDashboardId, in the code from Line a, to the desired dashboard destination.

c)Change myButtonName, in the code from Line a, to the desired 'Name' on the button.

d)Repeat Steps a-c for each button.

3.Copy and paste the following code after the buttons:

<script>
function openDashboard(dashboardId) {
  if(event.ctrlKey){
    window.open("default.aspx?d=" + dashboardId);
  } else {
    location.href="default.aspx?d=" + dashboardId;
 }
}
</script>

4.Save the changes.

Html_Widget_Sample_Buttons

 

Color Coding Individual Dashboard Navigation Buttons

 

1.Add the following code snippet inside the button that needs color: style="background-color: myButtonColor"

2.Change myButtonColor to the desired color or hexadecimal of the desired color.

a.Example: <input type="button" class="md-button md-raised" style="background-color: lightgreen" onclick={openDashboard(178)} value="Admin" />

or

b.Example with hexadecimal: <input type="button" class="md-button md-raised" style="background-color: #98e293" onclick={openDashboard(178)} value="Admin" />

To get hexadecimal values of colors, google "hexadecimal color picker" and use Google's hexadecimal color picker.

3.Save the changes.

 

Hint: If the button text is not visible because of the background color, add color: myButtonTextColor to your style separated with a semicolon after the background color. Example: <input type="button" class="md-button md-raised" style="background-color: black; color: white" onclick={openDashboard(178)} value="Admin" />