View & Layout Editor

The View Editor and Layout Editor work together to define the user interface of a Kitto^x application. Views define what data is shown and how it behaves; layouts define where fields are positioned in forms.

View Editor

Editor layout

When you double-click a view in the project tree, KIDE^x opens it in the editor panel:

The tree shows the complete view structure:

• Type — Data (for data-bound views) or Tree (for menu views)
• Controller — the controller type (List, Form, BorderPanel, TabPanel, etc.)
• MainTable — the primary data model and its field selection
• Fields — which model fields to include and their view-level overrides
• DetailTables — master/detail relationships for form tabs
• Controller settings — CRUD permissions, toolbar, filters, paging, ToolViews

Read-only properties

A property that the metadata carries but the HTMX runtime does not honour yet is shown read-only rather than hidden: the value written in the YAML stays visible and can be copied, but it cannot be edited from the designer. It becomes editable again when the feature is wired up.

Creating a view manually

1. Right-click the Views node in the project tree
2. Select New View
3. Choose the view type (Data or Tree)
4. Enter a name for the YAML file
5. Use the tree editor and context menus to build the view structure

DataView wizard

For data-bound views, the DataView Wizard generates a complete view from a model:

1. Select Tools > DataView Wizard (or right-click Views > New DataView from Model)
2. Choose the model
3. Select which fields to include
4. Choose the controller type (List is the default)
5. Click Generate — KIDE^x creates the view YAML file

The wizard generates a view with:

• Type: Data and Controller: List
• MainTable referencing the selected model
• Fields with the selected field set
• Default DisplayLabel from the model name

Layout Editor

Layouts control how fields are arranged in form dialogs. Without a layout, fields are stacked vertically. With a layout, you can organize fields in rows, fieldsets, and multi-page tabs.

Editor layout

Layout files are stored in Metadata/Views/Layouts/ and are named by convention: {ViewName}_Form.yaml for form layouts, {ViewName}_Grid.yaml for grid column layouts.

Layout containers

The context menu for layout nodes offers these container types:

Container	Description
Field	A single field reference (by name from the model)
Row	Horizontal row — child fields are placed side by side
FieldSet	A bordered group with optional title, collapsible
Spacer	Empty space between fields
PageBreak	Starts a new tab page in the form dialog

Example layout structure:

Field: DESCRIPTION
  CharWidth: 70
FieldSet:
  Title: Details
  Row:
    Field: PHASE
    Field: EMPLOYEE
    Field: ROLE
FieldSet:
  Title: Timing
  Row:
    Field: ACTIVITY_DATE
    Field: START_TIME
    Field: END_TIME
    Field: DURATION
    Field: STATUS

Layout preview

KIDE^x can show a visual preview of the form layout without running the application:

Select View > Preview Layout (or press F5) to see how the form will look. The preview uses the field metadata (labels, widths, data types) to render a realistic mock-up.

Grid layouts

Grid layouts ({ViewName}_Grid.yaml) control which columns appear in the grid and their order. They are simpler than form layouts — just a flat list of field names:

Field: DESCRIPTION
Field: ACTIVITY_DATE
Field: EMPLOYEE
Field: STATUS
Field: DURATION

View validation

When saving a view, KIDE^x checks for:

• References to fields not present in the model
• Invalid controller names
• Missing required nodes (e.g. MainTable for Data views)
• Layout fields that don't match the view's field list

Errors appear in the log panel with line numbers and descriptions.