Beyond basic tables and forms, Tadabase offers specialized components that provide unique ways to visualize and interact with data. Kanban boards, calendars, maps, and timelines each serve specific use cases and create more engaging, intuitive user experiences. Mastering these advanced components enables you to build applications tailored to specific workflows and industries.

In this section, you'll learn about four powerful advanced components: Kanban for pipeline management, Calendar for scheduling, Map for geographic data, and Timeline for chronological views. You'll understand when to use each component and how to configure them effectively.

The Kanban component displays records as cards organized in columns based on a status or stage field. It's perfect for visual workflow management.

What is Kanban?

• Visual board with columns representing stages
• Records displayed as cards
• Drag-and-drop between columns
• Real-time status updates
• Originated in manufacturing, popular in project management

When to Use Kanban

• Sales Pipelines: Track deals through stages (Lead, Qualified, Proposal, Won)
• Project Management: Task status (To Do, In Progress, Review, Done)
• Hiring Process: Candidate stages (Applied, Screening, Interview, Offer)
• Order Fulfillment: Order status (New, Processing, Shipped, Delivered)
• Support Tickets: Ticket status (Open, In Progress, Waiting, Resolved)
• Any Workflow: Where records move through defined stages

Setting Up Kanban

Prerequisites

1. Table with status/stage field (dropdown or connection)
2. Defined stages in logical order
3. Records with status values

Configuration Steps

1. Add Kanban Component
   • Create or open page
   • Click "Add Component"
   • Select "Kanban"
2. Select Table
   • Choose table to display
3. Choose Status Field
   • Select field that contains stages
   • Must be dropdown or similar
4. Configure Columns
   • Define which stages to show
   • Set column order
   • Hide certain stages if needed
5. Configure Cards
   • Select fields to display on cards
   • Order fields
   • Choose card layout
6. Set Drag-and-Drop
   • Enable/disable dragging
   • Set permissions (who can drag)
7. Add Filters (optional)
   • Filter which records appear
   • Example: Only "My" records

Kanban Features

Drag and Drop

• Drag cards between columns
• Automatically updates status field
• Can trigger rules on status change
• Permission-controlled

Card Customization

• Show key fields on cards
• Include images or avatars
• Display badges (priority, due date)
• Add quick action buttons

Column Headers

• Stage name
• Record count in each column
• Optional sum/total values
• Color coding by stage

Swimlanes

• Group records by secondary field
• Example: Group by assigned user
• Horizontal grouping within columns

Kanban Examples

Kanban Best Practices

• Keep stages simple and clear (4-7 columns ideal)
• Define stage progression logically
• Show most important info on cards
• Use color coding meaningfully
• Enable drag-and-drop for faster updates
• Add column totals for key metrics
• Filter to relevant records only
• Test on mobile devices

The Calendar component displays records on a calendar view, perfect for scheduling and date-based data.

What is Calendar?

• Visual calendar display (month, week, day views)
• Events/records shown on dates
• Click to view details
• Drag to reschedule
• Supports recurring events

When to Use Calendar

• Event Management: Conferences, webinars, meetings
• Appointment Scheduling: Doctor visits, consultations
• Booking Systems: Room reservations, equipment rental
• Project Timelines: Milestones, deadlines
• Leave Management: Time-off requests, vacations
• Content Calendar: Publishing schedule
• Any Date-Based Data: Where timing is key

Setting Up Calendar

Prerequisites

1. Table with date field(s)
2. Start date required
3. End date optional (for multi-day events)

Configuration Steps

1. Add Calendar Component
   • Create or open page
   • Click "Add Component"
   • Select "Calendar"
2. Select Table
   • Choose table to display
3. Choose Date Fields
   • Start date field (required)
   • End date field (optional)
   • All-day vs timed events
4. Configure Event Display
   • Title field (what to show on calendar)
   • Color coding (by field value)
   • Event details popup
5. Set Calendar Views
   • Month view (default)
   • Week view
   • Day view
   • Agenda/list view
6. Enable Interactions
   • Click to view details
   • Click to edit
   • Drag to reschedule
   • Add new events

Calendar Features

Multiple Views

• Month: Overview of entire month
• Week: Detailed week view with time slots
• Day: Hourly breakdown of single day
• Agenda: List view of upcoming events

Color Coding

• Color events by category
• By status (confirmed, tentative, cancelled)
• By type (meeting, deadline, holiday)
• By assigned user

Drag and Reschedule

• Drag events to new dates
• Drag edges to change duration
• Automatically updates date fields
• Permission-controlled

Recurring Events

• Daily, weekly, monthly patterns
• Custom recurrence rules
• End after date or number of occurrences

Calendar Examples

Calendar Best Practices

• Use meaningful color coding
• Keep event titles concise
• Enable appropriate views for use case
• Set sensible default view
• Add filters for busy calendars
• Include timezone support if needed
• Test drag-and-drop functionality
• Consider mobile responsiveness

The Map component displays records on an interactive map based on location data.

What is Map?

