Perspective - One-Shot Button

Component Palette Icon:

Description

The One-Shot Button is designed to send off a write request, and wait for a response, disabling the button until something resets the 'value' property on the component.

When the 'value' property and the 'setValue' property are equal, the component transitions to the writing state. Once 'value' and 'setValue' are no longer equal, the button returns to the ready state.

The One-Shot Button has three pre-configured variants:

• Primary - Default design of the button.
• Secondary - A secondary design for the button.
• Require Confirm - Default design of the button but requires confirmation from user before action is submitted.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Name	Description	Property Type
value	The current value displayed on the component. Should be bound bi-directionally to a tag. Default is 0.	value:  numeric, boolean, string, or null.
setValue	The value to set when the button is pushed. Default is 1.	value:  numeric, boolean, string, or null.
primary	Toggle between the default primary and secondary button style. Default is true.	value: boolean
enabled	Whether the user can interact with the One-Shot Button. If disabled, the component cannot be used. Default is true.	value: boolean
readyState	Displays the readyState value on the component. text: The text of the button while its value is not being written. Value is string. style: Modify readyState style using the style properties. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. icon: The Icon is an image path used to augment the readyState of the component by placing an image next to it. path: Shorthand path to icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see https://fonts.google.com/icons?selected=Material+Icons. Value is string. color: Color of the icon. Can also assign color in "fill" of the style property. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. style: Modify the readyState style using the style properties. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
writingState	Displays the writingState value on the component. text: The text of the button while its value is being written. Value is string. style: Modify readyState style using the style properties. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. icon: The Icon is an image path used to augment the readyState of the component by placing an image next to it. path: Shorthand path to icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see https://fonts.google.com/icons?selected=Material+Icons. Value is string. color: Color of the icon. Can also assign color in "fill" of the style property. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. style: Modify the readyState style using the style properties. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
confirm	If enabled, a message that asks the user to approve the requested operation. If the user doesn't confirm, then the value property will not update.  Note: When configuring a script on this component while confirm is enabled, it is generally recommend that the script is placed on the onActionPerformed component event, since that event will wait for user confirmation.    enabled: If true, a confirmation box will be shown. Default is false. Value is boolean. text: Message to show user if confirmation is enabled. Default is "Are you sure?". Value is string.	object
style	Sets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
disabledStyle	Sets a style for this component when it is disabled. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object

note

If you are using both the style and disabledStyle properties, keep in mind that CSS dictates that style classes will be rendered in alphabetical order. In other words, specific elements of a style class will be overwritten if a later style class modifies the same element.

Component Scripts and Events

Further component interaction and functionality can be configured for all components through scripting and event actions. Right-click on the component or select Components from the Designer menubar to access the configuration popups for both of these options:

• Configure Events: Accesses the Event Configuration popup where you can configure actions to run in response to events to make the component dynamic. The Events Configurations page shows how to configure events and actions on a Perspective component.

• Configure Scripts: Accesses the Script Configuration popup where custom methods and message handlers can be added. The Scripting in Perspective section details scripting fundamentals, creating custom methods, and using message handlers.

Example

Property	Value	Style Category
props.readyState.text	Start Process	N/A
props.readyState.icon.path	material/trending_flat	N/A
props.readyState.icon.color	#008000	N/A
props.writingState.text	Starting	N/A
props.writingState.style.backgroundColor	#8AFF8A	background