Class

DataComponent

kiss.ui.DataComponent(config) → {HTMLElement}

The DataComponent derives from Component.

This is an abstract class: don't use it directly. It's the base class for all the components used to display a collection of records, like:

  • Datatable
  • Calendar
  • Gallery
  • Lists
  • Kanban
  • ...

Each DataComponent is associated with its own Collection.

The Collection can be provided directly in the config. If not, a Model must be passed instead, and a new Collection will be created from this Model.

A DataComponent can manipulate its collection:

  • selecting the fields to display
  • filtering the data
  • sorting the data
  • grouping the data

These operations are achieved thanks to built-in windows that you can display using:

// Display the window to select fields
myComponent.showFieldsWindow(x, y, color)

// Display the window to sort data
myComponent.showSortWindow(x, y, color)

// Display the window to filter data
myComponent.showFilterWindow(x, y, color)

A DataComponent can persist its configuration inside its associated record, using updateConfig method.

Constructor

# new DataComponent(config) → {HTMLElement}

Parameters:
Name Type Attributes Description
config object
collection object <optional>

Optional collection. If not provied, creates a new collection from the model

model object <optional>

Optional model. If not provided, uses the collection's model

View Source client/ui/abstract/dataComponent.js, line 45

HTMLElement

Methods

# async _updateToolbar()

Reload the toolbar, if any In the generic case, the toolbar is a set of buttons that can be hidden or shown according to its settings. For now, we only manage the "create" button.

View Source client/ui/abstract/dataComponent.js, line 753

# async createRecord(model)

Open the form to create a new record

Important: this method must be overriden in the instanced component

Parameters:
Name Type Description
model object

Model to create the record

View Source client/ui/abstract/dataComponent.js, line 1354

# async export()

Export records as XLS or JSON

View Source client/ui/abstract/dataComponent.js, line 1409

# async ftsearch(value)

Full-text search on all text fields

Parameters:
Name Type Description
value string

View Source client/ui/abstract/dataComponent.js, line 1287

# getColumn(fieldId) → {object}

Get the column config used to display a field

Parameters:
Name Type Description
fieldId string

View Source client/ui/abstract/dataComponent.js, line 1013

The column config

object

# getColumns() → {Array.<object>}

Get the view columns

View Source client/ui/abstract/dataComponent.js, line 890

Array of column definitions

Array.<object>

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

Get the view fields.

Note: in a some view (like datatables), fields are the same thing as columns.

View Source client/ui/abstract/dataComponent.js, line 901

Array of column definitions

Array.<object>

# getLocalConfig() → {object}

When a view configuration can't be persisted into db, it can be stored and retrieved from the local storage

View Source client/ui/abstract/dataComponent.js, line 662

The view configuration stored locally

object

# getSelectedRecords() → {array}

Get the list of selected records

View Source client/ui/abstract/dataComponent.js, line 1379

Array of records

array

# getSelection() → {Array.<string>}

Get the selected records

View Source client/ui/abstract/dataComponent.js, line 1369

The list of selected record ids

Array.<string>

# groupBy(groupFields)

Group by a list of fields

Parameters:
Name Type Description
groupFields Array.<string>

List of field names (not ids)

View Source client/ui/abstract/dataComponent.js, line 415

Example
myDatatable.groupBy(["Country", "City", "Age"])

# hideSearchBar()

Reset the search made from the search bar

View Source client/ui/abstract/dataComponent.js, line 1264

# async reload()

Reload the component's data and re-render it

View Source client/ui/abstract/dataComponent.js, line 742

# async resetLocalViewParameters()

Reset all local component parameters:

  • collection configurations (sort, filter, group)
  • columns configuration (visibility, width, colors, aggregation)

When the component's configuration is persisted into local storage, it's useful to be able to reset it

View Source client/ui/abstract/dataComponent.js, line 719

this

# resetSearchBar()

Reset the search made from the search bar

View Source client/ui/abstract/dataComponent.js, line 1276

# async selectRecord(record)

Show a single record

Important: this method must be overriden in the instanced component

Parameters:
Name Type Description
record object

Record to show

View Source client/ui/abstract/dataComponent.js, line 1342

# async selectRecordById(recordId)

Show a single record (passing its id)

Parameters:
Name Type Description
recordId string

id of the record to show

View Source client/ui/abstract/dataComponent.js, line 1329

# showFieldsWindow(xopt, Yopt, coloropt)

Show a modal window to select / deselect fields

Parameters:
Name Type Attributes Description
x number <optional>

x coordinate

Y number <optional>

y coordinate

color string <optional>

Window color, in hexa: "#00aaee"

View Source client/ui/abstract/dataComponent.js, line 1030

# showFilterWindow(xopt, Yopt, coloropt)

Show a modal window to filter data

Parameters:
Name Type Attributes Description
x number <optional>

x coordinate

Y number <optional>

y coordinate

color string <optional>

Window color, in hexa: "#00aaee"

View Source client/ui/abstract/dataComponent.js, line 1070

# showMobileSearchBar()

Show the mobile search bar

View Source client/ui/abstract/dataComponent.js, line 1188

# showSearchBar()

Show the search bar

View Source client/ui/abstract/dataComponent.js, line 1092

# showSortWindow(xopt, Yopt, coloropt)

Show a modal window to sort data

Parameters:
Name Type Attributes Description
x number <optional>

x coordinate

Y number <optional>

y coordinate

color string <optional>

Window color, in hexa: "#00aaee"

View Source client/ui/abstract/dataComponent.js, line 1050

# async sortBy(sortFields)

Sort by an array of fields

Parameters:
Name Type Description
sortFields Array.<object>

Array where each object is a sort option, like: {firstName: "asc"}

View Source client/ui/abstract/dataComponent.js, line 296

Example
myDatatable.sortBy([
 {
     birthDate: "desc"
 },
 {
     lastName: "asc"
 }
])

# async sortByField(fieldId, direction)

Sort by a single field

Parameters:
Name Type Description
fieldId string
direction string

"asc" | "desc"

View Source client/ui/abstract/dataComponent.js, line 311

Example
myDatatable.sortByField("birthDate", "desc")

# toggleSelection()

Select / Deselect records

View Source client/ui/abstract/dataComponent.js, line 1388

# async updateConfig()

Update view configuration:

  • while offline, just reload
  • while online, check ACL prior to updating
  • if ACL check is successful, save the new configuration into db

View Source client/ui/abstract/dataComponent.js, line 585

# updateLocalConfig(update)

When the view configuration can't be persisted into db, we tried to store its parameters in the local storage.

Parameters:
Name Type Description
update object

View Source client/ui/abstract/dataComponent.js, line 622