GraffitiTextField

Enumerations #

Name	Values
Alignments	Left
	Right
	Center
CaseModifiers	None
	Lower
	Upper
EnterKeyHints	Enter
	Done
	Go
	NextFocus
	PreviousFocus
	Search
	Send
FieldTypes	Text
	Color
	Date
	DateTime
	DateTimeLocal
	Email
	Number
	Password
	Telephone
	Time
	Url
	Week
Positions	Left
	Right
States	Unvalidated
	Valid
	Invalid

Constants #

This class exposes no constants.

Events #

Definition	Parameters	Return Type	Description
EnterPressed	None	None	Raised when the user presses the Enter key on their keyboard while the field has focus. Simultaneously updates the value server-side. Prevents Default button action.
LabelPressed	None	None	Raised when the user clicks the label.
StateChanged	None	None	Raised when the user’s text has changed the State of the field based on the supplied Pattern.
ValueChanged	None	None	Raised when the user changes the value of the field.

Methods #

Definition	Parameters	Return Type	Description
AddValue	value as String	None	Adds a new value to the autocomplete array.
AddValueAt	index as Integer value as String	None	Adds a new value to the autocomplete array at the specified index.
IndexOfValue	value as String	Integer	Returns the index of the specified value within the autocomplete array.
LastValueIndex	None	Integer	Returns the index of the last item within the autocomplete array.
RemoveAllValues	None	None	Removes all values from the autocomplete array.
RemoveValueAt	index as Integer	None	Removes the value at the specified index from the autocomplete array.
SelectAll	None	None	Selects all content within the field.

Properties #

Name	Type	Default Value	Description
AllowLineFeed	Boolean	False	Controls whether users can enter line feeds by pressing the enter key. Does not affect the EnterPressed event. Applies only when Multiple = True.
AllowLineWrapping	Boolean	True	Controls whether content lines are wrapped. Applied only when Multiple = True.
AllowTabs	Boolean	False	Controls whether users are allowed to enter tab characters by pressing the Tab key or remove tabs by pressing Shift+Tab. Applies only when Multiple = True. When True, tab progression from this control to other controls will not function.
AutocompleteHighlightTyped	Boolean	True	Highlights typed text within the autocomplete results dropdown.
AutocompleteMaximumItems	Integer	5	Maximum number of items to display in the autocomplete results dropdown.
AutocompleteSearchThreshold	Integer	2	Number of characters required to be input for autocomplete to process.
CaseModifier	CaseModifiers	None	Controls the capitalization of value text. Also applies to Placeholder.
EnterKeyHint	EnterKeyHints	Enter	Text to display in the Enter button of mobile/virtual keyboards.
FieldStyle	GraffitiStyle	Nil	Style applied to the field portion of the class.
IconHeight	Integer	16	Height of IconObject when specified.
IconObject	Picture	Nil	Custom icon displayed in the label portion. Signify location using <icon> in Label text.
IconWidth	Integer	16	Width of IconObject when specified.
Label	String	“Untitled”	Caption of the label portion of the control. Supports FontAwesome icons, IE: <fas fa-search>
LabelAlignment	GraffitiTextField.Alignments	Left	Alignment of text and icons in the label portion of the field.
LabelPosition	Positions	Left	The location of the label in relation to the field.
LabelStyle	GraffitiStyle	Nil	Style applied to the label portion of the class.
LabelVisible	Boolean	True	When False, only the text field portion of the component will be displayed.
LabelWidth	Integer	-1	Static width of label portion. -1 for auto.
MaxLength	Integer	-1	Maximum number of characters that the field can contain. Set to -1 for the maximum HTML limit of 524288.
Multiline	Boolean	False	When True, the user may enter multiple lines of text within the component. Some other features or functionality may not be operational under these conditions due to browser limitations.
Pattern	String	“”	For using the browser’s built-in RegEx validation (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern).
PatternInvalidMessage	String	“”	Text to display when the entered text does not confirm to the supplied Pattern. Empty string uses browser default.
PatternSetsState	Boolean	True	Determines whether the conformity of the input text to the supplied Pattern will change the State of the control to be visibly valid or invalid.
ReadOnly	Boolean	False	If True users cannot edit the contents of the field.
Required	Boolean	False	Has no effect on display or function. Can be used to programmatically validate forms.
SelectedText	String	“”	Returns the currently selected text.
SelectionLength	Integer	0	Length of the currently selected text.
SelectionStart	Integer	0	Start position of the current selection.
SpellCheck	Boolean	True	Controls whether spell checking is enabled on the field.
State	States	Unvalidated	The validation state of the field.
Type	FieldTypes	Text	The type of field, not all types are supported by all browsers.
Value	String	“”	The value of the field. Updates on focus loss to reduce communication with the server.

Examples #

State #

This snippet changes the state of the field based on the length of the field’s text:

if me.Value.Length > 3 then
  me.State = GraffitiTextField.States.Valid
elseif me.Value.Length <> "" then
  me.State = GraffitiTextField.States.Invalid
else
  me.State = GraffitiTextField.States.Unvalidated
end if

Notes #

Autocomplete and Type = Search #

GraffitiTextField’s Autocomplete functionality should not be used with Type = Search due to a bug in Bootstrap and/or browser implementations. (See: https://github.com/twbs/bootstrap/issues/34411)

Mask Definitions #

Character	Accepted Inputs
a	Alpha character (a-z, A-Z)
9	Numeric character (0-9)
*	Alphanumeric character (a-z, A-Z, 0-9)
?	Anything after the question mark is considered optional, and the MaskComplete event will fire with or without that section being filled.