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

Configure open channel settings

Copy link

In UIKit, you can configure channel settings in open channels through the SBUOpenChannelSettingsViewController class. In the open channel settings view, participants can change the channel name and cover image, see the participant list, and delete the channel. For channel operators, they can also view the moderation menu.


Initialize

Copy link

You can start building a open channel settings view through the SBUOpenChannelSettingsViewController class. Use either the init(channelURL:) or init(channel:) initializer to create the instance and display the view as shown below.

// Case 1: Using channel url.
let channelSettingsVC = SBUOpenChannelSettingsViewController(channelURL: {CHANNEL_URL})
let navigationController = UINavigationController(rootViewController: channelSettingsVC)
present(navigationController, animated: true)

// Case 2: Using channel object.
let channelSettingsVC = SBUOpenChannelSettingsViewController(channel: {CHANNEL})
let navigationController = UINavigationController(rootViewController: channelSettingsVC)
present(navigationController, animated: true)

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

Module components

Copy link

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

Property nameTypeDefault value

HeaderComponent

SBUOpenChannelSettingsModule.Header

SBUModuleSet.OpenChannelSettingsModule.HeaderComponent

ListComponent

SBUOpenChannelSettingsModule.List

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

Copy link

The HeaderComponent includes a channel title, a back button that takes the user to the previous view, and an edit button that allows the user to make edits to the channel information. Each property corresponds to the elements in the navigation bar of SBUOpenChannelSettingsViewController.

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

Parameter nameType

delegate

SBUOpenChannelSettingsModuleHeaderDelegate

theme

SBUChannelSettingsTheme

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

ListComponent

Copy link

The ListComponent shows a settings menu, which includes a toggle button that turns on or off functions such as push notifications, a participant list, and the option to delete the channel. For channel operators, the moderation menu is also available.

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

Parameter nameType

delegate

SBUOpenChannelSettingsModuleListDelegate

dataSource

SBUOpenChannelSettingsModuleListDataSource

theme

SBUChannelSettingsTheme

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 SBUOpenChannelSettingsViewController class uses a view model that is a type of the SBUOpenChannelSettingsViewModel class. The view model is created in the initializer of the view controller through the createViewModel(channel:channelURL:) method. When the view model object is created, it retrieves channel information from Chat SDK to the view controller and updates the view through the baseChannelSettingsViewModel(_:didChangeChannel:withContext:) event.

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

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)

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

SBUOpenChannelSettingsViewController properties

Copy link

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


Customization

Copy link

You can customize the open channel settings 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 CustomViewController: SBUOpenChannelSettingsViewController {
    // Implement custom code here.
}
  1. Change the value of SBUViewControllerSet.OpenChannelSettingsViewController.
SBUViewControllerSet.OpenChannelSettingsViewController = CustomViewController.self

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

let channelSettingsVC = SBUViewControllerSet.OpenChannelViewController(channelURL: {CHANNEL_URL})

// The `headerComponent` in `SBUOpenChannelSettingsViewController` will now use `CustomHeader` as the default value.
  1. Change the module component in SBUOpenChannelSettingsViewController.
let channelSettingsVC = SBUViewControllerSet.OpenChannelViewController(channelURL: {CHANNEL_URL})
channelSettingsVC.headerComponent = CustomHeader()

Note: To learn more about the methods of SBUOpenChannelSettingsModule, 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: SBUOpenChannelSettingsViewController {
    override func createViewModel(channel: BaseChannel? = nil, channelURL: String? = nil) {
        // Set `viewModel` to the `CustomViewModel` object.
        self.viewModel = CustomViewModel()
        // Implement your code here.
    }
}
  1. Customize the view model's event delegate.
extension CustomViewController: SBUOpenChannelSettingsViewModelDelegate {
    override func baseChannelSettingsViewModel(
        _ viewModel: SBUBaseChannelSettingsViewModel,
        didChangeChannel channel: BaseChannel?,
        withContext context: MessageContext
    ) {
        // Implement your code here.
    }

    // Or override other delegate functions.
}