Home
/
UIKit
/
iOS

Open channel

This page explains the key functions of open channels in Sendbird UIKit for iOS, demonstrating how to create a channel, chat in a channel, configure the channel settings, and list channel participants.

Open channels are a public chat that allows a massive number of users to interact with one other in a more dynamic environment. Open channels can accommodate far more users compared to group channels and don’t require an invitation for the users to enter. To learn more about different behaviors of open channels and group channels , see Channel types on how open channels and group channels work.


Create a channel

Instead of creating an open channel directly in UIKit, use one of the following three methods to create a channel instance for UIKit.

  • Sendbird Dashboard
  • Sendbird Chat SDK for iOS
  • Platform API

Sendbird Dashboard

Sendbird Dashboard allows you to create an open channel in a most simple way.

  1. Login to the dashboard and then find your Application.
  2. Go to the Chat > Open channels, and click Create channel at the top-right corner.
  3. In the dialog box that appears, specify the name, unique URL, cover image, and custom type of a new channel you are about to create.

Sendbird Chat SDK for iOS

To create an open channel through iOS Chat SDK, see Create a channel in the Chat SDK Docs for iOS.

Platform API

To create an open channel through Chat Platform API, see Create a channel in the Platform API Docs.


Chat in a channel

An open channel allows dynamic interaction among a massive number of users and can be easily managed without the need for complex implementation. UIKit supports plain text messages, file messages, and media content such as photos and videos. All messages in open channels are cached using memory, and messages that failed to be sent are only kept within the active channel object.

How to enable chat through the SBUOpenChannelViewController

All chat services built with Sendbird UIKit for iOS begin from the channel list. You can build a channel-based chat service using the SBUOpenChannelViewController class. The view controller uses the SBUOpenChannelAdminMessageCell, SBUOpenChannelUserMessageCell and SBUOpenChannelFileMessageCell classes to display information.

The SBUOpenChannelViewController class also is in charge of an auto connection to Sendbird server and internal functions to handle core features of UIKit such as pagination and real-time updates.

Note: You can initialize the SBUOpenChannelViewController by setting a ChannelUrl or SBDOpenChannel object. If you've already created a SBDMessageListParams object, set all of the objects together. Otherwise, the default values are used for these classes.

Use the following code to allow users to chat in a channel view.

Swift
Objective-C
Light Color Skin
Copy
// Case 1: Using channel url.
let channelVC = SBUOpenChannelViewController(channelUrl: {CHANNEL_URL})
let naviVC = UINavigationController(rootViewController: channelVC)
present(naviVC, animated: true)

// Case 2: Using channel object.
let channelVC = SBUOpenChannelViewController(channel: {CHANNEL})
let naviVC = UINavigationController(rootViewController: channelVC)
present(naviVC, animated: true)

