List participants in an open channel

In Sendbird Chat SwiftUI, you can retrieve a list of users in an open channel through the OpenParticipantListView. This view is used to display a list of channel participants, operators, muted participants, and banned users.

To view the image in full screen, click on the

Note: If you set the starting point of your chat service to be the channel list, open channel, or channel settings, you can seamlessly guide your users to the participant list view.

There are four different types of list view that display participants of OpenChannel.

You can start building a participant list view using the OpenParticipantListView, OpenOperatorListView, OpenMutedParticipantListView, or OpenBannedUserListView. Each struct can be used to create specific views tailored to different participant lists. Use the init(channelURL:) initializer to create the instance and display the view as shown below.

import SwiftUI
import SendbirdUI

struct ContentView {
    var body: some View {
        OpenParticipantListView(
            channelURL: {CHANNEL_URL}
        )
    }
}

Sendbird Chat SwiftUI provides a View customization and DestinationViewBuilder.

• View customization: Our SwiftUI SDK allows you to selectively customize view elements. To learn more about the customization and our SwiftUI is designed, see the customization guide.
• DestinationViewBuilder: Use DestinationViewBuilder to customize the destination views that are navigatable from the group channel view.

Note : Visit our Github Sample to see the custom sample implementation for each item.

Partial customization is available for the following four views: OpenParticipantListView, OpenBannedUserListView, OpenMutedParticipantListView, and OpenOperatorListView.

You can easily customize a specific part of those Views, which particularly comes in handy when changing only a certain area in a View. To do so, use the View Builders that Sendbird has predefined and its a ViewConfig. The ViewConfig contains the data needed to render the view and its parameters can be found in the table below.

The following code demonstrates how to replace the view items using headerItem. All other {Component}Items can be used in the same way.

Note : When you customize a parent view, customizations in the child views will not be applied. For example, if you customize the titleView in the headerItem, the customizations of the coverImage or titleLabel in the lower view items will not be applied.

OpenParticipantListView(
    channelURL: {CHANNEL_URL},
    headerItem: {
        .init()
        .leftView { viewConfig in
            Text("Custom Left")
        }
        .rightView { viewConfig in // chaining
            Text("Custom Right")
        }
    }
)

You can also customize the entire view area as desired. You simply need to return a SwiftUI View in the closure. The ViewConfig contains the data needed to render the view. Its parameters can be found in the table below.

The list parameter is used to customize the entire list area for all of the four types of Views - OpenParticipantListView, OpenBannedUserListView, OpenMutedParticipantListView, and OpenOperatorListView.

The following code demonstrates how to replace the entire list area using the list parameter.

Note : When you customize a parent view, customizations in the child views will not be applied. For example, if you customize the entire area through the list, the customizations set in the listItem will not be applied.

OpenParticipantListView(
    channelURL: {CHANNEL_URL},
    list: { viewConfig in
        List(viewConfig.users) { user in
            Text(user.nickname)
        }
    }
)

Sendbird Chat SwiftUI is designed to internally navigate from each view to its connected view. However, if you need to customize the destination view, you can do so by using the interface provided by the DestinationViewBuilder.

Out of the four View types, only OpenOperatorListView supports the DestinationViewBuilder at the moment.

The following code demonstrates how to replace the channel settings view connected from the channel view.

OpenChannelRegisterOperatorView(channelURL: {CHANNEL_URL})
    .registerOperatorView { channelURL in
        OpenChannelRegisterOperatorView(channelURL: channelURL)
    }

Note : If you've customized a child view of another view, you need to set the destination view for all the views from the top to the destination view.