Skip to main content

Button Widget

A lightweight re-implementation of the classic ThingWorx Button widget with improved performance, additional bindings and styling options.

Usage

Can be used as a drop-in replacement for the classic ThingWorx Button widget. It has the same properties.

Properties

PropertyTypeBindingDefaultDescription
CustomClassSTRING<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space
TemplateLIST<Template1This will be the template used for the widget styling.
LabelSTRING(localized)<Text to be used for the button
DisabledBOOLEAN<falseDisables the button so it can't be clicked
DefaultConfirmationButtonSTRINGbutton1Sets the confirmation on the first or the second button.
ConfirmationButton1LabelSTRING(localized)YesMessage displayed on the first button when the ConfirmationRequired boolean property is checked.
ConfirmationButton2LabelSTRING(localized)NoMessage displayed on the second button when the ConfirmationRequired boolean property is checked.
ConfirmationIsModalBOOLEANfalseChanges the confirmation popover into a modal popup
ConfirmationPromptSTRING(localized)Do Action?Message prompted when the ConfirmationRequired boolean property is checked.
ConfirmationTitleSTRING(localized)Confirm Action?Title of the Confirmation Window that gets triggered when selecting ConfirmationRequired button.
ConfirmationRequiredBOOLEANfalseEnables the button to have a confirmation popup before executing the Click event
TooltipSTRING(localized)<Optional tooltip used to display additional information. See Tooltip
TooltipAnchorSTRINGWidgetIf the tooltip should appear next to the Widget, or next to the cursor.
TooltipFormatSTRING(localized)<see Format Complex
TooltipTypeLIST<TextThe widget tooltip type
TooltipMashupMASHUPNAME<Mashup to be used as a tooltip when TooltipType is set as Mashup
TooltipWidthNUMBERWidth of the tooltip. It won't be bigger than the Max-width set in the GlobalStyles for the Tooltip
TooltipHeightNUMBERHeight of the tooltip. Can only be set if TooltipType is set as HTML, Markdown or Mashup
TabSequenceINTEGER0Specifies the tab order of an element (when the tab button is used for navigating)
ShowLoadingBOOLEANfalseEnable to show a visual indicator that an action was triggered by this button and show when it finished
IsLoadingBOOLEAN>falseTrue if the button is currently in the loading state.
LoadingTextSTRING(localized)<Loading...Text shown on the button from when it is clicked, until the ActionDone is triggered
SuccessTextSTRING(localized)<Success!Text to show while button is in the "success" state.
FailedTextSTRING(localized)<Failed!Text to be displayed while button is in the "failed" state.
DoneTimeoutINTEGER2000Time in milliseconds from when the ActionDone was triggered and button returning to its default state
AutomaticServiceLoadingIndicatorBOOLEANfalseAutomatically update the button loading state based on the status of the service it's bound to.
IconURISTRING<URI describing the icon. Either a HTTP link or a reference to an icon in an icon font can be used.
IconPositionLISTConfigurator SetSet icon position for individual widgets (overrides configurator settings).
SuccessIconURISTRING<material-outlined:check_circleSuccess state icon URI.
FailedIconURISTRING<material-outlined:errorFailed state icon URI.

Services

PropertyTypeBindingDescription
ActionSucceededSERVICE<Used to transition the button from the "loading" to the "Succeeded" state.
ActionFailedSERVICE<Used to transition the button from the "loading" to the "Failed" state.
ActionStartedSERVICE<Used to transition the button into the "loading" state.
PerformClickSERVICE<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

PropertyTypeBindingDescription
ClickedEVENT>Triggers an event when the button is clicked.
ActionDidSucceedEVENT>Triggers an event when action succeeds.
ActionDidFailEVENT>Triggers an event when action fails.
ConfirmationDeclinedEVENT>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

Confirmation popover Confirmation modal