// Case 3: Using messageListParams object as well.
let params = SBDMessageListParams()
params.includeMetaArray = true
params.includeReactions = true
let channelVC = SBUOpenChannelViewController(channel: {CHANNEL}, messageListParams: params)
let naviVC = UINavigationController(rootViewController: channelVC)
present(naviVC, animated: true)
Light Color Skin
Copy
// Case 1: Using channel url.
SBUOpenChannelViewController *channelVC = [[SBUOpenChannelViewController alloc] initWithChannelUrl:{CHANNEL_URL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:channelVC];
[self presentViewController:naviVC animated:YES completion:nil];

// Case 2: Using channel object.
SBUOpenChannelViewController *channelVC = [[SBUOpenChannelViewController alloc] initWithChannel:{CHANNEL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:channelVC];
[self presentViewController:naviVC animated:YES completion:nil];

// Case 3: Using messageListParams object as well.
SBDMessageListParams *params = [[SBDMessageListParams alloc] init];
params.includeMetaArray = YES
params.includeReactions = YES
SBUOpenChannelViewController *channelVC = [[SBUOpenChannelViewController alloc] initWithChannel:{CHANNEL} messageListParams:params];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:channelVC];
[self presentViewController:naviVC animated:YES completion:nil];

Components and features

The components of the SBUOpenChannelViewController class include Header, List, and messageInput. The List is an area where the UITableView displays a list of messages in the channel using the SBUOpenChannelUserMessageCell, SBUOpenChannelFileMessageCell, and SBUOpenChannelAdminMessageCell. The features of the SBUOpenChannelViewController class include:

List of features

FeatureDescription

Message input view

Allows users to send messages, along with images, videos or files.

New message information

Displays a notification when a new message arrives.

Sent status

Displays the status of messages such as success, failed, and sending.

Copy a message

Allows users to copy a message. This is applicable only to text messages.

Edit a message

Allows users to edit a message. This is applicable only to the current user's message.

Delete a message

Allows users to delete a message. This is applicable only to the current user's message.

Retry

Allows users to resend a failed message.

Channel settings menu

Navigates to the settings view from the NavigationBar.

Back and dismiss

Returns to the previous view from the NavigationBar.

State banner

Displays the status of the channel in the top banner. Currently, the banner can only display the frozen state unless you customize it.

Edit components

The following table lists a set of customizable properties of the SBUOpenChannelViewController class.

List of properties

Property nameTypeDescription

channel

SBDOpenChannel

An object that represents the channel.

channelName

String

The customized title of the channel.

messageList

SBDBaseMessage

An object that contains a list of messages which are synchronized with the server.

resendableMessages

String:SBDBaseMessage

An object that contains pending and failed messages which can be resent.

messageInputView

SBUMessageInputView

The customized message input view.

newMessageInfoView

SBUNewMessageInfo

The customized new message info view.

messageListParams

SBDMessageListParams

A set of parameters that retrieves a list and change logs of the messages.

You can customize the messageInputView or newMessageInfoView by subclassing the SBUMessageInputView or SBUNewMessageInfo class, respectively. When the messageInputView indicates that the channel is frozen or the participant is muted in the channel, the channel state can be changed through the setFrozenModeState(_ isFrozen:) or setMutedModeState(_ isMuted:) method of the SBUMessageInputView.

Note: In the case where both Frozen and Muted states coexist in a channel, only the Frozen state will be displayed in the view.

List of methods

MethodDescription

register(adminMessageCell:nib:)

Access level: public
Registers or edits an admin message cell when the message is a SBDAdminMessage type. If the cell has Nib, the property adds Nib to the cell. If it doesn’t have one, it will not add Nib to the cell. The cell should be a class type that inherits the SBUOpenChannelBaseMessageCell.

register(fileMessageCell:nib:)

Access level: public
Registers or edits a file message cell when the message is a SBDFileMessage type. If the cell has Nib, the property adds Nib to the cell. If it doesn’t have one, it will not add Nib to the cell. The cell should be a class type that inherits the SBUOpenChannelBaseMessageCell.

register(userMessageCell:nib:)

Access level: public
Registers or edits a user message cell when the message is a SBDUserMessage type. If the cell has Nib, the property adds Nib to the cell. If it doesn’t have one, it will not add Nib to the cell. The cell should be a class type that inherits the SBUOpenChannelBaseMessageCell.

register(customMessageCell:nib:)

Access level: public
Registers or edits a custom message cell when the message has a custom type. If the cell has Nib, the property adds Nib to the cell. If it doesn’t have one, it will not add Nib to the cell. The cell should be a class type that inherits the SBUOpenChannelBaseMessageCell.

didReceiveError(_ message:)

Access level: open
Receives an error message when an error occurs in the ViewController. You can customize the view by overriding this method.

showChannelSettings()

Access level: open
Displays the channel settings menu. You can customize the openChannelSettingsViewController by overriding and implementing this method.

setTapGestureHandler(_ cell:message:)

Access level: open
Specifies what gesture to be used for a tap. You can customize the tap gesture to the cell by overriding and implementing this method.

setLongTapGestureHandler(_ cell:message:indexPath:)

Access level: open
Specifies what gesture to be used for a long tap. You can customize the long tap gesture to the cell by overriding and implementing this method.

sendUserMessage(text:)

Access level: public
Sends a user message.

sendUserMessage(messageParams:)

Access level: public
Sends a user message with SBDUserMessageParams.

sendFileMessage(fileData:fileName:mimeType:)

Access level: public
Sends a file message with file data, file name, and mime type.

sendFileMessage(messageParams:)

Access level: public
Sends a file message with SBDFileMessageParams.

resendMessage(failedMessage:)

Access level: public
Resends a failed message.

updateUserMessage(message:text:)

Access level: public
Updates a user message.

updateUserMessage(message:messageParams:)

Access level: public
Updates a user message with SBDUserMessageParams.

deleteMessage(message:)

Access level: public
Deletes a message.

Edit stringSet

The SBUStringSet is a set of strings used to compose the screen. You need to modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

List of properties

Property nameDescription

Channel_Name_Default

The default channel name.

Channel_New_Message

A text for a new message popup.

Channel_New_Message_File

A text that appears when a file message upload is completed.

Channel_Success_Download_file

A text that appears when a file is successfully saved.

MessageInput_Text_Placeholder

A placeholder for a message input box.

MessageInput_Text_Unavailable

A placeholder to indicate that a message can't be entered in the input box when the channel is frozen.

MessageInput_Text_Muted

A placeholder to indicate that a message can't be entered in the input box when the user is muted.

Message_Edited

A text for when message is edited, shown as a toast notification.

Message_System

A text for a system message, shown as a toast notification.

Message_Unknown_Title

A title for an unknown message.

Message_Unknown_Description

A description for an unknown message.

Channel_State_Banner_Frozen

A text to be displayed in the state banner for a frozen channel.

Open_Channel_Participants_Count

A text to be displayed in the title view.

Note : A set of common strings is not included in the above list of properties. See the StringSet section in the Common resources page.

Edit iconSet

The SBUIConSet is a set of icons used to compose the screen. You need to modify the iconSet values in advance if you want to use different icons. The iconSet includes:

  • iconCopy, iconEdit, iconInfo, iconNewMessage, iconAdd, iconSend, iconDelivered, iconErrorFilled, iconRead, iconSent, iconSpinnerSmall, iconFileAudio, iconFileDocument, iconGif, iconPlay

Note : A set of common icons is not included in the SBUIconSet listed above. See the IconSet section in the Common resources page.

Customize the class

You can subclass and customize the SBUOpenChannelViewController class to enhance the user experience of your app. The overridable methods include:

  • viewLifeCycle, SBUMessageInputViewDelegate, SBUFileViewerDelegate, SBDConnectionDelegate, SBDChannelDelegate

If you wish to create and implement a custom message cell, you must inherit the SBUBaseMessageCell class. To register your custom message cell to be shown on the List component of the channel view, use the register(customMessageCell:nib:) function.

You can also change a cell's Identifier by overriding the generateCellIdentifier function. By default, the cell's Identifier takes on the name of the class.

Note : We recommend you should fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

Theme

To display messages, the SBUOpenChannelViewController uses two views and three themes. The two views include the SBUOpenChannelBaseMessageCell and the SBUMessageInputView, and the three themes are the SBUChannelTheme, SBUMessageCellTheme, and SBUMessageInputTheme in the SBUTheme.

The overall elements of the SBUOpenChannelViewController are managed through the SBUChannelTheme. Meanwhile, the SBUOpenChannelBaseMessageCell uses the SBUMessageCellTheme to show messages in the view and the SBUMessageInputView uses the SBUMessageInputThemefor the design of the message input box in the view.

All three themes mentioned above can be customized through the SBUTheme. And you should call the setupStyle() afterwards in order to apply any changes you made to the theme.

Set a custom theme

You can customize the channel theme through the SBUTheme.setChannel as follows.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

Swift
Objective-C
Light Color Skin
Copy
let channelTheme = SBUChannelTheme(
    navigationBarTintColor: SBUColorSet.primary300
    ...

)

let messageCellTheme = SBUMessageCellTheme(
    backgroundColor: SBUColorSet.background100
    ...

)

let messageInputTheme = SBUMessageInputTheme(
    backgroundColor: SBUColorSet.background100
    ...

)

SBUTheme.setChannel(channelTheme: channelTheme,
        messageCellTheme: messageCellTheme,
        messageInputTheme: messageInputTheme)
Light Color Skin
Copy
SBUChannelTheme *channelTheme = [[SBUChannelTheme alloc]
    initWithNavigationBarTintColor: SBUColorSet.primary300
    ...

];

SBUMessageCellTheme *messageCellTheme = [[SBUMessageCellTheme alloc]
    initWithBackgroundColor: SBUColorSet.background100
    ...

];


SBUMessageInputTheme *messageInputTheme = [[SBUMessageInputTheme alloc]
    initWithBackgroundColor: SBUColorSet.background100
    ...

];

[SBUTheme setChannelwithChannelTheme: channelTheme,
            messageCellTheme: messageCellTheme,
            messageInputTheme: messageInputTheme
];

Edit theme elements

Themes can be customized through the SBUTheme. It is recommended that you change the themes prior to viewController initialization. The following code shows how to customize the elements of the theme.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

Swift
Objective-C
Light Color Skin
Copy
// Channel theme.
SBUTheme.channelTheme.backgroundColor = SBUColorSet.background100
...

// Message cell theme.
SBUTheme.messageCellTheme.backgroundColor = SBUColorSet.background100
...

// Message input theme.
SBUTheme.messageInputTheme.backgroundColor = SBUColorSet.background100
...
Light Color Skin
Copy
// Channel theme.
SBUTheme.channelTheme.backgroundColor = SBUColorSet.background100;
...

// Message cell theme.
SBUTheme.messageCellTheme.backgroundColor = SBUColorSet.background100;
...

// Message input theme.
SBUTheme.messageInputTheme.backgroundColor = SBUColorSet.background100;
...

- SBUChannelTheme

The SBUChannelTheme object has properties used in the SBUOpenChannelViewController.

CategoryPropertyDescription

Navigation bar

navigationBarTintColor

The tint color of the navigation bar.

Navigation bar

navigationBarShadowColor

The shadow color of the navigation bar.

Navigation bar

leftBarButtonTintColor

The tint color of the button at the left side of the navigation bar.

Navigation bar

rightBarButtonTintColor

The tint color of the button at the right side of the navigation bar.

Status bar

statusBarStyle

The style of the status bar.

View

backgroundColor

The background color of the channel view.

Alert

removeItemColor

The color of the item remove alert.

Alert

cancelItemColor

The color of the item cancel alert.

Alert

alertRemoveColor

The color of the remove action's button.

Alert

alertCancelColor

The color of the cancel action's button.

Menu

menuTextColor

The text color of the menu.

State banner

channelStateBannerFont

The text font of the state banner.

State banner

channelStateBannerTextColor

The text color of the state banner.

State banner

channelStateBannerBackgroundColor

The background color of the state banner.

- SBUMessageInputTheme

The SBUMessageInputTheme object has properties used in the SBUOpenChannelViewController.

CategoryPropertyDescription

View

backgroundColor

The background color of the message input view.

Text field

textFieldBackgroundColor

The background color of the input field.

Text field

textFieldPlaceholderColor

The color of the placeholder in the input field.

Text field

textFieldPlaceholderFont

The font of the placeholder in the input field.

Text field

textFieldDisabledColor

The color of the placeholder to indicate that text can't be entered in the input field.

Text field

textFieldTintColor

The tint color of the text in the input field.

Text field

textFieldTextColor

The color of the text in the input field.

Text field

textFieldBorderColor

The border color of the input field.

Button

buttonTintColor

The tint color of the add, cancel, and save buttons.

Button

buttonDisabledTintColor

The tint color of the add button when entering text is not available.

Button

cancelButtonFont

The font of the cancel button.

Button

saveButtonFont

The font of the save button.

Button

saveButtonTextColor

The color of the text on the save button.

- SBUMessageCellTheme

The SBUMessageCellTheme object has properties used in the SBUOpenChannelViewController.

CategoryPropertyDescription

View

backgroundColor

The background color of the cell.

View

leftBackgroundColor

The background color of the left side of the cell.

View

rightBackgroundColor

The background color of the right side of the cell.

View

leftPressedBackgroundColor

The background color applied to the button at the left side when pressed.

View

rightPressedBackgroundColor

The background color applied to the button at the right side when pressed.

Date label

dateFont

The font of the date element.

Date label

dateTextColor

The text color of the date element.

Date label

dateBackgroundColor

The background color of the date element.

User

userNameFont

The font of the user name.

User

userNameTextColor

The text color of the user name element.

User

userPlaceholderBackgroundColor

The background color of the user name element's placeholder.

User

userPlaceholderTintColor

The tint color of the user name element's placeholder.

Title label

timeFont

The font of the time element.

Title label

timeTextColor

The text color of the time element.

Message state

pendingStateColor

The color applied when the state of a message is pending.

Message state

failedStateColor

The color applied when the state of a message is failed.

Message state

succeededStateColor

The color applied when the state of a message is succeeded.

User message

userMessageFont

The font applied to a user message.

User message

userMessageLeftTextColor

The text color applied to a user message displayed on the left side of the channel view.

User message

userMessageLeftEditTextColor

The text color to indicate an edited user message displayed on the left of the channel view.

User message

userMessageRightTextColor

The text color applied to a user message displayed on the right side of the channel view.

User message

userMessageRightEditTextColor

The text color to indicate an edited user message displayed on the right side of the channel view.

User message

ogTitleFont

The font applied to the og title of the link within the message.

User message

ogTitleColor

The text color applied to the og title of the link within the message.

User message

ogDescriptionFont

The font applied to the og description of the link within the message.

User message

ogDescriptionColor

The text color applied to the og description of the link within the message.

User message

ogURLAddressFont

The font applied to the og url of the link within the message.

User message

ogURLAddressColor

The text color applied to the og url of the link within the message.

User message

linkColor

The text color to indicate an edited user message displayed on the right side of the channel view.

File message

fileIconBackgroundColor

The background color of the file icon

File message

fileIconColor

The color of the file icon.

File message

fileMessageNameFont

The font of the file message name element.

File message

fileMessageLeftTextColor

The text color applied to the left side of a file message.

File message

fileMessageRightTextColor

The text color applied to the right side of a file message.

File message

fileMessagePlaceholderColor

The text color of a file message's placeholder.

Admin message

adminMessageFont

The font of an admin message.

Admin message

adminMessageFont

The text color of an admin message.

Unknown message

unknownMessageDescFont

The font of an unknown message.

Unknown message

unknownMessageDescTextColor

The text color of an unknown message.


Overlay Mode

Open channels support an overlayMode, which allows you to put a semi-transparent upper layer on the top of the channel background. The overlayMode can be useful for those who use the SBUOpenChannelViewController with a mediaView because the background can be shown through. The overlayMode is supported for all orientations of the screen.

The SBUOpenChannelViewController consists two views: the mediaView and the messageList view. The mediaView is an area your media or content should be drawn to, and the messageList view is where the message list is drawn. The SDK handles the drawing of the messageList, and you can decide whether to use the mediaView or not.

Swift
Objective-C
Light Color Skin
Copy
let openChannelVC = SBUOpenChannelViewController(channel: openChannel, messageListParams: openChannelParams)

// You need to enable the media view first.
openChannelVC.enableMediaView()

// Set the mediaView to your custom view.
openChannelVC.mediaView = UIView()

// Set the ratio of message list view within the screen.
// The ratio can be 0 to 1, inclusive.
// * Portrait mode : the ratio indicates the height of the messageList, measured from the bottom of the screen.
// * Landscape mode : the ratio indicates the width of the messageList, measured from the right side of the screen.
openChannelVC.updateMessageListRatio(to: 0.7)

// You can set whether the mediaView should ignore the safe area or not.
// The default is true.
openChannelVC.mediaViewIgnoringSafeArea(false)
Light Color Skin
Copy
SBUOpenChannelViewController *openChannelVC = [[SBUOpenChannelViewController alloc] initWithChannel: openChannel messageListParams: openChannelParams];

// You need to enable the media view first.
[openChannelVC enableMediaView];

// Set the mediaView to your custom view.
openChannelVC.mediaView = [[UIView alloc] init];
// Set the ratio of message list view within the screen.
// The ratio can be 0 to 1, inclusive.
// * Portrait mode: the ratio indicates the height of the messageList, measured from the bottom of the screen.
// * Landscape mode: the ratio indicates the width of the messageList, measured from the right side of the screen.
[openChannelVC updateMessageListRatioTo: 0.7];

// You can set whether the mediaView should ignore the safe area or not.
// The default is true.
[openChannelVC mediaViewIgnoringSafeArea: NO];

How to enable the overlayMode

With the mediaView set, you can enable the overlayMode. In that case, the messageList UI adjust itself to the overlayMode and the mediaView will fill the whole screen in both portrait and landscape mode. You can customize the size of the message list view through the updateMessageListRatio(to ratio:) method.

Swift
Objective-C
Light Color Skin
Copy
class YourOpenChannelViewController: SBUOpenChannelViewController {

    func changeOverlayMode() {
        // Enable the overlay mode.
        // If true, the mediaView ratio will be 1, occupying the whole screen.
        // If false, the mediaView ratio will be 1 - messageListRatio.
        self.overlayMediaView(true/false, messageListRatio: 0.4)

        // Update the layout.
        self.updateAutolayout()
    }
}
Light Color Skin
Copy
@interface YourOpenChannelViewController: SBUOpenChannelViewController
@end

@implementation
- (void)changeOverlayMode {
    // Enable the overlay mode.
    // If true, the mediaView ratio will be 1, occupying the whole screen.
    // If false, the mediaView ratio will be 1 - messageListRatio.
    [self overlayMediaView:YES messageListRatio: 0.4];

    // Update the layout.
    [self updateAutoLayout];
}
@end

List of methods

MethodDescription

enableMediaView(_:)

Access level: public
Enable the internal media view.

updateMessageListRatio(to ratio:)

Access level: public
Updates the relative ratio of the messageList to the whole screen size. The ratio determines the height of the messageList area in a portrait mode, and the width of the area in a landscape mode. After calling this method, you need to call the setupStyles or updateComponentStyle.
- Portrait mode: the mediaView occupies the top and the messageList occupies the bottom of the screen.
- Landscape mode: the mediaView occupies the whole screen while the messageList is placed over it, on the right side of the view.

mediaViewIgnoringSafeArea(_ enabled:)

Access level: public
Extends the media view area beyond the screen's safe area.

overlayMediaView(_ overlaying:messageListRatio:)

Access level: public
Determines whether to show the background view in the overlay mode. In the overlay mode, the mediaView fills the whole screen, and the messageList occupies the space specified by the messageListRatio.

Customize the SBUOverlayTheme

You can change the styles of the overlayMode by setting your custom themes under SBUTheme.overlayTheme. The customizable themes for the overlay mode include SBUChannelTheme, SBUMessageInputTheme, SBUMessageCellTheme and SBUComponentTheme, and they're set to .overlay as a default.

Light Color Skin
Copy
class YourOpenChannelViewController: SBUOpenChannelViewController {

    func customizeOverlayTheme() {

        /**
        * 1. Change the theme property directly.
        */
        SBUTheme.overlayTheme.messageInputTheme.backgroundColor = UIColor.your_desired_color

        /**
        * 2. Change the ColorSet in the theme.
        */
        // Or change the ColorSet value for the MessageInputTheme.overlay.backgroundColor property.
        // Change the color of SBUColorSet.onlight02 as follows.
        SBUColorSet.onlight02 = UIColor.your_desired_color

        // Set the overlay theme again to apply any changes.
        SBUTheme.overlayTheme.messageInputTheme = .overlay

        // Update the UI.
        self.updateStyles()
    }
}
Light Color Skin
Copy
@interface YourOpenChannelViewController: SBUOpenChannelViewController
@end

@implementation
- (void)customizeOverlayTheme {
    /**
    * 1. Change the theme property directly.
    */
    SBUTheme.overlayTheme.messageInputTheme.backgroundColor = UIColor.{YOUR_DESIRED_COLOR};

    /**
    * 2. Change the ColorSet in the theme.
    */
    // Or change the ColorSet value for the MessageInputTheme.overlay.backgroundColor property.
    // Change the color of SBUColorSet.onlight02 as follows.
    SBUColorSet.onlight02 = UIColor.{YOUR_DESIRED_COLOR};

    // Set the overlay theme again to apply any changes.
    SBUTheme.overlayTheme.messageInputTheme = SBUMessageInputTheme.overlay;

    // Update the UI.
    [self updateStyles];
}
@end

List channel participants

In UIKit, you can retrieve the list of participants in a specific open channel through the SBUMemberListViewController class. This class displays a list of participants using the SBUUserCell class.

Note : Simply setting your chat service to be based on either the channel list, channels, or channel settings can seamlessly lead users to the Participants list view.

How to show a list of participants

You can get the list of participants in a specific channel by simply calling the SBUMemberListViewController class.

Note : You can initialize the SBUMemberListViewController class by setting a ChannelUrl, SBDOpenChannel or ChannelMemberListType object.

Use the following code to get the list of participants in a channel.

Swift
Objective-C
Light Color Skin
Copy
// Case 1: Using channel url.
let memberListVC = SBUMemberListViewController(channelUrl: {CHANNEL_URL}, type: .participants)
let naviVC = UINavigationController(rootViewController: memberListVC)
present(naviVC, animated: true)

// Case 2: Using channel object.
let memberListVC = SBUMemberListViewController(channel: {CHANNEL}, type: .participants)
let naviVC = UINavigationController(rootViewController: memberListVC)
present(naviVC, animated: true)
Light Color Skin
Copy
// Case 1: Using channel url.
SBUMemberListViewController *memberListVC = [[SBUMemberListViewController alloc] initChannelUrl:{CHANNEL_URL} type:ChannelMemberListTypeParticipants];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:memberListVC];
[self presentViewController:naviVC animated:YES completion:nil];

