Skip to main content
A card for displaying and editing a single data attribute (taxon). The component automatically scopes to the appropriate data objects and provides inline editing capabilities with customizable input types including text, boolean, checkboxes, and masked date inputs.

​
Type

type: "dataAttributeEditor"

​
Properties

​
Required Properties

PropertyTypeDescription
taxontaxonThe data element (attribute) to display and edit

​
Optional Properties

PropertyTypeDescriptionDefault
attributeLabelstringCustom label to display (overrides taxon label)-

​
editorOptions (object)

Advanced configuration for the attribute editor behavior and appearance.
Sub-PropertyTypeDescriptionDefault
hideAttributeMenubooleanHide the attribute menufalse
isCheckboxbooleanEnable checkbox input typefalse
onCheckValuestringValue when checkbox is checked”None”
isMaskedTextbooleanEnable masked text input for date fieldsfalse
maskedTextstringInput mask pattern (e.g., 00/00/0000 for 4-digit year)00/00/0000
maskDateFormatstringDate format for masked input (e.g., MM/dd/yyyy)MM/dd/yyyy
sourceDateFormatstringFormat for storing dates (e.g., yyyy-MM-dd)yyyy-MM-dd
showCalendarPopupbooleanShow a calendar popup for date selectionfalse

​
Layout

  • Default Width: 3 columns
  • Default Height: 2 rows
  • Supports Children: No

​
Configuration Examples

​
Basic Text Attribute

- type: dataAttributeEditor
  id: customerName
  properties:
    taxon: "customer/name"
    attributeLabel: "Customer Name"
  layout:
    x: 0
    y: 0
    w: 4
    h: 2

​
Boolean Attribute with Checkbox

- type: dataAttributeEditor
  id: isActive
  properties:
    taxon: "customer/active"
    editorOptions:
      isCheckbox: true
      onCheckValue: "Yes"
  layout:
    x: 0
    y: 0
    w: 3
    h: 2

​
Date Attribute with Masked Input

- type: dataAttributeEditor
  id: invoiceDate
  properties:
    taxon: "invoice/date"
    attributeLabel: "Invoice Date"
    editorOptions:
      isMaskedText: true
      maskedText: "00/00/0000"
      maskDateFormat: "MM/dd/yyyy"
      sourceDateFormat: "yyyy-MM-dd"
      showCalendarPopup: true
  layout:
    x: 0
    y: 0
    w: 4
    h: 2

​
Hide Attribute Menu

- type: dataAttributeEditor
  id: readOnlyField
  properties:
    taxon: "document/type"
    editorOptions:
      hideAttributeMenu: true
  layout:
    x: 0
    y: 0
    w: 3
    h: 2

​
Advanced Usage

​
Data Object Scoping

The component automatically scopes to the correct data objects based on:
  1. The taxon’s parent path
  2. The parent data object (if provided in the card panel context)
This ensures the attribute editor only shows and edits the relevant instances.

​
Fresh Parent References

The component handles stale reference issues by always fetching the fresh parent data object from the workspace store, preventing issues with outdated data object states.

​
Label Display

For non-boolean attributes, a label is displayed above the editor showing either:
  1. The custom attributeLabel property if provided
  2. The taxon’s label from metadata
  3. The taxon’s name as a fallback
Boolean attributes don’t display a separate label as they typically use checkboxes with inline labels.

​
Multiple Instances

If multiple data objects match the scoping criteria, the component renders an editor for each instance. This is useful for editing arrays of values.

​
Event Emission

The component emits events for:
  • deleteDataObject: When a data object is deleted from the editor
  • addDataObject: When a new data object is added
These events bubble up to parent components for coordination.

​
Complete Form Example

- type: cardPanel
  id: customerForm
  properties:
    groupTaxon: "customer"
    title: "Customer Information"
  layout:
    x: 0
    y: 0
    w: 12
    h: 8
  children:
    - type: dataAttributeEditor
      id: customerName
      properties:
        taxon: "customer/name"
        attributeLabel: "Full Name"
      layout:
        x: 0
        y: 0
        w: 6
        h: 2

    - type: dataAttributeEditor
      id: customerEmail
      properties:
        taxon: "customer/email"
        attributeLabel: "Email Address"
      layout:
        x: 6
        y: 0
        w: 6
        h: 2

    - type: dataAttributeEditor
      id: customerActive
      properties:
        taxon: "customer/active"
        editorOptions:
          isCheckbox: true
          onCheckValue: "Active"
      layout:
        x: 0
        y: 2
        w: 3
        h: 2

​
Notes

  • The component requires the taxon to exist in the project’s taxonomy metadata
  • If the taxon is not found, the component renders nothing
  • Boolean taxon types automatically hide the label to avoid redundancy
  • Masked date inputs support both 2-digit and 4-digit year formats
  • The calendar popup requires showCalendarPopup to be enabled
  • Attribute menu provides additional actions like adding/deleting values
  • The editor integrates with the data object editing system for undo/redo
  • Changes are automatically synced to the workspace store