CometChatGroupMembers
is a versatile Component designed to showcase all users who are either added to or invited to a group, thereby enabling them to participate in group discussions, access shared content, and engage in collaborative activities. Group members have the capability to communicate in real-time through messaging, voice and video calls, and various other interactions. Additionally, they can interact with each other, share files, and join calls based on the permissions established by the group administrator or owner.
CometChatGroupMembers
component is composed of the following BaseComponents:
Components | Description |
---|---|
CometChatListBase | CometChatListBase serves as a container component equipped with a title (navigationBar), search functionality (search-bar), background settings, and a container for embedding a list view. |
CometChatListItem | This component renders information extracted from a User object onto a tile, featuring a title, subtitle, leading view, and trailing view. experience, facilitating seamless navigation and interaction within the component. |
CometChatGroupMembers
, as a custom view controller, offers flexible integration options, allowing it to be launched directly via button clicks or any user-triggered action. Additionally, it seamlessly integrates into tab view controllers. With group members, users gain access to a wide range of parameters and methods for effortless customization of its user interface.
The following code snippet exemplifies how you can seamlessly integrate the GroupMembers component into your application.
set(OnItemClick:)
is triggered when you click on a ListItem of the groups component. This set(OnItemClick:)
method proves beneficial when a user intends to customize the on-click behavior in CometChatGroupMembers.
set(OnItemLongClick:)
is triggered when you long press on a ListItem of the group members component. This set(OnItemLongClick:)
method proves beneficial when a user intends to additional functionality on long press on list item in CometChatGroupMembers.
set(onBack:)
method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatGroupMembers.
set(onSelection:)
only gets trigger when selection mode is set to multiple of single. And this gets trigger on every selection, and returns the list of selected group members.
set(onEmpty:)
method is triggered when the groups list is empty in CometChatGroupMembers.
Component
. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders
of Chat SDK.
Methods | Type | Description |
---|---|---|
setLimit | Int | Configure the maximum number of groups to fetch in a single request, optimizing pagination for smoother navigation. |
setSearchKeyword | String | Employed to retrieve groups that match the provided string, facilitating precise searches. |
scopes | [String] | used for fetching group members based on multiple scopes |
Component
. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
Events emitted by the Join Group component is as follows.
Event | Description |
---|---|
onGroupMemberBan | Triggers when the group member banned from the group successfully |
onGroupMemberKick | Triggers when the group member kicked from the group successfully |
onGroupMemberChangeScope | Triggers when the group member scope is changed in the group |
GroupMembersStyle
to the Group Memebers
Component to customize the styling.
Global level styling
Property | Description | Code |
---|---|---|
retryButtonTextColor | Sets the text color for the retry button. | .retryButtonTextColor: UIColor |
retryButtonTextFont | Sets the text font for the retry button. | .retryButtonTextFont: UIFont |
retryButtonBackgroundColor | Sets the background color for the retry button. | .retryButtonBackgroundColor: UIColor |
retryButtonBorderColor | Sets the border color for the retry button. | .retryButtonBorderColor: UIColor |
retryButtonBorderWidth | Sets the border width for the retry button. | .retryButtonBorderWidth: CGFloat |
retryButtonCornerRadius | Sets the corner radius for the retry button. | .retryButtonCornerRadius: CometChatCornerStyle |
listItemSelectedBackground | Sets the background color for selected list items. | .listItemSelectedBackground: UIColor |
listItemDeSelectedImageTint | Sets the tint color for deselected list item images. | .listItemDeSelectedImageTint: UIColor |
listItemSelectionImageTint | Sets the tint color for selected list item images. | .listItemSelectionImageTint: UIColor |
listItemSelectedImage | Sets the image for selected list items. | .listItemSelectedImage: UIImage |
listItemDeSelectedImage | Sets the image for deselected list items. | .listItemDeSelectedImage: UIImage |
backgroundColor | Sets the background color. | .backgroundColor: UIColor |
borderWidth | Sets the border width. | .borderWidth: CGFloat |
borderColor | Sets the border color. | .borderColor: UIColor |
cornerRadius | Sets the corner radius style. | .cornerRadius: CometChatCornerStyle |
titleFont | Sets the font for the title. | .titleFont: UIFont? |
largeTitleFont | Sets the font for the large title. | .largeTitleFont: UIFont? |
titleColor | Sets the color for the title text. | .titleColor: UIColor? |
largeTitleColor | Sets the color for the large title text. | .largeTitleColor: UIColor? |
navigationBarTintColor | Sets the tint color for the navigation bar. | .navigationBarTintColor: UIColor? |
navigationBarItemsTintColor | Sets the tint color for navigation bar items. | .navigationBarItemsTintColor: UIColor? |
errorTitleTextFont | Sets the font for the error title text. | .errorTitleTextFont: UIFont |
errorTitleTextColor | Sets the color for the error title text. | .errorTitleTextColor: UIColor |
errorSubTitleFont | Sets the font for the error subtitle text. | .errorSubTitleFont: UIFont |
errorSubTitleTextColor | Sets the color for the error subtitle text. | .errorSubTitleTextColor: UIColor |
emptyTitleTextFont | Sets the font for the empty state title text. | .emptyTitleTextFont: UIFont |
emptyTitleTextColor | Sets the color for the empty state title text. | .emptyTitleTextColor: UIColor |
emptySubTitleFont | Sets the font for the empty state subtitle text. | .emptySubTitleFont: UIFont |
emptySubTitleTextColor | Sets the color for the empty state subtitle text. | .emptySubTitleTextColor: UIColor |
tableViewSeparator | Sets the color for the table view separator. | .tableViewSeparator: UIColor |
listItemTitleTextColor | Sets the text color for list item titles. | .listItemTitleTextColor: UIColor |
listItemTitleFont | Sets the font for list item titles. | .listItemTitleFont: UIFont |
listItemSubTitleTextColor | Sets the text color for list item subtitles. | .listItemSubTitleTextColor: UIColor |
listItemSubTitleFont | Sets the font for list item subtitles. | .listItemSubTitleFont: UIFont |
listItemBackground | Sets the background color for list items. | .listItemBackground: UIColor |
listItemBorderWidth | Sets the border width for list items. | .listItemBorderWidth: CGFloat |
listItemBorderColor | Sets the border color for list items. | .listItemBorderColor: UIColor |
listItemCornerRadius | Sets the corner radius for list items. | .listItemCornerRadius: CometChatCornerStyle |
messageTypeImageTint | Sets the tint color for message type icons. | .messageTypeImageTint: UIColor |
passwordGroupImageTintColor | Sets the tint color for password group icons. | .passwordGroupImageTintColor: UIColor |
passwordGroupImageBackgroundColor | Sets the background color for password group icons. | .passwordGroupImageBackgroundColor: UIColor |
privateGroupImageTintColor | Sets the tint color for private group icons. | .privateGroupImageTintColor: UIColor |
privateGroupImageBackgroundColor | Sets the background color for private group icons. | .privateGroupImageBackgroundColor: UIColor |
Method | Description | Code |
---|---|---|
set(groupMembersRequestBuilder:) | Sets the request builder for fetching group members. | set(groupMembersRequestBuilder: GroupMembersRequest.GroupMembersRequestBuilder) |
set(searchRequestBuilder:) | Sets the request builder for searching group members. | set(searchRequestBuilder: searchRequestBuilder) |
set(searchKeyword:) | Sets the search keyword to filter group members. | set(searchKeyword: "group_name") |
hideError | Hides the error state view. | hideError = true |
hideUserStatus | Hides the online/offline status of users. | hideUserStatus = true |
hideNavigationBar | Hides or shows the navigation bar. | hideNavigationBar = true |
hideLoadingState | Hides the loading state indicator. | hideLoadingState = true |
hideBackIcon | Hides the back button/icon. | hideBackIcon = true |
hideKickMemberOption | Hides the option to kick a member from the group. | hideKickMemberOption = true |
hideBanMemberOption | Hides the option to ban a member from the group. | hideBanMemberOption = true |
hideScopeChangeOption | Hides the option to change a member’s scope (role). | hideScopeChangeOption = true |
hideSearch | Hides the search bar. | hideSearch = true |
Join Group
component does not provide additional functionalities beyond this level of customization.
CustomListItemGroupView
and pass it inside the setListItemView()
method.
CustomLeadingView
as a custom UIView
. Which we will inflate in setLeadingView()
CustomTitleView
as a custom UIView
. Which we will inflate in setTitleView()
.setTailView()
to match the TailView
view of your app.
Custom_Tail_GroupView
and pass it inside the .setTailView()
method.
.setSubtitleView()
method. But keep in mind, by using this you will override the default Subtitle view functionality.
Custom_Subtitle_GroupMember_View
a UIView file.
CometChatGroupMembers
by introducing a tailored feature. By adding a custom option, such as “Delete” with a corresponding trash icon, users can now enjoy a more interactive and user-friendly experience.
CometChatGroupMembers
, enhancing its interface with a personalized menu
for a more user-friendly experience.
CometChatGroupMembers
. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.