Setting up notifications

Make sure you have a Retool app ready.

To be able to easily follow the steps here you can make an app based on the Basic Layout template.

• Go to your Apps (Home) in Retool.
• Click Create and choose From template.
• Choose Basic Layout and click Create app from template.

To display a Retool 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.

Then we'll just connect the Notification event to show notifications.

• Make room after the navigation1 component in the Header and add the Weavy Notification Events component at the end of the header.
• Open the Component inspector for weavyNotificationEvents1 and add an Event handler for the Notification event.
  •  Set the Action to Show Notification.
  • Set the Title to {{ self.notificationTitle }}.
  • Set the Description to {{ self.notificationDescription }}.

To be able to navigate from a notification to the component where it originated from, we need to configure your Retool app to use deeplink urls. The Weavy components will automatically pick up the current page parameters and provide it later whenever a Notification is clicked.

This is done by customizing app URLs.

• Go to App settings > Page settings.
• Add an URL Parameter by clicking on the ＋ on the right.
• Add a parameter called user and set the value to {{ table1.selectedRowKey }}. This will set a user parameter in the URL of your app whenever you click on a row in the user table in the app.

To be able to receive updates in the URL, we also need to link the parameters in reverse.

• Select the user table (table1) and open the component inspector.
• Change the Default index from 0 to {{ parseInt(urlparams.hash.user ?? 0) }}. This will set the index from the user parameter in the URL whenever it changes or default it to 0 when it's not set.
• To verify that it works, try to manually modify the number of the user parameter in the url and see the selection change in the table.

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.

Go to Code in the left panel, click the + and select Import Workflow.

• Name it setWeavyNavigation. 
• Select WeavyPageNavigation from the Select Workflow dropdown.
• Make sure the Run behavior is Manual.
• Click Save.
• You can't yet successfully run the query. It needs to be triggered in code using an uid as additionalScope.

To be able to link clicks in the Notifications list back to the component that generated the content, we need to save metadata about the page and url where it's placed.

The setWeavyNavigation query will trigger a workflow that saves the data. This is usually done once for each Weavy component if the metadata isn't already set.

Do the following for all the contextual Weavy components (that has a uid) such as Weavy Comments, Weavy Chat, Weavy Files or Weavy Posts.

• Select and open the Component inspector for a contextual Weavy component, for instance a Weavy Posts component called weavyPosts1.
• Add an Event handler for Set weavy navigation and set it to Run script.
• Set the script to
  setWeavyNavigation.trigger({
  additionalScope: {
    uid: weavyPosts1.uid
  }
})

• Replace weavyPosts1 with the id of your component.

The component will trigger the workflow query with a uid once it's loaded, as long as the page metadata has not been set already.

We'll add a Weavy notification list component that we put in a global drawer that is always available on top of other content when needed.

• Add a Drawer Frame component to your app and name it drawerNotifications.
• Check the Expand content to fit under Appearance in the Component inspector.
• Add a Weavy Notifications component to the body of the drawer.
• Open the Component inspector for the weavyNotifications1 component.
  
  • Add an Event handler for the Navigate event.
  • Set it to Run script.
  • Set the script to
    utils.openApp(weavyNotifications1.navigateAppUuid, weavyNotifications1.navigateParams)
• Add another Navigate event handler to close the drawer upon navigation.
  
  • Set it to Control component.
  • Select the drawerNotifications component.
  • Set the Method to Hide.

We need a button to toggle the Notification drawer. We also want the button to display the number of unread notifications in realtime. The notificationCount is provided by the Weavy Notification Events component that we previously added. We'll place the button in the right side of the Header to make it available all the time.

• Make room after the navigation1 and the weavyNotificationEvents1 components in the Header and add a Button component at the end of the header.
• Open the button in the Component inspector and add a Prefix Icon as Add-on and set it to a Bell icon for example.
• Set the Text to {{ weavyNotificationEvents1.notificationCount || '' }}. The text will be empty/hidden when the notificationCount is 0.
• Add an event handler for the Click event and set the Action to Control component.
• Set the Component to drawerNotifications and the Method to Show.

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!