Cell callouts

Version compatibility

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

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.

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

main.view.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>

2. initialize the variable using the init() method

main.js

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

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

main.js

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

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.

main.js

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

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