Overview
The Control Notification action opens, closes or toggles your app's notifications panel. In a mobile app, it takes the user to the notifications page instead.
The action does not send notifications. To show a short message on screen, use the Show Snackbar action.
Before you start: In a web app, the notifications panel is built in. To also give users a bell in the app's navigation, add the ready-made Notifications item under Secondary Menu Items in the navigation settings (see Navigation Overview). In a mobile app, Open Notification Page goes to the page whose slug is notifications, so create a page with that slug first (see Slugs and Visibility).
Parameters
The action has one field, Operation. The options depend on the type of app.
App type | Operation | What it does |
|---|---|---|
Web | Open (default) | Opens the notifications panel. Does nothing if the panel is already open. |
Web | Close | Closes the notifications panel. Does nothing if the panel is already closed. |
Web | Toggle | Closes the panel if it is open, and opens it if it is closed. |
Mobile | Open Notification Page | Takes the user to the app's notifications page. Does nothing if the app has no notifications page. |
Note: The action does not run in the builder. On the builder canvas it only shows the warning "Control Notification action is not supported in builder mode." Preview or run the app to see the panel open and close.
Reading the panel state
In a web app, you can check whether the panel is open with {{ interfaceRecord['navigation']['notifications']['isPanelOpen'] }}. Bindings that read it update when this action runs.
Step-by-Step Usage Guide
Add a trigger: Add a button or bell icon to your page or navigation.
Add the action: Add Control Notification to the block's On Click event.
Choose the operation: Use Toggle for a single bell button that opens and closes the panel. In a mobile app, use Open Notification Page.
Test it: Preview the app and click the button.
Examples
Toggle the notifications panel from a bell button (web)
{ "actionType": "controlNotification", "payload": { "operation": "toggle" } }
Open the notifications page (mobile)
{ "actionType": "controlNotification", "payload": { "operation": "openNotificationPage" } }