• Interactive map (Google Maps, Mapbox)
• Records shown as pins/markers
• Click markers for record details
• Supports clustering for many markers
• Geolocation and routing

When to Use Map

• Store Locator: Show business locations
• Service Areas: Display coverage zones
• Fleet Management: Track vehicles
• Real Estate: Property listings
• Delivery Tracking: Route and status
• Event Venues: Location mapping
• Customer Locations: Geographic analysis
• Any Location Data: Where geography matters

Setting Up Map

Prerequisites

1. Table with location data:
   • Address field (auto-geocodes)
   • OR Latitude/Longitude fields
2. API key configured (Google Maps or Mapbox)

Configuration Steps

1. Add Map Component
   • Create or open page
   • Click "Add Component"
   • Select "Map"
2. Select Table
   • Choose table to display
3. Choose Location Field
   • Address field
   • OR Latitude/Longitude fields
4. Configure Markers
   • Marker icon/color
   • Popup content (fields to show)
   • Clustering settings
5. Set Map Options
   • Default zoom level
   • Center point
   • Map style (satellite, terrain, etc.)
6. Add Filters (optional)
   • Filter which records appear on map

Map Features

Marker Customization

• Color code by field value
• Different icons for different types
• Custom marker images
• Marker labels

Info Popups

• Click marker to show details
• Display any record fields
• Include action links
• Show images

Clustering

• Group nearby markers
• Show count in cluster
• Zoom in to expand clusters
• Performance benefit for many markers

Geolocation

• Show user's current location
• Find nearest records
• Distance calculations
• Directions to location

Drawing Tools

• Draw shapes on map
• Define service areas
• Mark territories
• Save drawn areas

Map Examples

Map Best Practices

• Ensure accurate address data
• Use clustering for many markers
• Color code meaningfully
• Keep popups concise
• Test geolocation features
• Set appropriate default zoom
• Consider mobile map interaction
• Cache geocoding results

The Timeline component displays records in chronological order, perfect for showing history and sequences.

What is Timeline?

• Chronological display of records
• Vertical or horizontal layout
• Events plotted on date axis
• Visual history representation

When to Use Timeline

• Activity History: Customer interactions, updates
• Project Milestones: Key project events
• Order Tracking: Order status changes
• Employee History: Career progression, reviews
• Communication Log: Emails, calls, meetings
• Version History: Document or record changes
• Any Historical Data: Where sequence matters

Setting Up Timeline

Prerequisites

1. Table with date/time field
2. Description or title field

Configuration Steps

1. Add Timeline Component
   • Create or open page
   • Click "Add Component"
   • Select "Timeline"
2. Select Table
   • Choose table to display
3. Choose Date Field
   • Field to plot on timeline
4. Configure Event Display
   • Title/heading field
   • Description fields
   • Icon or image
5. Set Layout Options
   • Vertical or horizontal
   • Alternating sides or single side
   • Grouping by date ranges

Timeline Features

Visual Markers

• Icons for event types
• Color coding by category
• Images or avatars
• Status indicators

Grouping

• Group by day, week, month, year
• Collapsible date groups
• Period headers

Details Expansion

• Click to expand event details
• Inline or popup details
• Show additional fields

Filtering

• Filter by date range
• Filter by event type
• Search timeline events

Timeline Examples

Timeline Best Practices

• Use clear, descriptive event titles
• Include relevant details
• Use icons for quick recognition
• Color code meaningfully
• Group by appropriate time periods
• Show most recent first (usually)
• Enable filtering for long timelines
• Test readability on mobile

Decision Guide:

Data Type	Best Component	Why
Status-based workflow	Kanban	Visual pipeline management
Date-based scheduling	Calendar	Time-based visualization
Location-based data	Map	Geographic visualization
Chronological history	Timeline	Sequential event display
Tabular data	Table	Structured data display
Visual browsing	Cards	Image-rich display

Use multiple components together for comprehensive views:

Example: Sales Dashboard

• Kanban: Deal pipeline
• Calendar: Upcoming meetings
• Map: Customer locations
• Table: Recent activities
• Charts: Sales metrics

Example: Project Management

• Kanban: Task board
• Timeline: Project milestones
• Calendar: Team schedule
• Table: Task list with filters

In this section, you've learned about advanced components:

• Kanban for visual workflow and pipeline management
• Calendar for scheduling and date-based data
• Map for geographic and location-based information
• Timeline for chronological event display
• When to use each component type
• Configuration options for customization
• Best practices for effective implementation

These advanced components transform data into intuitive, specialized views that match how users naturally think about and work with information. Choosing the right component for your data type dramatically improves user experience.

Hands-On Exercise (To Be Added)

Exercise placeholders will include practical activities such as:

• Create a Kanban board for sales pipeline
• Set up a calendar component for appointments
• Build a map view for store locations
• Configure a timeline for activity history
• Combine multiple advanced components on one page

Knowledge Check (To Be Added)

Quiz questions will test understanding of:

• When to use Kanban vs Calendar vs Map vs Timeline
• Key features of each component type
• Configuration requirements for each component
• Best practices for component implementation
• How to choose the right component for data type