Perspective - Numeric Entry Field

Component Palette Icon:

Description

The Numeric Entry Field is similar to the standard Text Field, except that it is specialized for use with numbers. When the 'enabled' property is set to true, it allows users to alter the value on the component. There are three different modes for how users can edit the value in the component: direct, protected or by clicking an edit button. To change the value, click once in the field for 'direct' mode, double click for 'protected' mode, and click on the Edit icon for the 'button' mode. When done, press enter or leave the field, and the field becomes editable again. When the 'enabled' property is false, the field is not editable even when it receives input focus.

New in 8.1.2

The Numeric Entry Field component has three pre-configured variants:

• Direct - Default design of the field.
• Protect - Requires a double-click or long-press to enter edit mode.
• Button - Clicking the button brings up a popup window, allowing the user to edit the value from the popup, or cancel the edit.

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	Value as number or numeric string to display.	value: numeric
format	The formatting string to be applied to the input value. Options are currency, number, integer, four decimal precision, percent, scientific, accounting, financial, currency, currency (rounded), duration, abbreviation, or ordinal. A list of format specifiers can be found at http://numeraljs.com/#format. New in 8.1.2 The Numeric Entry Field supports locale-specific formatting, allowing changes to the session's locale to update how numbers are formatted on the Numeric Entry Field. Note that the localization conversion occurs automatically after the initial format specifiers are applied.	value: string
mode	Determines how users will edit the value in the component. The following modes are available: Direct: Requires no special action to enter edit mode simply click in the field. Protected: Requires a double-click or long-press to enter edit mode. Button: Places an Edit  icon next to the Numeric Entry Field. Clicking the button brings up a popup window, allowing the user to edit the value from the popup, or cancel the edit. The value in the component may only be edited via the popup.	value: string
align	Aligns the input value right or left.	value: boolean
inputBounds	Max and min bounds configuration. maximum The max allowable value. Value is numeric. minimum: The min allowable value. Value is numeric. invalidStyle: Sets an invalid style when the min or max values are out of bounds for this component. Modify the invalidStyle 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
placeholder	Text to be displayed when value is empty.	value: string
spinner	New in 8.1.2 Optional spinner configuration. enabled: If enabled, a spinner will appear when the field is selected by the user. Value is boolean. increment: The increment the spinner uses to increase or decrease the value. Value is numeric.	object
tooltipText	Mousing over this button will display a tooltip with this text, if present.	value: string
enabled	Indicates if user should be allowed to alter the value. Note: If the component is disabled, scripts can still run on the component. For example, if you add a script action to a System Event, such as an onStartup event, the script will fire when the page is loaded. Events that require user interaction, such as onClick events, will not fire with the exception of Pointer Events.	value: boolean
containerStyle	New in 8.1.2 Sets a style for the outer area of the component. The image below represents a low fidelity representation of the component. The containerStyle property determines the look of the outer "container" area of the component, making it ideal for adding borders, margins around the entire component, and padding between the container and input/display area.  Changes that should be made to the input/display area, such as changing the font on the displayed value, should be made on the style property.	object
style	Sets a style for the "inner" numeric display/input in 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

Component Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Examples

Example 1

This example shows the component set to "button" mode, providing a button to click on when entering a new value.

Property	Value
props.value	45.678
props.format	#0.0
props.mode	button
props.align	center
props.placeholder	setpoint

Example 2

This examples demonstrates the placeholder property, showing a default entry in cases where the value is null.

Property	Value
props.value	null
props.format	#0.0
props.mode	button
props.align	center
props.placeholder	setpoint

Example 3

This example demonstrates the format property, allowing custom formatting to be applied to the value in the component.

Property	Value
props.value	0.2345
props.format	0.0#%
props.mode	direct
props.align	right
props.placeholder	setpoint