Number Field

Description:

Number Field

Number Field is an input dedicated for numerical values. It may be used in a variety of components like forms, comment sections and forums.

Allowed Parent Components:

1. Col

2. Form

Allowed Child Components:

1. Popover

2. Pulse

3. Trigger Before Render

4. Trigger On Change

5. Trigger On Enter Key Press

Properties

➤ Field Label

Allowed Values: An expression which should return string after evaluation

➤ Help Text1

Provide some helpful level one text for this field and see how it looks on the UI

Allowed Values: Free text field

➤ Help Text2

Provide some helpful level two text for this field and see how it looks on the UI

Allowed Values: Free text field

➤ Hide Label

Check this to hide the label

Allowed Values: Yes/No

➤ Label Primary

Check to render the label in primary color

Allowed Values: Yes/No

➤ Placeholder

Allowed Values: An expression which should return string after evaluation

➤ Tool Tip

A message which appears when a cursor is positioned over.

Allowed Values: An expression which should return string after evaluation

➤ Tool Tip Position

Select an option to change the placement of the tooltip when appears.

Allowed Values:

1. left

2. right

3. top

4. bottom

➤ View Attribute

Allowed Values: Attribute

➤ Insert Allowed

Allowed Values: Yes/No

➤ Insert Allowed Condition

Specify an expression to conditionally allow editing this field while creating a new row

Allowed Values: An expression which should return boolean after evaluation

➤ Update Allowed

Allowed Values: Yes/No

➤ Update Allowed Condition

Specify an expression to conditionally allow editing this field while updating an existing row

Allowed Values: An expression which should return boolean after evaluation

➤ Required

Check this to make this field mandatory.

Allowed Values: Yes/No

➤ Required Condition

Specify an expression to conditionally make this field mandatory

Allowed Values: An expression which should return boolean after evaluation

➤ Min Length

Specify the minimum number of characters to be allowed.

Allowed Values: Any number value

➤ Max Length

Specify the maximum number of characters to be allowed.

Allowed Values: Any number value

➤ Min Value

A minimum value allowed for this field. Leave blank to not put any minimum value restriction.

Allowed Values: Any number value

➤ Max Value

A maximum value allowed for this field. Leave blank to not put any maximum value restriction.

Allowed Values: Any number value

➤ Validate On Commit

Check this to perform validations after commit.

Allowed Values: Yes/No

➤ Column Size

Choose 6 for a two column form or 4 for a three column form

Allowed Values: Choose 6 for a two column form or 4 for a three column form

➤ Transparent

Check this if you want this field to be displayed without any borders around the input field. Typically used for readonly fields on a grey background.

Allowed Values: Yes/No

➤ Format Type

Allowed Values:

1. Pattern

2. Custom

➤ Pattern Format

If hash format defined, hash string allow number input inplace of hash. ex: #### #### #### ####

Allowed Values: Free text field

➤ Format

Allowed Values: Free text field

➤ Mask Format

If mask defined, component will show non entered placed with masked value. ex: _

Allowed Values: Free text field

➤ Prefix

Provide a symbol which is placed before the value. e.g. $50.

Allowed Values: Free text field

➤ Thousand Separator

Add thousand separators on number

Allowed Values: Yes/No

➤ Decimal Scale

If defined it limits to given decimal scale

Allowed Values: Any number value

➤ Fixed Decimal Scale

If true it add 0s to match given decimalScale

Allowed Values: Yes/No

➤ Allow Negative

Allow negative numbers (Only when format option is not provided)

Allowed Values: Yes/No

➤ Text Align

Choose an option to change the alignment of the number.

Allowed Values:

1. Left

2. Center

3. Right

4. Default

➤ All Caps

Select this property for capitalizing the text.

Allowed Values: Yes/No

➤ Text Color

Select a color or enter the custom class to change the color of the text.

Allowed Values: Select a color or enter the custom class to change the color of the text.

➤ Font Weight

This property sets how thick or thin characters in text should be displayed.

Allowed Values:

1. Light

2. Normal

3. Semi Bold

4. Bold

5. Default

➤ Hint Text

Check this property to fade the font color of the text.

Allowed Values: Yes/No

➤ Italic

Check this property to change the font style of the text to italic.

Allowed Values: Yes/No

➤ Muted

Check this property to change the color of the font to light grey.

Allowed Values: Yes/No

➤ No Decoration

Check this property to remove decoration of the text

Allowed Values: Yes/No

➤ Overflow Ellipsis

Check this property to show hidden overflow content as an ellipsis ('…').

Allowed Values: Yes/No

➤ Text Size

Select an option to change the size of the text.

Allowed Values:

1. Small

2. Normal

3. Large

4. Default

➤ On Change

Allowed Values: Controller Function

➤ On Focus

Looking for a tip? Avoiding the use of onFocus!

Allowed Values: Controller Function

➤ On Blur

Looking for a tip? Avoiding the use of onBlur!

Allowed Values: Controller Function

➤ On Value Change

Allowed Values: Controller Function