Portal Community

When to Use

Live Mockup — Single Selection

Select the correct customer account

The invoice references "Acme" — which account should this be applied to?

Acme Supplies Ltd

ID: cust_001 · Dublin, IE

Acme Technologies Inc

ID: cust_008 · New York, US

Acme Global Ltd

ID: cust_017 · London, UK

Selection Modes

ModeValueDescription
Single"single"User must select exactly one option
Multiple"multiple"User can select one or more options; minSelections and maxSelections apply

Request Payload Schema

interface PickerPayload {
  /** Instruction shown above the option list */
  title: string;

  /** Optional context / explanation */
  description?: string;

  /** The list of options to display */
  options: PickerOption[];

  /** 'single' | 'multiple' (default: 'single') */
  selectionMode?: 'single' | 'multiple';

  /** Minimum selections required (multiple mode only; default: 1) */
  minSelections?: number;

  /** Maximum selections allowed (multiple mode only; default: options.length) */
  maxSelections?: number;
}

interface PickerOption {
  id:           string;   // returned in selectedIds on response
  label:        string;   // primary display text
  description?: string;   // secondary display text
  metadata?:    Record<string, any>;   // arbitrary display data (not returned in response)
}

Full Request Example

const response = await sendInteraction({
  type: 'picker',
  targetUserId: 'usr_billing_team',
  title: 'Select the correct customer account',
  payload: {
    title: 'Select the correct customer account',
    description: 'The invoice references "Acme" — which account should this be applied to?',
    selectionMode: 'single',
    options: [
      { id: 'cust_001', label: 'Acme Supplies Ltd',     description: 'Dublin, IE' },
      { id: 'cust_008', label: 'Acme Technologies Inc', description: 'New York, US' },
      { id: 'cust_017', label: 'Acme Global Ltd',       description: 'London, UK' }
    ]
  },
  timeoutMs: 3_600_000,   // 1 hour
  priority: 'high'
});

if (response.outcome === 'selected') {
  const [customerId] = response.data.selectedIds;
  await invoiceService.assignToCustomer(invoiceId, customerId);
}

Multiple Selection Example

const response = await sendInteraction({
  type: 'picker',
  targetUserId: 'usr_hr_manager',
  title: 'Assign this issue to support teams',
  payload: {
    title: 'Which teams should be notified about this security incident?',
    selectionMode: 'multiple',
    minSelections: 1,
    maxSelections: 3,
    options: [
      { id: 'team_security', label: 'Security',      description: 'Primary incident team' },
      { id: 'team_legal',    label: 'Legal',         description: 'For regulatory exposure' },
      { id: 'team_comms',    label: 'Communications',description: 'Customer communications' },
      { id: 'team_it',       label: 'IT Operations', description: 'Infrastructure team' }
    ]
  },
  timeoutMs: 1_800_000
});

const teamsToNotify = response.data.selectedIds;   // e.g. ['team_security', 'team_legal']
await notifyTeams(teamsToNotify, incidentId);

Response Schema

interface PickerResponse {
  interactionId: string;
  respondedBy:   string;
  outcome:       'selected';
  data: {
    /** IDs of selected options (always an array, even for single selection) */
    selectedIds: string[];
  };
  timestamp: string;
}

Validation Rules

FieldRule
payload.optionsRequired; min 1, max 100 options
payload.options[].idMust be unique within the options array
response.outcomeMust be 'selected'
response.data.selectedIdsMust be non-empty; all IDs must be in the original options list
Selection countMust satisfy minSelections ≤ count ≤ maxSelections