Cover image for ofsantana

Oscar Santana Verified userVerified user

CTO

ART Fertility Clinics

Vertical Timeline

December 8, 2024
5
ยท 2

Features

  • Fully configurable with a JSON object

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:

 

Joseph Petty Verified userVerified user staff View joseph_appsmith's profile
Tue, 06/25/2024 - 20:12

This is awesome! I like that you included the other widgets to build new events, instead of just publishing the custom widget by itself. That would have been enough, but this is even better! 

Oscar Santana Verified userVerified user author Open to work View ofsantana's profile
Fri, 06/28/2024 - 01:47

Thanks, Joseph, I wanted to share the Custom widget in a way anyone can take it as it is and implement it quickly, that is why I took the time to build it like a "complete" solution.