Info Widget
The Info Widget displays real-time or calculated values in a prominent, styled card. It is commonly used to highlight key numbers like active user counts, system alerts, or aggregated performance metrics.
Typical Use Cases
| Use Case | Label | Value Source Condition |
|---|---|---|
| Show active employees | Active Employees | employee_status = true |
| Display open tickets | Open Tickets | ticket_status = open |
| Highlight failed imports | Failed Records | status = failed |
| Show overdue items | Overdue Tasks | due_date < today() |
Widget Overview
| Feature | Supported |
|---|---|
| Display value | ✅ |
| Clickable “View Details” | ✅ |
| Conditional formatting | ✅ |
| Aggregation (e.g., count) | ✅ |
| Visibility by event | ✅ |
| Linkable to other widgets | ✅ |
Data Source Options
You can choose one of the following as the widget’s data source:
| Source Type | Description |
|---|---|
| Custom Table | Use a predefined table or view from the dashboard |
| Workflow | Call a backend service/API to retrieve a computed value |
| Event | Show a value in response to a triggered event |
Configuration Panels (for Custom Table)
When using Custom Table as source, four configuration tabs are available:
| Panel | Purpose |
|---|---|
| Data | Connect data, define triggers, control visibility, apply transform |
| Appearance | Customize font, colors, icon, and display rules |
| Details | Define what information appears when "View details" is clicked |
| Filter | Restrict dataset to specific rows or conditions |
Data Panel
- Widget Name: Title shown in card (e.g., "Active Employees")
- Widget Description: Optional help text
- Datasource: Choose
Custom Table - Select Table: Bind dataset (e.g.,
mock-data-for-filter) - Linked From: Connects to Search Employees or any other widget
- Event Handling:
- Show on Event: Make the widget visible on selection (e.g., when a user searches)
- Hide on Event: Hide when a selection is cleared
- Transform: Use JSONata to modify inputs before processing
Appearance Panel
- Font Sizes:
Widget Name Font Size(e.g., 24)Widget Data Font Size(e.g., 60)
- View Details: Toggle visibility of “View details” link
- Data Warning Rules:
- Define ranges (e.g., 0–450, 451–600)
- Set:
- Background color
- Text color
- Custom icon
- Use left/right positioning
- Icon Customization:
- Icon: Select from library
- Size: XS, Small, Medium, Large
- Position: Left / Right of the number
Details Panel
Defines the fields to display when the user clicks “View details”.
- Table Columns:
- Drag-and-drop order
- Check/uncheck visibility
- Enable searchable fields (magnifying glass icon)
Typical selections might include:
employee_nameemployee_emailemployee_genderemployee_tenure_yearsis_employee_active
These are the fields shown in the linked Display Widget or Table Widget on detail view.
Filter Panel
Uses the same powerful filtering logic as described for the Input Widget.
- Filters are dynamic based on field type:
- Text: Is, Contains, Starts with, etc.
- Numeric: Equals, Between, Greater than
- Date: Is before, Relative to, Between
- Compare: Compare field A to field B
- Use Filter Groups with AND/OR logic to create complex conditions
Example:
- Group A:
employee_gender = FemaleANDtenure_years > 5 - Group B:
employee_gender = MaleANDtenure_years < 20 - Combine:
Group A OR Group B
Widget Linking
- Can be triggered by widgets like Search Employees
- Visibility and content update dynamically based on external selection
- Supports conditional logic using JSONata in
Transformfield
Example: “Active Employees = 498”
- Source: Custom Table
- Filter:
is_employee_active = true - Linked from: Search Employees
- Displayed fields: Name, Email, Gender, Tenure
- Color rule: Yellow background when count is 451–600
- Icon: People icon (left side)