Call Us 1-800-266-7798   |   Schedule a Demo

International Distributors

News Room

Inductive Automation
News Room

News / November 10, 2011

Did You Know: You Can Use HTML Throughout Ignition

A lot of components in Ignition accept HTML. Using some basic HTML can really step up your project to a new level.

The Label component is one of the components that accepts HTML, making it very versatile. A label can display text, images, or both. The text can be HTML formatted. Here are the steps to add HTML to a label:

  1. Open the Ignition Designer and drag the Label component from the Display tab of the Component Palette.
  2. The Label component has a Text property for what is displayed. By default the text is a single line. We can add HTML to make the label multi-line, bold certain text, underline certain text and more. Set the text property to the following:

    <HTML>First Line<BR>Second Line

    The label now has two lines.



The Button component also accepts HTML:
  1. Open the Ignition Designer and drag the Button component from the Buttons tab of the Component Palette.
  2. The Button component also has a Text property for what is displayed. By default the text is a single line. Set the text property to the following:

    <HTML>Export<BR>To <B>CSV</B>



One of the most powerful places to use HTML is on the Mouseover Text property that exists on every component. The Mouseover Text is the text that is displayed in the tooltip, which pops up on mouseover of the component. You can display information about the component or the signal it is bound to. Let's add HTML to the mouseover text of the label component we created in the first example above:
  1. Set the Mouseover Text property to the following:

    <HTML>Instructions<BR><UL><LI>Step 1</LI><LI>Step 2</LI><LI>Step 3</LI></UL>
  2. Open the client (runtime) and hover your mouse over the component to see the tooltip.



Another place you can add HTML is the Table component. You can add HTML to the header row or to each of the individual cells of the table. Let's add HTML to the header:
  1. Open the Ignition Designer and drag the Table component from the Tables tab of the Component Palette.
  2. In the Property Editor, check the checkbox on the Test Data property to fill in some test data.
  3. To change the table's header we need to use the Table Customizer. Right click on the table and select Customizers > Table Customizer.
  4. In the header row you can add HTML to the display text in each column. Note *: If you are using line breaks, you must put them in the first visible column header to set the height. Set the header value of the first column to the following:

    <HTML>Column<BR>1

    Now the table's header has multiple lines.



Feel free to experiment with other components to see if they accept HTML. You can combine HTML and the use of icons to really make your project stand out. As always, if you have any questions please feel free to call or email us.

‹ Back to News Room