Skip to main content

 

SILK UI Framework

 

OutSystems

In-App Notifications Web Component

The In-App Notifications Web component allows you to broadcast messages and engage with users in real time. You can use it to send a simple web in-app notification to a group of users.

How to Use the In-App Notifications Web Component

This component contains a block that shows a number of notifications, an API to control the notifications and a sample to show you how to build the queries and use the API.

Follow these steps below before any of the use cases described below.

1. In your Application Module, click the Manage Dependencies button.

2. Select the component and all its actions, blocks and entities.

3. Configure the Firebase plugin.

Register New Notifications

1. Create a new screen and name it SendNotitication.

2. Create a new screen action and name it SendNotificationOnClick.


 

3. Create a new local variable and set the data type as Notification structure.


 

4. Create a new local variable, name it ListOfUsers and set its data type as User Identifier List.

5. Assign Notification values.

  • Notification.Title: Title of the notification.
  • Notification.Message: Message of the notification.
  • Notification.RegisteredBy: Who sent the notification. Normally we use GetUserId().
  • Notification.RegisteredOn: Notification date. Normally we use CurrDateTime().
  • Notification.Thumbnail: Image binary data.


 

6. Use the ListAppend action to insert a new user to the ListOfUsers.


 

7. Call the GetFirebaseData server action and the SendNotification server action provided by Component’s API and fill the parameters.


 

8. Call this screen action in whatever interaction you want. Eg.: Button, link, swipe, etc.

Create a Notification Counter and a List of Notifications

1. Create two local variables, set the data type as text and name it: FirebaseToken and FirebaseProjectId.

2. Add a preparation to the screen.


 

3. Call the GetFirebaseData server action, created while configuring the Firebase plugin, and assign the local variables data with the GetFirebaseData’s data.


 

4. Drag the NotificationReceiver block to your screen and fill the input parameters.

  • TargetId: Used to identify which notification you are listening to. Eg.: “GeneralNotifications” or “Messages”.
  • Icon: Choose an icon.
  • NotificationStatusFilter: Filter the counter by status. Choose one type of notification to filter. The chosen one will be applied to the counter. Eg.: Unread will count only unread notifications.
  • FirebaseToken: Token generated by GetFirebaseData server action.
  • FirebaseProjectId: ProjectId generated by GetFirebaseData server action.
  • UseCounter: Show/hide the counter’s UI. Use false if you only want to use the events to refresh a list without the counter itself.

5. Create a new destination to OnNotify and name it OnNotifityNewNotifications.


 

6. On your screen, create a new local variable, name it ListOfNotifications and set the data type as Notification List.


 

7. On your preparation, call the GetNotifications server action provided by the component’s API and fill its parameters. TargetId is used to identify which notification you are listening to. Eg.: “GeneralNotifications” or “Messages”. NotificationStatusFilter is used to filter the GetNotification action by type. Eg.: Choose unread option to get all unread notifications.


 

8. Assign the GetNotifications’ output to ListOfNotifications local variable.


 

9. You can use the ListOfNotifications local variable as source of a list of records.


 

10. When a new notification arrives, this list needs to be refreshed. For that, open the OnNotifityNewNotifications screen action.

11. Use the ListClear action to delete all stored data in your ListOfNotifications.


 

12. Call the GetNotifications server action provided by the component’s API and fill its parameters. TargetId is used to identify which notification you are listening to. Eg.: “GeneralNotifications” or “Messages”. NotificationTypeId is used to filter the GetNotification action by type. Eg.: Choose unread option to get all unread notifications.


 

13. Assign the GetNotifications output to the ListOfnotifications.


 

14. Using AjaxRefresh, refresh the UI of the list.

Mark Notifications as Seen / Read

1. Create a new screen action and name it MarkNotificationAsReadOnClick / MarkNotificationAsSeenOnClick.

2. Create a new input parameter, set the date type as InAppNotificationRecipient Identifier and name it InAppNotificationRecipientId.

3. Inside this screen action, call the GetFirebaseData.

4. Call the MarkNotificationAs server action provided by the component’s API, fill the parameters using the screen action’s InAppNotificationRecipientId, GetFirebaseData.FirebaseToken and GetFirebaseData.FirebaseProjectId and choose a status to mark.

5. Depending on your use case, you will need to refresh the data query and the UI. For that, follow step 11 of section Create a Notification Counter and a List of Notifications.

Parameters

