List open channels

The SBUOpenChannelListViewController is a class that is used to build an open channel list view. When there is no connection between the client app and Sendbird server, this class is automatically called to reconnect the two. Once the client app is connected to the Sendbird server, the class is called and a list of channels in the client app is displayed. SBUOpenChannelListViewController also handles core features including pagination and real-time updates. All chat services built with Sendbird UIKit begin from the channel list.

To view the image in full screen, click on the

Refer to the table below to see what features there are in SBUOpenChannelListViewController.

You can start building a channel list view through the SBUOpenChannelListViewController class, which uses SBUOpenChannelCell to display the channels in the list. Use the following code to list channels in a view.

Note: Initialize SBUOpenChannelListViewController by setting the channelListQuery object. Otherwise, the default values are used.

let params = OpenChannelListQueryParams()
params.limit = 20
params.customTypeFilter = "{CUSTOM_TYPE_FILTER}"
let openChannelListQuery = OpenChannel.createOpenChannelListQuery(params: params)

let channelListVC = SBUOpenChannelListViewController(channelListQuery: openChannelListQuery)
let navigationController = UINavigationController(rootViewController: channelListVC)
present(navigationController, animated: true)

You can now confirm if the chat service is working by running your app.

The following items are key elements of SBUOpenChannelListViewController that are used to create a functional channel list view.

In the SBUOpenChannelListViewController class, SBUOpenChannelListModule and its components are used to create and display the channel list view. The module is composed of two components: HeaderComponent and ListComponent.

When the loadView() method of the view controller is called, the module components get added to the view in the setupView() method of the Sendbird UIKit's view life cycle. Then, the configure method of each module component is called to set the property values and display the view.

The headerComponent includes a channel title, a back button that takes the user to the previous view, and a button that creates a new open channel. Each property corresponds to the module elements in the navigation bar of SBUOpenChannelListViewController.

The following table shows the parameters of the configure method of the HeaderComponent.

Note: To learn more about the delegate and the properties of the headerComponent, go to the API reference page.

The ListComponent shows a list of all open channels available. The following table shows the parameters of the configure method of the ListComponent.

Note: To learn more about the delegate, data source, and the properties of the ListComponent, go to the API reference page.

The SBUOpenChannelListViewController class uses a view model that is a type of the SBUOpenChannelListViewModel class. The view model is created in the initializer of the view controller through the createViewModel(channelListQuery:) method. When the view model object is created, it retrieves channel list data from Chat SDK to the view controller and updates the view through the openChannelListViewModel(_:didChangeChannelList:needsToReload:) event.

The following table shows a parameter of the createViewModel method.

Note: To learn more about the methods and the event delegates of the view model, go to API reference page.

You can customize the channel list view by changing the view controller, module component, and the view model that correspond to this key function.

There are two ways to customize the view controller: change the default view controller value in the global SBUViewControllerSet class or set a single-use custom view controller in the key function.

The custom view controller in the code below is used in the following customization examples.

class CustomChannelListViewController: SBUOpenChannelListViewController {
    // Implement custom code here.
}

A. Change the value of SBUViewControllerSet.OpenChannelListViewController.

SBUViewControllerSet.OpenChannelListViewController = CustomChannelListViewController.self

// The view controller will now use `CustomChannelListViewController` as the default value.

B. Use a one-time custom view controller in the channel list view.

let channelListVC = CustomChannelListViewController(channelURL: {CHANNEL_URL})
let navigationController = UINavigationController(rootViewController: channelListVC)
present(navigationController, animated: true)

There are two ways to customize a module component: change the default module component type in the global SBUModuleSet.OpenChannelListModule class or set a single-use custom module component in the view controller.

The custom header component in the code below is used in the following customization examples.

class CustomHeader: SBUOpenChannelListModule.Header {
    // Implement custom code here.
}

A. Change the value of SBUModuleSet.OpenChannelListModule.HeaderComponent.

SBUModuleSet.OpenChannelListModule.HeaderComponent = CustomHeader.self

let channelListVC = SBUViewControllerSet.OpenChannelListViewController.init()

// The `headerComponent` in `SBUOpenChannelListViewController` will now use `customHeader` as the default value.

B. Change the module component in SBUOpenChannelListViewController.

let channelListVC = SBUViewControllerSet.OpenChannelListViewController.init()
channelListVC.headerComponent = CustomHeader()

Note: To learn more about the methods of SBUOpenChannelListModule, go to the API reference page.

In order to use a customized view model or customize the existing view model's event delegate, you must override the view controller.

1. Use a customized view model.

class CustomChannelListViewController: SBUOpenChannelListViewController {
    override func createViewModel(channelListQuery: OpenChannelListQuery?) {
        // Set `viewModel` to the `CustomViewModel` object.
        self.viewModel = CustomViewModel()

        // Implement your code here.
    }
}

2. Customize the view model's event delegate.

extension CustomChannelListViewController: SBUOpenChannelListViewModelDelegate {
    override func openChannelListViewModel(
        _ viewModel: SBUOpenChannelListViewModel,
        didChangeChannelList channels: [OpenChannel]?,
        needsToReload: Bool
    ) {
        // Implement your code here.
    }
}