# new Timeline(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 myTimeline = document.createElement("a-timeline").init(config)
Or use the shorthand for it:
const myTimeline = createTimeline({
id: "my-table",
color: "#00aaee",
collection: kiss.app.collections["projects"],
// Params that are specific to the timeline
startDateField: "projectStartDate",
endDateField: "projectEndDate",
titleField: "projectName",
period: "1 month",
// Columns must match the Model's fields
columns: [
{
id: "firstName", // Must match the model's field id
type: "text",
title: "First name",
},
{
id: "lastName",
type: "text",
title: "Last name",
},
{
id: "birthDate",
type: "date",
title: "Birth date"
}
],
// We can define a menu with custom actions
actions: [
{
text: "Group by country and city",
icon: "fas fa-sort",
action: () => $("my-table").groupBy(["Country", "City"])
}
],
// 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"),
}
})
myTimeline.render()
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
config |
object
|
||
date |
string
|
<optional> |
The initial date to display in the timeline (default = today) |
titleField |
string
|
<optional> |
The field to use as the title for the first column (default = first text field found in the model, or the record id if no text field was found) |
startDateField |
boolean
|
<optional> |
The field to use as the start date for the timeline (default = first date field found in the model, or the creation date if no date field was found) |
endDateField |
boolean
|
<optional> |
The field to use as the end date for the timeline (default = second date field found in the model, or the modification date if no date field was found) |
period |
string
|
<optional> |
"1 week" | "2 weeks" | "3 weeks" | "1 month" (default) | "2 months" | "3 months" | "4 months" | "6 months" | "1 year" |
colorField |
boolean
|
<optional> |
The field to use as the color for the timeline (default = none) |
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 |
rowHeight |
string
|
<optional> |
CSS row height in pixels. Ex: 40px |
showColumnType |
boolean
|
<optional> |
true to display an icon in the header indicating the column type (default = false) |
showToolbar |
boolean
|
<optional> |
false to hide the toolbar (default = true) |
showPagerIndex |
boolean
|
<optional> |
false to hide the pager index (default = true) |
showScroller |
boolean
|
<optional> |
false to hide the virtual scroller (default = true) |
showActions |
boolean
|
<optional> |
false to hide the custom actions menu (default = true) |
showLayoutButton |
boolean
|
<optional> |
false to hide the button to adjust the layout (default = true) |
showGroupButtons |
boolean
|
<optional> |
false to hide the button to expand/collapse groups (default = true) |
canSearch |
boolean
|
<optional> |
false to hide the search button (default = true) |
canSelect |
boolean
|
<optional> |
false to hide the selection checkboxes (default = true) |
canSort |
boolean
|
<optional> |
false to hide the sort button (default = true) |
canFilter |
boolean
|
<optional> |
false to hide the filter button (default = true) |
canGroup |
boolean
|
<optional> |
false to hide the group button (default = true) |
canSelectFields |
boolean
|
<optional> |
Can we select the fields (= columns) to display in the table? (default = true) |
canChangePeriod |
boolean
|
<optional> |
false to hide the possibility to change period (1 month, 2 weeks...) (default = true) |
canCreateRecord |
boolean
|
<optional> |
Can we create new records from the timeline? |
createRecordText |
boolean
|
<optional> |
Optional text to insert in the button to create a new record, instead of the default model's name |
iconAction |
boolean
|
<optional> |
Font Awesome icon class to display the "open record" symbol. Defaults to "far fa-file-alt" |
actions |
Array.<object>
|
<optional> |
Array of menu actions, where each menu entry is: {text: "abc", icon: "fas fa-check", action: function() {}} |
width |
number
|
string
|
<optional> |
|
height |
number
|
string
|
<optional> |
this
Generated markup
<a-timeline class="a-timeline">
<div class="timeline-toolbar">
<!-- Timeline toolbar items -->
</div>
<div class="timeline-header-container">
<div class="timeline-header-1st-column">
<!-- Header 1st column -->
</div>
<div class="timeline-header">
<!-- Header other columns -->
</div>
</div>
<div class="timeline-body-container">
<div class="timeline-body-1st-column">
<!-- Body 1st column -->
</div>
<div class="timeline-body">
<!-- Body other columns -->
</div>
</div>
<div class="timeline-virtual-scroller-container">
<div class="timeline-virtual-scroller"></div>
</div>
</a-timeline>
Methods
# goToRecord(recordId) → {number}
Scroll to a chosen record
Parameters:
Name | Type | Description |
---|---|---|
recordId |
string
|
The index of the found record, or -1 if not found
number
# highlightRecord(recordId)
Highlight a chosen record
Parameters:
Name | Type | Description |
---|---|---|
recordId |
string
|
# refresh()
Generic method to refresh / re-render the view
Note: used in dataComponent (parent class) showSearchBar method. This method is invoked to refresh the view after a full-text search has been performed
# async setColor(newColor)
Update the timeline color (toolbar buttons + modal windows)
Parameters:
Name | Type | Description |
---|---|---|
newColor |
string
|
# setRowHeight(height)
Set the timeline row height
Parameters:
Name | Type | Description |
---|---|---|
height |
number
|
The row height in pixels |
# showFieldsWindow()
Show the window just under the fields selector button
# showFilterWindow()
Show the window just under the filter button
# showSetupWindow()
Show the window to setup the timeline:
- source field for the first column
- source start date field
- source end date field
- prefered layout (1 month, 2 months, ...)
# showSortWindow()
Show the window just under the sorting button
# switchToSearchMode()
Switch to search mode
Show/hide only the necessary buttons in this mode.
# updateLayout()
Update the timeline size (recomputes its width and height functions)