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.
Actions
Column groups
Last modified 1yr ago