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

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.