Setting up notifications

For this tutorial, we need the Retool app to be configured with a getWeavyToken query and the Weavy components library to be installed.

Make sure you have followed tutorial on What to do first in Retool.

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.

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(retoolContext.appUuid, weavyNotifications1.navigationParams)
• 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.