Field Types¶

Türkçe

Bu sayfa ICOSYS CRUD Engine'de desteklenen tüm alan tiplerini, dekoratörleri ve konfigürasyon seçeneklerini listeler. Her alan tipi farklı bir React bileşeni render eder.

Overview¶

Fields in ICOSYS are rendered by the DynamicField component, which selects the appropriate input or display component based on the field's type property and current mode (VIEW/EDIT/CREATE).

HandlerConfig.form.fields["myField"]
    │
    ├── type: "SELECT"
    ├── mode: "EDIT"     → SearchableSelect component
    ├── mode: "VIEW"     → DecoratedCell (read-only display)
    └── decorator: "BADGE"  → Colored badge pill

Supported Field Types¶

Tier 1 — Core¶

Type	Edit Component	View Display	Description
`TEXT`	`<input type="text">`	Plain text	Single-line text input
`TEXTAREA`	`<textarea>`	Multi-line text	Multi-line text area
`NUMBER`	`<input type="number">`	Formatted number	Numeric input
`CURRENCY`	`CurrencyInput`	Localized amount	Currency with thousand separators
`DATE`	`<input type="date">`	Formatted date	Date picker (YYYY-MM-DD)
`LOCAL_DATE`	`<input type="date">`	Formatted date	Java LocalDate format
`SELECT`	`SearchableSelect`	Selected label	Dropdown with search
`CHECKBOX`	`<input type="checkbox">`	Boolean icon	Simple checkbox
`SWITCH`	Toggle switch	Boolean icon	On/off toggle

Tier 2 — Common¶

Type	Edit Component	View Display	Description
`DATETIME`	`<input type="datetime-local">`	Date + time	Date and time picker
`LOCAL_DATETIME`	`<input type="datetime-local">`	Date + time	Java LocalDateTime
`EMAIL`	`<input type="email">`	Email link	Email with validation
`PASSWORD`	Password input + generate	Masked	Password with show/hide toggle
`MULTISELECT`	Multi-select dropdown	Chip list	Select multiple values
`RADIO`	Radio button group	Selected label	Single choice from options
`AUTOCOMPLETE`	Autocomplete input	Plain text	Type-ahead search

Tier 3 — Complex¶

Type	Edit Component	View Display	Description
`LOOKUP_HYBRID`	Autocomplete + dialog button	Display field text	Reference field with search and browse
`LOOKUP_DIALOG`	Display + browse button	Display field text	Reference field with browse dialog only
`TREE_SELECT`	`TreeSelectField`	Path text	Hierarchical tree selection
`FILE_UPLOAD`	`FileUploadField`	File info	File upload with drag-and-drop
`FILE_PREVIEW`	Read-only	File preview	File display (no editing)
`CHIPS`	`ChipsField`	Tag list	Tag/chip input
`EDITOR`	Rich text editor	HTML content	WYSIWYG editor
`SLIDER`	Range slider	Number	Value selection with slider
`RATING`	Star rating	Star display	Rating input
`MASKED`	Masked input	Formatted text	Input with format mask
`COLOR`	Color picker	Color swatch	Color selection

Display-Only Types¶

Type	Renders	Description
`OUTPUT_TEXT`	Static text	Read-only text (all modes)
`HEADING_3`	`<h3>` heading	Section heading within form
`SECTION_HEADER`	Styled header	Visual section separator
`DIVIDER`	`<hr>`	Horizontal divider line
`SPACER`	Empty space	Layout spacer
`INFO_PANEL`	Info box	Information panel with icon
`MESSAGE_INFO`	Blue info box	Informational message
`MESSAGE_WARN`	Yellow warning box	Warning message
`MESSAGE_ERROR`	Red error box	Error message
`MESSAGE_SUCCESS`	Green success box	Success message

Field Configuration¶

Complete FieldConfig Interface¶