// Case 2: Using channel object.
SBUMemberListViewController *memberListVC = [[SBUMemberListViewController alloc] initWithChannel:{CHANNEL} type:ChannelMemberListTypeParticipants];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:memberListVC];
[self presentViewController:naviVC animated:YES completion:nil];

Components and features

Currently, the SBUMemberListViewController only supports a participants type for open channels.

TypeDescription

.participants

A list of participants in an open channel.

Note: When the ChannelMemberListType is .operators, the Add button is displayed on the top right corner of the view.

Edit components

The following table lists the customizable properties and method of the SBUMemberListViewController class.

List of methods

MethodDescription

register(userCell:nib:)

Access level: public
Registers a new user cell or edits an existing one. If the cell has Nib, the property adds Nib to the cell. If it doesn’t have one, it will not add Nib to the cell.

didReceiveError(_ message:)

Access level: open
Receives an error message when an error occurs in the ViewController. Depending on your use cases, you can customize the view by overriding and implementing this method.

showInviteUser()

Access level: open
Displays the list of users who can be invited. You can customize the inviteUserViewController by overriding and implementing this method.

resetMemberList()

Access level: public
Reloads the participant list.

loadNextMemberList(reset:members:)

Access level: public
Loads the participant list. Use the reset option to initialize the list and send a new request. For a customized participants list, pass it through the members parameter.

