# new Field(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myField = document.createElement("a-field").init(config)Or use a shorthand to create one the various field types:
const myText = createTextField({
label: "I'm a text field"
})
const myTextArea = createTextareaField({
label: "I'm a long text field",
cols: 100,
rows: 10
})
const myNumber = createNumberField({
label: "I'm a number field",
value: 250,
min: 0
})
const myDate = createDateField({
label: "I'm a date field",
value: new Date()
})
// You can also use the generic constructor, but then you'll have to specify the field type in the config, like this:
const myText = createField({
type: "number", // <= Field type, which can be: text | textarea | number | date
label: "foo",
value: 123
})
Or directly declare the config inside a container component:
const myPanel = createPanel({
title: "My panel",
items: [
{
type: "text",
label: "I'm a text"
},
{
type: "number":
label: "I'm a number"
}
]
})
myPanel.render()Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
type |
string
|
text | textarea | number | date | password |
|
value |
*
|
<optional> |
Default value |
label |
string
|
<optional> |
|
labelWidth |
number
|
string
|
<optional> |
A number (in pixels) or any valid CSS value |
fieldWidth |
number
|
string
|
<optional> |
A number (in pixels) or any valid CSS value |
fieldHeight |
number
|
string
|
<optional> |
A number (in pixels) or any valid CSS value |
fieldPadding |
number
|
string
|
<optional> |
A number (in pixels) or any valid CSS value |
fieldFlex |
number
|
<optional> |
|
fontSize |
string
|
<optional> |
Any valid CSS value |
fontWeight |
string
|
<optional> |
Any valid CSS value |
color |
string
|
<optional> |
Any valid CSS value |
lineHeight |
string
|
<optional> |
|
textAlign |
string
|
<optional> |
left | right |
labelPosition |
string
|
<optional> |
left | right | top | bottom |
labelAlign |
string
|
<optional> |
left | right |
labelFlex |
number
|
<optional> |
|
labelFontSize |
string
|
<optional> |
Any valid CSS value |
labelFontWeight |
string
|
<optional> |
Any valid CSS value |
labelColor |
string
|
<optional> |
Any valid CSS value |
formula |
string
|
<optional> |
For computed fields only |
validationType |
string
|
<optional> |
Pre-built validation type: alpha | alphanumeric | email | url | ip |
validationRegex |
string
|
<optional> |
Regexp |
validationFunction |
function
|
<optional> |
Async function that must return true if the value is valid, false otherwise |
validationMessage |
string
|
<optional> |
TODO |
allowHTML |
boolean
|
<optional> |
If true, the text must can contain HTML tags. Defaults to false. |
placeholder |
string
|
<optional> |
|
autocomplete |
boolean
|
<optional> |
set to "off" to disable native browser autocomplete feature. Default is "off" |
minLength |
number
|
<optional> |
|
maxLength |
number
|
<optional> |
|
maxHeight |
number
|
string
|
<optional> |
A number (in pixels) or any valid CSS value |
readOnly |
boolean
|
<optional> |
|
disabled |
boolean
|
<optional> |
|
required |
boolean
|
<optional> |
|
draggable |
boolean
|
<optional> |
|
min |
string
|
<optional> |
(for number only) |
max |
string
|
<optional> |
(for number only) |
precision |
number
|
<optional> |
(for number only) |
margin |
string
|
<optional> |
|
padding |
string
|
<optional> |
|
fontFamily |
string
|
<optional> |
Font used for the input field |
rows |
boolean
|
<optional> |
For textarea only |
cols |
boolean
|
<optional> |
For textarea only |
autoGrow |
boolean
|
<optional> |
For textarea only |
display |
string
|
<optional> |
flex | inline flex |
overflow |
string
|
<optional> |
|
border |
string
|
<optional> |
|
borderStyle |
string
|
<optional> |
|
borderWidth |
string
|
<optional> |
|
borderColor |
string
|
<optional> |
|
borderRadius |
string
|
<optional> |
|
width |
string
|
number
|
<optional> |
|
height |
string
|
number
|
<optional> |
|
record |
object
|
<optional> |
The record to bind the field to. This will automatically update the record when the field value changes, and the field will listen to database changes on the record. |
this
Generated markup
For all input fields:
<a-field class="a-field">
<label class="field-label"></label>
<input type="text|number|date" class="field-input"></input>
</a-field>For textarea:
<a-field class="a-field">
<span class="field-label"></span>
<textarea class="field-input"></textarea>
</a-field>Methods
# getDataType() → {string}
Get the data type of a field, depending on its configuration: text => text number => number date => date textarea => text password => text summary => data type of the foreign field lookup => data type of the foreign field
The field data type: "text" | "number" | "date"
string
# setDisplayMode(displayModeopt)
Change the field default display mode
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
displayMode |
string
|
<optional> |
flex | "flex" (default) | "inline-flex" |
# setLabelPosition(position)
Set label position
Parameters:
| Name | Type | Description |
|---|---|---|
position |
string
|
"left" (default) | "right" | "top" | "bottom" |
this
# setValue(newValue, rawUpdateopt)
Set the field value
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
newValue |
string
|
number
|
date
|
The new field value |
|
rawUpdate |
boolean
|
<optional> |
If true, it doesn't update the associated record and doesn't trigger "change" event |
this
# validate() → {boolean}
Validate the field value and apply UI style accordingly
true is the field is valid, false otherwise
boolean