{
  "custom": {
    "key_1": "value",
    "screen": {
      "is_system": false,
      "menu_group": "",
      "mode": "new",
      "name": "",
      "roles": "",
      "screen_id": 0
    },
    "unsavedChanges": false,
    "widgetsChanged": false
  },
  "params": {},
  "propConfig": {
    "custom.key_1": {
      "persistent": true
    },
    "custom.screen": {
      "persistent": true
    },
    "custom.unsavedChanges": {
      "binding": {
        "config": {
          "expression": "{this.custom.screen.name}!\u003d{/root/TextField_Name.props.text}\n|| {this.custom.screen.menu_group}!\u003d{/root/CoordinateContainer_MenuGroup/FlexContainer_MenuGroup/TextField_MenuGroup.props.text}\n|| {this.custom.widgetsChanged}"
        },
        "type": "expr"
      },
      "persistent": true
    },
    "custom.widgetsChanged": {
      "binding": {
        "config": {
          "path": "./Dropdown.props.value"
        },
        "transforms": [
          {
            "code": "\treturn False #reset every time new screen is loaded.",
            "type": "script"
          }
        ],
        "type": "property"
      },
      "onChange": {
        "enabled": null,
        "script": "\tsystem.perspective.sendMessage(\"unsavedChanges\",currentValue,\u0027page\u0027)"
      },
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "width": 518
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "lbl_screenSettings"
        },
        "position": {
          "basis": "96px"
        },
        "props": {
          "text": "Screen Settings",
          "textStyle": {
            "fontSize": 22,
            "fontWeight": "normal",
            "textAlign": "center"
          }
        },
        "type": "ia.display.label"
      },
      {
        "custom": {
          "unsavedChanges": false
        },
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\tif self.custom.unsavedChanges \u003d\u003d True:\n\t\tsystem.perspective.openPopup(\n\t\t\t\u0027Error\u0027,\n\t\t\t\u0027Popup/Error\u0027,\n\t\t\tparams \u003d {\n\t\t\t\t\u0027message\u0027:\u0027Cancel or Save Screen changes to continue\u0027\n\t\t\t},\n\t\t\tmodal \u003d True\n\t\t)\n\n\t"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "drp_selectScreen"
        },
        "position": {
          "basis": "40px"
        },
        "propConfig": {
          "props.options": {
            "binding": {
              "config": {
                "path": "session.props.auth.user.roles"
              },
              "transforms": [
                {
                  "code": "\t\n\tfilter \u003d system.mes.object.filter.createFilter()\n\tfilter.setMESObjectTypeName(\u0027Site\u0027)\n\tlist \u003d system.mes.searchMESObjects(filter)\n\t\n\tsites \u003d [\u0027Home\u0027, \u0027Line Summary\u0027, \u0027Run Control\u0027]\n\n\tresults\u003dsystem.db.runNamedQuery(shared.mes.util.DB_TYPE + \"/screen/Get Screen IDs and Names\")\n\tpyds \u003d system.dataset.toPyDataSet(results)\n\n\toptions\u003d[{\n\t\t\"value\": 0,\n\t\t\"label\": \"(New Screen)\"\n\t}]\n\t\n\tfor screen in pyds:\n\t\tif not ( str(screen[\u0027name\u0027]) in sites and screen[\u0027menu_group\u0027] \u003d\u003d \"\"):\n\t\t\tmenu_group \u003d screen[\u0027menu_group\u0027]\n\t\t\tif \"Home\" in screen[\u0027name\u0027]:\n\t\t\t\tmenu_group \u003d screen[\u0027name\u0027].split(\" H\")[0]\n\t\t\toptions.append({\n\t\t\t\t\"value\": screen[\u0027screen_id\u0027],\n\t\t\t\t\"label\": \"%s -\u003e %s\" % (menu_group, screen[\u0027name\u0027])\n\t\t\t})\n\t\t\t\n\treturn options",
                  "type": "script"
                }
              ],
              "type": "property"
            }
          },
          "props.value": {
            "persistent": true
          }
        },
        "props": {
          "placeholder": {
            "text": "Select Screen"
          },
          "value": 0
        },
        "scripts": {
          "customMethods": [],
          "extensionFunctions": null,
          "messageHandlers": [
            {
              "messageType": "unsavedChanges",
              "pageScope": true,
              "script": "\tself.custom.unsavedChanges\u003dpayload",
              "sessionScope": false,
              "viewScope": false
            }
          ]
        },
        "type": "ia.input.dropdown"
      },
      {
        "meta": {
          "name": "lbl_screenName"
        },
        "position": {
          "basis": "30px"
        },
        "props": {
          "text": "Screen Name"
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "TextField_Name"
        },
        "position": {
          "basis": "40px"
        },
        "propConfig": {
          "props.enabled": {
            "binding": {
              "config": {
                "expression": "!{parent.custom.screen.is_system} \u0026\u0026 {parent.custom.screen.mode}!\u003d\"unselected\""
              },
              "type": "expr"
            },
            "persistent": true
          },
          "props.text": {
            "binding": {
              "config": {
                "path": "parent.custom.screen.name"
              },
              "type": "property"
            },
            "persistent": true
          }
        },
        "props": {
          "deferUpdates": false
        },
        "type": "ia.input.text-field"
      },
      {
        "meta": {
          "name": "lbl_menuPath"
        },
        "position": {
          "basis": "30px"
        },
        "props": {
          "text": "Menu Path"
        },
        "type": "ia.display.label"
      },
      {
        "children": [
          {
            "meta": {
              "name": "Dropdown_MenuGroup"
            },
            "position": {
              "height": "100%",
              "width": "100%"
            },
            "propConfig": {
              "props.options": {
                "binding": {
                  "config": {
                    "path": "session.props.auth.user.roles"
                  },
                  "overlayOptOut": true,
                  "transforms": [
                    {
                      "code": "\t\n\tnestedList \u003d shared.mes.menu.getMenuItems()\n\t\n\tdef findFolders(nestedList, menuList, path):\n\t\tif (nestedList \u003d\u003d []):\n\t\t\treturn nestedList\n\t \t\n\t\t# to check if item is a folder\n\t\t# screens have a target path, folders do not\n\t\tif (nestedList[0][\"target\"] \u003d\u003d \"\"):\n\n\t\t\tfolderPath \u003d path\n\t\t\t\n\t\t\t#if path not empty, then it is a nested folder\n\t\t\tif (folderPath !\u003d \"\"):\n\t\t\t\tfolderPath +\u003d \"/\"\n\t\t\t\t\n\t\t\tfolderPath +\u003d nestedList[0][\"label\"][\"text\"]\n\t\t\tmenuList.append( {\"value\" : folderPath, \"label\" : folderPath } )\n\n\t\t\t# first: recursion inside folder contents\n\t\t\t# secound: recursion on rest of the list, nested\n\t\t\treturn findFolders(nestedList[0][\"items\"], menuList, folderPath) \\\n\t\t\t\t+ findFolders(nestedList[1:], menuList, path)\n\t \n\t\t# recursion for rest of the list, the screens\n\t\treturn nestedList[1:] + findFolders(nestedList[1:], menuList, path)\n\n\tmenuList \u003d []\n\tfindFolders(nestedList, menuList, \"\" )\n\t\n\treturn menuList",
                      "type": "script"
                    }
                  ],
                  "type": "property"
                }
              },
              "props.value": {
                "binding": {
                  "config": {
                    "path": "/root.custom.screen.menu_group"
                  },
                  "type": "property"
                }
              }
            },
            "scripts": {
              "customMethods": [],
              "extensionFunctions": null,
              "messageHandlers": [
                {
                  "messageType": "screensChanged",
                  "pageScope": true,
                  "script": "\t# implement your handler here\n\tself.refreshBinding(\"props.options\")",
                  "sessionScope": true,
                  "viewScope": false
                }
              ]
            },
            "type": "ia.input.dropdown"
          },
          {
            "children": [
              {
                "meta": {
                  "name": "TextField_MenuGroup"
                },
                "position": {
                  "basis": "100%"
                },
                "propConfig": {
                  "props.text": {
                    "binding": {
                      "config": {
                        "path": ".../Dropdown_MenuGroup.props.value"
                      },
                      "type": "property"
                    }
                  }
                },
                "props": {
                  "style": {
                    "marginBottom": 0,
                    "marginLeft": 0,
                    "marginRight": 40,
                    "marginTop": 0,
                    "pointerEvents": "auto"
                  }
                },
                "type": "ia.input.text-field"
              }
            ],
            "meta": {
              "name": "FlexContainer_MenuGroup"
            },
            "position": {
              "height": "100%",
              "width": "100%"
            },
            "props": {
              "style": {
                "pointerEvents": "none"
              }
            },
            "type": "ia.container.flex"
          },
          {
            "meta": {
              "name": "Block_MenuGroup"
            },
            "position": {
              "height": "100%",
              "width": "100%"
            },
            "propConfig": {
              "meta.visible": {
                "binding": {
                  "config": {
                    "expression": "! (!{/root.custom.screen.is_system} \u0026\u0026 {/root.custom.screen.mode}!\u003d\"unselected\")\r\n"
                  },
                  "type": "expr"
                }
              }
            },
            "props": {
              "mode": "percent",
              "style": {
                "backgroundColor": "#00000040"
              }
            },
            "type": "ia.container.coord"
          }
        ],
        "meta": {
          "name": "CoordinateContainer_MenuGroup",
          "tooltip": {
            "enabled": true
          }
        },
        "position": {
          "basis": "40px"
        },
        "type": "ia.container.coord"
      },
      {
        "meta": {
          "name": "lbl_spacer1"
        },
        "position": {
          "basis": "30px"
        },
        "type": "ia.display.label"
      },
      {
        "events": {
          "component": {
            "onActionPerformed": {
              "config": {
                "script": "\n\tscreenId \u003d self.getSibling(\"drp_selectScreen\").props.value\n\tname \u003d self.getSibling(\"TextField_Name\").props.text\n\tmenuGroup \u003d self.parent.getChild(\"CoordinateContainer_MenuGroup\").getChild(\"FlexContainer_MenuGroup\").getChild(\"TextField_MenuGroup\").props.text\n\t\n\tpayload \u003d {\n\t\t\"screen_id\": screenId,\n\t\t\"name\": name,\n\t\t\"menu_group\": menuGroup\n\t}\n\tsystem.perspective.sendMessage(\u0027saveScreen\u0027, payload, \u0027page\u0027)"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Button-Save"
        },
        "props": {
          "image": {
            "position": "center"
          },
          "style": {
            "classes": "Buttons/Large_Button",
            "height": "50px",
            "width": "180px"
          },
          "text": "Save Changes"
        },
        "type": "ia.input.button"
      },
      {
        "meta": {
          "name": "lbl_spacer2"
        },
        "position": {
          "basis": "30px"
        },
        "type": "ia.display.label"
      },
      {
        "custom": {
          "key": "value"
        },
        "events": {
          "component": {
            "onActionPerformed": {
              "config": {
                "script": "\t\n\tscreenId \u003d self.getSibling(\"drp_selectScreen\").props.value\n\tname\u003dself.parent.custom.screen.name\n\tmenuGroup\u003dself.parent.custom.screen.menu_group\n\t\n\tsystem.perspective.openPopup(\n\t\tid\u003d\"Confirm\",\n\t\tview\u003d\"Popup/Confirm\",\n\t\tparams\u003d{\n\t\t\t\"event_message_type\": \"deleteScreen\",\n\t\t\t\"event_payload\": {\"screen_id\": screenId},\n\t\t\t\"text\":\"Delete screen {} -\u003e {}\".format(menuGroup,name)\n\t\t},\n\t\tmodal\u003dTrue,\n\t\tshowCloseIcon\u003dTrue,\n\t\tresizable\u003dFalse,\n\t\toverlayDismiss\u003dTrue\n\t)"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Button-Remove"
        },
        "propConfig": {
          "props.enabled": {
            "binding": {
              "config": {
                "expression": "!{parent.custom.screen.is_system} \u0026\u0026 {parent.custom.screen.screen_id}\u003e0"
              },
              "type": "expr"
            },
            "persistent": true
          }
        },
        "props": {
          "enabled": false,
          "image": {
            "position": "center"
          },
          "style": {
            "classes": "Buttons/Large_Button",
            "height": "50px",
            "width": "180px"
          },
          "text": "Remove Screen"
        },
        "type": "ia.input.button"
      },
      {
        "meta": {
          "name": "lbl_spacer3"
        },
        "position": {
          "basis": "30px"
        },
        "type": "ia.display.label"
      },
      {
        "events": {
          "component": {
            "onActionPerformed": {
              "config": {
                "script": "\tdropdown\u003dself.getSibling(\"drp_selectScreen\")\n\t#trigger bindings and change listeners by setting the value.\n\tdropdown.props.value\u003ddropdown.props.value"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Button-Cancel"
        },
        "propConfig": {
          "props.enabled": {
            "binding": {
              "config": {
                "expression": "{parent.custom.unsavedChanges}"
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "image": {
            "position": "center"
          },
          "style": {
            "classes": "Buttons/Large_Button",
            "height": "50px",
            "marginRight": 22,
            "width": "180px"
          },
          "text": "Cancel Changes"
        },
        "type": "ia.input.button"
      }
    ],
    "meta": {
      "name": "root"
    },
    "propConfig": {
      "custom.screen": {
        "binding": {
          "config": {
            "expression": "{./drp_selectScreen.props.value}"
          },
          "transforms": [
            {
              "code": "\tif value is None:\n\t\tscreenData\u003d{\n\t\t\t\t\"screen_id\":0,\n\t\t\t\t\"name\": \"\",\n\t\t\t\t\"menu_group\":\"\",\n\t\t\t\t\"is_system\": False,\n\t\t\t\t\"mode\":\"unselected\"\n\t\t\t} \n\telif value\u003d\u003d0:\n\t\tscreenData\u003d{\n\t\t\t\"screen_id\":0,\n\t\t\t\"name\": \"\",\n\t\t\t\"menu_group\":\"\",\n\t\t\t\"is_system\": False,\n\t\t\t\"mode\":\"new\"\n\t\t}\t   \n\telse:\n\t\tresults\u003dsystem.db.runNamedQuery(shared.mes.util.DB_TYPE + \"/screen/Get Screen without widgets\",{\"screen_id\":value})\n\t\tif results.rowCount:\n\t\t\tscreenData\u003d{\n\t\t\t\t\"screen_id\": results.getValueAt(0,\"screen_id\"),\n\t\t\t\t\"name\": results.getValueAt(0,\"name\"),\n\t\t\t\t\"menu_group\": results.getValueAt(0,\"menu_group\"),\n\t\t\t\t\"is_system\": bool(results.getValueAt(0,\"is_system\")),\n\t\t\t\t\"mode\": \"edit\"\n\t\t\t}\n\t\telse:\n\t\t\tscreenData\u003d{\n\t\t\t\t\"screen_id\":0,\n\t\t\t\t\"name\": \"\",\n\t\t\t\t\"menu_group\":\"\",\n\t\t\t\t\"is_system\": False,\n\t\t\t\t\"mode\":\"unselected\"\n\t\t\t}\n\t\t\t\n\tsystem.perspective.sendMessage(\u0027loadScreen\u0027, {\"screen_id\":value}, \u0027page\u0027)\n\treturn screenData\n ",
              "type": "script"
            }
          ],
          "type": "expr"
        }
      },
      "custom.unsavedChanges": {
        "binding": {
          "config": {
            "expression": "{this.custom.screen.name}!\u003d{./TextField_Name.props.text} \n|| {this.custom.screen.menu_group}!\u003d{./CoordinateContainer_MenuGroup/FlexContainer_MenuGroup/TextField_MenuGroup.props.text}\n|| {this.custom.widgetsChanged}\n"
          },
          "type": "expr"
        }
      },
      "custom.widgetsChanged": {
        "binding": {
          "config": {
            "path": "./Dropdown.props.value"
          },
          "transforms": [
            {
              "code": "\treturn False #reset every time new screen is loaded.",
              "type": "script"
            }
          ],
          "type": "property"
        }
      }
    },
    "props": {
      "direction": "column",
      "style": {
        "backgroundColor": "#FCFCFC",
        "paddingLeft": 20,
        "paddingRight": 20
      }
    },
    "scripts": {
      "customMethods": [],
      "extensionFunctions": null,
      "messageHandlers": [
        {
          "messageType": "screensChanged",
          "pageScope": false,
          "script": "\tdropdown\u003dself.getChild(\"drp_selectScreen\")\n\tdropdown.refreshBinding(\"props.options\")\n\tif payload[\u0027screen_id\u0027]:\n\t\tdropdown.props.value\u003dpayload[\u0027screen_id\u0027]\n\telse:\n\t\tdropdown.props.value\u003dNone",
          "sessionScope": true,
          "viewScope": false
        },
        {
          "messageType": "showSettings",
          "pageScope": false,
          "script": "\tsystem.perspective.openDock(\u0027screen_settings\u0027)\n\tself.getChild(\"drp_selectScreen\").props.value \u003d None\n\tself.getChild(\"CoordinateContainer_MenuGroup\").getChild(\"FlexContainer_MenuGroup\").getChild(\"TextField_MenuGroup\").props.text \u003d \u0027\u0027\n\tself.getChild(\"TextField_Name\").props.text \u003d \u0027\u0027",
          "sessionScope": true,
          "viewScope": false
        },
        {
          "messageType": "widgetsChanged",
          "pageScope": true,
          "script": "\tself.custom.widgetsChanged\u003dTrue",
          "sessionScope": false,
          "viewScope": false
        }
      ]
    },
    "type": "ia.container.flex"
  }
}