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
CancelConfirmationButtonSTRINGbutton2Allows the user to cancel the confirmation either for first or second button
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.
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 describe what the widget does
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.
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.