interface FieldConfig {
    // Identity
    name: string                       // Field key in entity DTO
    type: FieldType                    // Render type (see tables above)
    label: string                      // i18n key for label

    // Layout
    colClass?: string                  // Grid width: "col-6", "col-12", etc.
    placeholder?: string               // Input placeholder text
    tooltip?: string                   // Hover tooltip
    helperText?: string                // Text below field

    // Validation
    required?: boolean                 // Required field
    maxLength?: number                 // Max characters (TEXT)
    min?: number                       // Min value (NUMBER)
    max?: number                       // Max value (NUMBER)

    // Behavior
    readOnly?: boolean                 // Prevents editing even in EDIT mode
    defaultValue?: unknown             // Default value for CREATE
    searchable?: boolean               // Searchable in SELECT

    // Visibility per mode
    visibility?: {
        list?: boolean                 // Show in table
        view?: boolean                 // Show in VIEW form
        edit?: boolean                 // Show in EDIT form
        create?: boolean               // Show in CREATE form
    }

    // Display formatting
    decorator?: FieldDecorator         // Format transformer
    decoratorExpression?: string       // Dynamic decorator parameter

    // SELECT / MULTISELECT / RADIO
    options?: SelectOption[]           // Static options
    optionsSource?: {                  // Dynamic options
        source: string                 // Data source key
        method: string                 // Parameter field
    }
    dependsOn?: string                 // Cascading parent field

    // LOOKUP fields
    lookup?: LookupConfig
    displayField?: string              // Sub-field for nested objects

    // TREE_SELECT
    treeOptions?: TreeOption[]

    // FILE_UPLOAD
    fileUpload?: FileUploadConfig

    // NUMBER / CURRENCY
    numberFormat?: NumberFormatConfig
    step?: number                      // Slider step

    // CHIPS
    allowCustom?: boolean              // Allow custom chip values

    // MASKED
    mask?: string                      // Input mask pattern
}

Decorators (Display Formatting)¶

Decorators transform raw values into formatted display components in VIEW mode and list tables.

Value Formatters¶

Decorator	Input Example	Output
`BOOLEAN_ICON`	`true` / `false`	✓ (green) / ✗ (red)
`BOOLEAN_TEXT`	`true` / `false`	"Yes" / "No"
`DATE`	`"2025-02-15"`	`02/15/2025`
`DATE_TIME`	`"2025-02-15T14:30:00"`	`02/15/2025 14:30`
`LOCAL_DATE`	`"2025-02-15"`	Locale-formatted date
`INSTANT`	`"2025-02-15T14:30:00Z"`	Formatted instant
`INSTANT_TIME`	`"2025-02-15T14:30:00Z"`	Instant with time
`DATE_RELATIVE`	`"2025-02-13"`	"2 days ago"
`CURRENCY`	`1234.5`	`1,234.50 TRY`
`CURRENCY_PLAIN`	`1234.5`	`1,234.50` (no symbol)
`PERCENTAGE`	`0.5`	`50%`
`DURATION_SECONDS`	`9000`	`2h 30m`
`FILE_SIZE`	`2621440`	`2.5 MB`
`EMAIL_LINK`	`"a@b.com"`	Clickable `mailto:` link
`PHONE_LINK`	`"+901234"`	Clickable `tel:` link
`URL_LINK`	`"https://..."`	Clickable URL
`FILE_ICON`	`"report.pdf"`	Extension badge (`.PDF`)

Component Decorators¶

Decorator	Renders	Description
`BADGE`	Colored pill	Status badge (ACTIVE→green, PASSIVE→red, etc.)
`CHIP`	Tag chip	Inline chip styling
`SEVERITY_TEXT`	Colored text	Info/Warn/Error severity colors
`PROGRESS`	Progress bar	Percentage bar
`RATING`	Stars	Star rating display
`IMAGE`	Thumbnail	Image preview
`AVATAR`	Avatar circle	User avatar
`COLOR_PICKER`	Color swatch	Color preview

