# 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.