Skip to main content

Render Functions

In the widgets.json configuration, you can specify render functions to customize how the data is displayed in the widget - These functions are only compatible with widgets that use a columnsDefs.

Available Render Functions

FunctionDescription
greenRedApplies a green or red color based on conditions
titleCaseConverts text to title case
hoverCardDisplays additional information when hovering over a cell
cellOnClickTriggers an action when a cell is clicked
columnColorChanges the color of a column based on specified rules
showCellChangeHighlights cells when their values change via WebSocket updates. Only used with the Live Grid Widget

Render Function Parameters

ParameterTypeDescription
actionTypestringSpecifies the action type for the render function ("openUrl", "openModal", "openWidget", "groupBy", "sendToAgent")
colorValueKeystringSpecifies which field to use for determining the color when showing cell changes
hoverCardDataarray of stringsSpecifies columns to show in the hover card
colorRulesarray of objectsAn array of rules for conditional coloring
sendToAgentobjectConfiguration for sending data to an AI agent

Send to Agent Parameters

ParameterTypeDescription
markdownstringMarkdown content to send to the agent, supports template variables from row data
agentIdstring(Optional) Specific agent ID to send the message to

Color Rules Parameters

ParameterTypeDescriptionOptions
conditionstringThe condition for applying the color"eq", "ne", "gt", "lt", "gte", "lte", "between"
valuenumberThe value for the condition-
rangeobjectAn object specifying min and max values for the between condition{min: number, max: number}
colorstringThe color to applyHex code or "green", "red", "blue"
fillbooleanIndicates if the color should fill the celltrue/false

Example Configurations

Column Color

To use the column color render function, you need to add it to the columnsDefs array in your widgets.json file for the column you want to apply it to.

The below example would apply a green color to the cell if the value is between 50 and 90, a red color if the value is less than 50, and a blue color if the value is greater than 90.

color example
{
...
"columnsDefs": [
{
"field": "Analyst",
"headerName": "Analyst",
"renderFn": "columnColor",
"renderFnParams": {
"colorRules": [
{
"condition": "between",
"range": {
"min": 50,
"max": 90
},
"color": "blue",
"fill": true
},
{
"condition": "lt",
"value": 50,
"color": "red",
"fill": true
},
{
"condition": "gt",
"value": 90,
"color": "green",
"fill": true
}
]
}
}
]
}

Multiple Render Functions and Color Rules

If you want to use multiple render functions, you can pass an array of render functions to the renderFn parameter. Below is an example of a column that uses both the cellOnClick and columnColor render functions. We also specify the colorValueKey so that the columnColor render function knows which field to use for determining the color. In this case we want to color the symbol cell based on the Analyst field.

{
...
"columnsDefs": [
{
"field": "Symbol",
"headerName": "Symbol",
"renderFn": [
"cellOnClick",
"columnColor"
],
"renderFnParams": {
"actionType": "groupBy",
"groupByParamName": "symbol",
"colorValueKey": "Analyst",
"colorRules": [
{
"condition": "eq",
"value": "Sarah Johnson",
"color": "blue",
"fill": true
}
]
}
},
]
}

Hover Card

To use the hover card render function, you need to add it to the columnsDefs array in your widgets.json file for the column you want to apply it to.

color example
{
...
"columnsDefs": [
{
"field": "analyst",
"headerName": "Analyst",
"renderFn": "hoverCard",
"renderFnParams": {
"hoverCard": {
"cellField": "value",
"title": "Analyst Details",
"markdown": "### {value}\n- **Description:** {description}\n- **Additional Info:** {additionalInfo}"
}
}
}
]
}

The hover card example would use the below data to display the hover card.

[
{
"id": 1,
"name": "Item 1",
"analyst": {
"value": "Cool Guy 1",
"description": "This is a detailed description for Item 1, but it's not as long as the others",
"additionalInfo": "Some additional information about Item 1"
}
},
{
"id": 2,
"name": "Item 2",
"analyst": {
"value": "Cool Guy 2",
"description": "This is a detailed description for Item 2, but it's a bit longer than the first one",
"additionalInfo": "Some additional information about Item 2"
}
},
{
"id": 3,
"name": "Item 3",
"analyst": {
"value": "Cool Guy 3",
"description": "This is a detailed description for Item 3, but it's the longest one yet and it's still going",
"additionalInfo": "Some additional information about Item 3"
}
}
]

Additional Notes for Hover Card

  • You can pass a simple configuration to get a hover card with default settings, excluding the title and value.
  • The hoverCard render function allows for markdown customization, providing flexibility in how information is displayed.

Prefix and Suffix

The prefix and suffix parameters can also be used in the columnsDefs to add a prefix or suffix to the column values. See the widgets-json-reference for more information.

Send to Agent

The sendToAgent action type allows users to click on table cells to send contextual data directly to an AI agent for analysis. This is particularly useful for getting insights about specific data points or rows.

{
...
"columnsDefs": [
{
"field": "company",
"headerName": "Company",
"renderFn": "cellOnClick",
"renderFnParams": {
"actionType": "sendToAgent",
"sendToAgent": {
"markdown": "Please analyze the company **{company}** with the following details:\n\n- **Revenue:** ${revenue}M\n- **Growth Rate:** {growth_rate}%\n- **Market Cap:** ${market_cap}B\n- **Sector:** {sector}\n\nProvide insights on the company's financial performance, growth prospects, and market position."
}
}
},
{
"field": "revenue",
"headerName": "Revenue (M)",
"renderFn": "cellOnClick",
"renderFnParams": {
"actionType": "sendToAgent",
"sendToAgent": {
"markdown": "Analyze the revenue figure of **${revenue}M** for {company}. How does this compare to industry standards in the {sector} sector?",
"agentId": "financial-analyst-agent"
}
}
}
]
}

Template Variables

The markdown content in sendToAgent supports template variables using curly braces {}. You can reference any field from the row data:

  • {company} - References the company field value
  • {revenue} - References the revenue field value
  • {growth_rate} - References the growth_rate field value
  • And so on for any field in your data