Skip to main content

SILK UI Framework

 

OutSystems

In-App Notifications Mobile Component

In-app notifications allow you to broadcast messages and engage with your users. You can use it to send a simple in-app notification to a group of users.
Be notified of events and see their details.

How to Use the In-App Notifications Mobile Component

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

Follow these steps 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 client action and name it SendNotificationOnClick.
  3. In this action, create a new local variable, name it Notification and set the data type as Notification structure and fill it with your Notification data.
  • 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.

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

5. Use the ListAppend action to insert a new user to the list.

6. Call the GetFirebaseData server action, created while configuring the Firebase plugin, and the SendNotification server action provided by Component’s API and fill the parameters.

  • Notification: Notification local variable containing the data of your notification.
  • DestinationUsersList: List of users to send the notification.
  • TargetId: Used to identify which notification you are listening to. Eg.: “GeneralNotifications” or “Messages”.
  • FirebaseToken: Token generated by GetFirebaseData server action.
  • FirebaseProjectId: ProjectId generated by GetFirebaseData server action.

7. Use SendNotificationOnClick action in a button, link, swipe or any interaction to create new notifications.

Create a Notification Counter

1. Create two new local variables in your screen and set their type as text: FirebaseToken and FirebaseProjectId.

2. Create a new handler for OnFirebaseMissingData event.

3. Get the Token and ProjectId generated by the GetFirebaseData server action, created while configuring the Firebase plugin, and associate it with FirebaseToken and FirebaseProjectId local variables.

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”.
  • BackgroundColor: Color of the badge. Primary color is the default value.
  • 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. Fill the FirebaseToken and FirebaseProjectId parameters with the local variables with the same name.
6. You can use more than one counter per page. Remember to use the TargetId input parameter to identify which notification the NotificationCounter block is counting.

Create a List of Notifications

1. Create a new query using the “Fetch data from other sources” option and name it GetGeneralNotifications.

2. Rename the output parameter to InAppNotificationList and set the data type as InAppNotificationOutput List.

3. Call the GetNotifications server action provided by the component’s API and fill the 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 the unread option to get all unread notifications.

4. Associate the output parameter InAppNotificationList with the GetNotifications.InAppNotificationOutputList.

5. You can now use this query to create a list of notifications.

6. The notification query needs to be refreshed when a new notification is received. Create a new handler for the OnNewNotificationReceived event.

7. In the new action refresh the data of your query.

Mark Notification as Seen/Read

1. Create a new client action. Name it MarkNotificationAsReadOnClick / MarkNotificationAsSeenOnClick.

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

3. Inside this client action, call the GetFirebaseData previously created.

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. Link this client action to any interaction that you want (buttons, swipes, links, etc).

Parameters and Events

See the list of parameters and events for the NotificationReceiver block.

Icon (Placeholder) Placeholder to put the icon of the Icon Badge component.
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.
BackgroundColor (Color Identifier) Background color of the badge.
Default value: Primary Color
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.
OnFirebaseMissingData (Event) Triggered when the Firebase doesn’t find the necessary data.
OnNewNotificationReceived (Event) Triggered when a new notification is received.

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.
Seen: Returns only notified notifications.
NotSeen: 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) Status of the notification. Select a type of notification to return.
Read: Returns only read notifications.
Unread: Returns only unread notifications.
Seen: Returns only notified notifications.
NotSeen: 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) Status of the notification. Select a type of notification to return.
Read: Returns only read notifications.
Unread: Returns only unread notifications.
Seen: Returns only notified notifications.
NotSeen: 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 the 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
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.
  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 and Customization

Refer to the list of advanced API options and classes that you can use to customize the In-App Notifications Mobile Component.

 

  • Was this article helpful?