# new DataComponent(config) → {HTMLElement}
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
collection |
object
|
<optional> |
Optional collection. |
collectionId |
string
|
<optional> |
Optional collectionId. |
model |
object
|
<optional> |
Optional model. |
modelId |
string
|
<optional> |
Optional modelId. |
record |
object
|
<optional> |
Optional record to persist the view configuration. |
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.
# async copySelectionToClipboard()
Copy the selection to the clipboard
# async createRecord(model)
Open the form to create a new record
Important: this method can be overriden in the instanced component
Parameters:
| Name | Type | Description |
|---|---|---|
model |
object
|
Model to create the record |
# createSearchFilter(value) → {object}
Create a filter that appends the search term to the existing filters
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string
|
The filter configuration
object
# async export()
Export records as XLS or JSON
# formatValueForClipboard(column, value) → {*}
Format a value for the clipboard
Parameters:
| Name | Type | Description |
|---|---|---|
column |
object
|
Column configuration |
value |
*
|
Value to format |
The formatted value so it can be used in the clipboard for copy/paste
*
# async ftsearch(value)
Full-text search on all text fields
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string
|
# getColumn(fieldId) → {object}
Get the column config used to display a field
Parameters:
| Name | Type | Description |
|---|---|---|
fieldId |
string
|
The column config
object
# getFields() → {Array.<object>}
Get the view fields.
Note: in a some view (like datatables), fields are the same thing as columns.
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
The view configuration stored locally
object
# getSelection() → {Array.<string>}
Get the list of ids of selected records
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) |
Example
myDatatable.groupBy(["Country", "City", "Age"])# hideSearchBar()
Reset the search made from the search bar
# async reload()
Reload the component's data and re-render it
# 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
this
# resetSearchBar()
Reset the search made from the search bar
# selectRange(rangeStart, rangeEnd)
Select multiple records (using the SHIFT key)
Parameters:
| Name | Type | Description |
|---|---|---|
rangeStart |
number
|
|
rangeEnd |
number
|
# async selectRecord(record)
Show a single record
Important: this method can be overriden in the instanced component
Parameters:
| Name | Type | Description |
|---|---|---|
record |
object
|
Record to show |
# async selectRecordById(recordId)
Show a single record (passing its id)
Parameters:
| Name | Type | Description |
|---|---|---|
recordId |
string
|
id of the record to show |
# 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" |
# 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" |
# showMobileSearchBar()
Show the mobile search bar
# 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" |
# 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"} |
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" |
Example
myDatatable.sortByField("birthDate", "desc")# toggleSelection()
Select / Deselect records
# async updateConfig(update, needsDataReloadopt)
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
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
update |
object
|
The new configuration |
||
needsDataReload |
boolean
|
<optional> |
true | If false, the data won't be reloaded. Default to true |
# 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
|