Constructor

# new Timeline(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 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>

View Source client/ui/data/timeline.js, line 80

Returns:

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

# goToIndex(index)

Scroll to a chosen index

Parameters:

Name	Type	Description
`index`	`number`

View Source client/ui/data/timeline.js, line 399

# goToRecord(recordId) → {number}

Scroll to a chosen record

Parameters:

Name	Type	Description
`recordId`	`string`

View Source client/ui/data/timeline.js, line 388

Returns:

The index of the found record, or -1 if not found

Type: number

# highlightRecord(recordId)

Highlight a chosen record

Parameters:

Name	Type	Description
`recordId`	`string`

View Source client/ui/data/timeline.js, line 377

# next()

Display the timeline one day after

View Source client/ui/data/timeline.js, line 328

Returns:

this

# previous()

Display the timeline one day before

View Source client/ui/data/timeline.js, line 315

Returns:

this

# 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

View Source client/ui/data/timeline.js, line 342