specs/models/M_APP_VER_STEP_REG_WIDGET

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

NameDescription
Positionthe x and y coordinates of the top left of the widget on the step
Sizethe width and height of the widget
Transformthe rotation of the widget (0 - 360)
Blinkyes/no if enabled the widget will slowly fade in and out

Common fields on many widget types

NameDescription
Font Sizethe size of the font (in pixel values)
Font ColorAn RGB or RGBA value
Font Styleyes/no values for bolding, italic and underline
Text Alignone of left, center, or right
Vertical Alignone of top, center or bottom
BackgroundAn RGB or RGBA value
Drop Shadowyes/no if dropshadow is enabled it can be specified by its color, x offset, y offset, and blur offset
Label TextThe text for a label that corresponds to a value
Label SizeThe font size for a label that corresponds to a value
Label ColorThe font color for a label that corresponds to a value
Value SizeThe font size for a value
Value ColorThe font color for a value
Border ColorThe color of the widget border
Border WidthThe width of the border
Border RadiusEither 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, Fill, and Drop Shadow as described above.

Text

Used for showing formatted static text information. The Font Color and Font Style of specific words/letters be customized seperately by first highlighting desired text portions. Implements Font Size, Font Color, Font Style, Text Align, Vertical Align, Background, Drop Shadow and:

NameDescription
TextThe 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 output 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:

NameDescription
FieldsThe fields of the object to display. The displayed label for each field can be changed by adding a custom label by clicking on the label icon on the right of the field name.
ColumnsWhether 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:

NameDescription
FieldsThe fields of the object to display. The displayed label for each field can be changed by adding a custom label by clicking on the label icon on the right of the field name.
Fit to widthyes/no whether the table should resize its columns to fit the alloted width

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.

The displayed label for each field can be changed by adding a custom label by clicking on the label icon on the right of the field name.

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 Width, Border Color, Border Radius and:

NameDescription
TextThe label of the button
TriggersAny number of triggers to fire when the button is clicked.
IconAdd, change, or remove an icon from the button
Icon AlignChoose icon position relative to button text

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 override 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:

NameDescription
DatasourceThe 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
FieldThe field from the record placeholder that is bound to the input widget (optional)

Inputs may also support Triggers; logic that can be run from events generated by the widget. See details below for supported events.

Checkbox

Used for editing boolean variables.

NameDescription
Display StyleCheckbox or Toggle
ColorIn checkbox mode this controls the color of the check mark, in toggle it controls the color of the toggle when set to true.
TriggersInput Changes: when the value of the input is changed.

Text

Used for editing text data sources. Implements Font Size, Font Color, Background Color, Border Color, Border Width, Label Text, Label Size, Label Color and:

NameDescription
Multiple LinesWhether the text displayed should respect multiline formatting.
TriggersEnter Press: when the 'Enter' key is pressed on the keyboard. Only applicable when the input widget is selected.

Number

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

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, Label Text, Label Size, Label Color and:

NameDescription
DisplayDropdown or Menu -- Whether to render a selectable dropdown that shows the options when clicked, or show the options in a visible menu
OptionsThe 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. 'Unique Values' Table Aggregations can also be used.
TriggersInput Changes: when the value of the input is changed.

Multiselect

Used for 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.

NameDescription
DisplayDropdown or Menu -- Whether to render a selectable dropdown that shows the options when clicked, or show the options in a visible menu
OptionsThe 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. 'Unique Values' Table Aggregations can also be used.
TriggersInput Changes: when the value of the input is changed.

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, Border Width, Label Text, Label Size, and Label Color.

NameDescription
TriggersInput Changes: when the value of the input is changed.

Image

Used for capturing or uploading an image. Input Options can be set to allow capture, upload or both. User can choose predetermined or custom aspect ratios.

NameDescription
TriggersInput Changes: when the value of the input is changed.

Signature

Used to create compliant Signed Electronic Records (SER) from an app. Implements Font Size, and:

