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:

Name	Description
Position	the x and y coordinates of the top left of the widget on the step
Size	the width and height of the widget
Transform	the rotation of the widget (0 - 360)
Blink	yes/no if enabled the widget will slowly fade in and out

Name	Description
Font Size	the size of the font (in pixel values)
Font Color	An RGB or RGBA value
Font Style	yes/no values for bolding, italic and underline
Text Align	one of left, center, or right
Vertical Align	one of top, center or bottom
Background	An RGB or RGBA value
Drop Shadow	yes/no if dropshadow is enabled it can be specified by its color, x offset, y offset, and blur offset
Label Size	The font size for a label that corresponds to a value
Label Color	The font color for a label that corresponds to a value
Value Size	The font size for a value
Value Color	The font color for a value
Border Color	The color of the widget border
Border Width	The width of the border
Border Radius	Either a single value that applies to all four corners, or four separate values for each corner

Widgets by Type:

Shape

A shape is a static image that can be added via the Asset Library.

It implements Position, Size, Transform, Blink, Border Width, Border and Fill as described above.

Text

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

Name	Description
Text	the text value to present

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:

Name	Description
Fields	The fields of the object to display
Columns	Whether to show 1, 2 or 3 columns

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:

Name	Description
Fields	The fields of the object to display
Fit to width	yes/no whether the table should resize its columns to fit the alloted width

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:

Name	Description
Text	The label of the button
Triggers	Any number of triggers to fire when the button is clicked.

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 within a run of an app. Each input type has the following fields:

Name	Description
Datasource	The data that is bound to the value of the input. This will be updated in real-time when an operator uses the input widget in the Player. Can be either a Variable or a Record Placeholder Field
Column	The field from the record placeholder that is bound to the input widget (optional)

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, machine, station or user 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 an array variable with any of the following data types: users, text, machines or stations

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.

Date Picker

Used for editing 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:

Name	Description
Background	The background color
Title	Default, Custom or None
Show "Last Updated"	yes/no whether to show the last updated information on the analysis widget
Filters	This control is only available once an analysis has been specified. Users can define custom filters that utilize app variables and record placeholder fields

Image

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

Name	Description
Upload	The image to show. App authors add from their local machine.
Respect aspect ratio	If the image has been resized to an aspect ratio that does not match its actual value, it can be reset to a width and height that matches its actual aspect ratio
Show "Last Updated"	yes/no whether to show the last updated information on the analysis widget
Click acion	None, Show Image Fullscreen or Custom Triggers - By default in an app clicking on the image widget will show a full screen view for the operator to see more detail. App authors can remove this function or specify custom triggers for clicking the image.

Video

A static video. The widget implements:

Name	Description
Upload	The video to show. App authors add from their local machine or specify a Youtube link.
Autoplay	yes/no if true the video will start playing on step enter
Loop	yes/no whether the video automatically starts over when reaching the end

Document

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

Name	Description
Upload	The pdf to show
Page	the number of the page to show initially
Hide Controls	yes/no whether to show the zoom and paging controls

Webpage

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

Name	Description
URL	Fixed or Variable

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:

Name	Description
Fill Color	the color of the region representing the filled in value
Marker Color	the color of the triangular indicator of the current value
Required Range	the min and max of the end points

Interactive Table

Embeds an Interactive Table in the app. This widget can utilize any of the following as a data source:

Variable of type "Array of Objects"
Tulip Table
Table Query
User Fields (represented as "User Table" in the UI)

The widget imlplements Background Color, Font Size and:

Name	Description
Datasource	Choose either a variable of type "Array of Objects" or a Table
Table	Any Table in the account
Linked Placeholder	When a row is clicked, the linked placeholder will be updated to reference the row clicked
Columns	A list of fields to display
Filters	Users can define filters, using app variables or record placeholder fields, that control which rows will be displayed
Sort By	No value or select a field. If a user selects a field they can also pick sort direction
Select Button	Choose whether to display a circular icon that gives the user a visual cue to press the row in the Player
Rows Per Page	The number of rows of data that can be displayed at a time
Triggers	A list of triggers that will fire in order when a row is pressed