nextMemberList()

Access level: open
Retrieves the remaining participant list. You can override and implement this method to customize the list.

Edit stringSet

The SBUStringSet is a set of strings used to compose the screen. You need to modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

List of properties

Property nameDescription

MemberList_Me

A text to indicate which user name belongs to the user themselves.

MemberList_Title_Participants

A text for Participants

Note : A set of common strings is not included in the above list of properties. See the StringSet section in the Common resources page.

Edit iconSet

The SBUIConSet is a set of icons used to compose the screen. You need to modify the iconSet values in advance if you want to use different icons.

Note : A set of common icons is not included in the list in the SBUIConSet. See the IconSet section in the Common resources page.

Customize the class

You can subclass and customize the SBUMemberListViewController to enhance the user experience of your app.

Note : We recommend that you fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

Set a custom theme

You can customize themes through the SBUTheme.setUserList as follows.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

Swift
Objective-C
Light Color Skin
Copy
let userListTheme = SBUUserListTheme(
    navigationBarTintColor: SBUColorSet.background100
    ...

)

let userCellTheme = SBUUserCellTheme(
    backgroundColor: SBUColorSet.background100
    ...

)

SBUTheme.setUserList(userListTheme: userListTheme, userCellTheme: userCellTheme)
Light Color Skin
Copy
SBUUserListTheme *userListTheme = [[SBUUserListTheme alloc]
    initWithNavigationBarTintColor: SBUColorSet.background100
    ...

];

