ObjectUIFields
User Field
User and owner selector with avatar display
The User Field component provides a user selector for assigning users or owners to records. It displays user avatars and supports both single and multiple user selection.
Basic Usage
Single User Selection
{
"type": "user",
"name": "assigned_to",
"label": "Assigned To"
}Multiple Users
Multiple User Selection
{
"type": "user",
"name": "team_members",
"label": "Team Members",
"multiple": true
}Owner Field
Record Owner (Read-Only)
{
"type": "owner",
"name": "record_owner",
"label": "Owner",
"readonly": true
}Field Schema
interface UserFieldSchema {
type: 'user' | 'owner';
name: string; // Field name/ID
label?: string; // Field label
value?: User | User[]; // Selected user(s)
required?: boolean; // Is field required
readonly?: boolean; // Read-only mode
disabled?: boolean; // Disabled state
className?: string; // Additional CSS classes
// User Options
multiple?: boolean; // Allow multiple users
}
interface User {
id: string; // User ID
name?: string; // Display name
username?: string; // Username
email?: string; // Email address
avatar?: string; // Avatar URL
}User vs Owner
- User Field: Selectable user field for assignments, team members, etc.
- Owner Field: Typically read-only, automatically set to the record creator
Display Features
- Avatar Badges: User avatars with initials if no image
- Color Coding: Consistent colors for user avatars
- Multiple Display: Shows up to 3 users, then "+N more"
- Hover Info: User details on avatar hover
Cell Renderer
In tables/grids, displays avatar with name:
import { UserCellRenderer } from '@object-ui/fields';
// Single user: Avatar + name
// Multiple users: Overlapping avatars + countIntegration
User selection requires integration with your user management system:
// Example user search API
const searchUsers = async (query: string) => {
const response = await fetch(`/api/users/search?q=${query}`);
return response.json();
};
// Example user data structure
const user = {
id: 'user_123',
name: 'John Doe',
username: 'johndoe',
email: 'john@example.com',
avatar: 'https://example.com/avatars/john.jpg'
};Permission Patterns
Common permission configurations:
// Record owner only
{
type: 'owner',
name: 'owner',
label: 'Owner',
readonly: true,
defaultValue: '${current_user.id}'
}
// Assignable user
{
type: 'user',
name: 'assigned_to',
label: 'Assigned To',
required: true
}
// Team members
{
type: 'user',
name: 'collaborators',
label: 'Collaborators',
multiple: true
}Use Cases
- Task Management: Task assignee, reviewer
- CRM: Account owner, opportunity owner
- Support: Ticket assignee, support agent
- Project Management: Project members, task owners
- Approval Workflows: Approvers, reviewers
- Collaboration: Document collaborators, editors
Backend Implementation
Example backend logic for user fields:
// Set owner on create
const createRecord = async (data: any, currentUser: User) => {
return db.create('records', {
...data,
owner: currentUser.id,
created_by: currentUser.id
});
};
// Validate user assignment permissions
const canAssignUser = async (
record: any,
targetUser: User,
currentUser: User
) => {
// Only owner or admin can reassign
if (record.owner === currentUser.id || currentUser.isAdmin) {
return true;
}
return false;
};
// Get user details for display
const getUserDetails = async (userId: string) => {
const user = await db.findOne('users', { id: userId });
return {
id: user.id,
name: user.name,
username: user.username,
email: user.email,
avatar: user.avatar_url
};
};