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

Create a group channel

Copy link

In UIKit for iOS, you can create a group channel through the SBUCreateChannelViewController class with a group of selected users. The classes uses the SBUUserCell class to show a list of users. The list is organized and displayed according to your pagination settings. If you don't have a specific list of users you wish to add to your app, all users who are using your chat service is displayed in the user list by default.

When a group channel is first created, it's given a name and cover image by default. The channel name is set to be all the channel member nicknames combined and its cover image is set as an image that combines all profile images of the channel members.

If you set the starting point of your chat service to be the channel list, you can seamlessly guide your users to the create channel view. Once a new channel is successfully created, a channel view will appear immediately on the user's screen. The user who created the channel becomes the operator of the channel by default.

Note: If the channel type is set during initialization, the new channel is created as the selected type. However, if you created a channel through the createChannel(params:) method, the channel type must be set again in the parameter.


Initialize

Copy link

You can start building a create channel view through the SBUCreateChannelViewController class. The view controller displays a list of users to select channel members from. Once the members have been chosen, a new group channel will be created.

let createChannelVC = SBUCreateChannelViewController(type: .group)
let navigationController = UINavigationController(rootViewController: createChannelVC)
present(navigationController, animated: true)

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

Module components

Copy link

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

Property nameTypeDefault value

HeaderComponent

SBUCreateChannelModule.Header

SBUModuleSet.CreateGroupChannelModule.HeaderComponent

ListComponent

SBUCreateChannelModule.List

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

HeaderComponent

Copy link

The HeaderComponent includes a channel title, a back button that takes the user to the previous view, and a button that creates a new group channel. Each property corresponds to the elements in the navigation bar of SBUCreateChannelViewController.

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

Parameter nameType

delegate

SBUCreateChannelModuleHeaderDelegate

dataSource

SBUCreateChannelModuleHeaderDataSource

theme

SBUUserListTheme

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

ListComponent

Copy link

The ListComponent shows a list of all users who can be invited to join a new group channel. The following table shows the parameters of the configure method of the ListComponent.

Parameter nameType

delegate

SBUCreateChannelModuleListDelegate

dataSource

SBUCreateChannelModuleListDataSource

theme

SBUUserListTheme

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

View model

Copy link

The SBUCreateChannelViewController class uses a view model that is a type of the SBUCreateChannelViewModel class. The view model is created in the initializer of the view controller through the createViewModel(users:type:) method. When the view model object has been created, it retrieves user list data from Chat SDK to the view controller and updates the view through the createChannelViewModel(_:didChangeUsers:needsToReload:) event.

The following table shows the parameters of the createViewModel method.

Parameter nameTypeDescription

users

[SBUUser]

Specifies the user list to be shown in the create channel view. When the value is set to nil, it shows every user in the client app on the list. (Default: nil)

type

ChannelCreationType

Specifies the type of the channel to create. Acceptable values are group and open. (Default: group)

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

SBUCreateChannelViewController properties

Copy link

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


Customization

Copy link

You can customize the create channel view by changing the view controller, module component, and the 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 CustomCreateChannelViewController: SBUCreateChannelViewController {
     // Implement custom code here.
}
  1. Change the value of SBUViewControllerSet.CreateChannelViewController.
SBUViewControllerSet.CreateChannelViewController = CustomCreateChannelViewController.self

// The view controller will now use `CustomCreateChannelViewController` as the default value.
  1. Use a one-time custom view controller in the create channel view.
let createChannelVC = CustomCreateChannelViewController(channelURL: {CHANNEL_URL})
let navigationController = UINavigationController(rootViewController: createChannelVC)
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.CreateGroupChannelModule 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: SBUCreateChannelModule.Header {
     // Implement custom code here.
}
  1. Change the value of SBUModuleSet.CreateGroupChannelModule.HeaderComponent.
SBUModuleSet.CreateGroupChannelModule.HeaderComponent = CustomHeader.self

let createChannelVC = SBUViewControllerSet.CreateChannelViewController(type: .group)

// The `headerComponent` in `SBUCreateChannelViewController` will now use `customHeader` as the default value.
  1. Change the module component in SBUCreateChannelViewController.
let createChannelVC = SBUViewControllerSet.CreateChannelViewController(type: .group)
createChannelVC.headerComponent = CustomHeader()

Note: To learn more about the methods of SBUCreateChannelModule, go to the 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 CustomCreateChannelViewController: SBUCreateChannelViewController {
    override func createViewModel(users: [SBUUser]? = nil,
                                  type: ChannelCreationType = .group) {
        // Set `viewModel` to the `CustomViewModel` object.
        self.viewModel = CustomViewModel()
        // Implement your code here.
    }
}
  1. Customize the view model's event delegate.
extension CustomCreateChannelViewController: SBUCreateChannelViewModelDelegate {
    override func createChannelViewModel(
        _ viewModel: SBUCreateChannelViewModel,
        didChangeUsers users: [SBUUser],
        needsToReload: Bool
    ) {
        // Implement your code here.
    }
}