Triggers can be fired whenever an operator presses one of the rows within the Player.

Machine Attribute

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

Name	Description
Datasource	The source of the machine to display, either a static value, variable or Table Record.
Static Value / Variable / Table Record	The machine that will be displayed, depending on the Datasource that was selected.
Attribute	The attribute to display
Unit	A text string to represent the units for the data being displayed.
Chart	Toggle to show or hide a chart of the data within the widget. Only displayed for numeric attributes
Chart Height	Height of chart (in pixels)

Machine Status

Renders the most recent Machine State of a machine, the duration in that state and selected Machine Attributes in the app. Implements drop shadow and border radius for styling.

Name	Description
Datasource	The source of the machine to display, either a static value, variable or Table Record.
Static Value / Variable / Table Record	The machine that will be displayed, depending on the Datasource that was selected.
Machine Attributes	A list of Machine Attributes to display.
Machine Activity Fields	A list of Machine Activity columns to display.
Columns	The number of columns to use when displaying data
Display Size	(S / M / L) Options for the size of the text and header of the widget.
Triggers	The triggers that can be associated with the 'button press' event of the widget.
Show Header	Toggle to show or hide the header of the Widget

Machine Timeline

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

Name	Description
Datasource	The source of the machine to display, either a static value, variable or Table Record.
Static Value / Variable / Table Record	The machine that will be displayed, depending on the Datasource that was selected.
Time Range	The start and end times for the data displayed in the widget. User can pick from pre-defined options such as 'Today' or can set the start and end times as specific values.
Show Total Uptime	Toggle to show or hide the percentage a machine has been in 'uptime' for the duration displayed
Show Timeline Key	Toggle to show or hide the key/legend of the timeline.
Show Header	Toggle to show or hide the header, which includes the title and time range label.
Header	Controls to overwrite the default header title of the machine. Only shown when 'Show Header' is enabled.

Barcode

Allows the user to embed an image of a barcode in Code 128 format. This barcode can be scanned by an operator using a barcode scanner connected to the Tulip Player.

The barcode value can be determined during the runtime of the app.

Name	Description
Datasource	Allows the user to choose whether a static value, variable or table record will determine the value during runtime of the app in the Player

Step Timer

Allows the user to add a timer to the step that will reset either when the step is closed or when the app is completed or canceled.

Name	Description
Title	The words above the timer when embedded in the app
Timer Duration	The amount of time before the timer will be reset- either when the step is closed or when the app is closed
Target Time	The starting amount of time for the timer. Can be set by a static value, variable, table record field or App Info.
Warning At	When this amount of time is remaining, the operator should get a warning. Can be turned on or off
Overtime At	When this amount of time is showing, the operator is exceeding the recommended amount of time

Implements Text Color, Position, Size, Transform and Blink.

Tests

