Vertical Timeline

Vertical Timeline

This custom widget offers the following features:

• id: A unique identifier for the widget .
• mode: Defines the style of the timeline (light or dark).
• itemsPerPage: Sets the number of items displayed on the screen, which can be either fixed or dynamic.
• items: This property holds the data to be displayed in the timeline, allowing for dynamic or static content.

The widget dynamically updates itself whenever the data model changes.

Additionally, it detects clicks on each item's icon and returns the ID of the selected record. This functionality enables you to interact with the record, such as opening a modal window for editing.

The widget's styling leverages the Appsmith CSS API, ensuring it seamlessly adapts to the current theme.

Feel free to use it as a base and customize it further by adding more properties to the objects or modifying the widget itself.

The Database for this example contains only 6 fields

• title: text
• type: text (color style)
• image: text (icon name)
• text: Long text for the event description
• date: date
• user: text

This is the Original HTML Source:

• Author: EmaWebDesign
• Link: https://github.com/topics/vertical-timeline