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.

Invite users or promote members to operator

In UIKit for iOS, you can invite users to a group channel through the SBUInviteUserViewController class and promote a channel member to an operator using the SBUPromoteMemberViewController class. The ViewController uses the SBUUserCell class to display a list of users who are not already in the channel. The same class is used for both inviting a user and appointing a member to be the operator of a group channel.

Unless you have a specific list of users you selected, all users who are using your chat service is displayed in the user list by default.

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


Initialize

You can start building an invite users view through the SBUInviteUserViewController class and the promote members view using the SBUPromoteMemberViewController 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 inviteVC = SBUInviteUserViewController(
    channelUrl: {CHANNEL_URL},
    users: [{MEMBER}]
)
let navigationController = UINavigationController(rootViewController: inviteVC)
present(navigationController, animated: true)

// Case 2: Use `channel` object.
let promoteVC = SBUPromoteMemberViewController(
    channel: {CHANNEL},
    users: [{MEMBER}]
)
let navigationController = UINavigationController(rootViewController: inviteVC)
present(navigationController, animated: true)

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


Usage

The following items are key elements of SBUInviteUserViewController and SBUPromoteMemberViewController that are used to create a functional view.

Module components

In the SBUInviteUserViewController class, SBUInviteUserModule and its components are used to create and display the invite users view. The module is composed of two components: headerComponent and listComponent.

In the SBUPromoteMemberViewController class, SBUPromoteMemberModule and its components are used to create and display the promote members view. The module is composed of two components: headerComponent and listComponent.

Properties
Invite usersTypeDefault value

headerComponent

SBUInviteUserModule.Header

SBUModuleSet.inviteUserModule.headerComponent

listComponent

SBUInviteUserModule.List

SBUModuleSet.inviteUserModule.listComponent

Promote membersTypeDefault value

headerComponent

SBUPromoteMemberModule.Header

SBUModuleSet.promoteMemberModule.headerComponent

listComponent

SBUPromoteMemberModule.List

SBUModuleSet.promoteMemberModule.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 in the invite users view includes a channel title, a back button that takes the user to the previous view, and a text button that invites the selected users to the channel.

The headerComponent in the promote members view includes a channel title, a back button that takes the user to the previous view, and a button that adds the selected members to the list of channel operators.

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

Parameters
Invite usersType

delegate

SBUInviteUserModuleHeaderDelegate

dataSource

SBUInviteUserModuleHeaderDataSource

theme

SBUUserListTheme

Promote membersType

delegate

SBUPromoteMemberModuleHeaderDelegate

dataSource

SBUPromoteMemberModuleHeaderDataSource

theme

SBUUserListTheme

Note: To learn more about the delegate, data source, and the properties of the headerComponent for the invite users view, go to this API reference page. For the promote members view, go to this API reference page.

listComponent

The listComponent shows a list of all users or channel members that can be invited or promoted to be operators. If the user is already a channel member or if the member 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.

Parameters
Invite usersType

delegate

SBUInviteUserModuleListDelegate

dataSource

SBUInviteUserModuleListDataSource

theme

SBUUserListTheme

Promote membersType

delegate

SBUPromoteMemberModuleListDelegate

dataSource

SBUPromoteMemberModuleListDataSource

theme

SBUUserListTheme

Note: To learn more about the delegate, data source, and the properties of the listComponent for invite users view, go to this API reference page. For the promote members view, go to this API reference page.

View model

The SBUInviteUserViewController class uses a view model that is a type of the SBUInviteUserViewModel class. The SBUPromoteMemberViewController class uses a view model that is a type of the SBUPromoteMemberViewModel class.

For both invite users view and promote members view, 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 channel 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 user 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)

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 the event delegates of the view model for the invite users view, go to this API reference page. For promote members view, go to this API reference page.

SBUInviteUserViewController and SBUPromoteMemberViewController properties

To learn more about the properties of SBUInviteUserViewController, go to this API reference page. For SBUPromoteMemberViewController, go to this API reference page.


Customization

You can customize the invite users view and promote members view by changing the view controller, module component, and view model that correspond to those key functions.

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.

// Invite users view
class CustomInviteUserViewController: SBUInviteUserViewController {
    ...
}

// Promote members view
class CustomPromoteMemberViewController: SBUPromoteMemberViewController {
    ...
}
  1. Change the value of SBUViewControllerSet.InviteUserViewController or SBUViewControllerSet.PromoteMemberViewController.
invite userspromote members
SBUViewControllerSet.InviteUserViewController = CustomInviteUserViewController.self

// All ViewController in invite users view will now use `CustomInviteUserViewController` as the default value.
  1. Use a one-time custom view controller in the invite users view or promote members view.
invite userspromote members
let inviteVC = CustomInviteUserViewController(
    channel: {CHANNEL},
    users: [{MEMBER}]
)
let navigationController = UINavigationController(rootViewController: inviteVC)
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.inviteUserModule or SBUModuleSet.promoteMemberModule 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.

// Invite users view
class CustomHeader: SBUModuleSet.inviteUserModule.Header {
    ...
}

// Promote members view
class CustomHeader: SBUModuleSet.promoteMemberModule.Header {
    ...
}
  1. Change the value of SBUModuleSet.inviteUserModule.headerComponent or SBUModuleSet.promoteMemberModule.headerComponent
invite userspromote members
// The `headerComponent` in `SBUInviteUserViewController` will now use `customHeader` as the default value.

SBUModuleSet.inviteUserModule.headerComponent = CustomHeader()

let inviteVC = SBUViewControllerSet.InviteUserViewController(
    channel: {CHANNEL},
    users: [{MEMBER}]
)
  1. Change the module component in SBUInviteUserViewController or SBUPromoteMemberViewController.
invite userspromote members
let inviteVC = SBUViewControllerSet.InviteUserViewController(
    channel: {CHANNEL},
    users: [{MEMBER}]
)
channelSettingsVC.headerComponent = CustomHeader()

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

View model

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.
invite userspromote members
class CustomViewController: SBUInviteUserViewController {
    override func createViewModel(...) {
        // Set `viewModel` to the `CustomViewModel` object.
        self.viewModel = CustomViewModel()
        ...
    }
}
  1. Customize the view model's event delegate.
invite userspromote members
extension CustomViewController: SBUInviteUserViewModelDelegate {
    override func inviteUserViewModel(
        _ viewModel: SBUInviteUserViewModel,
        didInviteUserIds userIds: [String]
    ) {
        // Implement your code here.
    }
}

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