Chat UIKit iOS UIKit v3
Chat UIKit iOS UIKit
Chat UIKit
iOS UIKit
Version 3

Register participants as operators

Copy link

In UIKit for iOS, you can register a participant as an operator using the SBURegisterOperatorViewController class. The ViewController uses the SBUUserCell class to display a list of participants in an open channel and appoint a participant to be the operator.


Initialize

Copy link

You can start building a register as operator view using the SBURegisterOperatorViewController class. Use either the init(channelURL:users:) or init(channel:users:) initializer to create the instance and display the view as shown below.

// Case 1: Use `channelURL`.
let registerVC = SBURegisterOperatorViewController(
    channelURL: {CHANNEL_URL},
    users: [{PARTICIPANT}]
)
let navigationController = UINavigationController(rootViewController: registerVC)
present(navigationController, animated: true)

// Case 2: Use `channel` object.
let registerVC = SBURegisterOperatorViewController(
    channel: {OPEN_CHANNEL},
    users: [{PARTICIPANT}]
)
let navigationController = UINavigationController(rootViewController: registerVC)
present(navigationController, animated: true)

Note: If you don't set a value to the user parameter, the default value of nil is used instead.


The following items are key elements of SBURegisterOperatorViewController that are used to create a functional view.

Module components

Copy link

In the SBURegisterOperatorViewController class, SBURegisterOperatorModule and its components are used to create and display the register as operator view. The module is composed of two components: HeaderComponent and ListComponent.

Property nameTypeDefault value

HeaderComponent

SBURegisterOperatorModule.Header

SBUModuleSet.OpenRegisterOperatorModule.HeaderComponent

ListComponent

SBURegisterOperatorModule.List

SBUModuleSet.OpenRegisterOperatorModule.ListComponent

Each module component is assigned with 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

Copy link

The HeaderComponent includes a channel title, a back button that takes the user to the previous view, and a button that adds the selected participants to the list of channel operators.

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

Parameter nameType

delegate

SBURegisterOperatorModuleHeaderDelegate

dataSource

SBURegisterOperatorModuleHeaderDataSource

theme

SBUUserListTheme

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

ListComponent

Copy link

The ListComponent shows a list of all channel participants that can be registered as operators. If the participant is already an operator, they will not be shown on the list.

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

Parameter nameType

delegate

SBURegisterOperatorModuleListDelegate

dataSource

SBURegisterOperatorModuleListDataSource

theme

SBUUserListTheme

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

View model

Copy link

The SBURegisterOperatorViewController class uses a view model that is a type of the SBURegisterOperatorViewModel class. The view model is created in the initializer of the view controller through the createViewModel(channel:channelURL:channelType:users:) method. When the view model object is created, it retrieves participant list data from Chat SDK to the view controller and updates the view through the baseSelectedUserViewModel(_:didChangeUserList:needsToReload:) event.

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

The following table shows the parameters of the createViewModel method.

Parameter nameTypeDescription

channel

BaseChannel

Specifies the channel value. (Default: nil)

channelURL

String

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

channelType

ChannelType

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

users

[SBUUser]

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

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

SBURegisterOperatorViewController properties

Copy link

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


Customization

Copy link

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

View controller

Copy link

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 CustomRegisterOperatorViewController: SBURegisterOperatorViewController {
    // Implement custom code here.
}
  1. Change the value of SBUViewControllerSet.OpenChannelRegisterOperatorViewController.
SBUViewControllerSet.OpenChannelRegisterOperatorViewController = CustomRegisterOperatorViewController.self

// All ViewController in register as operator view will now use `CustomRegisterOperatorViewController` as the default value.
  1. Use a one-time custom view controller in the register as operator view.
let registerVC = CustomRegisterOperatorViewController(
    channel: {CHANNEL},
    users: [{PARTICIPANT}]
)
let navigationController = UINavigationController(rootViewController: inviteVC)
present(navigationController, animated: true)

Module component

Copy link

There are two ways to customize a module component: change the default module component type in the global SBUModuleSet.OpenRegisterOperatorModule 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: SBURegisterOperatorModule.Header {
    // Implement custom code here.
}
  1. Change the value of SBUModuleSet.OpenRegisterOperatorModule.HeaderComponent.
// The `headerComponent` in `SBURegisterOperatorViewController` will now use `customHeader` as the default value.

SBUModuleSet.OpenRegisterOperatorModule.HeaderComponent = CustomHeader.self

let registerVC = SBUViewControllerSet.OpenChannelRegisterOperatorViewController(
    channel: {CHANNEL},
    users: [{PARTICIPANT}]
)
  1. Change the module component in SBURegisterOperatorViewController.
let registerVC = SBUViewControllerSet.OpenChannelRegisterOperatorViewController(
    channel: {CHANNEL},
    users: [{PARTICIPANT}]
)
channelSettingsVC.headerComponent = CustomHeader()

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

View model

Copy link

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 CustomViewController: SBURegisterOperatorViewController {
    override func createViewModel(channel: BaseChannel? = nil,
                                  channelURL: String? = nil,
                                  channelType: ChannelType = .open,
                                  users: [SBUUser]? = nil) {
        // Set `viewModel` to the `CustomViewModel` object.
        self.viewModel = CustomViewModel()

        // Implement your code here.
    }
}
  1. Customize the view model's event delegate.
extension CustomViewController: SBURegisterOperatorViewModelDelegate {
    override func registerOperatorViewModel(
        _ viewModel: SBURegisterOperatorViewModel,
        didRegisterOperatorIds operatorIds: [String]
    ) {
        // Implement your code here.
    }
}

Note: You can also customize the data source using the same codes as above.