Documentation

Class

Container

kiss.ui.Container(config, layoutopt, multiviewopt, alignopt, verticalAlignopt)

The Container derives from Component.

A Container is useful to embed other items. Containers can also embed other containers to build complex layouts.

The Container class should not be instanciated directly: it's the base class for the 2 types of containers:

  • Block, which is a simple "div" container
  • Panel, which has a header and is useful to build windows or modals, for example.

It's also possible to bind a Record to a container:

  • in this case, the record will be bound to all the container's fields (text, number, date, checkbox, select...)
  • the fields will be automatically synchronized with the Record, but only if their id matches a record's property
  • it's a 2-way binding:
    • if a field of the container is updated, the database will be updated automatically
    • if the database is updated, the fields will react to the change as well
Constructor

# new Container(config, layoutopt, multiviewopt, alignopt, verticalAlignopt)

Parameters:
Name Type Attributes Description
config object
items Array.<object>

The array of contained items
layout string <optional>

"vertical" | "horizontal". Shortcut to define flex + flexFlow properties at the same time.
multiview boolean <optional>

If true, only displays one item at a time
align string <optional>

"center" to automatically center the container horizontally
verticalAlign string <optional>

"center" to automatically center the container vertically
config.record Record <optional>

Record to bind to the contained fields. The fields will be synchronized with the record.

View Source client/ui/abstract/container.js, line 58

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 UI

Methods

# addItem(item)

Add a child item into the container

Parameters:
Name Type Description
item object

Item JSON configuration

View Source client/ui/abstract/container.js, line 150

this

# bindRecord(record)

Bind a record to the container's fields AFTER the container has been created.

Parameters:
Name Type Description
record object

View Source client/ui/abstract/container.js, line 647

# collapseAll()

Find all the panels inside a container and collapse them recursively

View Source client/ui/abstract/container.js, line 202

this

# deleteItem(itemId)

Delete an item from the container

Parameters:
Name Type Description
itemId string

View Source client/ui/abstract/container.js, line 175

this

# expandAll()

Find all the panels inside a container and expand them recursively

View Source client/ui/abstract/container.js, line 187

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.

View Source client/ui/abstract/container.js, line 229

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.

View Source client/ui/abstract/container.js, line 219

The real component's container

HTMLElement

# 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

View Source client/ui/abstract/container.js, line 334

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

View Source client/ui/abstract/container.js, line 250

An array of objects containing the elements

Array.<Object>

# getFields() → {Array.<Object>}

Get all the fields found in this container

View Source client/ui/abstract/container.js, line 271

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

View Source client/ui/abstract/container.js, line 163

this

# resetFields()

Reset all the fields found in this container

View Source client/ui/abstract/container.js, line 292

this

# setColumns(numberOfColumns, marginopt)

Dispatch container's content on multiple columns

Parameters:
Name Type Attributes Default Description
numberOfColumns number 1
margin string <optional>
 0

Optional margin between columns. Default is 0.

View Source client/ui/abstract/container.js, line 579

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.

View Source client/ui/abstract/container.js, line 366

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"

View Source client/ui/abstract/container.js, line 117

# setHeight(height)

Set the new height

The height can be:

  • a number, which will be converted in pixels
  • a valid CSS value: 50px, 10vw
  • a function that returns a number or a valid CSS value
Parameters:
Name Type Description
height number | string | function

View Source client/ui/abstract/container.js, line 413

this

Example
myPanel.setHeight(500)
myPanel.setHeight("500px")
myPanel.setHeight("40%")
myPanel.setHeight(() => kiss.screen.current.height / 2) // Half the current screen size

# 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

View Source client/ui/abstract/container.js, line 129

this

# setLabelAlign(position)

Set the label alignment of all the container's fields

Parameters:
Name Type Default Description
position string left

"left" (default) | "right"

View Source client/ui/abstract/container.js, line 560

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"

View Source client/ui/abstract/container.js, line 462

this

# setLabelSize(size)

Set the label size of all the container's fields

Parameters:
Name Type Default Description
size string 1/3

"1/6" | "1/4" | "1/3" (default) | "1/2" | "2/3" | "3/4"

View Source client/ui/abstract/container.js, line 507

this

# setWidth(width)

Set the new width

The width can be:

  • a number, which will be converted in pixels
  • a valid CSS value: 50px, 10vw
  • a function that returns a number or a valid CSS value
Parameters:
Name Type Description
width number | string | function

View Source client/ui/abstract/container.js, line 390

this

Example
myPanel.setWidth(500)
myPanel.setWidth("500px")
myPanel.setWidth("40%")
myPanel.setWidth(() => kiss.screen.current.width / 2) // Half the current screen size

# 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

View Source client/ui/abstract/container.js, line 604

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

View Source client/ui/abstract/container.js, line 636

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

View Source client/ui/abstract/container.js, line 623

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.

View Source client/ui/abstract/container.js, line 437

this

Example
myComponent.updateLayout()

# validate() → {boolean}

Validate all the container's fields and return the result

View Source client/ui/abstract/container.js, line 302

true if all fields have passed the validation

boolean
new Container

Methods