List users in a group channel

In UIKit, you can retrieve a list of users in a group channel through the SBUUserListViewController class. This class is used to display a list of channel members, operators, muted members, and banned users using the SBUUserCell class.

To view the image in full screen, click on the

Note: If you set the starting point of your chat service to be the channel list, group channel, or channel settings, you can seamlessly guide your users to the member list view.

SBUUserListViewController is composed of four different types of user list and uses ChannelUserListType.

You can start building a member list view through the SBUUserListViewController class. The same class can be used to create a view for muted member list and ban user list. Use either the init(channelURL:channelType:users:userListType:) or init(channel:users:userListType:) initializer to create the instance and display the view as shown below.

// Case 1: Use `channelURL`.
let userListVC = SBUUserListViewController(
    channelURL: {CHANNEL_URL},
    channelType: {CHANNEL_TYPE},
    users: [{USER}],
    userListType: {USER_LIST_TYPE}
)
navigationController?.
let navigationController = UINavigationController(rootViewController: userListVC)
present(navigationController, animated: true)

// Case 2: Using `channel` object.
let userListVC = SBUUserListViewController(
    channel: {CHANNEL},
    users: [{USER}],
    userListType: {USER_LIST_TYPE}
)
let navigationController = UINavigationController(rootViewController: userListVC)
present(navigationController, animated: true)

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

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

Each module component is assigned a value from the SBUModuleSet class and gets 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 adds new members to the channel. Each property corresponds to the elements in the navigation bar of SBUUserListViewController.

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 members of a group channel. It's also used in other moderation views to display the operator list, muted member list, and banned user list. 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 SBUUserListViewController class uses a view model that is a type of the SBUUserListViewModel class. The view model is created in the initializer of the view controller through the createViewModel(channel:channelURL:channelType:users:type:) method. When the view model object is created, it retrieves member list data from Chat SDK to the view controller and updates the view through the userListViewModel(_:didChangeUsers:needsToReload:) event.

Note: If the value of channel or channelURL is invalid, the view model cannot retrieve the member list.

The following table shows the parameters of the createViewModel method.

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

To learn more about the properties of SBUUserListViewController, go to the API reference page.

You can customize the member list view by changing the view controller, module component, and 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 CustomViewController: SBUUserListViewController {
    // Implement custom code here.
}

1. Change the value of SBUViewControllerSet.GroupUserListViewController.

SBUViewControllerSet.GroupUserListViewController = CustomCreateChannelViewController.self

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

2. Use a one-time custom view controller in the member list view.

let UserListVC = CustomViewController(
    channel: {CHANNEL},
    users: [{USER}],
    userListType: {USER_LIST_TYPE}
)
let navigationController = UINavigationController(rootViewController: userListVC)
present(navigationController, animated: true)

There are two ways to customize a module component: change the default module component type in the global SBUModuleSet.GroupUserListModule 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: SBUUserListModule.Header {
    // Implement custom code here.
}

1. Change the value of SBUModuleSet.GroupUserListModule.HeaderComponent.

SBUModuleSet.GroupUserListModule.HeaderComponent = CustomHeader.self

let userListVC = SBUViewcontrollerSet.GroupUserListViewController(
    channel: {CHANNEL},
    users: [{USER}],
    userListType: {USER_LIST_TYPE}
)

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

2. Change the module component in SBUUSerListViewController.

let userListVC = SBUViewControllerSet.GroupUserListViewController(
  channel: {CHANNEL},
  users: [{USER}],
  userListType: {USER_LIST_TYPE}
)
userListVC.headerComponent = CustomHeader()

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

In order to use a custom view model or customize the existing view model's event delegate, you must override the view controller. You can also customize different query types in the view model to retrieve different types of lists. See the query types below.

1. Use a customized view model.

class CustomViewController: SBUUserListViewModel {
    override func createViewModel(channel: BaseChannel? = nil,
                                  channelURL: String? = nil,
                                  channelType: ChannelType = .group,
                                  users: [SBUUser]? = nil,
                                  type: ChannelUserListType) {
        // Set `viewModel` to the `CustomViewModel` object.
        self.viewModel = CustomViewModel(
            channel: channel,
            users: users,
            userListType: type,
            memberListQuery: {MEMBER_LIST_QUERY},
            delegate: self
        )

        // Implement your code here.
    }
}

2. Customize the view model's event delegate.

extension CustomViewController: SBUUserListViewModelDelegate {
    override func UserListViewModel(
        _ viewModel: SBUUSerListViewModel,
        didChangeUsers users: [SBUUser],
        needsToReload: Bool
    ) {
        // Implement your code here.
    }
}