UIKit iOS v3
UIKit iOS
UIKit
iOS
Home
/
UIKit
/
iOS
This is the new Docs for UIKit v3 beta for iOS. To see the previous Docs, click here.

List channel members or participants

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

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


Types of member list

SBUMemberListViewController is composed of four different types of member list.

TypeDescription

.channelMembers

A list of members in the channel.

.operators

A list of operators in the channel.

.mutedMembers

A list of muted members in the channel.

.bannedMembers

A list of banned users from the channel.


Initialize

You can start building a member/participant list view through the SBUMemberListViewController 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:members:memberListType:) or init(channel:members:memberListType:) initializer to create the instance and display the view as shown below.

// Case 1: Use `channelUrl`.
let memberListVC = SBUMemberListViewController(
    channelUrl: {CHANNEL_URL},
    channelType: {CHANNEL_TYPE},
    members: [{MEMBER}],
    memberListType: {MEMBER_LIST_TYPE}
)
navigationController?.
let navigationController = UINavigationController(rootViewController: memberListVC)
present(navigationController, animated: true)

// Case 2: Using `channel` object.
let memberListVC = SBUMemberListViewController(
    channel: {CHANNEL},
    members: [{MEMBER}],
    memberListType: {MEMBER_LIST_TYPE}
)
let navigationController = UINavigationController(rootViewController: memberListVC)
present(navigationController, animated: true)

Usage

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

Module components

In the SBUMemberListViewController class, SBUMemberListModule and its components are used to create and display the member/participant list view. The module is composed of two components: headerComponent and listComponent.

Property nameTypeDefault value

headerComponent

SBUMemberListModule.Header

SBUModuleSet.memberListModule.headerComponent

listComponent

SBUMemberListModule.List

SBUModuleSet.memberListModule.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.

headerComponent

The headerComponent includes a channel title, a back button that takes the user to the previous view, and a button that adds new members or participants to the channel. Each property corresponds to the elements in the navigation bar of SBUMemberListViewController.

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

Parameter nameType

delegate

SBUMemberListModuleHeaderDelegate

memberListType

ChannelMemberListType

theme

SBUUserListTheme

componentTheme

SBUComponentTheme

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

listComponent

The listComponent shows a list of all members of a group channel or all participants of an open 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.

Parameter nameType

delegate

SBUMemberListModuleListDelegate

dataSource

SBUMemberListModuleListDataSource

memberListType

ChannelMemberListType

theme

SBUUserListTheme

componentTheme

SBUComponentTheme

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

View model

The SBUMemberListViewController class uses a view model that is a type of the SBUMemberListViewModel class. The view model is created in the initializer of the view controller through the createViewModel(channel:channelUrl:channelType:members:type:) method. When the view model object is created, it retrieves member/participant list data from Chat SDK to the view controller and updates the view through the (_:didChangeMembers:needsToReload:) event.

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

The following table shows the parameters of the createViewModel method.

Parameter nameTypeDescription

channel

SBDBaseChannel

Specifies the channel value. (Default: nil)

channelUrl

String

Specifies the URL of the channel. (Default: nil)

channelType

SBDChannelType

Specifies the type of channel. This parameter needs to be specified with channelUrl. (Default: group)

members

[SBUUser]

Specifies a custom member list if you wish to use your own list of members. (Default: nil)

type

ChannelMemberListType

Specifies the type of each member in the list.

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

SBUMemberListViewController properties

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


Customization

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

View controller

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: SBUMemberListViewController {
    ...
}
  1. Change the value of SBUViewControllerSet.MemberListViewController.
SBUViewControllerSet.MemberListViewController = CustomCreateChannelViewController.self

// The view controller will now use `CustomMemberListViewController` as the default value.
  1. Use a one-time custom view controller in the member/participant list view.
let memberListVC = CustomViewController(
    channel: {CHANNEL},
    members: [{MEMBER}],
    memberListType: {MEMBER_LIST_TYPE}
)
let navigationController = UINavigationController(rootViewController: memberListVC)
present(navigationController, animated: true)

Module component

There are two ways to customize a module component: change the default module component value in the global SBUModuleSet.memberListModule 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: SBUModuleSet.memberListModule.Header {
    ...
}
  1. Change the value of SBUModuleSet.memberListModule.headerComponent.
SBUModuleSet.memberListModule.headerComponent = CustomHeader()

let memberListVC = SBUViewcontrollerSet.MemberListViewController(
    channel: {CHANNEL},
    members: [{MEMBER}],
    memberListType: {MEMBER_LIST_TYPE}
)

// The `headerComponent` in `SBUMemberListViewController` will now use `customHeader` as the default value.
  1. Change the module component in SBUMemberListViewController.
let memberListVC = SBUViewControllerSet.MemberListViewController(
  channel: {CHANNEL},
  members: [{MEMBER}],
  memberListType: {MEMBER_LIST_TYPE}
)
memberListVC.headerComponent = CustomHeader()

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

View model

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.

  • memberListQuery
  • operatorListQuery
  • mutedMemberListQuery
  • bannedMemberListQuery
  • participantListQuery
  1. Use a customized view model.
class CustomViewController: SBUMemberListViewModel {
    override func createViewModel(...) {
        // Set `viewModel` to the `CustomViewModel` object.
        self.viewModel = CustomViewModel(
            channel: channel,
            members: members,
            memberListType: type,
            memberListQuery: {MEMBER_LIST_QUERY},
            delegate: self
        )
        ...
    }
}
  1. Customize the view model's event delegate.
extension CustomViewController: SBUMemberListViewModelDelegate {
    override func memberListViewModel(
        _ viewModel: SBUMemberListViewModel,
        didChangeMembers members: [SBUUser],
        needsToReload: Bool
    ) {
        // Implement your code here.
    }
}