19.1 Dashboard Widgets
Dashboards give you a bird's-eye view of your automation data, displaying key information in an organized, visual layout. This section shows you how to create and configure dashboards with widgets.
Overview: Why Use Dashboards?
Without Dashboards
Problem: Scattered information
When you need to check on your automations, you have to:
- Open each taible separately
- Count rows manually
- Check status columns one by one
- Switch between different taibles
- Repeat for each metric you want to see
- Time: 10+ minutes per check ✗
With Dashboards
Solution: Unified overview
Hot Leads - Immediate Follow-Up
Total Revenue
$127,450
Pending Orders
Grid layout: 12 columns, widgets positioned and sized independently
All your important data in one place:
- See everything on one screen
- Real-time updates happen automatically
- Time to review: 30 seconds ✓
Dashboards = Your automation command center
Part 1: Creating Your First Dashboard
Accessing Dashboard Features
From taible view, you'll find the dashboard button in the toolbar:
Taible Toolbar:
The button shows how many dashboards exist for this taible (e.g., "2 Dashboards").
Opening the Dashboard Menu
Click the "N Dashboards" button (where N is the number of dashboards)
A dropdown appears showing:
- "Create Dashboard" option at the top
- List of existing dashboards below
- "No dashboards yet" if none exist
Choose an action:
- Click "Create Dashboard" to make a new one
- Click any existing dashboard name to view it
Creating a New Dashboard
Step 1: Start Creation
Click "Create Dashboard" from the dropdown menu
The Dashboard Editor opens in a new page
You'll see a form with fields to fill in
Step 2: Name Your Dashboard
Basic Information
Give your dashboard a clear, descriptive name:
Good examples:
- "Lead Processing Overview"
- "Daily Operations Dashboard"
- "Support Ticket Monitor"
- "Sales Pipeline Status"
Why naming matters: You'll want to find it easily later
Step 3: Add Description (Optional)
In the Description field, explain what the dashboard shows:
Example:
Real-time view of high-priority leads that need
immediate follow-up. Updated automatically as new
leads are qualified.This helps your team understand the dashboard's purpose.
Step 4: Configure Layout
Layout Settings
Page height defines how many rows fit in one page. Widgets will be sized relative to this.
Dashboard layout settings control how widgets are arranged:
- Grid Columns (default: 12): How many columns the grid has
- Page Height (default: 4): How many rows fit in one screen
- Gap (default: 16px): Space between widgets
Most users keep the default settings - they work well for standard dashboards.
Step 5: Save Dashboard
Click the "Save" button (top right)
A success message appears
Your dashboard is now created and ready for widgets!
Part 2: Understanding Widgets
What Are Widgets?
Widgets = Individual data display components on your dashboard
Think of it like this:
Dashboard = Canvas
Widgets = Individual pictures/frames on canvas
Each widget:
- Shows specific data
- Occupies a position on the grid
- Can be resized
- Configured independentlyWidget Types Available
Taibles supports 5 types of widgets, all fully functional:
1. List Widget ✅
Purpose: Display rows from a taible as a scrollable list
High-Priority Leads
Use cases:
- Recent leads
- Pending orders
- Failed processes
- Open support tickets
- Latest activity
Features:
- Filter data (show specific rows)
- Sort order
- Max entries limit
- Multiple text fields per item
- Auto-refresh with real-time updates
2. Stat Card Widget ✅
Purpose: Display a single KPI metric as a large number
Total Revenue
THIS MONTH
$127,450
Based on 156 rows
Use cases:
- Total revenue
- Order count
- Average score
- Error rate percentage
- Conversion rate
Features:
- Aggregation types (sum, average, count, min, max)
- Prefix/suffix formatting ($, %, etc.)
- Trend indicators (up/down arrows)
- Comparison to previous period
3. Text Widget ✅
Purpose: Display static text, instructions, or markdown content
Use cases:
- Dashboard instructions
- Important notes
- Links to resources
- Formatted announcements
- Help text
Features:
- Markdown formatting support
- Multiple font sizes
- Text alignment options
- Dynamic content from taible data
4. Table Widget ✅
Purpose: Display data in table format with columns
Use cases:
- Detailed data grid
- Multi-column comparisons
- Sortable data
- Summary tables
Features:
- Multiple columns
- Custom column widths
- Sticky headers
- Striped rows with hover effects
5. Chart Widget ✅
Purpose: Visualize data with graphs
Chart types available:
- Bar charts (vertical or horizontal)
- Line charts (trends over time)
- Area charts (filled line charts)
- Pie charts (distribution)
- Donut charts (distribution with center hole)
Use cases:
- Sales over time
- Category distribution
- Trend analysis
- Performance metrics
Part 3: Adding Widgets (Step-by-Step)
Starting to Add Widgets
Widgets
No widgets yet. Click "Add Widget" to get started.
In the Dashboard Editor, find the "Widgets" section
Click the "+ Add Widget" button
A new widget configuration area appears
Configuring a Widget
Let's create a "Recent High-Priority Leads" list widget as an example.
Step 1: Set Widget Title
In the "Widget Title" field, enter a descriptive name
Example:
Recent High-Priority LeadsThis title appears at the top of the widget
Step 2: Select Widget Type
Click the "Widget Type" dropdown
Choose from:
- List
- Text
- Stat Card
- Table
- Chart
For this example, select "List"
The configuration fields update based on your selection
Step 3: Choose Data Source
Every widget (except Text) needs a taible to pull data from:
Find the "Taible" dropdown in the widget configuration
Select which taible contains the data you want to show
Example: Select "Leads" taible
The widget will display rows from this taible.
Step 4: Configure Filters (Optional)
Want to show only specific rows? Add filters:
Click "+ Add Filter" button
Build a filter expression:
- Field: Choose which column to filter (e.g.,
lead_score) - Operator: Choose comparison (Greater Than or Equal)
- Value: Enter threshold (e.g.,
80)
- Field: Choose which column to filter (e.g.,
Add more filters if needed:
- Click "+ Add Filter" again
- Choose AND/OR to combine filters
Example filter:
Show leads where:
- lead_score GTE 80 AND
- status EQUALS "qualified"Step 5: Set Max Entries
Control how many items the widget displays:
Find the "Max Entries" field
Enter a number:
5: Top 5 items only10: Recent 10 items (default)20: Extended list
The widget shows the most recent items based on sort order
Step 6: Configure Sort Order (Optional)
Choose how items are ordered:
Find the "Sort By" section
Select a column to sort by:
created_at: Newest firstlead_score: Highest firstlast_contact_date: Most recent- Any other column
Choose direction:
- Descending: Largest to smallest, newest to oldest (Z→A, 9→0)
- Ascending: Smallest to largest, oldest to newest (A→Z, 0→9)
Step 7: Choose Display Fields (List Widgets)
For List widgets, choose which column values to show for each item:
Find the "Text Elements" section
Click "+ Add Text Element"
Select the first column (this becomes the title - bold and larger)
Click "+ Add Text Element" again
Select the second column (this becomes secondary text - smaller)
Repeat for additional fields
Example configuration:
Text Elements:
1. name (shown bold as title)
2. company (shown as regular text)
3. lead_score (shown as regular text)
Result in widget:
─────────────────────
John Doe (bold title)
Acme Corporation (regular text)
Score: 95 (regular text)
─────────────────────Step 8: Position and Size Widget
Position and Size
Dashboard grid has 12 columns. Width 6 = half screen, Width 12 = full screen.
Control where the widget appears and how large it is:
- Column: Which column the widget starts at (1-12)
- Row: Which row the widget starts at (1+)
- Width: How many columns wide (1-12)
- Height: How many rows tall (1+)
Grid system:
Dashboard grid = 12 columns wide
Widget width examples:
- Width 4 = 1/3 of screen
- Width 6 = 1/2 of screen
- Width 12 = full screen widthCommon layouts:
- Two side-by-side: Widget 1 at column 1, width 6 + Widget 2 at column 7, width 6
- Three across: Each widget width 4 (columns 1, 5, 9)
- One large, two small: Large widget width 8 + two widgets width 4 stacked
Step 9: Save Dashboard
Click the "Save" button at the top right
Your widget configuration is saved
The widget is now active and showing data!
Example: Complete Widget Configuration
Here's a full example of a List widget:
Widget: "High-Priority Leads"
Title: High-Priority Leads
Type: List
Taible: Leads
Filters:
- lead_score GTE 80
- status EQUALS "qualified"
Max Entries: 10
Sort By: lead_score (descending - highest first)
Text Elements:
1. name
2. company
3. email
Position:
- Column: 1
- Width: 6 (half screen)
- Row: 1
- Height: 2Result: Widget displays the top 10 qualified leads with scores 80+, sorted by highest score first, showing name, company, and email for each.
Part 4: Configuring Other Widget Types
Stat Card Widget Configuration
For displaying key metrics as large numbers:
Required settings:
- Taible: Data source
- Value Template: Which field to aggregate (e.g.,
order_total) - Aggregation: How to calculate:
- sum: Add all values together
- avg: Calculate average
- count: Count number of rows
- min: Find smallest value
- max: Find largest value
- first: Use first row's value
- last: Use last row's value
Optional settings:
- Prefix: Text before number (e.g.,
$) - Suffix: Text after number (e.g.,
%) - Decimals: How many decimal places (default: 2)
- Label: Text above the number
- Show Trend: Display comparison to previous period
- Trend Value Template: Field for comparison
Example:
Title: Total Revenue
Value Template: order_total
Aggregation: sum
Prefix: $
Decimals: 0
Show Trend: Yes
Trend Label: vs last monthShows: $127,450 with up/down arrow
Text Widget Configuration
For static or dynamic text content:
Settings:
- Content: The text to display (supports Markdown)
- Font Size: Small, normal, or large
- Alignment: Left, center, or right
- Template Mode: Use dynamic content from taible
Use Markdown for formatting:
# Important Notice
Please review **high-priority leads** daily.
- Check scores greater than 90
- Contact within 24 hours
- Update status after callTable Widget Configuration
For traditional table displays:
Settings:
- Taible: Data source
- Columns: Which columns to show
- Column Width: Width for each column
- Column Alignment: Left, center, or right per column
- Max Entries: How many rows to display
- Sort By: Default sort order
- Filters: Which rows to include
Example:
Columns:
1. order_id (width: 100px, left align)
2. customer_name (width: 200px, left align)
3. order_total (width: 100px, right align)
4. status (width: 100px, center align)Chart Widget Configuration
For data visualization:
Settings:
- Taible: Data source
- Chart Type: Bar, line, area, pie, or donut
- Category Field: X-axis data (e.g., date, category name)
- Value Fields: Y-axis data (can have multiple series)
- Aggregation: How to calculate values
- Filters: Which data to include
Example - Bar Chart:
Title: Orders by Day
Chart Type: Vertical Bar
Category Field: order_date
Value Field: order_total
Aggregation: sumShows: Bar for each day with total order value
Example - Pie Chart:
Title: Orders by Status
Chart Type: Pie
Category Field: status
Value Field: (count)
Aggregation: countShows: Pie chart with slice per status (Pending, Complete, etc.)
Part 5: Viewing Dashboards
Opening a Dashboard
From taible view:
Click the "N Dashboards" button
Select a dashboard name from the dropdown
The dashboard opens in full-screen view
Dashboard View Interface
Lead Processing Overview
Real-time view of high-priority leads that need immediate follow-up. Updated automatically as new leads are qualified.
Header elements:
- ← Back arrow: Returns to the taible
- Dashboard name: Large title at the top
- Description: Brief explanation of the dashboard (if provided)
- Refresh button: Manually reload all widget data
- Edit button: Opens the Dashboard Editor to modify widgets
How Widgets Display
Hot Leads - Immediate Follow-Up
Total Revenue
$127,450
Pending Orders
Grid layout: 12 columns, widgets positioned and sized independently
Grid layout features:
- Widgets arranged in a 12-column grid
- Each widget can span multiple columns and rows
- Widgets show their title at the top
- Content updates automatically in real-time
Widget interactions:
- Hover over list items to see them highlight
- Scroll within widgets if content is too long
- Click items in list widgets (functionality coming soon)
Real-Time Updates
Widgets update automatically when data changes:
What happens behind the scenes:
1. New row added to the taible
2. System checks: Does it match widget filters?
→ Yes: Row appears in widget
→ No: Not shown
3. Widget updates via live connection
4. No manual refresh needed ✓You see changes instantly without clicking Refresh!
Part 6: Managing Dashboards
Editing a Dashboard
To modify an existing dashboard:
Open the dashboard (click its name from the dropdown)
Click the "Edit" button at the top right
The Dashboard Editor opens
Make your changes:
- Update name or description
- Add new widgets
- Modify existing widget configurations
- Change widget positions or sizes
- Remove widgets you don't need
Click "Save" to apply changes
Deleting a Widget
To remove a widget from a dashboard:
Open the Dashboard Editor
Find the widget in the configuration list
Click the trash icon or "Delete Widget" button
The widget is removed from the configuration
Click "Save Dashboard" to confirm
Deleting a Dashboard
To remove an entire dashboard:
Open the Dashboard Editor for that dashboard
Click the "Delete" button (top left, red)
Confirm the deletion when prompted
The dashboard is permanently removed
Warning: Deletion is permanent - you cannot undo it!
Part 7: Practical Dashboard Examples
Example 1: Sales Lead Dashboard
Purpose: Monitor lead processing pipeline
Dashboard name: "Lead Processing Overview"
Widgets:
Widget 1: "Hot Leads - Immediate Follow-Up"
- Type: List
- Taible: Leads
- Filters:
lead_score GTE 90ANDstatus EQUALS "qualified" - Max Entries: 5
- Sort:
lead_score(descending - highest first) - Text: name, company, email, lead_score
- Position: Column 1, Width 6, Row 1, Height 2
Shows the top 5 highest-scoring leads that need attention.
Widget 2: "Needs Enrichment"
- Type: List
- Taible: Leads
- Filters:
company_data IS_EMPTYANDemail IS_NOT_EMPTY - Max Entries: 10
- Sort:
created_at(descending - newest first) - Text: name, email
- Position: Column 7, Width 6, Row 1, Height 2
Shows leads that are missing company data.
Widget 3: "Today's New Leads"
- Type: List
- Taible: Leads
- Filters:
created_at GT "today" - Max Entries: 15
- Sort:
created_at(descending) - Text: name, company, source, lead_score
- Position: Column 1, Width 12 (full width), Row 3, Height 2
Shows all leads added today.
Example 2: Operations Dashboard
Purpose: Monitor order fulfillment
Dashboard name: "Order Fulfillment Monitor"
Widgets:
Widget 1: "Total Revenue Today"
- Type: Stat Card
- Taible: Orders
- Filters:
order_date GT "today" - Value Template:
order_total - Aggregation: sum
- Prefix:
$ - Decimals: 0
- Position: Column 1, Width 4, Row 1, Height 1
Shows total $ value of orders today.
Widget 2: "Pending Orders"
- Type: List
- Taible: Orders
- Filters:
status = "pending" - Max Entries: 20
- Sort:
order_date(ascending - oldest first) - Text: order_id, customer_name, order_total, order_date
- Position: Column 5, Width 8, Row 1, Height 2
Shows oldest pending orders first (need action).
Widget 3: "Failed Shipments"
- Type: List
- Taible: Orders
- Filters:
shipping_status = "FAILED" - Max Entries: 10
- Sort:
order_date(descending) - Text: order_id, customer_name, error_message
- Position: Column 1, Width 12, Row 3, Height 2
Shows recent shipment failures.
Example 3: Support Dashboard
Purpose: Monitor ticket queue
Dashboard name: "Support Ticket Monitor"
Widgets:
Widget 1: "Urgent Tickets"
- Type: List
- Taible: Support Tickets
- Filters:
priority = "urgent"ANDstatus != "closed" - Max Entries: 10
- Sort:
created_at(ascending - oldest first) - Text: ticket_id, subject, customer_name, created_at
- Position: Column 1, Width 12 (full width), Row 1, Height 1
Shows oldest urgent tickets first.
Widget 2: "Unassigned Tickets"
- Type: List
- Taible: Support Tickets
- Filters:
assigned_to IS_EMPTYANDstatus = "open" - Max Entries: 15
- Sort:
created_at(ascending) - Text: ticket_id, subject, category
- Position: Column 1, Width 6, Row 2, Height 2
Shows tickets that need assignment.
Widget 3: "Tickets by Status"
- Type: Chart (Pie)
- Taible: Support Tickets
- Chart Type: Pie
- Category Field: status
- Aggregation: count
- Position: Column 7, Width 6, Row 2, Height 2
Visual breakdown of ticket status distribution.
Part 8: Dashboard Best Practices
Tip 1: Focus on Actionable Data
Show data that drives action:
✅ Include:
- Items needing action (pending, failed, urgent)
- Current errors or problems
- Pending approvals or reviews
- High-priority items
- Real-time metrics
❌ Avoid:
- Completed items (already done)
- Archived data (historical only)
- Static information (doesn't change)
Why: Dashboards should help you make decisions and take action, not just show historical data.
Tip 2: Limit Widget Count
Don't overcrowd your dashboard:
❌ Too many widgets:
- 15+ widgets on one dashboard
- Information overload
- Hard to focus on what matters
- Slow to scan
✅ Optimal:
- 3-6 widgets per dashboard
- Each widget serves a clear purpose
- Easy to review at a glance
- Create multiple dashboards for different views
Why: A cluttered dashboard is as bad as no dashboard - you can't find what you need.
Tip 3: Use Descriptive Titles
Clear widget titles help you find information quickly:
❌ Vague:
- "Items"
- "List 1"
- "Data"
✅ Specific:
- "High-Priority Leads for Follow-Up"
- "Failed Enrichments - Last 24 Hours"
- "Orders Pending Shipment (Urgent)"
Include important context in the title so you know exactly what the widget shows.
Tip 4: Consistent Display Fields
Show relevant data in list items:
For leads:
- Name (who)
- Company (where)
- Score/Priority (why important)
For orders:
- Order ID (reference)
- Customer (who)
- Total (value)
- Status (current state)
For tickets:
- Ticket ID (reference)
- Subject (what)
- Priority (urgency)
- Age (how long waiting)
Pattern: Show the information you need to take action without opening the full row.
Tip 5: Create Role-Specific Dashboards
Different roles need different views:
Sales Manager Dashboard:
- High-value pipeline
- Team performance
- Conversion rates
- Revenue metrics
Sales Rep Dashboard:
- My assigned leads
- Follow-up queue
- Today's tasks
- Recent contacts
Operations Manager Dashboard:
- System errors
- Processing delays
- Failed operations
- Resource usage
Support Agent Dashboard:
- My open tickets
- Unassigned queue
- Escalated items
- SLA warnings
Why: Each person needs different information to do their job effectively.
Tip 6: Use Filters Wisely
Filters keep widgets focused:
✅ Good filtering:
- Show only open/active items
- Filter by priority or urgency
- Include recent time ranges
- Match user responsibilities
❌ Poor filtering:
- No filters (shows everything)
- Too restrictive (shows almost nothing)
- Complex multi-condition filters that are hard to understand
Test your filters: Make sure they show the right data in the right amount.
Tip 7: Organize by Priority
Arrange widgets by importance:
Top of dashboard (most visible):
- Urgent items needing immediate action
- Critical errors or failures
- High-priority alerts
Middle of dashboard:
- Important but not urgent items
- Key metrics for monitoring
Bottom of dashboard:
- Nice-to-know information
- Context or supporting data
Layout tip: Put the most important widget in the top-left corner - that's where eyes go first.
Tip 8: Keep It Simple
Complexity is the enemy of usefulness:
✅ Simple dashboards work:
- Easy to understand at a glance
- Clear purpose for each widget
- Consistent organization
- Minimal configuration
❌ Complex dashboards fail:
- Too many options
- Unclear purpose
- Hard to maintain
- Nobody uses them
Rule of thumb: If you can't explain the dashboard in one sentence, it's too complex.
Part 9: Troubleshooting
Widget Shows "No Data Available"
Possible causes:
The taible is empty: No rows exist yet
- Fix: Add some rows to the taible first
Filters are too restrictive: No rows match the filters
- Fix: Edit the widget, review filters, make them less restrictive
Wrong taible selected: Looking at the wrong data source
- Fix: Edit the widget, select the correct taible
Widget Shows Old Data
Possible causes:
Browser cache issue: Data is cached locally
- Fix: Click the "Refresh" button in the dashboard header
Connection problem: Real-time updates interrupted
- Fix: Reload the page (Ctrl+R or Cmd+R)
Widget Title is Missing
Possible cause: Title field is empty
Fix:
- Edit the dashboard
- Find the widget configuration
- Enter a title in the "Widget Title" field
- Save the dashboard
Widget is Too Small or Too Large
Fix:
- Edit the dashboard
- Find the widget configuration
- Adjust the position and size fields:
- Width: Change column span (1-12)
- Height: Change row span (1+)
- Save the dashboard
Tip: Width 6 = half screen, Width 12 = full screen
Can't Find My Dashboard
Possible causes:
Wrong taible: Dashboard is associated with a different taible
- Fix: Go to the correct taible, check the dashboards dropdown
Dashboard was deleted: Someone removed it
- Fix: Create a new dashboard
No dashboards created yet: The button says "0 Dashboards"
- Fix: Click to create your first dashboard
Widget Shows Wrong Data
Possible causes:
Filters are incorrect: Showing rows you don't want
- Fix: Edit widget, review filter expressions
Sort order is wrong: Items in wrong order
- Fix: Edit widget, change "Sort By" setting
Wrong columns displayed: Showing wrong text elements
- Fix: Edit widget, update "Text Elements" list
Summary: Dashboard Widgets
You now understand dashboards and widgets:
✅ Dashboard basics:
- Access from "N Dashboards" button in taible toolbar
- Create new dashboard with name and description
- Configure grid layout (columns, page height, gap)
- Add widgets to display data
- Save and view dashboards
✅ Five widget types (all fully functional):
- List: Scrollable items from a taible
- Stat Card: Large numbers with KPIs and trends
- Text: Static or dynamic text content
- Table: Tabular data with columns
- Chart: Visual graphs (bar, line, pie, etc.)
✅ Widget configuration:
- Select widget type and title
- Choose data source (taible)
- Apply filters to show specific rows
- Set sort order and max entries
- Configure display fields or aggregations
- Position and size on grid
✅ Dashboard management:
- Edit dashboard to modify widgets
- Delete widgets you don't need
- View dashboard for real-time monitoring
- Refresh button for manual updates
- Real-time updates happen automatically
✅ Real-world examples:
- Sales lead dashboard (hot leads, enrichment needs, new leads)
- Operations dashboard (revenue, pending orders, failed shipments)
- Support dashboard (urgent tickets, unassigned, status breakdown)
- Role-specific dashboards for different team members
✅ Best practices:
- Focus on actionable data that drives decisions
- Limit to 3-6 widgets per dashboard
- Use descriptive, specific titles
- Show relevant fields consistently
- Create role-specific dashboards
- Use filters to keep widgets focused
- Organize by priority (top = most important)
- Keep it simple and maintainable
✅ Troubleshooting:
- Check filters if widget shows no data
- Refresh if data seems old
- Adjust size if widget is too small/large
- Verify taible selection if data is wrong
Next Steps
You've completed Section 19.1: Dashboard Widgets!
You now know how to create dashboards with multiple widget types to monitor your automation data in real-time.
Next: Continue with additional sections in Part 19 to learn about advanced reporting and analytics!
Stay informed! 📊