Skip to main content
A comprehensive panel for displaying and editing data elements (taxons) within a form. This is one of the most feature-rich card types, supporting tabs for multiple objects, exception handling, drag-and-drop movement between data elements, custom navigation, and dynamic background colors.

​
Type

type: "cardPanel"

​
Properties

​
Required Properties

PropertyTypeDescription
groupTaxongroupTaxonThe taxon group to display and edit

​
Optional Properties

PropertyTypeDescriptionDefault
showHeaderbooleanWhether to display the header sectiontrue
titlestringHeader title to display-
subtitlestringSubtitle to display below the title-
useTabsbooleanUse tabs for display of multiple objectsfalse
hideAddbooleanHide the add buttonfalse
hideExceptionsbooleanHide exceptions displayfalse
showChildExceptionsbooleanShow child exceptionsfalse
exceptionStickybooleanMake exceptions stick to topfalse
isJumpOnbooleanEnable jumping to this sectionfalse
overrideExceptionbooleanAllow exception overridefalse
isEmptyAutoAddbooleanAutomatically add new item when emptyfalse
backgroundColorstringBackground color for the panel#ffffff

​
Advanced Properties

​
taxonMovement (object)

Configure data object movement between different taxon groups with drag-and-drop functionality.
Sub-PropertyTypeDescription
enabledbooleanEnable taxon movement functionality
ruleslistDefine movement rules between taxons
Movement Rule Properties:
PropertyTypeDescription
sourceTaxongroupTaxonTaxon that can be moved
allowedDestinationslistList of destinations with optional attribute mappings
buttonLabelstringCustom label for move button (default: “Move to…“)
requireConfirmationbooleanShow confirmation dialog before moving
confirmationMessagestringCustom confirmation message
Destination Configuration:
PropertyTypeDescription
destinationgroupTaxonTarget data element group
attributeMappingslistMap source attributes to destination attributes
Attribute Mapping:
PropertyTypeDescription
sourcetaxonName of the source attribute
destinationtaxonName of the destination attribute

​
taxonNavigation (object)

Configure in-panel navigation buttons based on a child group attribute value.
Sub-PropertyTypeDescription
childGroupTaxonPathgroupTaxonThe child data element group to scan for navigation attributes
taxonPathtaxonAttribute within the child group used to derive navigation entries
colorSchemeDesignlistList of value-to-color mappings for navigation buttons
Color Scheme Design:
PropertyTypeDescription
valuestringAttribute value to match (case-insensitive)
colorstringButton background color (hex or CSS color)

​
backgroundColorMapping (object)

Map a specific taxon value to a row background color.
Sub-PropertyTypeDescription
taxonPathtaxonAttribute within the row’s data element to match against
mappingslistValue to color pairs
defaultColorstringFallback color when no mapping matches (optional)
Mapping Properties:
PropertyTypeDescription
valuestringExact value to match (case-insensitive)
colorstringBackground color (hex or CSS color)

​
Layout

  • Default Width: 12 columns
  • Default Height: 4 rows
  • Supports Children: Yes

​
Configuration Examples

​
Basic Configuration

- type: cardPanel
  id: customerPanel
  properties:
    showHeader: true
    title: "CUSTOMER INFORMATION"
    subtitle: "Edit customer details"
    groupTaxon: "customer"
  layout:
    x: 0
    y: 0
    w: 12
    h: 6
  children:
    - type: dataAttributeEditor
      id: customerName
      properties:
        taxon: "customer/name"

​
With Tabs for Multiple Objects

- type: cardPanel
  id: invoicesPanel
  properties:
    title: "Invoices"
    groupTaxon: "invoice"
    useTabs: true
    hideExceptions: false
  layout:
    x: 0
    y: 0
    w: 12
    h: 10

​
With Data Object Movement

- type: cardPanel
  id: itemsPanel
  properties:
    groupTaxon: "lineItem"
    taxonMovement:
      enabled: true
      rules:
        - sourceTaxon: "lineItem"
          allowedDestinations:
            - destination: "rejectedItem"
              attributeMappings:
                - source: "lineItem/itemName"
                  destination: "rejectedItem/itemName"
                - source: "lineItem/amount"
                  destination: "rejectedItem/amount"
          buttonLabel: "Reject Item"
          requireConfirmation: true
          confirmationMessage: "Are you sure you want to reject this item?"

​
With Background Color Mapping

- type: cardPanel
  id: statusPanel
  properties:
    groupTaxon: "task"
    backgroundColorMapping:
      taxonPath: "task/status"
      mappings:
        - value: "completed"
          color: "#d4edda"
        - value: "in-progress"
          color: "#fff3cd"
        - value: "pending"
          color: "#f8d7da"
      defaultColor: "#ffffff"

​
With Taxon Navigation

- type: cardPanel
  id: documentPanel
  properties:
    groupTaxon: "document"
    taxonNavigation:
      childGroupTaxonPath: "document/pages"
      taxonPath: "pages/pageType"
      colorSchemeDesign:
        - value: "invoice"
          color: "#007bff"
        - value: "receipt"
          color: "#28a745"

​
Advanced Usage

​
Exception Handling

The panel includes sophisticated exception display capabilities:
  • Inline exceptions: Show exceptions within the form
  • Floating exceptions: Draggable floating panel for exception display
  • Sticky exceptions: Pin exception display to viewport
  • Child exceptions: Include exceptions from child data objects

​
Performance Optimization

The component uses several performance optimizations:
  • Debounced data objects: Prevents excessive re-renders during rapid updates
  • Lazy rendering: Uses intersection observer to only render when visible
  • Computed caching: Efficient lookup of frequently accessed data

​
Tab vs. List Display

When useTabs is true, multiple data objects are presented as tabs. Otherwise, they’re displayed as a list or single item view.

​
Formula Debugging

The component supports opening a formula debugger for any data attribute, allowing developers to test and debug formula expressions.

​
Notes

  • The card panel is highly customizable and can serve many different use cases
  • Background color mapping allows visual differentiation of data based on attribute values
  • Taxon movement enables workflow-based data manipulation (e.g., moving items between different states)
  • Navigation based on child attributes creates dynamic menu systems within the panel
  • The component integrates with keyboard shortcuts for quick navigation
  • Floating exception panels are draggable and resizable for flexible workspace layout
  • Auto-add feature (isEmptyAutoAdd) is useful for ensuring at least one data object exists
  • The component respects taxonomy permissions and user roles for edit capabilities