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

Function	Description
greenRed	Applies a green or red color based on conditions
titleCase	Converts text to title case
hoverCard	Displays additional information when hovering over a cell
cellOnClick	Triggers an action when a cell is clicked
columnColor	Changes the color of a column based on specified rules
showCellChange	Highlights cells when their values change via WebSocket updates. Only used with the Live Grid Widget

Render Function Parameters

Parameter	Type	Description
actionType	string	Specifies the action type for the render function ("openUrl", "groupBy", "sendToAgent")
colorValueKey	string	Specifies which field to use for determining the color when showing cell changes
hoverCardData	array of strings	Specifies columns to show in the hover card
colorRules	array of objects	An array of rules for conditional coloring
sendToAgent	object	Configuration for sending data to an AI agent

Send to Agent Parameters

Parameter	Type	Description
markdown	string	Markdown content to send to the agent, supports template variables from row data
agentId	string	(Optional) Specific agent ID to send the message to

Color Rules Parameters

Parameter	Type	Description	Options
condition	string	The condition for applying the color	"eq", "ne", "gt", "lt", "gte", "lte", "between", "contains", "notContains"
value	number or string	The value for the condition. For contains and notContains, use a string value	-
range	object	An object specifying min and max values for the between condition	{min: number, max: number}
color	string	The color to apply	Hex code or "green", "red", "blue"
fill	boolean	Indicates if the color should fill the cell	true/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.

{
    ...
    "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
                    }
                ]
            }
        }
    ]
}

Example using contains and notContains conditions:

{
    ...
    "columnsDefs": [
        {
            "field": "status",
            "headerName": "Status",
            "cellDataType": "text",
            "renderFn": "columnColor",
            "renderFnParams": {
                "colorRules": [
                    {
                        "condition": "contains",
                        "value": "Active",
                        "color": "green",
                        "fill": true
                    },
                    {
                        "condition": "contains",
                        "value": "Pending",
                        "color": "yellow",
                        "fill": true
                    },
                    {
                        "condition": "notContains",
                        "value": "Active",
                        "color": "red",
                        "fill": true
                    }
                ]
            }
        }
    ]
}

This example:

• Colors cells green if the status contains "Active"
• Colors cells yellow if the status contains "Pending"
• Colors cells red if the status does not contain "Active"

Note: The contains and notContains conditions work with string values only.

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",
              "groupBy": {
                "paramName": "symbol"
              },
              "colorValueKey": "Analyst",
              "colorRules": [
                {
                  "condition": "eq",
                  "value": "Sarah Johnson",
                  "color": "blue",
                  "fill": true
                }
              ]
            }
        },
      ] 
}

Using valueField for Custom Value Mapping

The valueField option allows you to use a different field value than what's displayed in the cell. This is useful when your table displays human-readable values (like company names) but your API expects different values (like IDs).

Example: A table displays company names, but clicking should pass the company ID to the parameter:

{
    ...
    "columnsDefs": [
        {
            "field": "companyName",
            "headerName": "Company",
            "cellDataType": "text",
            "renderFn": "cellOnClick",
            "renderFnParams": {
                "actionType": "groupBy",
                "groupBy": {
                    "paramName": "companyId",
                    "valueField": "companyId"
                }
            }
        }
    ]
}

In this example:

• The cell displays the value from companyName field (e.g., "Apple Inc.")
• When clicked, it passes the value from companyId field (e.g., "AAPL") to the companyId parameter
• This allows you to show friendly names while using IDs for API calls

Data structure example:

[
    {
        "companyName": "Apple Inc.",
        "companyId": "AAPL",
        "price": 150.25
    },
    {
        "companyName": "Microsoft Corporation",
        "companyId": "MSFT",
        "price": 350.50
    }
]

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.

{
    ...
    "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