Card List

Displays a list of objects as HTML cards in the Grooper web client.

Remarks

The Card List control presents a collection of items as visually distinct cards, each representing an object and its key properties. This card-based layout is designed for user-friendly browsing, selection, and interaction with multiple items at once.

UI Components

• Card Grid:
  • Each item is rendered as a card, displaying its most important properties.
  • Cards are arranged in a responsive grid for easy scanning and comparison.
  • Cards may include icons, images, or status indicators depending on the item type.
• Selection and Navigation:
  • Cards can be selected by clicking or using keyboard navigation.
  • Tab and Shift + Tab move focus between cards.
  • Enter activates the selected card or opens details.
  • Selection state is visually indicated.
• Context Menu and Actions:
  • Right-clicking a card may open a context menu with commands such as 'Open', 'Edit', or 'Delete'.
  • Action buttons (e.g., 'Add', 'Remove', 'Clone') may be present above or within cards.
• Attributes and Data:
  • Cards display key attributes, which may be used for filtering, sorting, or bulk actions.
  • Data attributes are attached to each card for integration with client-side scripts.

Usage Guidance

Use Card List when you want users to browse, select, or interact with a set of objects in a visually engaging way. The control is ideal for scenarios such as reviewing documents, managing configuration items, or selecting resources.

• Configure which properties and attributes are shown on each card for optimal clarity.
• Enable selection and context menu options to support workflows such as editing or batch actions.
• Use keyboard shortcuts for rapid navigation and accessibility.

Used By

Query ListChat Page