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
| 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 |
Common fields on many widget types
| 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 Text | The text for a label that corresponds to a value |
| 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, 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:
| 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 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:
| Name | Description |
|---|---|
| Fields | The 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. |
| 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. 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 width | yes/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:
| Name | Description |
|---|---|
| Text | The label of the button |
| Triggers | Any number of triggers to fire when the button is clicked. |
| Icon | Add, change, or remove an icon from the button |
| Icon Align | Choose 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:
| 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 |
| Field | The 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.
| Name | Description |
|---|---|
| Display Style | Checkbox or Toggle |
| Color | In checkbox mode this controls the color of the check mark, in toggle it controls the color of the toggle when set to true. |
| Triggers | Input 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:
| Name | Description |
|---|---|
| Multiple Lines | Whether the text displayed should respect multiline formatting. |
| Triggers | Enter 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:
| Name | Description |
|---|---|
| Display | 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. 'Unique Values' Table Aggregations can also be used. |
| Triggers | Input 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.
| Name | Description |
|---|---|
| Display | 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. 'Unique Values' Table Aggregations can also be used. |
| Triggers | Input 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.
| Name | Description |
|---|---|
| Triggers | Input 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.
| Name | Description |
|---|---|
| Triggers | Input 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:
| Name | Description |
|---|---|
| Data to sign | Select one or multiple Variables |
| Table Records to Sign | Select one or multiple Table Record Placeholders and Fields within |
| Signee | Any Operator, Operator executing app, Any operator besides app executor, Specify list of allowed users |
| Signature Meaning | Text specifying how the data relates to the person signing |
| Comment mandatory | Require a comment in order to sign |
| Triggers | Signature is Completed: when the signature is completed |
File
Upload files from the local file system for use in Tulip Apps and Tables.
| Name | Description |
|---|---|
| Label Text | Text to show as a label on the widget |
Analysis
Analyses can be embedded in apps, and offer more customization options than on a dashboard:
| Name | Description |
|---|---|
| Analysis | Select, change and edit the analysis shown in the widget |
| 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 action | 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 |
CAD
Embeds an STL 3D model viewer. This widget implements Background Color and:
| Name | Description |
|---|---|
| Datasource | The source of the STL file to display, either a static value or variable. |
| Model Color | The color of the 3D model. |
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 implements Background Color, Font Size and:
| Name | Description |
|---|---|
| Data Source | 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. 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. |
| Filters | Users can define filters, using app variables or record placeholder fields, that control which rows will be displayed |
| Sort By | Choose one or more fields to sort by; sorting will be applied in the order added. Sort direction can be set for all fields. |
| 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 |
| Text Wrapping | Table will wrap text in each field when toggled on |
| Row Index | An auto generated index will be shown as the first column in the widget when toggled on |
| Enable Export to CSV | Display 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.
| 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 Legend | Toggle to show or hide the 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 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.
| Name | Description |
|---|---|
| Datasource | Allows 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.
| 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 fields |
| 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-T305 | Configuration and Apps : 05 - Apps can use Vision Cameras and Regions |
| QA-T309 | Configuration and Apps : 08 - Video preview does not get shown in the Station's page "Live Preview" |
| QA-T338 | Widgets - Shapes Widget (and aesthetic changes) |
| QA-T339 | Widgets - Text Widget |
| QA-T340 | Widgets - Button Widget |
| QA-T341 | Widgets - Image Widget |
| QA-T343 | Widgets - Document Widget |
| QA-T344 | Widgets - Webpage Widget |
| QA-T348 | Base Layout - Base Layout |
| QA-T351 | App Editor Misc - Step Overload |
| QA-T394 | Configuration and Apps : 06 - Test Snapshot Feature with regions |
| QA-T404 | Configuration and Apps : 12 - Test Jig Enter/Exit region and Appear/Disappear events |
| 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 - Image 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 |
| QA-T586 | Barcode Widget: 05 - QR Code Configuration |
| QA-T712 | Embedded Tables : 07 - Pagination in an embedded table |
| QA-T763 | Signature Widget : 01 - Signature widget configuration |
| QA-T813 | Step Tab - Widget Manipulation |
| QA-T827 | Signature Widget : 02 - Signee options and variables |
| QA-T828 | Signature Widget : 02 / Signee options and mandatory features |
| QA-T829 | Signature Widget : 03 - Signing in LDAP, SAML |
| QA-T830 | Signature Widget : 03 / Denied signing in LDAP, SAML |
| QA-T839 | Input Widgets : 09 - Input Widget Labels |
| QA-T841 | Embedded Tables : 08 - Displaying variable data source |
| QA-T923 | Embedded Tables : 03 / Only matching record placeholders can be selected |
| QA-T938 | App Export/Import : 02 - Widgets are Imported and Function |
| QA-T939 | App Export/Import : 03 - Embedded Widgets are Imported and Function |
| QA-T962 | Analytics - Analytics Widget (cloned) |
| QA-T963 | Analytics - Analytics Widget Filtering (Machine-based) (cloned) |
| QA-T971 | Analytics - Analytics Widget Filtering (cloned) |
Requirements
| ID | Requirement |
|---|---|
| PLAT-8738 (291) | Provide sequence management of process steps so that Apps can get required information for execution of a specific process step |
| PLAT-8741 (462) | Ability to view and display the material history record for a specific batch/lot and material |
| PLAT-8743 (296) | Prompt for, verify and capture an e-signature as part of a step execution if an e-signature is required in the step's configuration |
| PLAT-8745 (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 |
| PLAT-8747 (302) | Ability to re-execute process step with override of constraints of the process step configuration in the Master Recipe or material workflow. In such a case an extra e-signature can be required. |
| PLAT-8752 (298) | Require e-signature for exception of specific configured risk categories. Ie for high severity or high risk exception require the capture of an e-signature in the history record |
| PLAT-8754 (358) | Provide configurable way to review exceptions |
| PLAT-8804 (150) | Ability to define steps and procedural elements that are triggered by time-based events such as timers or date-time. |
| PLAT-8806 (148) | Ability to provide multi-media work instructions |
| PLAT-8808 (147) | Ability to provide formatted textual work instructions |
| PLAT-8817 (151) | Ability to configure allowed overrides for steps and procedural elements. An override can be allowed for out of spec conditions and can require additional approval using e-signature |
| PLAT-8869 (856) | Continuous signing sessions require two signature components for first signing but only one (secret) component for subsequent signings |
| PLAT-8886 (94) | Ability to view material dispatching lists in a content. |
| 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-8896 (809) | All records and electronic signatures have to include an accurate date and time stamp. Date & time stamps shall be configurable with the possibility to include the day, month, year, hour, minutes, seconds and time zone. |
| PLAT-8902 (817) | Ability to require multiple electronic signatures for a record. Ie co-signer, verifier, etc. |
| PLAT-8903 (821) | Ability to define access security levels for records and electronic signatures. Ie. user groups and user roles and their associated priveleges to system resources and data |
| 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. |
| PLAT-8921 (330) | Ability to automatically or manually log an exception when data is not within configured limits and tolerances. Disallow process completion until exceptions have been logged with configured e-signatures and any authorized overrides have been processed |
| PLAT-8926 (91) | Ability for content to have text, drop down and check box fields for user input |
| PLAT-8929 (90) | Ability to configure job aids for assistance. e. click on "help" to get instructions or show how-to procedure |
| PLAT-8931 (19) | Provide the ability to configure an e-signature requirement for any master data definition or model's status transition in the approval workflow |
| PLAT-8932 (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. |
| PLAT-8942 (71) | Tulip has to display the current equipment being utilized if applicable |
| PLAT-8952 (86) | Tulip has the ability to capture photos during execution. |
| PLAT-8956 (85) | Tulip has the ability to upload photos and videos as part of execution. |
| PLAT-8958 (77) | Ability for content to display relevant process and production data as a metric. Ie. number, gauge, indicator etc. |
| PLAT-8962 (67) | Ability to build apps consisting of a number of pre-configured app components. ie for modularity and consistency |
| PLAT-8970 (84) | Ability for content to guide operator thru the execution of a process flow model |
| PLAT-8972 (83) | Ability to configure signature to complete a process step. |
| PLAT-8975 (82) | Ability for apps to display complex graphical media with zoom/enlarge capability including PDF, JPEG, PNG, and VGS. |
| PLAT-8977 (81) | Ability to display rich media including Photo (JPG, BMP, PNG format), Video (MP4, MOV format) |
| PLAT-8982 (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. |
| PLAT-8985 (80) | Ability for content to display documents including PDFs, formatted text, spreadsheet, diagrams, etc.. Ie work instruction documentation, product specification |