These are parameters for the NotificationCounter.

TargetId (Text) Code that identifies which Firebase data to notify. Use the same code across your app to receive notifications in different screens or even devices.
Icon (IconName Identifier) IconName identifier, used to choose which icon to use for the notification.
NotificationStatusFilter (NotificationStatusFilter Identifier) Filter the counter by status.
FirebaseToken (Text) Firebase Token used to authenticate against the provided project.
Generated by GenerateToken server action provided by Firebase plugin.
FirebaseProjectId (Text) Firebase project name that is generated when you create your Firebase project.
UseCounter (Boolean) Use false to hide the UI. The events will trigger anyway.

Notify

OnNotify (Notify) Notification triggered when Firebase receives a notification.

API

GetNotifications  Get all notifications filtered by TargetId.
  TargetId (Text) Code that identifies which Firebase data to notify. Use the same code across your app to receive notifications in different screens or even devices.
  NotificationStatusFilter (NotificationStatusFilter Identifier) Filter the get action. Select a type of notification to return.
All: Returns all notifications.
Read: Returns only read notifications.
Unread: Returns only unread notifications.
Notified: Returns only notified notifications.
NotNotified: Returns only the notifications marked as not notified.
  InAppNotificationOutputList (InAppNotificationOutput List)
 
List of notifications.

 

GetNumberOfNotifications  Get the number of notifications filtered by TargetId.
  TargetId (Text) Code that identifies which Firebase data to notify. Use the same code across your app to receive notifications in different screens or even devices.
  NotificationStatusFilter (NotificationStatusFilter Identifier) Filter the get action. Select a type of notification to return.
All: Returns all notifications.
Read: Returns only read notifications.
Unread: Returns only unread notifications.
Notified: Returns only notified notifications.
NotNotified: Returns only the notifications marked as not notified.
  NumberOfUnreadNotifications (Integer)
 
Number of notifications.


 

MarkAllNotificationsAs  Mark all notifications from the current user as Read, Unread, Seen or NotSeen.
  TargetId (Text) Code that identifies which Firebase data to notify. Use the same code across your app to receive notifications in different screens or even devices.
  NotificationStatus (NotificationStatus Identifier) Filter the get action. Select a type of notification to return.
Read: Returns only read notifications.
Unread: Returns only unread notifications.
Notified: Returns only notified notifications.
NotNotified: Returns only the notifications marked as not notified.
  FirebaseToken (Text) Firebase Token used to authenticate against the provided project.
Generated by GenerateToken server action provided by Firebase plugin.
  FirebaseProjectId (Text) Firebase project name that is generated when you create your Firebase project.

 

MarkNotificationAs  Mark a notification as Read, Unread, Seen or NotSeen.
  InAppNotificationRecipientId (InAppNotificationRecipient identifier) InAppNotificationRecipient identifier.
  NotificationStatus (NotificationStatus Identifier) Filter the get action. Select a type of notification to return.
Read: Returns only read notifications.
Unread: Returns only unread notifications.
Notified: Returns only notified notifications.
NotNotified: Returns only the notifications marked as not notified.
  FirebaseToken (Text) Firebase Token used to authenticate against the provided project.
Generated by GenerateToken server action provided by Firebase plugin.
  FirebaseProjectId (Text) Firebase project name that is generated when you create your Firebase project.

 

SendNotification Send an InAppNotification to one or more Users.
  Notification (Notification Structure) Notification.Title: Title of the notification
Notitication.Message: Message of the notification
Notification.RegisteredBy: Who sent the notification. Normally we use GetUserId().
Notification.RegisteredOn: Notification date. Normally we use CurrDateTime().
Notification.Thumbnail: Image binary data.
  RecepientUserList (User Identifier List) List of users to receive the notification.
  TargetId (Text) Code that identifies which Firebase data to notify. Use the same code across your app to receive notifications in different screens or even devices.
  FirebaseToken (Text) Firebase Token used to authenticate against the provided project.
Generated by GenerateToken server action provided by Firebase plugin.
  FirebaseProjectId (Text) Firebase project name that is generated when you create your Firebase project.
  Success (Boolean) Returns false when an error occurs.
  ErrorMessage (Text) Returns the error message when an error occurs.
  InAppNotificationId (InAppNotification Identifier) Returns the notification Identifier.

 

Advanced API

Refer to the list of Advanced API options for the In-App Notifications Web component.

 

  • Was this article helpful?