Inbox data object

An in-app notification has standard fields: a subject, a body, an avatar, up to two actions and a redirect. The data object is a place for everything else. It is a set of your own key-value properties that Notifly stores with each notification and returns to the Inbox as notification.data, so your code can render, sort or filter notifications by information the standard fields do not carry: an order ID, a category, a deep-link target, a priority.

Set the data object on an in-app step

1. Open a workflow in the dashboard and select an in-app step.
2. In the step editor, scroll to the Developers section, which holds the Data object panel.
3. Choose Add property, enter a key, and enter a value. The value can be plain text or a variable such as {{payload.orderId}} or {{subscriber.firstName}}.

Key        Value
orderId    {{payload.orderId}}
category   billing

The panel accepts up to 10 properties, and a key can be used once; a repeated key is flagged and not saved. Values are resolved when the notification is created, like the rest of the step, and the dashboard stores every value as text. The in-app step editor, including this panel, is available in the Development environment only.

Code-defined steps return the same object as the data property of their in-app output, a JSON object with arbitrary properties.

Read it in the Inbox

The notification the Inbox hands to its callbacks and render props has a data property holding the object, or undefined when the step set none:

import { Inbox } from '@notiflyio/react';

<Inbox
  applicationIdentifier="<app-identifier>"
  subscriber="<subscriber-id>"
  renderNotification={(notification) => (
    <a href={`/orders/${notification.data?.orderId}`}>
      <strong>{notification.subject}</strong>
      <span>{notification.body}</span>
    </a>
  )}
  onNotificationClick={(notification) => {
    analytics.track('inbox_click', { category: notification.data?.category });
  }}
/>

renderNotification replaces the whole item; the narrower render props (renderSubject, renderBody, renderAvatar and the action renderers) work the same way. See Inbox styling for the full list.

Type the object

The data property is typed as NotificationData, an open object of unknown values. To get your own keys type-checked, redeclare that interface in your project:

export {};

declare global {
  interface NotificationData {
    orderId?: string;
    category?: 'billing' | 'product';
  }
}

Every notification object then uses your type.

Filter tabs by data

The Inbox tabs prop splits the feed into tabs, and a tab's filter can select notifications by their data as well as by tags and severity. The filter runs on the server, so a tab only fetches what it shows:

<Inbox
  applicationIdentifier="<app-identifier>"
  subscriber="<subscriber-id>"
  tabs={[
    { label: 'All', filter: {} },
    { label: 'Billing', filter: { data: { category: 'billing' } } },
    { label: 'Orders', filter: { data: { category: ['billing', 'product'], region: 'eu' } } },
  ]}
/>

For each key in the filter:

Conditions on different keys must all match. Filters are checked by the API, which answers 400 for a malformed one. A scalar is limited to 256 characters, an or group to 100 values and an and form to 30 groups, with 200 values in total. Because the dashboard saves values as text, filter on the string ('42', not 42) for a property set there.

The same data filter is accepted by novu.notifications.list and novu.notifications.count in @notiflyio/js, which is how you build your own unread badge per category.