UIKit Component: Community membership components are built on top of the social.plus SDK, providing ready-to-use member management UI with full data management handled automatically.
Feature Overview
Community Membership UIKit components provide comprehensive tools for managing community members, handling join requests, processing invitations, and tracking membership analytics. These components enable community administrators to effectively manage their member base through intuitive interfaces that handle invitations, approval workflows, member roles, and membership insights—all built on top of the social.plus SDK.Key Features
Member Administration
Comprehensive member management
- Member list display and management
- Role assignment and permission control
- Member profile access and interactions
- Member removal and ban functionality
Invitation System
Member invitation workflows
- Send invitations to new members
- Track invitation status and responses
- Manage pending invitation lists
- Configure invitation permissions and limits
Join Request Processing
Join request handling and approval
- Review and approve join requests
- Decline inappropriate requests
- Automated approval workflow options
- Join request notification management
Membership Analytics
Membership insights and tracking
- Member growth and activity metrics
- Invitation success rate tracking
- Join request approval statistics
- Member engagement analytics
Implementation Guide
- Membership Administration
- Invitation Management
- Join Request Management
Core member management and administrationMember Administration components provide comprehensive tools for managing community members, including member lists, role assignments, and member profile management. These components enable administrators to effectively oversee their community membership.
Member Management Page
The member management page provides a comprehensive view of all community members with tools for administration and role management.Features
| Feature | Description |
|---|---|
| Member List Display | View all community members with profiles and roles |
| Role Assignment | Assign and modify member roles and permissions |
| Member Search | Search and filter members by various criteria |
| Member Actions | Remove, ban, or promote members |
Required Properties
| Property | Type | Description |
|---|---|---|
community | AmityCommunity | The community object for member management |
currentUser | AmityUser | The current user for permission validation |
Customization Options
| Config ID | Type | Description |
|---|---|---|
member_management_page/*/* | Page | Customize overall page theme and layout |
member_management_page/*/member_list_item | Component | Member list item styling |
member_management_page/*/role_badge | Element | Member role badge appearance |
member_management_page/*/action_buttons | Element | Member action button styling |
member_management_page/*/search_bar | Element | Member search interface styling |
member_management_page/*/member_avatar | Element | Member profile picture display |
Code Examples
let memberPage = AmityMemberManagementPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: memberPage)
navigationController?.pushViewController(viewController, animated: true)
@Composable
fun composeMemberManagementPage(community: AmityCommunity) {
AmityMemberManagementPage(
community = community,
onMemberSelected = { member ->
// Handle member profile navigation
},
onMemberAction = { action, member ->
// Handle member actions (promote, remove, etc.)
}
)
}
import React from 'react';
import { AmityUiKitProvider, AmityMemberManagementPage } from '@amityco/ui-kit';
const MemberManagement = ({ community }) => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
>
<AmityMemberManagementPage
community={community}
onMemberAction={(action, member) => {
// Handle member actions
}}
/>
</AmityUiKitProvider>
);
};
Widget memberManagementPage(AmityCommunity community) {
return AmityCommunityMembershipPage(
community: community,
);
}
Navigation Behavior
// Navigate to member profile
func navigateToMemberProfile(member: AmityUser) {
let profilePage = AmityUserProfilePage(user: member)
let viewController = AmitySwiftUIHostingController(rootView: profilePage)
navigationController?.pushViewController(viewController, animated: true)
}
// Handle member actions
func handleMemberAction(action: MemberAction, member: AmityUser) {
switch action {
case .promote:
// Promote member to moderator
break
case .remove:
// Remove member from community
break
case .ban:
// Ban member from community
break
}
}
// Navigate to member profile
fun navigateToMemberProfile(member: AmityUser) {
val profilePage = AmityUserProfilePage(user = member)
// Navigate to profile page
}
// Handle member actions
fun handleMemberAction(action: MemberAction, member: AmityUser) {
when (action) {
MemberAction.PROMOTE -> {
// Promote member to moderator
}
MemberAction.REMOVE -> {
// Remove member from community
}
MemberAction.BAN -> {
// Ban member from community
}
}
}
// Handle member navigation
const handleMemberNavigation = (member) => {
// Navigate to member profile
navigate(`/profile/${member.userId}`);
};
// Handle member actions
const handleMemberAction = (action, member) => {
switch (action) {
case 'promote':
// Promote member to moderator
break;
case 'remove':
// Remove member from community
break;
case 'ban':
// Ban member from community
break;
}
};
// Navigate to member profile
void navigateToMemberProfile(AmityUser member) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AmityUserProfilePage(userId: member.userId!),
),
);
}
// Handle member actions
void handleMemberAction(MemberAction action, AmityUser member) {
switch (action) {
case MemberAction.promote:
// Promote member to moderator
break;
case MemberAction.remove:
// Remove member from community
break;
case MemberAction.ban:
// Ban member from community
break;
}
}
Member invitation workflows and invitation trackingInvitation Management components provide tools for inviting new members to communities, tracking invitation status, and managing invitation permissions.
Community Invitation Page
The community invitation page enables administrators to send invitations to new members and track invitation responses.Features
| Feature | Description |
|---|---|
| Send Invitations | Invite users by username, email, or user ID |
| Invitation Status | Track sent, pending, and accepted invitations |
| Bulk Invitations | Send multiple invitations simultaneously |
| Invitation Limits | Respect community invitation limits and quotas |
Required Properties
| Property | Type | Description |
|---|---|---|
community | AmityCommunity | The community object for invitation management |
invitationLimit | Int | Maximum number of invitations allowed |
Customization Options
| Config ID | Type | Description |
|---|---|---|
invitation_page/*/* | Page | Invitation page theme and layout |
invitation_page/*/send_button | Element | Invitation send button styling |
invitation_page/*/user_search | Component | User search interface customization |
invitation_page/*/invitation_status | Component | Invitation status display styling |
invitation_page/*/bulk_invite_section | Component | Bulk invitation interface styling |
invitation_page/*/invitation_limit_display | Element | Invitation quota display styling |
Code Examples
let invitationPage = AmityCommunityInvitationPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: invitationPage)
navigationController?.pushViewController(viewController, animated: true)
@Composable
fun composeInvitationPage(community: AmityCommunity) {
AmityCommunityInvitationPage(
community = community,
onInvitationSent = { users ->
// Handle successful invitations
},
onInvitationError = { error ->
// Handle invitation errors
}
)
}
import React from 'react';
import { AmityUiKitProvider, AmityCommunityInvitationPage } from '@amityco/ui-kit';
const InvitationManagement = ({ community }) => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
>
<AmityCommunityInvitationPage
community={community}
onInvitationSent={(users) => {
// Handle successful invitations
}}
onInvitationError={(error) => {
// Handle invitation errors
}}
/>
</AmityUiKitProvider>
);
};
// The Flutter UIKit exposes member addition through AmityCommunityAddMemberPage.
Widget addMemberPage(List<AmityUser> selectedUsers) {
return AmityCommunityAddMemberPage(
users: selectedUsers,
onAddedAction: (users) {
// Handle the selected users to add to the community
},
);
}
Navigation Behavior
// Handle invitation success
func handleInvitationSuccess(users: [AmityUser]) {
// Show success message
let alert = UIAlertController(
title: "Invitations Sent",
message: "Successfully invited \(users.count) users",
preferredStyle: .alert
)
alert.addAction(UIAlertAction(title: "OK", style: .default))
present(alert, animated: true)
}
// Navigate to invitation status
func showInvitationStatus() {
let statusPage = AmityInvitationStatusPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: statusPage)
navigationController?.pushViewController(viewController, animated: true)
}
// Handle invitation success
fun handleInvitationSuccess(users: List<AmityUser>) {
// Show success message
Toast.makeText(
context,
"Successfully invited ${users.size} users",
Toast.LENGTH_SHORT
).show()
}
// Navigate to invitation status
fun showInvitationStatus() {
val statusPage = AmityInvitationStatusPage(community = community)
// Navigate to status page
}
// Handle invitation workflows
const handleInvitationWorkflow = {
onSuccess: (users) => {
// Show success notification
showNotification(`Successfully invited ${users.length} users`);
},
onError: (error) => {
// Handle invitation error
showError(`Failed to send invitations: ${error.message}`);
},
showStatus: () => {
// Navigate to invitation status page
navigate('/community/invitations/status');
}
};
// Handle invitation success
void handleInvitationSuccess(List<AmityUser> users) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Successfully invited ${users.length} users'),
),
);
}
// Navigate to the community membership page to review members
void showMembership(AmityCommunity community) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AmityCommunityMembershipPage(community: community),
),
);
}
Join request handling, approval, and rejection workflowsJoin Request Management components provide tools for reviewing and processing requests from users who want to join private or restricted communities.
Pending Request Page (Join Requests)
The pending request page handles join requests from users wanting to join the community. This is part of a larger component that also handles pending posts (documented in Community Management).The Pending Request Page contains both Join Requests (membership-related) and Pending Posts (moderation-related). This section focuses on the join request functionality. For pending post moderation, see Community Management.
Features
| Feature | Description |
|---|---|
| Join Request List | View all pending requests to join the community |
| Request Approval | Approve legitimate join requests |
| Request Rejection | Decline inappropriate or spam requests |
| User Profile Access | View requesting user profiles for review |
Required Properties
| Property | Type | Description |
|---|---|---|
community | AmityCommunity | The community object for join request management |
moderatorPermissions | Boolean | Whether current user has moderator permissions |
Customization Options
| Config ID | Type | Description |
|---|---|---|
pending_request_page/*/* | Page | Customize overall page theme and layout |
pending_request_page/*/back_button | Element | Customize back button appearance |
pending_request_page/*/title | Element | Customize page title text |
pending_request_page/*/join_requests_section | Component | Customize join requests section styling |
pending_request_page/*/request_list | Component | Join request list display styling |
Code Examples
// Focus on join request functionality of pending request page
let page = AmityPendingRequestPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)
@Composable
fun composeJoinRequestManagement(community: AmityCommunity) {
AmityPendingRequestPage(
community = community,
onJoinRequestAction = { action, request ->
// Handle join request approval/rejection
when (action) {
is JoinRequestAction.Approve -> {
// Approve join request
}
is JoinRequestAction.Reject -> {
// Reject join request
}
}
}
)
}
import React from 'react';
import { AmityUiKitProvider, AmityPendingRequestPage } from '@amityco/ui-kit';
const JoinRequestManagement = ({ community }) => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
>
<AmityPendingRequestPage
community={community}
onJoinRequestAction={(action, request) => {
// Handle join request actions
if (action === 'approve') {
// Approve join request
} else if (action === 'reject') {
// Reject join request
}
}}
/>
</AmityUiKitProvider>
);
};
Widget joinRequestManagement(AmityCommunity community) {
return AmityPendingRequestPage(
community: community,
);
}
Join Request Content Component
The join request content component displays individual join requests with user information and approval controls.Features
| Feature | Description |
|---|---|
| User Information | Display requesting user profile and details |
| Request Actions | Approve or decline join requests |
| Request History | View previous requests from the same user |
| Bulk Actions | Process multiple requests simultaneously |
Customization Options
| Config ID | Type | Description |
|---|---|---|
pending_request_page/join_request_content/* | Component | Customize component theme |
pending_request_page/join_request_content/join_accept_button | Element | Customize accept button text |
pending_request_page/join_request_content/join_decline_button | Element | Customize decline button text |
Code Examples
let component = AmityJoinRequestContentComponent(community: community)
let viewController = AmitySwiftUIHostingController(rootView: component)
@Composable
fun composeJoinRequestComponent(joinRequest: AmityJoinRequest) {
AmityJoinRequestContentComponent(
joinRequest = joinRequest,
onAcceptAction = {
// Handle accept action
},
onDeclineAction = {
// Handle decline action
}
)
}
import React from 'react';
import { AmityUiKitProvider, AmityJoinRequestContentComponent } from '@amityco/ui-kit';
const JoinRequestComponent = () => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
configs={{}} // put your customized config json object
>
<AmityJoinRequestContentComponent
pageId={'*'} // optional, default is '*'
joinRequests={null} // join requests array, can be null
isLoading={false} // loading state, default is false
/>
</AmityUiKitProvider>
);
};
// The Flutter UIKit does not expose a standalone join request content widget.
// Join request content is rendered inside AmityPendingRequestPage.
Widget joinRequestComponent(AmityCommunity community) {
return AmityPendingRequestPage(
community: community,
);
}
Navigation Behavior
// Handle join request approval
func approveJoinRequest(request: AmityJoinRequest) {
// Approve the request
request.approve { [weak self] result in
DispatchQueue.main.async {
switch result {
case .success:
// Show success message
self?.showSuccessAlert("Join request approved")
case .failure(let error):
// Handle error
self?.showErrorAlert("Failed to approve request: \(error.localizedDescription)")
}
}
}
}
// Navigate to user profile
func showRequestingUserProfile(user: AmityUser) {
let profilePage = AmityUserProfilePage(user: user)
let viewController = AmitySwiftUIHostingController(rootView: profilePage)
navigationController?.pushViewController(viewController, animated: true)
}
// Handle join request actions
fun handleJoinRequestAction(action: JoinRequestAction, request: AmityJoinRequest) {
when (action) {
is JoinRequestAction.Approve -> {
// Approve join request
request.approve()
.subscribe(
{
// Show success message
showSuccessToast("Join request approved")
},
{ error ->
// Handle error
showErrorToast("Failed to approve request: ${error.message}")
}
)
}
is JoinRequestAction.Reject -> {
// Reject join request
request.reject()
}
}
}
// Navigate to user profile
fun showRequestingUserProfile(user: AmityUser) {
val profilePage = AmityUserProfilePage(user = user)
// Navigate to profile page
}
// Handle join request workflows
const handleJoinRequestWorkflow = {
approve: async (request) => {
try {
await request.approve();
showNotification('Join request approved successfully');
// Refresh the request list
refreshRequests();
} catch (error) {
showError(`Failed to approve request: ${error.message}`);
}
},
reject: async (request) => {
try {
await request.reject();
showNotification('Join request rejected');
refreshRequests();
} catch (error) {
showError(`Failed to reject request: ${error.message}`);
}
},
viewProfile: (user) => {
// Navigate to user profile
navigate(`/profile/${user.userId}`);
}
};
// Handle join request approval
Future<void> approveJoinRequest(AmityJoinRequest request) async {
try {
await request.approve();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Join request approved')),
);
// Refresh the request list
refreshRequests();
} catch (error) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Failed to approve request: $error')),
);
}
}
// Navigate to user profile
void showRequestingUserProfile(AmityUser user) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AmityUserProfilePage(userId: user.userId!),
),
);
}
Related Components
Communities
Core Community Features
Community setup, profiles, and content feeds
Community Management
Settings & Administration
Community settings, permissions, and moderation tools
Users & Profiles
User Management
User profiles and social interactions
Content Moderation
Moderation Tools
Content and user moderation features
Social Feeds
Feed Components
Community content display and interaction
Posts & Media
Post Components
Community post creation and management
Implementation Strategy: Start with the Member Management Page as your central hub for community administration, then implement invitation workflows to grow your community organically. Use the Pending Request Page to handle join requests efficiently, and configure approval processes based on your community’s privacy and moderation requirements. Consider implementing automated invitation tracking and join request notifications to streamline membership management workflows. Focus on providing clear feedback for all membership actions and ensure smooth navigation between member profiles, invitation status, and approval interfaces.