SBUUserCellTheme *userCellTheme = [[SBUUserCellTheme alloc]
    initWithBackgroundColor: SBUColorSet.background100
    ...

];
[SBUTheme setUserListWithUserListTheme:userListTheme
            userCellTheme:userCellTheme
];

Edit theme elements

Themes can be customized through the SBUTheme. It is recommended to change the theme prior to the viewController initialization. The following code shows how to customize the elements of the theme.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

Swift
Objective-C
Light Color Skin
Copy
// User list theme.
SBUTheme.userListTheme.navigationBarTintColor = SBUColorSet.background100

// User cell theme.
SBUTheme.userCellTheme.backgroundColor = SBUColorSet.background100
Light Color Skin
Copy
// User list theme.
SBUTheme.userListTheme.navigationBarTintColor = SBUColorSet.background100;

// User cell theme.
SBUTheme.userCellTheme.backgroundColor = SBUColorSet.background100;

- SBUUserListTheme

The SBUUserListTheme object has properties used in the following classes: SBUCreateChannelViewController, SBUInviteUserViewController and SBUMemberListViewController.

List of properties

CategoryPropertyDescription

Navigation bar

navigationBarTintColor

The tint color of the navigation bar.

Navigation bar

navigationBarShadowColor

The shadow color of the navigation bar.