Badge Styles¶

The BADGE decorator maps values to predefined color schemes:

Value	Background	Text
`ACTIVE`	green-100	green-800
`PASSIVE`	red-100	red-800
`SUSPENDED`	orange-100	orange-800
`DRAFT`	yellow-100	yellow-800
`PENDING`	blue-100	blue-800
`COMPLETED`	green-100	green-800
`CANCELLED`	gray-100	gray-800
`TRIAL`	amber-100	amber-800
`CRITICAL`	rose-100	rose-900
`GET`	sky-100	sky-800
`POST`	emerald-100	emerald-800
`DELETE`	red-100	red-800

40+ status/type values are pre-defined. Unknown values get a neutral gray badge.

Custom Decorators¶

Register project-specific decorators at runtime:

import { registerCustomDecorator } from '@/core/components/decorators/DecoratedCell'

registerCustomDecorator("MY_SEVERITY", (value, row) => {
    const color = value === "HIGH" ? "text-red-600" : "text-gray-600"
    return <span className={color}>{value}</span>
})

Use in config:

{ name: "severity", decorator: "CUSTOM", decoratorExpression: "MY_SEVERITY" }

Lookup Fields¶

LOOKUP_HYBRID¶

Combines autocomplete search with a browse dialog:

countryId: {
    name: "countryId",
    type: "LOOKUP_HYBRID",
    label: "field.country",
    lookup: {
        handler: "countries",
        displayField: "countryName",
        valueField: "id",
        searchFields: ["countryName", "iso2", "iso3"],
        dialogTitle: "Select Country",
        dialogColumns: [
            { field: "countryName", header: "Name", width: 200 },
            { field: "iso2", header: "ISO-2", width: 80 },
        ],
        minQueryLength: 2,
        maxResults: 10,
    },
}

User experience:

Type in input → autocomplete searches after 2+ characters
Select from dropdown, or
Click browse button → modal dialog with full table, search, pagination
Selected value populates the field

LOOKUP_DIALOG¶

Dialog-only (no autocomplete):

categoryId: {
    name: "categoryId",
    type: "LOOKUP_DIALOG",
    label: "field.category",
    lookup: {
        handler: "dms-categories",
        displayField: "name",
        valueField: "id",
    },
}

Cascading Selects¶

Fields can depend on other fields for their options:

// Parent field
countryId: {
    name: "countryId",
    type: "SELECT",
    optionsSource: { source: "countries", method: "" },
}

// Child field — refreshes when countryId changes
cityId: {
    name: "cityId",
    type: "SELECT",
    dependsOn: "countryId",
    optionsSource: { source: "cities", method: "countryId" },
}

Türkçe

dependsOn tanımlı bir alan, parent değiştiğinde otomatik olarak seçeneklerini yeniler ve mevcut seçimini temizler. Birden fazla seviye kaskad desteklenir (ülke → şehir → ilçe).

Nested Object Fields¶

Some fields come from the backend as nested objects:

{ "country": { "id": 1, "countryName": "Turkey" } }

Use displayField to extract the display value:

country: {
    name: "country",
    type: "OUTPUT_TEXT",
    label: "field.country",
    displayField: "countryName",   // Shows "Turkey" instead of [object Object]
}

File Upload Fields¶

file: {
    name: "file",
    type: "FILE_UPLOAD",
    label: "field.file",
    required: true,
    colClass: "col-12",
    visibility: { create: true, edit: false, view: false },
    fileUpload: {
        accept: ".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png,.zip",
        maxFileSize: 25 * 1024 * 1024,   // 25 MB
        multiple: false,
        dragDrop: true,
    },
}

Property	Type	Description
`accept`	`string`	Allowed file extensions
`maxFileSize`	`number`	Max file size in bytes
`multiple`	`boolean`	Allow multiple files
`dragDrop`	`boolean`	Enable drag-and-drop