API Documentation

Class

List

kiss.ui.List(config)

The List derives from DataComponent.

Constructor

# new List(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 myList = document.createElement("a-list").init(config)

Or use the shorthand for it:

const myList = createList({
  id: "my-list",
  color: "#00aaee",
  collection: kiss.app.collections["meetings"],
  
  // We can add custom methods, and also override default ones
  methods: {

     // Override the createRecord method
     createRecord(model) {
         // Create a record from this model
         console.log(model)
     },

     // Override the selectRecord method
     selectRecord(record) {
         // Show the clicked record
         console.log(record)
     },

     sayHello: () => console.log("Hello"),
  }
})

myList.render()
Parameters:
Name Type Attributes Description
config object
startOnMonday boolean <optional>
showWeekend boolean <optional>
date string <optional>
dateField string
timeField string <optional>
collection Collection

The data source collection
record object <optional>

Record to persist the view configuration into the db
columns Array.<object> <optional>

Where each column is: {title: "abc", type: "text|number|integer|float|date|button", id: "fieldId", button: {config}, renderer: function() {}}
color string <optional>

Hexa color code. Ex: #00aaee
showToolbar boolean <optional>

false to hide the toolbar (default = true)
showActions boolean <optional>

false to hide the custom actions menu (default = true)
canFilter boolean <optional>

false to hide the filter button (default = true)
canEdit boolean <optional>

Can we edit the cells?
canSync boolean <optional>

false to hide the button to switch on/off realtime synchronization
canCreateRecord boolean <optional>

Can we create new records from the list?
actions Array.<object> <optional>

Array of menu actions, where each menu entry is: {text: "abc", icon: "fas fa-check", action: function() {}}
buttons Array.<object> <optional>

Array of custom buttons, where each button is: {position: 3, text: "button 3", icon: "fas fa-check", action: function() {}}
width number | string <optional>
height number | string <optional>

View Source client/ui/elements/list.js, line 39

this

Generated markup

<a-list class="a-list">
     <div class="list-toolbar">
         <!-- List toolbar items -->
     </div>
     <div class="list-body">
         <!-- List entries here -->
     </div>
</a-list>

Methods

# async reload()

Reload the data and re-render

View Source client/ui/elements/list.js, line 230

# async setColor(newColor)

Update the list color (toolbar buttons + modal windows)

Parameters:
Name Type Description
newColor string

View Source client/ui/elements/list.js, line 250

# updateLayout()

Update the list layout

View Source client/ui/elements/list.js, line 239