NameDescription
Data to signSelect one or multiple Variables
Table Records to SignSelect one or multiple Table Record Placeholders and Fields within
SigneeAny Operator, Operator executing app, Any operator besides app executor, Specify list of allowed users
Signature MeaningText specifying how the data relates to the person signing
Comment mandatoryRequire a comment in order to sign
TriggersSignature is Completed: when the signature is completed

File

Upload files from the local file system for use in Tulip Apps and Tables.

NameDescription
Label TextText to show as a label on the widget

Analysis

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

NameDescription
AnalysisSelect, change and edit the analysis shown in the widget
BackgroundThe background color
TitleDefault, Custom or None
Show "Last Updated"yes/no whether to show the last updated information on the analysis widget
FiltersThis 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:

NameDescription
UploadThe image to show. App authors add from their local machine.
Respect aspect ratioIf 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 actionNone, 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:

NameDescription
UploadThe video to show. App authors add from their local machine or specify a Youtube link.
Autoplayyes/no if true the video will start playing on step enter
Loopyes/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:

NameDescription
UploadThe pdf to show
Pagethe number of the page to show initially
Hide Controlsyes/no whether to show the zoom and paging controls

CAD

Embeds an STL 3D model viewer. This widget implements Background Color and:

NameDescription
DatasourceThe source of the STL file to display, either a static value or variable.
Model ColorThe color of the 3D model.

Webpage

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

NameDescription
URLFixed 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:

NameDescription
Fill Colorthe color of the region representing the filled in value
Marker Colorthe color of the triangular indicator of the current value
Required Rangethe 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 implements Background Color, Font Size and:

NameDescription
Data SourceChoose either a variable of type "Array of Objects" or a Table
TableAny Table in the account
Linked PlaceholderWhen a row is clicked, the linked placeholder will be updated to reference the row clicked
ColumnsA list of fields to display. Fields from linked Tables will appear as well (for one-to-one or many-to-one links). The displayed label for each field can be changed by adding a custom label by clicking on the label icon on the right of the field name.
FiltersUsers can define filters, using app variables or record placeholder fields, that control which rows will be displayed
Sort ByChoose one or more fields to sort by; sorting will be applied in the order added. Sort direction can be set for all fields.
Select ButtonChoose whether to display a circular icon that gives the user a visual cue to press the row in the Player
Rows Per PageThe number of rows of data that can be displayed at a time
TriggersA list of triggers that will fire in order when a row is pressed
Text WrappingTable will wrap text in each field when toggled on
Row IndexAn auto generated index will be shown as the first column in the widget when toggled on
Enable Export to CSVDisplay a button on the table widget that allows users to export all data that is accessible from the widget. This includes data that is on pages/tabs that may not be currently visible. Accessible data is defined by the data source of the widget.

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.

NameDescription
DatasourceThe source of the machine to display, either a static value, variable or Table Record.
Static Value / Variable / Table RecordThe machine that will be displayed, depending on the Datasource that was selected.
AttributeThe attribute to display
UnitA text string to represent the units for the data being displayed.
ChartToggle to show or hide a chart of the data within the widget. Only displayed for numeric attributes
Chart HeightHeight 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.

NameDescription
DatasourceThe source of the machine to display, either a static value, variable or Table Record.
Static Value / Variable / Table RecordThe machine that will be displayed, depending on the Datasource that was selected.
Machine AttributesA list of Machine Attributes to display.
Machine Activity FieldsA list of Machine Activity columns to display.
ColumnsThe 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.
TriggersThe triggers that can be associated with the 'button press' event of the widget.
Show HeaderToggle 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.

NameDescription
DatasourceThe source of the machine to display, either a static value, variable or Table Record.
Static Value / Variable / Table RecordThe machine that will be displayed, depending on the Datasource that was selected.
Time RangeThe 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 UptimeToggle to show or hide the percentage a machine has been in 'uptime' for the duration displayed
Show Timeline LegendToggle to show or hide the legend of the timeline.
Show HeaderToggle to show or hide the header, which includes the title and time range label.
HeaderControls 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 a number of formats.

  • CODE 128
  • CODE 39
  • EAN-13
  • EAN-8
  • ECC 200
  • ITF
  • PDF 417
  • QR Code

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

