create-procode 0.0.0-stage → 1.0.0

package/templates/base/src/Module/Sample/Contacts.json.tmpl

@@ -0,0 +1,965 @@
+{
+  "_readme": [
+    "SAMPLE SCREEN — one JSON document, no backend. Everything on this page is declared here:",
+    "a heading and a permission-gated button; three BLOCK summary tiles; a GRID with sorting,",
+    "column search, checkbox selection and three bulk actions that open the framework's",
+    "confirmation dialog; a click on a name that opens an inline editor; an editor with seven",
+    "widget types, standard validators and a rule-driven conditional field; a Save that validates",
+    "and then opens the information dialog. The rows come from the adapter's defaultViewModel",
+    "(src/AdapterProvider/SampleContacts.ts). Five small custom actions in",
+    "src/Factory/Actions/sampleContacts.ts stand in for the API-backed standard actions.",
+    "",
+    "GOING LIVE — the three swaps:",
+    "  1. Add `apiConfig` with `get` / `create` / `update` / `delete` verb blocks, point the grid's",
+    "     `onScreenDataLoad` at LOAD_SCREEN_DATA and add `paginationConfig` — the server now",
+    "     sorts, searches and pages; the seed rows and contactsSource stop being used.",
+    "  2. The bulk actions become DELETE_ASYNC / UPDATE_ASYNC with `refresh: true`.",
+    "  3. Save becomes FORMSUBMIT_CREATE_ASYNC / FORMSUBMIT_UPDATE_ASYNC and the row click",
+    "     becomes NAVIGATE to an edit screen with a STATE_SELECTED_DATA param.",
+    "Keys beginning with an underscore are comments; the core ignores them."
+  ],
+  "screenName": "Contacts",
+  "screenId": "sample-contacts",
+  "slug": "sample",
+  "enableHeader": false,
+  "enableFooter": false,
+  "rootScreenElement": {
+    "uiElementType": "FORM",
+    "children": [
+      {
+        "_comment": "CONTAINER is the grouping element type. CONTAINER/FORM/WIDGET are uiElementType values; BLOCK, GRIDTOOLBAR and MENU are widgetType values on a WIDGET. Writing uiElementType: BLOCK renders nothing, silently.",
+        "uiElementType": "CONTAINER",
+        "widgetStyle": {
+          "className": "prc-flx-container prc-verticle qo-gap-y-lg qo-padding-lg"
+        },
+        "children": [
+          {
+            "_comment": "Page header: an H1 widget (level = element, look = theme class) and a button gated by a permission key through CustomAuthorizationProvider.",
+            "uiElementType": "CONTAINER",
+            "widgetStyle": {
+              "className": "prc-flx-container prc-space-between prc-center-cross-axis prc-nowrap"
+            },
+            "children": [
+              {
+                "uiElementType": "CONTAINER",
+                "widgetStyle": {
+                  "className": "prc-flx-container prc-verticle qo-gap-y-sm"
+                },
+                "children": [
+                  {
+                    "uiElementType": "WIDGET",
+                    "widgetType": "H1",
+                    "title": "Contacts",
+                    "skeletonType": "PARAGRAPH"
+                  },
+                  {
+                    "uiElementType": "WIDGET",
+                    "widgetType": "LABEL",
+                    "title": "Select rows for bulk actions, click a name to edit, or add a new contact. Every behaviour on this page is declared in src/Module/Sample/Contacts.json.",
+                    "widgetStyle": {
+                      "className": "qo-font-sm qo-text-secondary"
+                    },
+                    "skeletonType": "PARAGRAPH"
+                  }
+                ]
+              },
+              {
+                "_comment": "A BUTTON raises onClick with no arguments, so it cannot reach MODIFY_MODEL directly; CUS_SET_FIELD turns the event config into MODIFY_MODEL's (field, value) arguments. permissionKey gates the click: denied => blocked, and the provider's message is toasted.",
+                "uiElementType": "WIDGET",
+                "widgetType": "BUTTON",
+                "title": "Add contact",
+                "widgetStyle": {
+                  "className": "qo-btn qo-btn-primary"
+                },
+                "events": {
+                  "onClick": {
+                    "key": "CUS_SET_FIELD::MODIFY_MODEL",
+                    "permissionKey": "sample.add",
+                    "config": {
+                      "field": "screenData.editor",
+                      "value": {
+                        "mode": "add",
+                        "id": null,
+                        "name": "",
+                        "email": "",
+                        "department": null,
+                        "joined": null,
+                        "active": true,
+                        "notes": "",
+                        "region": null,
+                        "referenceCode": ""
+                      }
+                    }
+                  }
+                }
+              }
+            ]
+          },
+          {
+            "_comment": "Summary tiles: BLOCK is a vs-template widget — caption over a value bound to the view model. The custom actions recompute screenData.summary after every change, so these stay live.",
+            "uiElementType": "CONTAINER",
+            "widgetStyle": {
+              "className": "prc-flx-container prc-nowrap qo-gap-x-md"
+            },
+            "children": [
+              {
+                "uiElementType": "WIDGET",
+                "widgetType": "BLOCK",
+                "title": "Total contacts",
+                "screenDataField": "screenData.summary.total",
+                "enableHeaderBorder": true,
+                "skeletonType": "SQUARE_LARGE",
+                "widgetStyle": {
+                  "className": "prc-cl-3"
+                }
+              },
+              {
+                "uiElementType": "WIDGET",
+                "widgetType": "BLOCK",
+                "title": "Active",
+                "screenDataField": "screenData.summary.active",
+                "enableHeaderBorder": true,
+                "skeletonType": "SQUARE_LARGE",
+                "widgetStyle": {
+                  "className": "prc-cl-3"
+                }
+              },
+              {
+                "uiElementType": "WIDGET",
+                "widgetType": "BLOCK",
+                "title": "Departments",
+                "screenDataField": "screenData.summary.departments",
+                "enableHeaderBorder": true,
+                "skeletonType": "SQUARE_LARGE",
+                "widgetStyle": {
+                  "className": "prc-cl-3"
+                }
+              }
+            ]
+          },
+          {
+            "_comment": "The GRID. Data is { records, total } at screenDataField. The grid raises onScreenDataLoad on mount and whenever its sort or column-search state changes; with an API that event is LOAD_SCREEN_DATA + apiConfig.get and the adapter's generateQueryParams turns the grid state into the query string — here CUS_SAMPLE_LOAD_ROWS applies the same state to the in-memory set. selectedField adds the checkbox column; headerActionBar lists the bulk actions — each names an event below and the alert widget its confirmation opens. The name column is a NAVIGATIONCELL: clicking it raises `navigate` with { dataItemKey, value }. Every cell renders HTML, which is how the status badge is drawn. Column search comes from `filterable` (type, then Enter); sorting from the arrow at the header's right edge. Paging is server-side by design and is enabled with paginationConfig once an API pages the data.",
+            "_comment_navigate": "With a real edit screen the navigate event is { key: NAVIGATE, config: { path: /sample/edit, params: [{ name: id, rightOperand: { valueReplacePolicy: STATE_SELECTED_DATA, value: screenData.contacts.records::id } }] } }.",
+            "_comment_bulk": "With an API each bulk event is DELETE_ASYNC / UPDATE_ASYNC carrying its own apiConfig verb block, and the action sets refresh: true so the grid re-fetches.",
+            "uiElementType": "WIDGET",
+            "widgetType": "GRID",
+            "applicableOn": "contactsGrid",
+            "permissionKey": "sample.grid",
+            "screenDataField": "screenData.contacts",
+            "config": {
+              "uiElementGroupId": "screenData.contactsGridState"
+            },
+            "dataItemKey": "id",
+            "selectedField": "selected",
+            "lazyLoading": false,
+            "skeletonType": "SQUARE_LARGE",
+            "sortConfig": {
+              "sortable": true,
+              "sortMode": "single",
+              "defaultSortFields": [
+                {
+                  "field": "name",
+                  "dir": "asc"
+                }
+              ]
+            },
+            "localSearchConfig": {
+              "logic": "and",
+              "filters": []
+            },
+            "_comment_paging": "No defaultPagination on purpose: in data-load mode the grid also slices locally with Kendo's process(), and a take of -1 there is slice(0, -1) — the last row silently disappears.",
+            "paginationConfig": {
+              "pageable": false
+            },
+            "columns": [
+              {
+                "id": 1,
+                "order": 1,
+                "field": "id",
+                "title": "#",
+                "selected": true,
+                "primary": true,
+                "width": 64,
+                "widgetStyle": {
+                  "className": "qo-text-secondary qo-font-sm"
+                }
+              },
+              {
+                "id": 2,
+                "order": 2,
+                "field": "name",
+                "title": "Name",
+                "selected": true,
+                "sortable": true,
+                "filterable": true,
+                "resizable": true,
+                "reorderable": true,
+                "width": 190,
+                "cellType": "NAVIGATIONCELL",
+                "widgetStyle": {
+                  "className": "qo-text-primary qo-font-weight-medium"
+                },
+                "tooltip": {
+                  "enabled": true,
+                  "field": "email"
+                }
+              },
+              {
+                "id": 3,
+                "order": 3,
+                "field": "email",
+                "title": "Email",
+                "selected": true,
+                "sortable": true,
+                "filterable": true,
+                "resizable": true,
+                "reorderable": true,
+                "width": "auto"
+              },
+              {
+                "id": 4,
+                "order": 4,
+                "field": "department",
+                "title": "Department",
+                "selected": true,
+                "sortable": true,
+                "filterable": true,
+                "resizable": true,
+                "reorderable": true,
+                "width": 140
+              },
+              {
+                "id": 5,
+                "order": 5,
+                "field": "city",
+                "title": "City",
+                "selected": true,
+                "sortable": true,
+                "filterable": true,
+                "resizable": true,
+                "reorderable": true,
+                "width": 130
+              },
+              {
+                "id": 6,
+                "order": 6,
+                "field": "joined",
+                "title": "Joined",
+                "selected": true,
+                "sortable": true,
+                "resizable": true,
+                "reorderable": true,
+                "width": 120
+              },
+              {
+                "id": 7,
+                "order": 7,
+                "field": "statusBadge",
+                "title": "Status",
+                "selected": true,
+                "resizable": true,
+                "reorderable": true,
+                "width": 130
+              }
+            ],
+            "headerActionBar": {
+              "actions": [
+                {
+                  "actionName": "onRecordDeactivate",
+                  "label": "Deactivate",
+                  "value": "Deactivate",
+                  "refresh": false,
+                  "targetScreenDataField": "screenData.statusConfirm"
+                },
+                {
+                  "actionName": "onRecordActivate",
+                  "label": "Activate",
+                  "value": "Activate",
+                  "refresh": false,
+                  "targetScreenDataField": "screenData.statusConfirm"
+                },
+                {
+                  "actionName": "onRecordDelete",
+                  "label": "Delete",
+                  "value": "Delete",
+                  "refresh": false,
+                  "targetScreenDataField": "screenData.deleteConfirm"
+                }
+              ]
+            },
+            "events": {
+              "onModelUpdate": {
+                "key": "MODIFY_MODEL"
+              },
+              "onScreenDataLoad": {
+                "key": "CUS_SAMPLE_LOAD_ROWS"
+              },
+              "navigate": {
+                "key": "CUS_SAMPLE_OPEN_ROW::MODIFY_MODEL"
+              },
+              "onRecordDelete": {
+                "key": "CUS_SAMPLE_UPDATE_ROWS",
+                "config": {
+                  "remove": true
+                }
+              },
+              "onRecordDeactivate": {
+                "key": "CUS_SAMPLE_UPDATE_ROWS",
+                "config": {
+                  "set": {
+                    "status": "Inactive"
+                  }
+                }
+              },
+              "onRecordActivate": {
+                "key": "CUS_SAMPLE_UPDATE_ROWS",
+                "config": {
+                  "set": {
+                    "status": "Active"
+                  }
+                }
+              }
+            }
+          },
+          {
+            "_comment": "The inline editor. Hidden until screenData.editor.mode is 'add' or 'edit' — see ruleInterpreter[applicableOn=editor]. Field width comes from rootStyle (the wrapper), not widgetStyle (the control).",
+            "uiElementType": "CONTAINER",
+            "applicableOn": "editor",
+            "widgetStyle": {
+              "className": "prc-flx-container prc-verticle qo-gap-y-md qo-padding-lg qo-bg-light qo-border-radius-md qo-boxshadow-sm"
+            },
+            "children": [
+              {
+                "uiElementType": "WIDGET",
+                "widgetType": "H3",
+                "title": "Contact details",
+                "skeletonType": "PARAGRAPH"
+              },
+              {
+                "uiElementType": "CONTAINER",
+                "widgetStyle": {
+                  "className": "prc-flx-container prc-wrap qo-gap-x-md qo-gap-y-md"
+                },
+                "children": [
+                  {
+                    "uiElementType": "WIDGET",
+                    "widgetType": "TEXTBOX",
+                    "applicableOn": "editorName",
+                    "screenDataField": "screenData.editor.name",
+                    "name": "name",
+                    "placeHolder": "Full name",
+                    "rootStyle": {
+                      "className": "prc-cl-3"
+                    },
+                    "widgetStyle": {
+                      "className": "qo-h-control"
+                    },
+                    "skeletonType": "FIELD",
+                    "label": {
+                      "title": "Name",
+                      "isApply": true,
+                      "position": "top",
+                      "widgetStyle": {
+                        "className": "qo-label prc-blc-inline-container"
+                      }
+                    },
+                    "validations": [
+                      {
+                        "name": "REQUIRED",
+                        "message": "Please enter a name",
+                        "executeOrder": 1,
+                        "executeMode": "ONVALUECHANGE|ONSUBMIT"
+                      },
+                      {
+                        "name": "MAX_CHAR_COUNT",
+                        "message": "Keep the name under 40 characters",
+                        "executeOrder": 2,
+                        "executeMode": "ONVALUECHANGE|ONSUBMIT",
+                        "params": {
+                          "maxCharCount": 40
+                        }
+                      }
+                    ],
+                    "events": {
+                      "onChange": {
+                        "key": "MODIFY_MODEL"
+                      }
+                    }
+                  },
+                  {
+                    "uiElementType": "WIDGET",
+                    "widgetType": "TEXTBOX",
+                    "applicableOn": "editorEmail",
+                    "screenDataField": "screenData.editor.email",
+                    "name": "email",
+                    "placeHolder": "name@company.com",
+                    "rootStyle": {
+                      "className": "prc-cl-3"
+                    },
+                    "widgetStyle": {
+                      "className": "qo-h-control"
+                    },
+                    "skeletonType": "FIELD",
+                    "label": {
+                      "title": "Email",
+                      "isApply": true,
+                      "position": "top",
+                      "widgetStyle": {
+                        "className": "qo-label prc-blc-inline-container"
+                      }
+                    },
+                    "validations": [
+                      {
+                        "name": "REQUIRED",
+                        "message": "Please enter an email address",
+                        "executeOrder": 1,
+                        "executeMode": "ONVALUECHANGE|ONSUBMIT"
+                      },
+                      {
+                        "name": "EMAIL",
+                        "message": "That does not look like an email address",
+                        "executeOrder": 2,
+                        "executeMode": "ONVALUECHANGE|ONSUBMIT"
+                      }
+                    ],
+                    "events": {
+                      "onChange": {
+                        "key": "MODIFY_MODEL"
+                      }
+                    }
+                  },
+                  {
+                    "_comment": "A DROPDOWN with inline options (valueLoadType SELF). It writes the whole { label, value } object to the model, which is why the rule below reads screenData.editor.department.value. With an API the options come from apiConfig.loadSupportiveData + LOAD_SUPPORTIVE_DATA.",
+                    "uiElementType": "WIDGET",
+                    "widgetType": "DROPDOWN",
+                    "applicableOn": "editorDepartment",
+                    "screenDataField": "screenData.editor.department",
+                    "supportiveDataField": "supportiveData.departments",
+                    "textField": "label",
+                    "dataItemKey": "value",
+                    "defaultItem": {
+                      "label": "Select a department",
+                      "value": null
+                    },
+                    "dataProvider": {
+                      "valueLoadType": "SELF",
+                      "value": [
+                        {
+                          "label": "Sales",
+                          "value": "Sales"
+                        },
+                        {
+                          "label": "Support",
+                          "value": "Support"
+                        },
+                        {
+                          "label": "Engineering",
+                          "value": "Engineering"
+                        },
+                        {
+                          "label": "Finance",
+                          "value": "Finance"
+                        }
+                      ]
+                    },
+                    "rootStyle": {
+                      "className": "prc-cl-3"
+                    },
+                    "widgetStyle": {
+                      "className": "qo-h-control"
+                    },
+                    "skeletonType": "FIELD",
+                    "label": {
+                      "title": "Department",
+                      "isApply": true,
+                      "position": "top",
+                      "widgetStyle": {
+                        "className": "qo-label prc-blc-inline-container"
+                      }
+                    },
+                    "validations": [
+                      {
+                        "name": "REQUIRED",
+                        "message": "Please choose a department",
+                        "executeOrder": 1,
+                        "executeMode": "ONVALUECHANGE|ONSUBMIT"
+                      }
+                    ],
+                    "events": {
+                      "onChange": {
+                        "key": "MODIFY_MODEL"
+                      },
+                      "onModelUpdate": {
+                        "key": "MODIFY_MODEL"
+                      }
+                    }
+                  },
+                  {
+                    "_comment": "Shown only while the department is Sales — see ruleInterpreter[applicableOn=editorRegion]. Rules are the framework's conditional mechanism; never local state that hides an element.",
+                    "uiElementType": "WIDGET",
+                    "widgetType": "DROPDOWN",
+                    "applicableOn": "editorRegion",
+                    "screenDataField": "screenData.editor.region",
+                    "supportiveDataField": "supportiveData.regions",
+                    "textField": "label",
+                    "dataItemKey": "value",
+                    "defaultItem": {
+                      "label": "Select a region",
+                      "value": null
+                    },
+                    "dataProvider": {
+                      "valueLoadType": "SELF",
+                      "value": [
+                        {
+                          "label": "North America",
+                          "value": "NA"
+                        },
+                        {
+                          "label": "Europe",
+                          "value": "EU"
+                        },
+                        {
+                          "label": "Asia Pacific",
+                          "value": "APAC"
+                        }
+                      ]
+                    },
+                    "rootStyle": {
+                      "className": "prc-cl-3"
+                    },
+                    "widgetStyle": {
+                      "className": "qo-h-control"
+                    },
+                    "skeletonType": "FIELD",
+                    "label": {
+                      "title": "Sales region",
+                      "isApply": true,
+                      "position": "top",
+                      "widgetStyle": {
+                        "className": "qo-label prc-blc-inline-container"
+                      }
+                    },
+                    "helperText": {
+                      "title": "Only asked for the Sales department",
+                      "isApply": true
+                    },
+                    "events": {
+                      "onChange": {
+                        "key": "MODIFY_MODEL"
+                      },
+                      "onModelUpdate": {
+                        "key": "MODIFY_MODEL"
+                      }
+                    }
+                  },
+                  {
+                    "uiElementType": "WIDGET",
+                    "widgetType": "DATE",
+                    "applicableOn": "editorJoined",
+                    "screenDataField": "screenData.editor.joined",
+                    "format": "yyyy-MM-dd",
+                    "placeHolder": "yyyy-mm-dd",
+                    "rootStyle": {
+                      "className": "prc-cl-3"
+                    },
+                    "widgetStyle": {
+                      "className": "qo-h-control"
+                    },
+                    "skeletonType": "FIELD",
+                    "label": {
+                      "title": "Joined",
+                      "isApply": true,
+                      "position": "top",
+                      "widgetStyle": {
+                        "className": "qo-label prc-blc-inline-container"
+                      }
+                    },
+                    "events": {
+                      "onChange": {
+                        "key": "MODIFY_MODEL"
+                      }
+                    }
+                  },
+                  {
+                    "_comment": "The custom widget from src/Factory/Widgets/MyWidget — composed from the library's TextBox and Button. Its onChange is chained through CUS_MY_ACTION (normalise) into MODIFY_MODEL; its Reload button raises onReload(null, fieldPath) into CUS_SUGGEST_CODE. MY_VALIDATION is the custom validator.",
+                    "uiElementType": "WIDGET",
+                    "widgetType": "MY_WIDGET",
+                    "title": "Reference code",
+                    "applicableOn": "editorReferenceCode",
+                    "screenDataField": "screenData.editor.referenceCode",
+                    "placeholder": "e.g. CT_A1B2",
+                    "rootStyle": {
+                      "className": "prc-cl-3"
+                    },
+                    "skeletonType": "FIELD",
+                    "validations": [
+                      {
+                        "name": "MY_VALIDATION",
+                        "message": "Use capitals, digits and underscore only",
+                        "executeOrder": 1,
+                        "executeMode": "ONVALUECHANGE|ONSUBMIT"
+                      }
+                    ],
+                    "events": {
+                      "onChange": {
+                        "key": "CUS_MY_ACTION::MODIFY_MODEL"
+                      },
+                      "onReload": {
+                        "key": "CUS_SUGGEST_CODE::MODIFY_MODEL"
+                      }
+                    }
+                  },
+                  {
+                    "uiElementType": "WIDGET",
+                    "widgetType": "SWITCH",
+                    "applicableOn": "editorActive",
+                    "screenDataField": "screenData.editor.active",
+                    "size": "medium",
+                    "rootStyle": {
+                      "className": "prc-cl-3"
+                    },
+                    "skeletonType": "FIELD",
+                    "label": {
+                      "title": "Active",
+                      "isApply": true,
+                      "position": "top",
+                      "widgetStyle": {
+                        "className": "qo-label prc-blc-inline-container"
+                      }
+                    },
+                    "events": {
+                      "onChange": {
+                        "key": "MODIFY_MODEL"
+                      }
+                    }
+                  },
+                  {
+                    "uiElementType": "WIDGET",
+                    "widgetType": "TEXTAREA",
+                    "applicableOn": "editorNotes",
+                    "screenDataField": "screenData.editor.notes",
+                    "rows": 3,
+                    "placeHolder": "Anything the team should know",
+                    "rootStyle": {
+                      "className": "prc-cl-1"
+                    },
+                    "widgetStyle": {
+                      "className": "qo-mw-100"
+                    },
+                    "skeletonType": "FIELD",
+                    "label": {
+                      "title": "Notes",
+                      "isApply": true,
+                      "position": "top",
+                      "widgetStyle": {
+                        "className": "qo-label prc-blc-inline-container"
+                      }
+                    },
+                    "validations": [
+                      {
+                        "name": "MAX_CHAR_COUNT",
+                        "message": "Notes are limited to 200 characters",
+                        "executeOrder": 1,
+                        "executeMode": "ONVALUECHANGE|ONSUBMIT",
+                        "params": {
+                          "maxCharCount": 200
+                        }
+                      }
+                    ],
+                    "events": {
+                      "onChange": {
+                        "key": "MODIFY_MODEL"
+                      }
+                    }
+                  }
+                ]
+              },
+              {
+                "uiElementType": "CONTAINER",
+                "widgetStyle": {
+                  "className": "prc-flx-container prc-nowrap qo-gap-x-sm"
+                },
+                "children": [
+                  {
+                    "_comment": "With an API: { key: FORMSUBMIT_CREATE_ASYNC, config: { apiConfig: { create: { endPoint: ..., responseConfig: { 201: { enableMessage: true, message: 'Contact added', alertType: 'toast' } } } } } }. The sample validates with the same validators, then hands the updated screenData to MODIFY_MODEL and opens the information dialog.",
+                    "uiElementType": "WIDGET",
+                    "widgetType": "BUTTON",
+                    "title": "Save",
+                    "widgetStyle": {
+                      "className": "qo-btn qo-btn-primary"
+                    },
+                    "events": {
+                      "onClick": {
+                        "key": "CUS_SAMPLE_SAVE::MODIFY_MODEL",
+                        "permissionKey": "sample.save"
+                      }
+                    }
+                  },
+                  {
+                    "uiElementType": "WIDGET",
+                    "widgetType": "BUTTON",
+                    "title": "Cancel",
+                    "widgetStyle": {
+                      "className": "qo-btn qo-btn-outline-default qo-text-primary"
+                    },
+                    "events": {
+                      "onClick": {
+                        "key": "CUS_SET_FIELD::MODIFY_MODEL",
+                        "config": {
+                          "field": "screenData.editor",
+                          "value": {
+                            "mode": ""
+                          }
+                        }
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "_comment": "The three dialogs. The grid writes { visibleMode: 'SHOW', onConfirm, onCancel, selectedData } to the two confirmation fields when a bulk action is picked; a SHOW rule on visibleMode opens each one, Yes runs the named grid event, either button nulls the field through onModelUpdate -> MODIFY_MODEL, which closes it. handleBody lets a custom action put the selection count into the text. The two alert widget names are misspelled in the library — write them exactly as they are.",
+            "uiElementType": "WIDGET",
+            "widgetType": "CONFOMATIONALERTBOX",
+            "visible": false,
+            "applicableOn": "deleteConfirm",
+            "screenDataField": "screenData.deleteConfirm",
+            "title": "Confirmation",
+            "messageHeader": "Delete the selected contacts?",
+            "messageBody": "You are about to delete {count} contact{s}. This cannot be undone.",
+            "iconName": "delete",
+            "confirmText": "Delete",
+            "cancelText": "Keep them",
+            "events": {
+              "onModelUpdate": {
+                "key": "MODIFY_MODEL"
+              },
+              "handleBody": {
+                "key": "CUS_SAMPLE_CONFIRM_BODY"
+              }
+            }
+          },
+          {
+            "uiElementType": "WIDGET",
+            "widgetType": "CONFOMATIONALERTBOX",
+            "visible": false,
+            "applicableOn": "statusConfirm",
+            "screenDataField": "screenData.statusConfirm",
+            "title": "Confirmation",
+            "messageHeader": "Change the status of the selected contacts?",
+            "messageBody": "{count} contact{s} will be updated.",
+            "confirmText": "Yes, change it",
+            "cancelText": "No",
+            "events": {
+              "onModelUpdate": {
+                "key": "MODIFY_MODEL"
+              },
+              "handleBody": {
+                "key": "CUS_SAMPLE_CONFIRM_BODY"
+              }
+            }
+          },
+          {
+            "_comment": "The success dialog. CUS_SAMPLE_SAVE writes { visibleMode: 'SHOW', message } to screenData.saveNotice; handleBody copies the message in; OK nulls the field and closes it.",
+            "uiElementType": "WIDGET",
+            "widgetType": "INFOMATIONALERTBOX",
+            "visible": false,
+            "applicableOn": "saveNotice",
+            "screenDataField": "screenData.saveNotice",
+            "title": "Saved",
+            "messageHeader": "Contact saved",
+            "messageBody": "{message}",
+            "confirmText": "OK",
+            "events": {
+              "onModelUpdate": {
+                "key": "MODIFY_MODEL"
+              },
+              "handleBody": {
+                "key": "CUS_SAMPLE_NOTICE_BODY"
+              }
+            }
+          }
+        ]
+      }
+    ]
+  },
+  "_ruleInterpreter_comment": "Conditional behaviour is declared, never coded. Each entry targets an element by its applicableOn (exact, case-sensitive match); an effect is one of the core's standard ones (SHOW, HIDE, DISABLE_ELEMENT, SET_PROPS, COMPUTE_VALUE, …) or a custom one registered in src/Factory/CustomRuleEffectFactory.ts — editorNotes below uses the custom CUS_READONLY. EQUAL compares as strings after String(). An entry that omits applicableOn matches the ROOT and can blank the whole screen.",
+  "ruleInterpreter": [
+    {
+      "applicableOn": "editor",
+      "rules": [
+        {
+          "effect": "SHOW",
+          "conditionList": [
+            {
+              "expressions": [
+                {
+                  "id": 1,
+                  "leftOperand": {
+                    "field": "screenData.editor.mode",
+                    "valueLoadType": "VALUE"
+                  },
+                  "operator": "EQUAL",
+                  "rightOperand": {
+                    "valueReplacePolicy": "SELF",
+                    "value": "add"
+                  }
+                },
+                {
+                  "id": 2,
+                  "leftOperand": {
+                    "field": "screenData.editor.mode",
+                    "valueLoadType": "VALUE"
+                  },
+                  "operator": "EQUAL",
+                  "rightOperand": {
+                    "valueReplacePolicy": "SELF",
+                    "value": "edit"
+                  }
+                }
+              ],
+              "criteria": "{{1}} || {{2}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "applicableOn": "editorRegion",
+      "rules": [
+        {
+          "effect": "SHOW",
+          "conditionList": [
+            {
+              "expressions": [
+                {
+                  "id": 1,
+                  "leftOperand": {
+                    "field": "screenData.editor.department.value",
+                    "valueLoadType": "VALUE"
+                  },
+                  "operator": "EQUAL",
+                  "rightOperand": {
+                    "valueReplacePolicy": "SELF",
+                    "value": "Sales"
+                  }
+                }
+              ],
+              "criteria": "{{1}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "applicableOn": "deleteConfirm",
+      "rules": [
+        {
+          "effect": "SHOW",
+          "conditionList": [
+            {
+              "expressions": [
+                {
+                  "id": 1,
+                  "leftOperand": {
+                    "field": "screenData.deleteConfirm.visibleMode",
+                    "valueLoadType": "VALUE"
+                  },
+                  "operator": "EQUAL",
+                  "rightOperand": {
+                    "valueReplacePolicy": "SELF",
+                    "value": "SHOW"
+                  }
+                }
+              ],
+              "criteria": "{{1}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "applicableOn": "statusConfirm",
+      "rules": [
+        {
+          "effect": "SHOW",
+          "conditionList": [
+            {
+              "expressions": [
+                {
+                  "id": 1,
+                  "leftOperand": {
+                    "field": "screenData.statusConfirm.visibleMode",
+                    "valueLoadType": "VALUE"
+                  },
+                  "operator": "EQUAL",
+                  "rightOperand": {
+                    "valueReplacePolicy": "SELF",
+                    "value": "SHOW"
+                  }
+                }
+              ],
+              "criteria": "{{1}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "applicableOn": "saveNotice",
+      "rules": [
+        {
+          "effect": "SHOW",
+          "conditionList": [
+            {
+              "expressions": [
+                {
+                  "id": 1,
+                  "leftOperand": {
+                    "field": "screenData.saveNotice.visibleMode",
+                    "valueLoadType": "VALUE"
+                  },
+                  "operator": "EQUAL",
+                  "rightOperand": {
+                    "valueReplacePolicy": "SELF",
+                    "value": "SHOW"
+                  }
+                }
+              ],
+              "criteria": "{{1}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "applicableOn": "editorNotes",
+      "rules": [
+        {
+          "effect": "CUS_READONLY",
+          "config": { "otherwise": false },
+          "conditionList": [
+            {
+              "expressions": [
+                {
+                  "id": 1,
+                  "leftOperand": {
+                    "field": "screenData.editor.active",
+                    "valueLoadType": "VALUE"
+                  },
+                  "operator": "EQUAL",
+                  "rightOperand": {
+                    "valueReplacePolicy": "SELF",
+                    "value": "false"
+                  }
+                }
+              ],
+              "criteria": "{{1}}"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}