User Interface (Views)

Struktural utilizes a declarative UI engine. Frontends are not hardcoded; they are rendered dynamically by interpreting JSON definitions.

Designing Views via the Studio UI

In the Views module, you can create and modify view topologies.

  1. Select Topology: Choose between Grid, Form, Calendar, Card, or Map.
  2. Form Designer: For Form views, use the drag-and-drop canvas.
    • Start by adding a Group node to act as a container.
    • Drag Field nodes inside the Group.
    • Adjust the ColSpan (1-12) to control the width. A standard two-column layout uses ColSpan: 6.
  3. List Links: For list-type views (Grid, Card, etc.), ensure you configure the CreateViewId and DetailViewId properties to point to the appropriate Form view so users can add or edit records.

The Generated JSON (app-ui.json)

The app-ui.json file contains a Views array. This array holds polymorphic objects; the exact structure depends on the Type discriminator.

Grid View Definition

Used for tabular data representation.

{
  "Id": "Customer_Grid_1",
  "Name": "Customer_Grid_1",
  "Type": "Grid",
  "EntityName": "Customer",
  "Label": "Customer Directory",
  "PageSize": 20,
  "IsDefaultLookup": true,
  "CreateViewId": "Customer_Form_1",
  "DetailViewId": "Customer_Form_1",
  "Columns": [
    { "Field": "Name", "Visible": true, "Sortable": true },
    { "Field": "Email", "Visible": true, "Sortable": true }
  ]
}

Form View Definition

Organized via a recursive tree of LayoutNode objects.

{
  "Id": "Customer_Form_1",
  "Name": "Customer_Form_1",
  "Type": "Form",
  "EntityName": "Customer",
  "Label": "Customer Details",
  "Layout": [
    {
      "_uuid": "group-1",
      "Type": "Group",
      "Label": "General Info",
      "ColSpan": 12,
      "Children": [
        {
          "_uuid": "field-1",
          "Type": "Field",
          "Field": "Name",
          "ColSpan": 6,
          "FormProps": { "Editor": "Auto" }
        }
      ]
    },
    {
      "_uuid": "tab-1",
      "Type": "Collection",
      "Field": "Orders",
      "Label": "Customer Orders",
      "TargetViewId": "Order_Grid_1"
    }
  ],
  "BottomButtons": [
    {
      "_uuid": "btn-1",
      "Type": "Button",
      "Label": "Verify",
      "ActionName": "VerifyCustomer",
      "ButtonClass": "primary"
    }
  ]
}

Note: The _uuid property is auto-generated by the Studio and is crucial for advanced reactive UI patterns.