Skip to main content
Demo

​
Minimal usage

This simple example emit init my time list event on init and wait for an update my time list event with items in payload. This udpate event payload needs to take a items array of objects. Each item needs to have an attribute with datetime value. You can set the name of the attribute if it’s different from default one : createdAt, with the dateField attribute:
Without a valid date field, nothing will be displayed. A templateBlock will be also mandatory to display anything. As we can’t guess the objects structures and how to use their attribute, it’s impossible to propose a default display, so you have to set as templateBlock attribute the name of a valid Block in your Workspace:
This block will receive an item object for each in the list. Read {{item.attr}} in your block template like:
This is the very least needed to use this TimeList block.

​
Advanced usage

Then, you can use additional functionnalities: selected attribute set the current item selected (it adds a className). The value must be an object with at least an attribute discriminating an item. For example, to display as selected the item with id: 12345:
updateItemOn is an event name to tell the block to update or remove a present item. The payload of the set event will take item and selector attribute and optionaly remove. With:
To update an item:
To delete an item:
To add a single item, juste emit the updateOn event with an array of your single item. onPagination is an event emit when user click on next page button. It will add a page attribute starting from 1 to your onPagination.payload and incrementing after each updateOn trigger.
Clicking the “load more” button” will emit:
loadMoreLabel is a localized string to replace the default load more button label:
sections replace the default time range sections. It’s an array of object with a label and a timerange defined by a number and a type of duration. For example [2, ‘day’] to group the items 2 days old, or [42, ‘month’] for the 42 months old. The final section (the latest items) can have no timerange set.