ID	Name
QA-T56	Variable Widget : 01 - Simple variables in canvas can be changed to compound variables
QA-T57	Variable Widget : 02 - Record View: Compound variables can be used with triggers
QA-T58	Variable Widget : 03 - Simple variables can have their size, color, and style options modified.
QA-T59	Variable widget : 04 - Compound variables can reorder, delete and restore feilds
QA-T60	Variable widget : 05 - Compound variables can have their size, color, and style options modified.
QA-T61	Variable widget : 06 - Magic variables can have their size, color, and style options modified.
QA-T62	Variable widget : 07 - Testing variables and compound variables in app
QA-T98	Record Placeholders : 04 - Load Table Records Trigger, and Table Record Widget
QA-T153	Form Widgets : 06 - Photo Widget
QA-T157	Input Widgets : 01 - Boolean widget
QA-T160	App Editor Misc - Verify Keyboard Shortcuts Work
QA-T208	Analytics - Analytics Widget
QA-T234	Variable Widget : 08 - Table Records Can be Styled
QA-T241	Embedded Tables : 01 - Embed a Tulip Table in an app
QA-T242	Embedded Tables : 02 - Sort an embedded table
QA-T243	Embedded Tables : 03 - Connect an embedded Tulip Table to a Table record
QA-T244	Embedded Tables : 04 - Filter an embedded table
QA-T245	Embedded Tables : 05 - Handle deleted fields in embedded tables
QA-T246	Embedded Tables : 06 - Handle a Tulip Table change in an embedded table
QA-T257	Machine Monitoring : 07 - Machine Widgets
QA-T280	Analytics - Analytics Widget Filtering
QA-T281	Analytics - Analytics Widget Filtering (Machine-based)
QA-T338	Widgets - Shapes Widget (and aesthetic changes)
QA-T339	Widgets - Text Widget
QA-T340	Widgets - Button Widget
QA-T341	Widgets - Image Widget
QA-T342	Widgets - Video Widget
QA-T343	Widgets - Document Widget
QA-T344	Widgets - Webpage Widget
QA-T348	Master Layout - Master Layout
QA-T351	App Editor Misc - Step Overload
QA-T477	Input Widgets : 02 - Text widget
QA-T478	Input Widgets : 03 - Number widget
QA-T479	Input Widgets : 04 - Single Select widget
QA-T480	Input Widgets : 05 - Multiselect widget
QA-T481	Input Widgets : 06 - Date picker widget
QA-T482	Input Widgets : 07 - Camera widget
QA-T483	Form Widgets : 01 - Boolean widget
QA-T485	Form Widgets : 02 - Dropdown widget
QA-T486	Form Widgets : 03 - Multiselect widget
QA-T487	Form Widgets : 04 - Text widget
QA-T488	Form Widgets : 05 - Number widget
QA-T491	Barcode Widget: 01 - Create a barcode via variable
QA-T492	Barcode Widget: 02 - Create a barcode via app info
QA-T494	Barcode Widget: 03 - Create a barcode via Tulip table record
QA-T495	Barcode Widget: 04 - Create a barcode via static value
QA-T512	Timer Widget : 01 - Default Configuration
QA-T513	Timer Widget : 02 - Target Time Configuration
QA-T514	Timer Widget : 03 - Target Time with Table Records and Static Values
QA-T517	Input Widgets : 08 - Linking Tulip Table Records
QA-T518	Widgets - Grid Widget
QA-T519	Widgets - Gauge Widget
QA-T538	Table App - Run the 'Table App' application

Requirements

ID	Requirement
67	Ability to build apps consisting of a number of pre-configured app components. ie for modularity and consistency
71	Tulip has to display the current equipment being utilized if applicable
77	Ability for content to display relevant process and production data as a metric. Ie. number, gauge, indicator etc.
80	Ability for content to display documents including PDFs, formatted text, spreadsheet, diagrams, etc.. Ie work instruction documentation, product specification
81	Ability to display rich media including Photo (JPG, BMP, PNG format), Video (MP4, MOV format)
82	Ability for apps to display complex graphical media with zoom/enlarge capability including PDF, JPEG, PNG, and VGS.
84	Ability for content to guide operator thru the execution of a process flow model
85	Tulip has the ability to upload photos and videos as part of execution.
86	Tulip has the ability to capture photos during execution.
87	Content screens can be populated to the extent possible based on context of entered data. Ie. text fields, drop downs for users to selection, etc.
90	Ability to configure job aids for assistance. e. click on "help" to get instructions or show how-to procedure
91	Ability for content to have text, drop down and check box fields for user input
94	Ability to view material dispatching lists in a content.
147	Ability to provide formatted textual work instructions
148	Ability to provide multi-media work instructions
150	Ability to define steps and procedural elements that are triggered by time-based events such as timers or date-time.
291	Provide sequence management of process steps so that Apps can get required information for execution of a specific process step
295	Verify that all required data has been entered and collected as prescribed by the step on completion. Disallow to progress on execution path if verification fails
345	Track current equipment current status and state transitions. State transitions including status before and after transition will be included in the equipment history logs.
462	Ability to view and display the material history record for a specific batch/lot and material

Widget