Navigation bar

leftBarButtonTintColor

The tint color of the button at the left side of the navigation bar.

Navigation bar

rightBarButtonTintColor

The tint color of the button at the right side of the navigation bar.

Navigation bar

rightBarButtonSelectedTintColor

The tint color applied to the button at the right side of the navigation bar when selected.

Cell

cellTextFont

The font used in the cell.

- SBUUserCellTheme

The SBUUserCellTheme object has properties used in the SBUUserCell.

CategoryPropertyDescription

View

backgroundColor

The background color of the view.

View

separateColor

The color of the separator.

Check box

checkboxOnColor

The color applied when a checkbox element is checked.

Check box

checkboxOffColor

The color applied when a checkbox element is unchecked.

User

userNameTextColor

The text color of the user name element.

User

userNameFont

The font of the user name element.

Member state

mutedStateBackgroundColor

The background color of muted participants.

Member state

mutedStateIconColor

The tint color of the muted icon.

Member state

subInfoTextColor

The text color of participant's state information.

Member state

subInfoFont

The font of participant's state information.

More menu

moreButtonColor

The color of the more menu button when activated.

More menu

moreButtonDisabledColor

The color of the more menu button when deactivated.


Configure the channel settings

In UIKit, you can display and configure channels through the SBUOpenChannelSettingsViewController class if you are an operator. In the class, you can edit the name and cover image of a channel, check the number of participants in the channel, and delete the specific channel.

