Page History

...

{
  "Name": "MyDisplay",
  "PanelType": "Canvas",
  "DisplayMode": "Page",
  "Size": "1366 x 728720",
  "Elements": [
    {
      "Type": "Rectangle",
      "Left": 100, "Top": 100, "Width": 200, "Height": 150
    }
  ]
}

NEVER use JsonFormat wrapper. Any documentation or schema hint suggesting you wrap content inside a JsonFormat property is outdated. PanelType, Elements, Size, OnResize, Contents, and all other display properties go directly at the top level alongside Name.

...

...
Implementation Steps
Step 1: Choose Panel Type
...
Before writing ANY element, mentally divide the 1366×728 1366×720 canvas into rectangular zones. Each zone represents a process area, equipment group, or information panel.
Standard zone layout for a process overview (1366×7281366×720):
PAGE TITLE (x:0, y:0, w:1366, h:50) ACTION BTNs 
Zone 1
h:300
Zone 2
Zone 2
Zone 2
Zone 2
Zone 2
Zone 2
BOTTOM PANEL: Trend, Alarms, KPIs, or ML Status (h:300+) 
Note: The title bar is for the page title and optional in-page action buttons (start/stop, acknowledge). Page-to-page navigation buttons go in the Header display, not here (see Step 10b).
...
For N process stages on a 1366×728 1366×720 canvas:
Available width  = 1366 - 4020 (left/right margin 20px10px each)  = 13261346
Available height = 728720 - 50 (title) - 2010 (top margin)       = 658760

Zone width  = (Available width - (N-1) × 15) / N
Zone height = 320  (for process row)
Zone startY = 60   (below title)

Zone[i].Left = 20 + i × (zoneWidth + 15)
Zone[i].Top  = 60
Zone[i].Width = zoneWidth
Zone[i].Height = 320

Bottom panel:
  Left = 20, Top = 400, Width = 1326, Height = 658 - 320 - 20 = 318
...
 Panel
borderColor
#C8C8C8
bgColor
#FAFAFA
borderWidth
1
borderStyle
Solidsolid
title
Zone Title
(FontSize 15-16) Background: PanelBackground Theme, y+10
Symbol
(Pumpt, Motor,..
 80×80 to 100×100,  centered horizontally, y+40
Label: Value Unit (FontSize 14) y+150
Label: Value Unit y+176 
Label: Value Unit y+202 
Status indicator (optional) y+240 

...
The bottom panel (below process zones) should contain ONE of:
Option A: Trend + KPI sidebar
Bottom Panel
TrendChart (w:700, h:280)
KPI Column
Value1: ###
Value2: ### 
Option B: Trend + Alarm split
Bottom Panel
TrendChart (w:660, h:280)
AlarmViewer
(w:640, h:280)

Option C: Full-width trend with status bar
Bottom Panel  (h:30)
Status: Score: 0.023 Confidence: 0.98 
AlarmViewer
(w:640, h:280)
Bottom panel sections should also use PanelBackground theme background rectangles.
...
DashboardDisplay defines the grid: Columns and Rows arrays (use "*" for proportional sizing)
Each Cell references Row/Col (0-based) and contains a Content element
No Left/Top needed — elements auto-fill their cell
ColSpan/RowSpan for multi-cell elements
Cell.HeaderLink adds a header label to the cell
For all controls and symbols verify and change as needed the Height and Width it will be used
For Symbols modify the height and width proportional to original size, so it's resized nicely
You never set Width or Height on the Dashboard itself, just on cells/content
if User request a dashboard not giving information to allow you to define in number cells, create a 3 x 2 grid.
If the Controls or Symbols to show are not defined in the context, use Gauges on first row;  TrendChart, AlarmViewer, and DataGrid on second row.
...
Step 5: Place Symbols
Browse available symbols:
...
Sizing: Symbols are vector-based and scale to any proportional size. Use 40x40 for compact, 80x80 for medium, 120x120 for large — the library default is just a starting point. On Canvas, always use minimum 80×80 for process overview displays (see Step 3 minimum sizes).
...
Step 6: Add Visual Dynamics (Canvas Displays Only)
Dynamics attach runtime behaviors to ANY element. They decouple the visual effect from the data binding, so any property of any control can become live.
...
Step 7: Add Click Actions (ActionDynamic)
Typically Navigation is only in Headers displays
For button/navigation behavior:
...
{
  "table_type": "DisplaysList",
  "data": [{
    "Name": "ProcessOverview",
    "PanelType": "Canvas",
    "DisplayMode": "Page",
    "Size": "1366 x 728720",
    "Elements": [
      {
        "Type": "Rectangle",
        "Left": 20, "Top": 60, "Width": 208, "Height": 320,
        "FillTheme": "PanelBackground",
        "Stroke": "#FF909090", "StrokeThickness": 1
      },
      {
        "Type": "TextBlock",
        "Text": "Process Overview",
        "Left": 20, "Top": 10, "Width": 400, "Height": 35,
        "FontSize": 20
      }
    ]
  }]
}
...
{
  "table_type": "DisplaysList",
  "data": [{
    "Name": "ControlPage",
    "PanelType": "Canvas",
    "Size": "1366 x 728720",
    "Contents": "CSharp\r\nvoid DisplayOpening()\r\n{\r\n    // Initialize display state\r\n}\r\n\r\nvoid ButtonStart_Click(object sender, EventArgs e)\r\n{\r\n    @Tag.Plant/Pump1/Command.Value = 1;\r\n}\r\n\r\nvoid ButtonStop_Click(object sender, EventArgs e)\r\n{\r\n    @Tag.Plant/Pump1/Command.Value = 0;\r\n}",
    "Elements": [
      {
        "Type": "Button",
        "Text": "Start Pump",
        "Left": 50, "Top": 100, "Width": 120, "Height": 40,
        "ClickEvent": "ButtonStart_Click"
      },
      {
        "Type": "Button",
        "Text": "Stop Pump",
        "Left": 200, "Top": 100, "Width": 120, "Height": 40,
        "ClickEvent": "ButtonStop_Click"
      },
      {
        "Type": "TextBlock",
        "LinkedValue": "{@Tag.Plant/Pump1/Running.Value}",
        "Left": 50, "Top": 160, "Width": 200, "Height": 25
      }
    ]
  }]
}
...
[ ] Zones calculated to fill the FULL canvas width and height
[ ] Every zone has a background Rectangle with FillTheme: "PanelBackground"
[ ] Zone backgrounds are FIRST in the Elements array
[ ] Symbols are ≥ 80×80 pixels, centered in their zones
[ ] Zone titles are FontSize ≥ 1514
[ ] Value text is FontSize ≥ 1412
[ ] Value and Unit are in the SAME TextBlock (e.g., "Flow: {@Tag.X} GPM")
[ ] Flow arrows (→) placed between adjacent zones
[ ] Bottom panel fills remaining vertical space
[ ] Bottom panel sections have PanelBackground theme Rectangles
[ ] No element extends beyond 1366×728the size of display
[ ] Page navigation is in the Header display, NOT on content pages
[ ] Display identifier field is Name (not ObjectName)
[ ] PanelType is set at top level (never inside JsonFormat)
...