# Cell callouts

{% hint style="info" %}
**Version compatibility**

Cell callouts were introduced in version **4.70.0** of the JourneyApps Runtime.

For correct linting and type support in OXIDE, ensure you have [`runtime-build`](https://docs.journeyapps.com/reference/build/syntax/typescript-apps/runtime-build-package) set to version `2.3.2` or higher.
{% endhint %}

Callouts draw attention to the end user viewing a table. Callouts show a tooltip above a cell much like cell validation, but give developers more flexibility in terms of the message being presented and color scheme.

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Ff0QGGDrJf6VDT5Wqrugl%2Fobject-table-callouts-example.png?alt=media\&token=233f7744-c6fb-4ff6-94cb-f9dfdb9847ad)

### Example implementation

Here are some steps to implement callouts:

1. Create a view variable to track the object which will have the callout and setup a table with an `id`

{% code title="main.view\.xml" %}

```xml
<var name="users" type="array:user" />
<!-- View variable referring to the current row in the table -->
<var name="current_user" type="user" />

<!-- A table which will contain the callouts -->
<object-table id="callout-table" query="users">
    <column heading="First Name">{first_name}</column>
    <column heading="Last Name">{last_name}</column>
</object-table>
```

{% endcode %}

2\. initialize the variable using the `init()` method

{% code title="main.js" %}

```javascript
view.users = DB.user.all().toArray();
view.current_user = view.users[0];
```

{% endcode %}

3\. When ready, call the `component.objectTable().setState()` method to show some callouts.

{% code title="main.js" %}

```javascript
function showCallouts(){
    component.objectTable({ id: "callout-table" }).setState({ 
        callouts: [
            {
                id: view.selected_user.id,
                column: 1,
                message: "Test message",
                color: "#02cf72"
            }
        ] 
    });
}
```

{% endcode %}

The `id` in the `callouts` payload should match the `id` of the object (i.e. the row) in the table. The `column` refers to the index (starting at 0) of the column as defined in the XML (regardless of whether the column has `show-if` or `hide-if` attributes enabled).

Also note the `color` refers to the color of the callout background. The corresponding text color as defined in the application color theme will used for the foreground color (text color).

### Callouts support a limited set of markdown

For more advanced use cases, markdown can be provided to the callout to allow for more fine-grained styling.

{% code title="main.js" %}

```javascript
component.objectTable({ id: "callout-table" }).setState({ 
    callouts: [
        {
            id: view.selected_user.id,
            column: 1,
            message: "# Heading \n\nparagraph text",
            color: "primary"
        }
    ]
})
```

{% endcode %}

Notice that in above example, we have added `#` to the message to enforce a heading and to create a paragraph.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/object-table-guides/cell-callouts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.