| Card |
- Use it for: a single alert, update, or status card
- Required:
subject
- Common fields:
summary, timestamp,
badgeText, variant
- Actions:
link and optional
additionalLink, each with
text and action
- Variant values:
error, warning,
info, or omitted for neutral
Use commands such as ora.Invoke(...).
|
<oraInfoDisplay key="maintenance-card">
{
"patternId": "cardWidget",
"config": {
"subject": "Maintenance Complete",
"summary": "Scheduled database maintenance finished successfully.",
"timestamp": "1 hour ago",
"badgeText": "Info",
"variant": "info",
"link": {
"text": "View Details",
"action": "ora.Invoke(\"viewMaintenanceSummary\")"
}
}
}
</oraInfoDisplay>
|
| Messages List |
- Use it for: alerts, activity feeds, and small collections
of highlight items
- Required:
items[] with at least title
per item
- Item fields:
subtitle, summary,
status, badgeText,
priority, timestamp,
image
- Interactivity: item
action and item
additionalAction with text
+ command
Runtime behavior is considered. additionalAction is
only shown when the widget is in a focused panel. Also, the runtime
supports success as a priority in addition to alert, warning, and
medium.
|
<oraInfoDisplay key="system-alerts">
{
"patternId": "messageListWidget",
"config": {
"subtitle": "Real-time metrics",
"items": [
{
"title": "Memory Usage Spike Detected",
"subtitle": "82% confidence",
"summary": "Memory consumption increased by 40% in the last 5 minutes",
"status": "Investigating root cause",
"badgeText": "Medium",
"priority": "medium",
"timestamp": "3 min ago",
"action": "ora.Invoke(\"openMemoryIncident\", { \"metric\": \"memory\" })",
"additionalAction": {
"text": "View Metrics",
"command": "ora.Invoke(\"viewMetrics\", { \"metric\": \"memory\" })"
}
},
{
"title": "Network Latency Increase",
"summary": "Average response time increased from 120ms to 180ms.",
"status": "Under investigation",
"badgeText": "Warning",
"priority": "warning",
"timestamp": "16 min ago"
}
]
}
}
</oraInfoDisplay>
|
| Change List |
- Use it for: current-versus-previous metric
comparisons
- Required:
displayType, items
- displayType:
percentage, raw, or
currency
- items[]:
title, currentValue,
previousValue
- Optional:
subtitle, messages
Values should stay numeric. Formatting comes from displayType, not
from embedding percent signs or currency symbols inside the
numbers.
|
<oraInfoDisplay key="campaign-change-list">
{
"patternId": "changeListWidget",
"config": {
"subtitle": "Campaign performance comparison",
"displayType": "percentage",
"items": [
{ "title": "Email Open Rate", "currentValue": 28.2, "previousValue": 24.5 },
{ "title": "Click-through Rate", "currentValue": 4.6, "previousValue": 3.8 },
{ "title": "Conversion Rate", "currentValue": 1.9, "previousValue": 2.1 }
],
"messages": [
"Conversion rate drop may indicate landing page issues"
]
}
}
</oraInfoDisplay>
|
| Chart |
- Use it for: trends, comparisons, or proportions
- Required:
type, data
- type:
line, bar, or
pie
- data.labels[]: x-axis labels or categories
- data.datasets[]: each dataset needs
label and numeric
data[]
- Optional:
insights[]
|
<oraInfoDisplay key="sales-trend-chart">
{
"patternId": "chartWidget",
"config": {
"type": "line",
"data": {
"labels": ["January", "February", "March", "April", "May"],
"datasets": [
{
"label": "Sales Revenue",
"data": [10000, 25000, 15000, 40000, 30000]
}
]
},
"insights": [
"Revenue peaked in April",
"Steady growth trend overall"
]
}
}
</oraInfoDisplay>
|
| Record |
- Use it for: forms and read-only detail views
- Required:
id, fields[]
- Optional:
readOnly
- Field types:
text, textarea,
number, date,
select, system
- Field fields:
id, type,
value, plus label and
options when applicable
In editable mode, the runtime automatically submits the form through
an ora.Agent(<oraFormSubmit ...>) command. You
don't configure a separate submit command in the widget itself.
|
<oraInfoDisplay key="employee-form">
{
"patternId": "recordWidget",
"config": {
"id": "employee_form",
"readOnly": false,
"fields": [
{
"id": "full_name",
"type": "text",
"label": "Full Name",
"value": "John Doe"
},
{
"id": "employee_id",
"type": "number",
"label": "Employee ID",
"value": 12345
},
{
"id": "department",
"type": "select",
"label": "Department",
"value": "engineering",
"options": [
{ "value": "engineering", "label": "Engineering" },
{ "value": "sales", "label": "Sales" }
]
},
{
"id": "session_context",
"type": "system",
"value": { "conversation_id": "abc123" }
}
]
}
}
</oraInfoDisplay>
|
| Multi Record |
- Use it for: tabular record lists
- Required:
cols[] and rows[]
- Column forms: plain string, or object with
label and optional
showOnExpand
- Row cells: plain string, or badge object with
type, text, and
priority
- Optional row actions:
action button and
drillDownAction on the first column
- Optional:
subtitle for table context and
accessibility
showOnExpand columns only appear when the widget is
focused. This is useful for secondary columns that should stay
hidden in compact mode.
|
<oraInfoDisplay key="pending-approvals-table">
{
"patternId": "multiRecordWidget",
"config": {
"subtitle": "Pending approvals",
"cols": ["Request ID", "Type", "Status"],
"rows": [
{
"cells": [
"REQ-101",
"Budget",
{ "type": "badge", "text": "PENDING", "priority": "warning" }
],
"action": {
"text": "Review",
"command": "ora.Invoke(\"reviewRequest\", { \"id\": \"REQ-101\" })"
},
"drillDownAction": "ora.Invoke(\"openRequest\", { \"id\": \"REQ-101\" })"
},
{
"cells": [
"REQ-102",
"Travel",
{ "type": "badge", "text": "PENDING", "priority": "warning" }
],
"action": {
"text": "Review",
"command": "ora.Invoke(\"reviewRequest\", { \"id\": \"REQ-102\" })"
}
}
]
}
}
</oraInfoDisplay>
|
| Sankey |
- Use it for: flows between stages or states
- Required:
nodes[], edges[]
- nodes[]:
id, name
- edges[]:
source, target,
value
Node IDs are numeric and edges point to those IDs. Keep values
positive and keep the flow easy to follow.
|
<oraInfoDisplay key="support-flow-sankey">
{
"patternId": "sankeyWidget",
"config": {
"nodes": [
{ "id": 0, "name": "Web Visitor" },
{ "id": 1, "name": "Web Chat" },
{ "id": 2, "name": "AI Chat Bot" },
{ "id": 3, "name": "Resolved by Bot" },
{ "id": 4, "name": "Transfer to Human" },
{ "id": 5, "name": "Resolved by Human" }
],
"edges": [
{ "source": 0, "target": 1, "value": 1000 },
{ "source": 1, "target": 2, "value": 1000 },
{ "source": 2, "target": 3, "value": 700 },
{ "source": 2, "target": 4, "value": 300 },
{ "source": 4, "target": 5, "value": 300 }
]
}
}
</oraInfoDisplay>
|