Button Widget
A lightweight re-implementation of the classic ThingWorx Button widget with improved performance, additional bindings and styling options.
Examples
Usage
Can be used as a drop-in replacement for the classic ThingWorx Button widget. It has the same properties.
Properties
| Property | Type | Binding | Default | Description |
|---|---|---|---|---|
| CustomClass | STRING | <> | Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space | |
| Template | LIST | < | Template1 | This will be the template used for the widget styling. |
| Label | STRING(localized) | < | Text to be used for the button | |
| Disabled | BOOLEAN | < | false | Disables the button so it can't be clicked |
| DefaultConfirmationButton | STRING | button1 | Sets the confirmation on the first or the second button. | |
| ConfirmationButton1Label | STRING(localized) | Yes | Message displayed on the first button when the ConfirmationRequired boolean property is checked. | |
| ConfirmationButton2Label | STRING(localized) | No | Message displayed on the second button when the ConfirmationRequired boolean property is checked. | |
| ConfirmationIsModal | BOOLEAN | false | Changes the confirmation popover into a modal popup | |
| ConfirmationPrompt | STRING(localized) | Do Action? | Message prompted when the ConfirmationRequired boolean property is checked. | |
| ConfirmationTitle | STRING(localized) | Confirm Action? | Title of the Confirmation Window that gets triggered when selecting ConfirmationRequired button. | |
| ConfirmationRequired | BOOLEAN | false | Enables the button to have a confirmation popup before executing the Click event | |
| Tooltip | STRING(localized) | < | Optional tooltip used to display additional information. See Tooltip | |
| TooltipAnchor | STRING | Widget | If the tooltip should appear next to the Widget, or next to the cursor. | |
| TooltipFormat | STRING(localized) | < | see Format Complex | |
| TooltipType | LIST | < | Text | The widget tooltip type |
| TooltipMashup | MASHUPNAME | < | Mashup to be used as a tooltip when TooltipType is set as Mashup | |
| TooltipWidth | NUMBER | Width of the tooltip. It won't be bigger than the Max-width set in the GlobalStyles for the Tooltip | ||
| TooltipHeight | NUMBER | Height of the tooltip. Can only be set if TooltipType is set as HTML, Markdown or Mashup | ||
| TabSequence | INTEGER | 0 | Specifies the tab order of an element (when the tab button is used for navigating) | |
| ShowLoading | BOOLEAN | false | Enable to show a visual indicator that an action was triggered by this button and show when it finished | |
| IsLoading | BOOLEAN | > | false | True if the button is currently in the loading state. |
| LoadingText | STRING(localized) | < | Loading... | Text shown on the button from when it is clicked, until the ActionDone is triggered |
| SuccessText | STRING(localized) | < | Success! | Text to show while button is in the "success" state. |
| FailedText | STRING(localized) | < | Failed! | Text to be displayed while button is in the "failed" state. |
| DoneTimeout | INTEGER | 2000 | Time in milliseconds from when the ActionDone was triggered and button returning to its default state | |
| AutomaticServiceLoadingIndicator | BOOLEAN | false | Automatically update the button loading state based on the status of the service it's bound to. | |
| IconURI | STRING | < | URI describing the icon. Either a HTTP link or a reference to an icon in an icon font can be used. | |
| IconPosition | LIST | Configurator Set | Set icon position for individual widgets (overrides configurator settings). | |
| SuccessIconURI | STRING | < | material-outlined:check_circle | Success state icon URI. |
| FailedIconURI | STRING | < | material-outlined:error | Failed state icon URI. |
Services
| Property | Type | Binding | Description |
|---|---|---|---|
| ActionSucceeded | SERVICE | < | Used to transition the button from the "loading" to the "Succeeded" state. |
| ActionFailed | SERVICE | < | Used to transition the button from the "loading" to the "Failed" state. |
| ActionStarted | SERVICE | < | Used to transition the button into the "loading" state. |
| PerformClick | SERVICE | < | Used to trigger the button "Clicked" event externally, can be used to replicate the button behavior. This sets the button into "loading" state, and if "AutomaticServiceLoadingIndicator" is false, it will remain indefinitely until ActionSucceeded or ActionFailed is triggered. |
Events
| Property | Type | Binding | Description |
|---|---|---|---|
| Clicked | EVENT | > | Triggers an event when the button is clicked. |
| ActionDidSucceed | EVENT | > | Triggers an event when action succeeds. |
| ActionDidFail | EVENT | > | Triggers an event when action fails. |
| ConfirmationDeclined | EVENT | > | Triggers when the user declines in the confirmation dialog |
Confirmation
Confirmation on the button is by default as a Popover and can be changed to a modal popup from the ConfirmationIsModal property. Styling of the confirmation dialogue can be done on each template within the Configurator. The reason as to why this is not a global styling UI element is that it can be a Danger confirmation or a normal confirmation.
The default position of the popover will be the same as the tooltip from Global Styling and it will move automatically to another available position if it can't fit.
For example:
- when saving some information from a PrimaryButton the end-user will expect the same color button to go through the confirmation dialogue flow.
- when deleting something by clicking a red delete button and you want the user to confirm the deletion, the user should be prompted with a Yes/Delete red button as the confirmation button.
Popover or modal popup
