<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
Guide

Setting up notifications

Weavy has built-in notification handling. This guide shows how to connect it to the Superblocks notification system and how to navigate from notifications.

Have your Superblocks app ready, and let's get started.

1. Prepare your app for navigation

To be able to navigate from a Notification to the Weavy component that was the source of the Notification. To achieve that, we first need to prepare your Superblocks app with Navigation that can be triggered using the built in navigation. It works out of the box with page routing, but it can also be used with query parameters in the url connected to various components.

See Superblocks Multi Page Routes and Navigation for guidance on how to configure your app.

You can try the Weavy Superblocks demo app to see an example of query parameters connected to a table with tabs for three different Weavy Components.

2. Add setWeavyNavigation to your pages

To be able to link our Weavy components with Notification clicks, we need to set Navigation metadata for the components. This is done semi-automatically using a workflow.

To make the workflow easier to use, we will add a Custom event that we can trigger when needed. The SetWeavyNavigation Backend API is already configured to make use of this once it's created.

Since the Workflow Backend APIs are in the Page scope we have to put the Custom event on each page we have Weavy components in as well. 

  • Create a Frontend variable in the Page scope and name it pageNavigationUid. You can leave the default value empty.
  • Create a Custom event in the Page scope and name it setPageNavigation.
  • Add an Argument to the event with the name uid to the event.
  • Add an Event handler to the event
    • Set the action to Set frontend variable.
    • Choose the variable pageNavigationUid.
    • Set the value to {{currentEvent.uid}}.
  • Add another Event handler to the event
    • Set the action to Run APIs.
    • Choose the SetWeavyNavigation api.
superblocks-pageNavigationUid

3. Add navigateFromNotification to your app

When a Notification is clicked, we need to navigate back to the place where it was generated. To make the navigation easier to configure, we will add a Custom event that we can trigger when needed.

Since it only handles navigation, we can put the Custom event in the App scope so it will be available to all pages at once. 

  • Create a Custom event in the App scope and name it navigateFromNotification.
  • Add an Argument to the event with the name navigateData to the event.
    • Set the action to Run JS (in browser).
    • Copy and paste the code below into the Code field.
Copy and paste the code below into the Run JS handler 
// Get data from the Weavy Notification Events component
let { url, appId, queryParams } = currentEvent.navigateData;

// Set default target
let target = "SAME_WINDOW";

// Check if it's from a different Superblocks app
if (appId !== Global.app.id) {
  // Construct an url to the other app
  url = new URL(
    "." + url,
    `https://${Global.URL.host}/applications/${appId}/`,
  ).toString();

  // Open the other app in a new tab
  target = "NEW_WINDOW";
}

// Navigate to the page
navigateTo(url, queryParams, target);
superblocks-navigateFromNotification

4. Add the Notification component

To get a list of notifications we can make use of the Weavy Notifications component. The Notifications component fit really well into a Slideout component that you place in your navigation bar to make it generally available.

  • Open the Add components panel in the Superblocks app.
  • Drag a Slideout component onto the page canvas. 
  • Drag the Weavy Notifications component onto your Slideout.
  • Select the Notifications component you created.
    • Add an event handler for the On Navigate event.
    • Set the action to Trigger event and choose the App.navigateFromNotification event.
    • Set the navigateData to WeavyNotifications1.navigateData. Make sure the name matches the name of your component.
    • Optionally add another On Navigate handler to close the Slideout when a notification is clicked.

5. Add notification toasts

To display a Superblocks notification toast whenever a realtime notification is received, we need the Weavy Notification Events to generate events that we can act on.

The component needs to be placed where it's always loaded, for instance in the Header. The only visual appearance it has is a spinner while loading, but you can turn the spinner off in the properties of the component.

We can choose whether to use Weavy's built in notifications toasts or make use of Superblocks alerts to show notifications.

  • Drag the Weavy Notification Events component onto your page canvas (somewhere its always visible).

Using Weavy's built in notification toasts...

  • Set an event handler for the On Navigate event to Trigger event.
  • Choose the App.navigateFromNotification event.
  • Set the navigateData field to WeavyNotificationEvents1.navigateData. Make sure the name matches the name of your Weavy Notification Events component.

...or using Superblocks Alerts. Note that the alerts can't handle any navigation.

  • Set an event handler for the On Notification event to Show Alert.
  • Set the Message to {{WeavyNotificationEvents1.notificationTitle}}.

 

6. Add a badge to your notification button

To indicate the there are unread notifications in the notification list, we can connect the Slideout button for the Notifications list with realtime data from the Weavy Notification Events component. Whenever there are unread notifications, a number will be shown in the button and hidden when everything is read.

  • Select the Button for the Slideout.
  • Set the Label to {{ WeavyNotificationEvents1.notificationCount || ''}}.
  • Add an Icon to the button, and choose the notifications icon.
superblocks-notification-badge

7. Make your Weavy components save their location

When contextual Weavy Components that have an uid (Comments, Posts, Files, Chat) are loaded, they need to register their location for the navigation flow to work. This is done by connecting the On Set Weavy Navigation event of each component to the setWeavyNavigation custom event.

Connect the event on each Weavy component you have in your pages.

  • Click on the component and add a handler for the On Set Weavy Navigation event.
  • Set the action to Trigger event.
  • Choose the setWeavyNavigation event.
  • Bind the uid field to the uid of your component. For instance WeavyFiles1.uid.
superblocks-onSetNavigation

8. Done!

We now have fully working Notifications for all our Weavy components.

Ask a friend to @mention you in a Weavy component to see notifications in action!

superblocks-notifications
On this page

What's next?

Now, let's add our components to your Retool apps and make it a collaborative powerhouse

All tutorials
Ask AI
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account