NameDescription
DatasourceAllows the user to choose whether app info, static value, table record, or variable 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.

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

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

Tests

IDName
QA-T56Variable Widget : 01 - Simple variables in canvas can be changed to compound variables
QA-T57Variable Widget : 02 - Record View: Compound variables can be used with triggers
QA-T58Variable Widget : 03 - Simple variables can have their size, color, and style options modified.
QA-T59Variable widget : 04 - Compound variables can reorder, delete and restore fields
QA-T60Variable widget : 05 - Compound variables can have their size, color, and style options modified.
QA-T61Variable widget : 06 - Magic variables can have their size, color, and style options modified.
QA-T62Variable widget : 07 - Testing variables and compound variables in app
QA-T98Record Placeholders : 04 - Load Table Records Trigger, and Table Record Widget
QA-T153Form Widgets : 06 - Photo Widget
QA-T157Input Widgets : 01 - Boolean widget
QA-T160App Editor Misc - Verify Keyboard Shortcuts Work
QA-T208Analytics - Analytics Widget
QA-T234Variable Widget : 08 - Table Records Can be Styled
QA-T241Embedded Tables : 01 - Embed a Tulip Table in an app
QA-T242Embedded Tables : 02 - Sort an embedded table
QA-T243Embedded Tables : 03 - Connect an embedded Tulip Table to a Table record
QA-T244Embedded Tables : 04 - Filter an embedded table
QA-T245Embedded Tables : 05 - Handle deleted fields in embedded tables
QA-T246Embedded Tables : 06 - Handle a Tulip Table change in an embedded table
QA-T257Machine Monitoring : 07 - Machine Widgets
QA-T280Analytics - Analytics Widget Filtering
QA-T281Analytics - Analytics Widget Filtering (Machine-based)
QA-T305Configuration and Apps : 05A - Apps can use Vision Cameras and Regions
QA-T338Widgets - Shapes Widget (and aesthetic changes)
QA-T339Widgets - Text Widget
QA-T340Widgets - Button Widget
QA-T341Widgets - Image Widget
QA-T342Widgets - Video Widget
QA-T343Widgets - Document Widget
QA-T344Widgets - Webpage Widget
QA-T348Base Layout - Base Layout
QA-T351App Editor Misc - Step Overload
QA-T394Configuration and Apps : 06 - Test Snapshot Feature with regions
QA-T404Configuration and Apps : 12 - Test Jig Enter/Exit region and Appear/Disappear events
QA-T477Input Widgets : 02 - Text widget
QA-T478Input Widgets : 03 - Number widget
QA-T479Input Widgets : 04 - Single Select widget
QA-T480Input Widgets : 05 - Multiselect widget
QA-T481Input Widgets : 06 - Date picker widget
QA-T482Input Widgets : 07 - Image widget
QA-T483Form Widgets : 01 - Boolean widget
QA-T485Form Widgets : 02 - Dropdown widget
QA-T486Form Widgets : 03 - Multiselect widget
QA-T487Form Widgets : 04 - Text widget
QA-T488Form Widgets : 05 - Number widget
QA-T491Barcode Widget: 01 - Create a barcode via variable
QA-T492Barcode Widget: 02 - Create a barcode via app info
QA-T494Barcode Widget: 03 - Create a barcode via Tulip table record
QA-T495Barcode Widget: 04 - Create a barcode via static value
QA-T512Timer Widget : 01 - Default Configuration
QA-T513Timer Widget : 02 - Target Time Configuration
QA-T514Timer Widget : 03 - Target Time with Table Records and Static Values
QA-T517Input Widgets : 08 - Linking Tulip Table Records
QA-T518Widgets - Grid Widget
QA-T519Widgets - Gauge Widget
QA-T538Table App - Run the 'Table App' application
QA-T586Barcode Widget: 05 - QR Code Configuration
QA-T596Widgets - Record History Widget
QA-T712Embedded Tables : 07 - Pagination in an embedded table
QA-T763Signature Widget : 01 - Signature widget configuration
QA-T791Widgets - 12: Widget Shift+Drag and Option+Drag Modifications
QA-T813Step Tab - Widget Manipulation
QA-T827Signature Widget : 02 - Signee options and variables
QA-T828Signature Widget : 02 / Signee options and mandatory features
QA-T829Signature Widget : 03 - Signing in LDAP, SAML
QA-T830Signature Widget : 03 / Denied signing in LDAP, SAML
QA-T839Input Widgets : 09 - Input Widget Labels
QA-T841Embedded Tables : 08 - Displaying variable data source
QA-T882Rendering specific Files format - PDF.
QA-T883Rendering specific Files format - Images.
QA-T884Rendering specific Files format - Video.
QA-T885Rendering specific Files format - STL
QA-T923Embedded Tables : 03 / Only matching record placeholders can be selected
QA-T938App Export/Import : 02 - Widgets are Imported and Function
QA-T939App Export/Import : 03 - Embedded Widgets are Imported and Function
QA-T1211Analytics - Analytics Widget Font customization
QA-T1284Input Validation - Number Input Widget Configuration
QA-T1294Input Validation - Text Input Widget Configuration
QA-T1295Input Validation - Number Input Widget Run in Player
QA-T1311Number input widgets for different language locales
QA-T1312Input Validation - Single Select Input Widget Configuration
QA-T1313Input Validation - Multiselect Input Widget Configuration
QA-T1314Input Validation - Checkbox Input Widget Configuration
QA-T1315Input Validation - Signature Input Widget Configuration
QA-T1318Input Validation - Image Input Widget Configuration
QA-T1319Input Validation - File Input Widget Configuration
QA-T1321Input Validation - Date Picker Input Widget Configuration
QA-T1325Input Validation - Checkbox Input Widget Run in Player
QA-T1326Input Validation - Signature Input Widget Run in Player
QA-T1329Input Validation - Single Select Input Widget Run in Player
QA-T1330Input Validation - Multiselect Input Widget Run in Player
QA-T1331Input Validation - Date Picker Input Widget Run in Player
QA-T1333Input Validation - Image Input Widget Run in Player
QA-T1335Input Validation - File Input Widget Run in Player
QA-T1336Single / mutli select input widget overflow behavior
QA-T1341Input Validation - Trigger
QA-T1342Enabled State - Button - Static value and variable
QA-T1343Enabled State - Signature - Static value and variable
QA-T1344Enabled State - Button - Input validity
QA-T1345Enabled State - Button - Expression
QA-T1346Enabled State - Signature - Input validity
QA-T1347Enabled State - Signature - Expression

Requirements

IDRequirement
PLAT-8869 (856)Continuous signing sessions require two signature components for first signing but only one (secret) component for subsequent signings.
PLAT-8891 (816)The manifestation of an electronic signature should contain the user's full name, date & time, meaning of signature human readable format; the record itself should contain these elements.
PLAT-8893 (815)Provide an unalterable and enduring link between records and their associated electronic signatures; they cannot be removed, changed, copied, transferred or deleted.
PLAT-8902 (817)Ability to require multiple electronic signatures for a record. Ie co-signer, verifier, etc.
PLAT-8904 (820)Electronic signatures have to be secured and not allowed to be falsified. They can only be used by their genuine owners.
PLAT-8905 (819)All electronic signatures have authenticate the signatoree by two distinct elements (e.g. username and password; at least one being a private element), or a secure unambiguous biometrics system that cannot be used by anyone other than their genuine owner.
PLAT-8906 (818)If more than one signature is required the electronic signature shall capture the role of each signatoree. Eg. trainer, verifier, co-signer, etc.