Render a notification channel

This guide demonstrates how to render a channel by view type for the following platforms:

• Render a notification channel on iOS client app
• Render a notification channel on Android client app

The following items are key elements of SBUFeedNotificationChannelViewController that are used to create a feed view of the in-app channel.

To view the image in full screen, click on the

You can start building a new channel view through the SBUFeedNotificationChannelViewController class by following the code below. Once the view is created, display the channel anywhere you want in your app. The channel URL of the feed notification channel can be found on Sendbird Dashboard under Business Messaging > Channels.

let feedChannelViewController = SBUViewControllerSet.FeedNotificationChannelViewController.init(
    channelURL: "FEED_NOTIFICATION_CHANNEL_URL"
)

If you already have an existing FeedNotificationChannelViewController, you need to update channel information before displaying the view.

let feedChannelViewController = <YOUR_FEED_CHANNEL_VIEWCONTROLLER>
feedChannelViewController.reloadChannel(
    channelURL: "FEED_NOTIFICATION_CHANNEL_URL"
)

In the SBUFeedNotificationChannelViewController class, SBUFeedNotificationChannelModule and its components are used to display the view. The module is composed of two components: headerComponent and listComponent.

A green badge appears above the notification bubble when the current user receives a new notification in the in-app channel. This badge is displayed based on the Feed's last read time value at the time of view creation. However, this time value remains the same while the view is in the foreground, which prevents the badge from disappearing even if the user's already seen the notification. If you want to update the last read time value, see the code below. You can also call the updateLastSeenAt(_:) method in SBUFeedNotificationChannelViewModel instead.

// Feed notification channel view controller
feedChannelViewController.updateLastSeenAt()

If you've authenticated to the Sendbird server by calling SendbirdUI.authenticate(completionHandler:), there's no WebSocket connection between the UIKit and the Sendbird server. Due to the lack of connection, the UIKit can't receive real-time events to notify the user with updated information about the feed channel.

The UIKit will automatically refresh the notification collections when the client app is brought to foreground or when the device's network connection has changed. In the case that the collection information is received as a push notification from the client app, you can refresh the content of all valid notification collections.

Note: NotificationCollection is valid only if the isLive flag is set to true.

SendbirdChat.refreshNotificationCollections()
// The content of the notification collection has been refreshed.

When there is no message to display, you can set an empty view icon and text to show in the view. The following code snippet demonstrates how to draw an empty view using SBUFeedNotificationChannelViewParams and SBUFeedNotificationChannelViewController.

let params = SBUFeedNotificationChannelViewParams(
        showEmptyViewIcon: true,
    )

let vc = SBUFeedNotificationChannelViewController(
        channelURL: feedChannelURL,
        viewParams: params
    )

A feed view of the in-app channel is composed of three components: header, notification list, and notification list status.

To view the image in full screen, click on the

Chat UIKit Android for Business Messaging provides both activity and fragment to create a view. You can choose which one to build your app with and you may solely use activity instead of fragment if you wish to. You can build a channel view through FeedNotificationChannelActivity, which uses UIKitFragmentFactory to create views. The channel URL of the Feed notification channel can be found on Sendbird Dashboard under Business Messaging > Channels.

You can start an activity by using intent to move from one activity to FeedNotificationChannelActivity as shown below:

Intent intent = FeedNotificationChannelActivity.newIntent(context, "FEED_CHANNEL_CHANNEL_URL");
startActivity(intent);

FeedNotificationChannelActivity allows you to create a basic FeedNotificationChannelFragment through UIKitFragmentFactory and FeedNotificationChannelFragment.Builder. UIKitFragmentFactory has a set of methods that build each fragment, whereas the builder class provides APIs to customize the UI of the data and event handlers used in FeedNotificationChannelFragment.

FeedNotificationChannelFragment fragment = new FeedNotificationChannelFragment.Builder("FEED_CHANNEL_CHANNEL_URL").build();

Note: To use the UIKit's fragments as a nested fragment, refer to the Android Developer Documentation's Nested Fragments.

A green badge appears above the notification bubble when the current user receives a new notification in the in-app channel. This badge is displayed based on the channel's last read time value at the time of view creation. However, the read time value remains the same while the view is on foreground, which prevents the badge from disappearing even if the user's already seen the notification. If you want to update the last read time value, see the code below.

// Retrieve the Feed notification channel fragment.
// This is the fragment that you used to create the view.
NotificationChannelFragment fragment = getNotificationChannelFragment();

// Updates to the last read time value on the channel.
notificationFragment.updateLastReadTimeOnCurrentChannel();

If you've authenticated to the Sendbird server by calling SendbirdUIKit.authenticate(), there's no WebSocket connection between the UIKit and the Sendbird server. Due to the lack of connection, the UIKit can't receive real-time events to notify the user with updated information about the feed channel.

The UIKit will automatically refresh the notification collections when the client app is brought to foreground or when the device's network connection has changed. In the case that the collection information is received as a push notification from the client app, you can refresh the content of all valid notification collections.

Note: NotificationCollection is valid only if the isLive flag is set to true.

SendbirdChat.refreshNotificationCollections();
// The content of the notification collection has been refreshed.

When there is no message in the channel, you can display an empty view icon and text in the view. The following code snippet demonstrates how to create a FeedNotificationChannelFragment with a custom icon and text for the empty view.

val feedChannelFragment = FeedNotificationChannelFragment.Builder(channelUrl)
    .withArguments(args)
    .setEmptyIcon(R.drawable.icon_empty) // setEmptyIcon(0) hides the icon.
    .setEmptyText(R.string.text_empty_notification)
    .build()