Note : Simply setting your chat service to be based on either the channel list or channel can seamlessly lead users to the channel settings view.

How to use

Configure channel settings without complicated implementation through the SBUOpenChannelSettingsViewController class.

Swift
Objective-C
Light Color Skin
Copy
// Case 1: Using channel url.
let openChannelSettingsVC = SBUOpenChannelSettingsViewController(channelUrl: {CHANNEL_URL})
let naviVC = UINavigationController(rootViewController: openChannelSettingsVC)
present(naviVC, animated: true)

// Case 2: Using channel object.
let openChannelSettingsVC = SBUOpenChannelSettingsViewController(channel: {CHANNEL})
let naviVC = UINavigationController(rootViewController: openChannelSettingsVC)
present(naviVC, animated: true)
Light Color Skin
Copy
// Case 1: Using channel url.
SBUOpenChannelSettingsViewController *openChannelSettingsVC = [[SBUOpenChannelSettingsViewController alloc] initWithChannelUrl:{CHANNEL_URL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:channelVC];
[self presentViewController:naviVC animated:YES completion:nil];

// Case 2: Using channel object.
SBUOpenChannelSettingsViewController *openChannelSettingsVC = [[SBUOpenChannelSettingsViewController alloc] initWithChannel:{CHANNEL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:channelVC];
[self presentViewController:naviVC animated:YES completion:nil];

Note : You can initialize the SBUOpenChannelSettingsViewController class by setting the ChannelUrl or SBDOpenChannel object.

Components and features

The SBUChannelSettingsViewController is composed of channel configurations and channel information. The components and features of the SBUChannelSettingsViewController class include:

List of features

FeatureDescription

Channel cover image

Displays the cover image of a channel.

Channel name

Displays the name of a channel.

Change channel cover image

Changes the cover image of a channel.

Change channel name

Changes the name of a channel.

Channel participants

Displays a list of participants in a channel and navigate to the participant information view.

Channel update

Updates the information of a channel.

Delete channel

Deletes a channel and return to a channel list.

Edit components

The following table lists a set of customizable properties and methods of the SBUOpenChannelSettingsViewController class.

List of properties

Property nameTypeDescription

channelName

String

Edits the name of the channel.

List of methods

MethodDescription

didReceiveError(_ message:)

Access level: open
Receives an error message when an error occurs in the SBUOpenChannelSettingsViewController. Depending on your use cases, you can customize the view by overriding and implementing this method.

showParticipantsList()

Access level: open
Displays a list of participants in a channel. You can customize the SBUMemberListViewController class by overriding and implementing this method.

updateChannel(channelName:coverImage:)

Access level: public
Updates a channel name or cover image.

updateChannel(params:)

Access level: public
Updates a channel with channelParams.

deleteChannel()

Access level: public
Deletes a channel and returns to the channel list.

selectChannelImage()

Access level: public
Displays an action sheet to select channel image.

changeChannelName()

Access level: public
Displays an alert to change a channel name.

Edit stringSet

The SBUStringSet is a set of strings used to compose the screen. You need to modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

List of properties

Property nameDescription

ChannelSettings_Header_Title

A title of the ViewController.

ChannelSettings_Change_Name

A text for Change name.

ChannelSettings_Change_Image

A text for Change channel image.

ChannelSettings_Enter_New_Name

A text for Enter name.

ChannelSettings_Participants_Title

A text for Participants.

ChannelSettings_Delete

A text for Delete channel.

Note : A set of common icons is not included in the above list of properties. See the StringSet section in the Common resources page.

Edit iconSet

The SBUIConSet is a set of icons used to compose the screen. You need to modify the iconSet values in advance if you want to use different icons. The iconSet includes:

  • iconMembers, iconDelete, iconShevronRight

Note : A set of common icons is not included in the SBUIconSet. See the IconSet section in the Common resources page.

Customize the class

You can subclass and customize the SBUOpenChannelSettingsViewController to enhance the user experience of your app.

Note : We recommend that you fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

Set a custom theme

You can customize the channelSettingsTheme through the SBUTheme.setChannelSetting(channelSettingsTheme:) method as follows.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

Swift
Objective-C
Light Color Skin
Copy
let settingsTheme = SBUChannelSettingsTheme(
    navigationBarTintColor: SBUColorSet.background100
    ...

)

SBUTheme.setChannelSettings(channelSettingsTheme: settingsTheme)
Light Color Skin
Copy
SBUChannelSettingsTheme *settingsTheme = [[SBUChannelSettingsTheme alloc]
    initWithNavigationBarTintColor: SBUColorSet.background100
    ...

];

[SBUTheme setChannelSettingsWithChannelSettingsTheme:settingsTheme];

Edit theme elements

Themes can be customized through the SBUTheme. It is recommended to change the themes prior to the viewController initialization. The following code shows how to customize the elements of the theme.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

Swift
Objective-C
Light Color Skin
Copy
// Setting theme.
SBUTheme.channelSettingsTheme.navigationBarTintColor = SBUColorSet.background100
Light Color Skin
Copy
// Setting theme.
SBUTheme.channelSettingsTheme.navigationBarTintColor = SBUColorSet.background100;

- SBUChannelSettingsTheme

The SBUChannelSettingsTheme object has properties used in the SBUChannelSettingViewController.

CategoryPropertyDescription

Navigation bar

navigationBarTintColor

The tint color of the navigation bar.

Navigation bar

navigationBarShadowColor

The shadow color of the navigation bar.

Navigation bar

leftBarButtonTintColor

The tint color of the button at the left side of the navigation bar.

Navigation bar

rightBarButtonTintColor

The tint color of the button at the right side of the navigation bar.

Navigation bar

backgroundColor

The background color of the navigation bar.

Status bar

statusBarStyle

The style of the status bar.

Cell

cellTextFont

The font used in the cell.

Cell

cellTextColor

The text color of the cell.

Cell

cellSeparateColor

The color of cell separators.

Cell

cellDeleteIconColor

The color of the delete icon in the cell.

Cell

cellSubTextFont

The font for sub text in the cell.

Cell

cellSubTextColor

The color for sub text in the cell.

Cell

cellTypeIconTintColor

The color of the type icon in the cell.

Cell

cellArrowIconTintColor

The color of the arrow icon in the cell.

User info view

userNameFont

The font of the user name element.

User info view

userNameTextColor

The text color of the user name element.

Action sheet

itemTextColor

The text color of the item.

Action sheet

itemColor

The color of the item.