Page JSON

A page’s layout is sys.page_def.json. It is JSON5-like: trailing commas are allowed, and the browser parses it with eval, so it is not strict JSON for JSON.parse.

Keys we added start with a capital letter. DevExtreme keys start with a lowercase letter. Their meaning is the DevExtreme docs. These pages do not copy that catalog.

Page root

Key	Type	Meaning
Title	string	Page title
NoScroll	boolean	The page itself does not scroll. The grid inside it does
SubPages	number[]	Child page ids allowed to open as popups. If a child is not listed, its SQL fails the allowlist
Body	object[]	Components. Each item is Type, Id, Option

{
  Title: "Sales orders",
  NoScroll: true,
  SubPages: [180],
  Body: [
    {
      Type: "data_grid",
      Id: "orders",
      Option: { /* see each component */ }
    }
  ]
}

Type chooses the engine script. At runtime the page calls init_<Type>(dom, Id). Id is unique on the page, and the engine uses it to find Option. Available Type values are in Two kinds of pages.

Older names title / body / sub_pages, and name / id / user_option on a component, are translated to the current names when the page loads. New pages write the current names.

The usual three blocks in Option

Grids, trees, and forms split Option like this:

Block	What goes here
Component	Engine settings: which SQL loads and saves, whether to load immediately, whether the component is read-only
Toolbar	Toolbar. Items turns buttons on by name. MoreItems holds custom buttons
Grid / Form / Pivot	DevExtreme options. The keys are lowercase

On simple_form, Toolbar is a dxToolbar. Lowercase visible and items are native keys. Items and MoreItems from the page are merged into items.

js expressions

Any string value may be "js:" plus JavaScript. It is evaluated at runtime, and this is the component instance.

ShowIf: "js:this.mainSelectValue === 1"

If evaluation throws and the same object has Fallback, the value is taken from the matching key on Fallback. A normal result of false does not use Fallback.

Fallback: { disabled: true }

Filling native options from SQL

Some DevExtreme keys have to wait for SQL, for example a lookup dataSource. Write InitSql on the same object. Each key name matches the native key to fill. The native key must already have a placeholder.

{
  dataSource: [],
  value: null,
  InitSql: {
    dataSource: { sql_id: 77 },
    value: { sql_id: 78, _return_val: true }
  }
}

dataSource: { FromPool: "name" } does not send a request. It uses the named result in this component’s Component.DataPool.

ShowIf

Place it on one object inside summary, totalItems, and similar lists. When the expression is false, that whole block is removed. The key xShowIf means the block is parked and not applied.

KeepData on a column

A column with visible: false is put in __hide_fields__ by default, and those fields are removed from the SQL result. If the column stays hidden but the value is still needed for js: or for permissions, write KeepData: true. Otherwise the browser receives an empty value.

Each component’s own keys are on the following reference pages. Keys inside a SQL parameter object { sql_id, ... } are parameter names. Leave them as they are.