# new Container(config, multiviewopt)
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
multiview |
boolean
|
<optional> |
If true, only displays one item at a time |
config.items |
Array.<object>
|
The array of contained items |
|
config.record |
Record
|
<optional> |
Record to bind to the contained fields |
this
Example
let myRecord = myModel.create({firstName: "Bob", lastName: "Wilson"})
await myRecord.save()
let myForm = createPanel({
title: "Binding example",
width: 300,
height: 300,
align: "center",
verticalAlign: "center",
record: myRecord, // Bind the record to the container's fields
items: [
{
id: "firstName", // Updating the field will update the database
type: "text",
value: myRecord.firstName
},
{
id: "lastName",
type: "text",
value: myRecord.lastName
}
]
}).render()
await myRecord.update({firstName: "Will"}) // Updating the database will update the field in the UIMethods
# addItem(item)
Add a child item into the container
Parameters:
| Name | Type | Description |
|---|---|---|
item |
object
|
Item JSON configuration |
this
# deleteItem(itemId)
Delete an item from the container
Parameters:
| Name | Type | Description |
|---|---|---|
itemId |
string
|
this
# getComponentIds() → {Array.<string>}
Get the ids of all the contained items. Can be useful to check if a component is contained by this container.
Array.<string>
# getContainer() → {HTMLElement}
Returns the HTMLElement which is the real container of the component. It can differ depending on the component type. For example, for a panel, the container is the panel body.
The real component's container
# getData(config) → {object}
Get fields data found in this container.
This method:
- finds all the contained items which are fields
- also explores nested containers, if any
Parameters:
| Name | Type | Description |
|---|---|---|
config |
object
|
|
useLabels |
boolean
|
If true, return data using field labels instead of field ids |
object
Example
let formData = myForm.getData()
console.log(formData) // {title: "Training ICT", amount: 1234.56, dueDate: "2020-02-20T20:19:15Z"}
formData = myForm.getData({
useLabels: true
})
console.log(formData) // {"Lead name": "Training ICT", "Lead amount": 1234.56, "Due date": "2020-02-20T20:19:15Z"}# getElements() → {Array.<Object>}
Get all the elements found in this container
Elements are non-field items, like:
- html
- image
- button
An array of objects containing the elements
Array.<Object>
# getFields() → {Array.<Object>}
Get all the fields found in this container
An array of objects containing the fields
Array.<Object>
# insertItem(item, position)
Insert a child item into the container at a specified position
Parameters:
| Name | Type | Description |
|---|---|---|
item |
object
|
Item JSON configuration |
position |
number
|
this
# setColumns(numberOfColumns)
Dispatch container's content on multiple columns
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
numberOfColumns |
number
|
1 |
this
# setData(data, rawUpdateopt)
Set the value of the fields found in this container, given a data object.
This method:
- finds all the contained items which are fields
- also explores nested containers, if any
- set their value if the field id matches a property of the given data object
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
data |
object
|
||
rawUpdate |
boolean
|
<optional> |
If true, the field's value is updated without triggering the "change" event. Default is false. |
this
Example
const data = {title: "Training ICT", amount: 1234.56, dueDate: "2020-02-20T20:19:15Z"}
myForm.setData(data)# setDisplayMode(mode)
Set the display mode
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
mode |
string
|
flex | "flex" | "inline-flex" | "block" | "inline-block" |
# setItems(newItems)
Set container items.
Overwrite existing items if the container is not empty.
Parameters:
| Name | Type | Description |
|---|---|---|
newItems |
Array.<object>
|
Array of new items |
this
# setLabelAlign(position)
Set the label alignment of all the container's fields
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
position |
string
|
left | "left" (default) | "right" |
this
# setLabelPosition(position)
Set the label position of all the container's fields
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
position |
string
|
left | "left" (default) | "top" | "right" | "bottom" |
this
# setLabelSize(size)
Set the label size of all the container's fields
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
size |
string
|
1/3 | "1/4" | "1/3" (default) | "1/2" | "2/3" | "3/4" |
this
# showItem(itemIndex, animationopt)
For multiview containers, show only a specific item of the container, given by index
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
itemIndex |
number
|
||
animation |
object
|
string
|
<optional> |
Optional animation when displaying the item |
this
# showItemByClass(className, animationopt)
For multiview containers, show only a specific item of the container, given by CSS class
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
className |
string
|
||
animation |
object
|
string
|
<optional> |
Optional animation when displaying the item |
this
# showItemById(id, animationopt)
For multiview containers, show only a specific item of the container, given by id
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
id |
string
|
||
animation |
object
|
string
|
<optional> |
Optional animation when displaying the item |
this
# updateLayout()
Update layout of the component with its new config parameters. It affects:
- the size properties
- the position
It can be useful to update the layout for example when:
- the global window (screen) is resized
- the parent container is resized
- a parameter used in the function to compute a width or height has changed
Note: the layout is updated only if the Element is connected to the DOM.
this
Example
myComponent.updateLayout()# validate() → {boolean}
Validate all the container's fields and return the result
true if all fields have passed the validation
boolean