Data Forms

Data Forms in Kodexa provide a declarative, YAML-based approach to building complex data-driven user interfaces. Instead of writing Vue components by hand, you compose forms from pre-built cards - modular UI components that snap together like building blocks.

What are Data Forms?

Data Forms are composed of:

YAML Configuration: Define your UI structure declaratively
Card Components: Reusable building blocks for different UI patterns
Grid Layout System: Flexible 12-column responsive positioning
Data Integration: Seamless connection to data stores and APIs

Think of Data Forms like LEGO bricks for UIs - each card is a specialized piece that serves one purpose well, and you combine them to build exactly what you need.

Quick Example

Here’s a simple data form with a header and data grid:

name: "Customer Dashboard"
description: "View and manage customer data"
cards:
  - type: label
    id: header
    properties:
      label: "Customer Management"
    layout:
      x: 0
      y: 0
      w: 12
      h: 1

  - type: dataStoreGrid
    id: customerGrid
    properties:
      dataStoreRef: "customers"
    layout:
      x: 0
      y: 1
      w: 12
      h: 10

This creates a full-width header label followed by a data grid displaying customer records.

Core Concepts

YAML Configuration

Learn the YAML structure, layout system, and configuration patterns for building data forms.

Card System

Understand the card architecture, lifecycle, and how to create custom cards.

Card Components

Layout Cards

Organize and structure your forms with container components.

Card Group

Container for visually grouping related cards together.

Card Panel

Panel with title bar and collapsible content.

Tabs

Present child cards in a tabbed interface.

Horizontal Line

Visual separator for organizing content.

Display Cards

Show data in various formats.

Label

Display static text or dynamic values.

Single Taxon

Display a single taxonomy value with formatting.

Data Grid Cards

Display and interact with tabular data.

Grid

Standard data grid with sorting and filtering.

Data Store Grid

Grid connected to a Kodexa data store.

Taxon Grid

Grid specialized for taxonomy data.

Workspace Data Grid

Cross-workspace data grid view.

Transposed Grid

Grid with rows and columns swapped.

Transposed Grid Rollup

Transposed grid with hierarchical rollup calculations.

Tree View Cards

Visualize hierarchical data structures.

Data Objects Tree

Tree view of nested data objects.

Workspace Data Tree

Tree view of workspace data structure.

Editor Cards

Interactive components for data modification.

Data Attribute Editor

Edit individual data attributes with validation.

Exceptions

Display and manage data exceptions and errors.

Taxon Tabs

Tabbed interface for managing taxonomies.

Advanced Topics

Transposed Grid Rollup Movement

Configure drag-and-drop movement of data objects in rollup grids with validation rules.

Grid Layout System

Data Forms use a 12-column grid layout system for positioning cards:

layout:
  x: 0      # Column position (0-11)
  y: 0      # Row position (0+)
  w: 6      # Width in columns (1-12, this is half-width)
  h: 4      # Height in rows (1+)

Common Layout Patterns

Full Width

w: 12  # Spans all columns

Half Width

# Left half
x: 0
w: 6

# Right half
x: 6
w: 6

Three Columns

# Left third
x: 0
w: 4

# Middle third
x: 4
w: 4

# Right third
x: 8
w: 4

Card Structure

Every card has a consistent structure:

- type: cardType        # The card component (e.g., label, grid, tabs)
  id: uniqueId          # Unique identifier within the form
  properties:           # Card-specific configuration
    title: "My Card"
    dataStoreRef: "my-store"
  layout:              # Grid positioning
    x: 0
    y: 0
    w: 12
    h: 4
  children:            # Optional: nested cards for containers
    - type: childCard
      # ...

Common Properties

All cards support these base properties:

Property	Type	Description	Default
`title`	string	Card title (if applicable)	-
`visible`	boolean	Whether the card is visible	`true`
`readonly`	boolean	Whether the card is read-only	`false`

See individual card documentation for card-specific properties.

Best Practices

Start Simple: Begin with a single label or grid card, then add complexity incrementally. Test after each addition.

Use Descriptive IDs: Name cards based on their purpose (e.g., customer-invoices-grid instead of grid1).

Group Related Content: Use container cards like cardPanel or tabs to organize related information.

Consistent Sizing: Keep cards in the same row at the same height for visual alignment.

Introduction

Deployment

Notebooks

Cookie Cutters

Formulas

​What are Data Forms?

​Quick Example

​Core Concepts

YAML Configuration

Card System

​Card Components

​Layout Cards

Card Group

Card Panel

Tabs

Horizontal Line

​Display Cards

Label

Single Taxon

​Data Grid Cards

Grid

Data Store Grid

Taxon Grid

Workspace Data Grid

Transposed Grid

Transposed Grid Rollup

​Tree View Cards

Data Objects Tree

Workspace Data Tree

​Editor Cards

Data Attribute Editor

Exceptions

Taxon Tabs

​Advanced Topics

Transposed Grid Rollup Movement

​Grid Layout System

​Common Layout Patterns

​Card Structure

​Common Properties

​Best Practices

​Next Steps

Learn YAML Configuration

Explore Card Components

What are Data Forms?

Quick Example

Core Concepts

Card Components

Layout Cards

Display Cards

Data Grid Cards

Tree View Cards

Editor Cards

Advanced Topics

Grid Layout System

Common Layout Patterns

Card Structure

Common Properties

Best Practices

Next Steps