Widget

A widget is a specific rectangular region on a step that allows an operator to interact with data and media in a way determined by the app author. Some widgets are quite simple, for example a button, or can be quite complicated such as an embedded Tulip Table that allows an operator to browse and find a specific record.

Field types common for all widgets:

Common fields on many widget types:

Widgets by Type:

Text

Used for showing formatted static text information. Text implements Font Size, Font Color, Font Style, Text Align, Vertical Align, Background, Drop Shadow and:

Variable

The variable widget can be used to display variables of many different types. a simple variable, list of variables, complex variable, or a single field of a complex variable. The display ouput and display options and configuration options are conditional on the type of variable of selected to display:

Single value variables, or single field value

• Image URL Variable - The image will be rendered.
• Variables that render as text - Text that implements Font Size, Font Color, Font Style, Text Align, Vertical Align, Background

Complex Variable

The widget will display a collection of labeled values for the specified fields. The options include Label Size, Label Color, Value Size, Value Color, Background and:

Array of Complex Variables

The widget will display a datagrid of rows and columns of the fields the user selects to show. The implements these fields:

Step Name

A shortcut way to add the Variable widget with the data already set to the Step Name variable.

Table Record

Displays either one field of a record placeholder or several fields. Depending on whether several fields or a single field is chosen, the options match the variable widget options.

Button

A button widget allows a user to build interactive apps, by assigning any number of triggers to the button click event. Button implements Font Size, Font color, Font Style, Background (called Button Color), Drop Shadow, Border Radius and:

Previous, Menu, Next & Complete Buttons

These are shortcut buttons that include the corresponding trigger, the appropriate label, and an icon next to the label that symbolizes the action. Users can ovverride the text and triggers, but the icon will always be appended to the text.

Inputs

Input widgets allow operators to modify variables values. Each input type accepts the variable type for which it is designed.

Checkbox

• Used for editing boolean variables. Fields:

  Name	Description
  Dislay Mode	Checkbox or Toggle
  Color	In checkbox mode this controls the color of the checkmark, in toggle it controls the color of the toggle when set to true.

Text

• Used for editing text variables. Implements Font Size, Font Color, Background Color, Border Color, Border Width, and:

  Name	Description
  Multiple Lines	Whether the text displayed should respect multiline formatting.

Number

• Used for editing number variables. Implements Font Size, Font Color, Background Color, Border Color and Border Width

Single Select

• Used for selecting a value from a list that will update a text variable. Implements Font Size, Font Color, Background Color and:

  Name	Description
  Display Mode	Dropdown or Menu -- Whether to render a selectable dropdown that shows the options when clicked, or show the options in a visible menu
  Options	The options can either be statically input in a list, or a text array variable can be selected

Multiselect

• Used from selecting multiple text variables that will update a text array variable. It has the same options as Single Select except the variable options are text arrays instead of text variables.

DatePicker

• Used for edting datetime variables. The widget shows a calendar and time picker for specifying a datetime value. The widget implements Font Size, Font Color, Background Color, Border Color and Border Width.

Analysis

Analyses can be embedded in apps, and offer more customization options than on a dashboard:

Image

A static image. The widget implements Drop Shadow, Border Radius and:

Video

A static video. The widget implements:

Document

A static pdf file. The widget shows paging and zoom controls. The widget implements:

Webpage

Embeds an iframe with a statically specified url or variable referencing a url. The widget implements:

Gauge

A vertical gauge that visually shows a value with respect to a min and a max. The widget implements Font Size, Font Color, Background Color and:

Tulip Table

Embeds a Tulip Table in the app. The widget imlplements Background Color, Font Size and:

Machine Attribute

Renders a Machine Attribute in the app. The widget imlplements Color for Background, Chart Background and Line; Font Size and Color for Label, Value and Timestamp.

Machine Status

Renders the most recent Machine State of a machine, the duration in that state and selected Machine Attributes in the app.

Machine Uptime

Renders the Machine State changes for a machine over a selected timeframe, as a timeline. Implements Color for Background.

Tests