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.

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()
methodmain.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).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.Last modified 1yr ago