/ SDKs / JavaScript
Chat SDKs JavaScript v4
Chat SDKs JavaScript
Chat SDKs
Version 4

Group channel collection

Copy link

A GroupChannelCollection instance allows you to swiftly create a channel list view that remains up to date on all channel-related events. This page explains how to draw a view using the collection.

Create a collection

Copy link

You can create a GroupChannelCollection instance through the createGroupChannelCollection() method. When creating the instance, you can also determine how to filter and order the group channel list.

Once the collection is created, you should call loadMore().

const groupChannelFilter = new GroupChannelFilter();
groupChannelFilter.includeEmpty = true;        // Group channels with no messages will be included.

const params = {
        filter: groupChannelFilter,
        order: GroupChannelListOrder.LATEST_LAST_MESSAGE,
const collection = sb.groupChannel.createGroupChannelCollection(params);


Copy link

A GroupChannelCollection instance can retrieve more channels to display in the channel list view through the loadMore() method.

Whenever a scroll reaches the bottom of the channel list view, the hasMore() method will first check if there are more channels to load. If so, the loadMore() method fetches them.

The hasMore() method should also be called after you've created a GroupChannelCollection instance.

if (collection.hasMore) {
        const channels = await collection.loadMore();

Channel events

Copy link

Use GroupChannelCollectionEventHandler to determine how the client app reacts to channel-related events. This is called whenever a new channel is created as a real-time event or changelog sync is prompted when the client app is back online.

The following table shows possible cases where each event handler can be called.

EventInvoked when


- New group channels are added to the view.
- New group channels are added through background sync, changelog sync, and real-time event.


- Group channels are updated in the view.
- Channel information is updated through changelog sync and real-time event.


- Group channels are deleted from the view.
- Channels are deleted through changelog sync and real-time event.

const handler = {
        onChannelsAdded: (context, channels) => {
                // Add new channels to your data source.
        onChannelsUpdated: (context, channels) => {
                // Update the existing channels in your data source.
        onChannelsDeleted: (context, channelUrls) => {
                // Delete the channels with the matching channelUrls from your data source.

Dispose of the collection

Copy link

The dispose() method should be called when you need to clear the current channel list view.