# File Tree Expandable hierarchies for project resources and equipment. ## Installation Download: /api/catalog/file-tree/download Ignition Perspective 8.3. In a development project, choose Designer > File > Import and select the ZIP. Preserve the view and style-class paths. Review resource conflicts before replacing anything. Append stylesheet-snippet.css to Perspective Styles > stylesheet.css (enable Advanced Stylesheet). Preserve existing CSS. This supporting file is not imported automatically. Add an Embedded View (ia.display.view), set props.path to Viewcraft/Components/UI/FileTree/FileTree, and configure props.params using the contract below. Connect your own data in the host view. The package does not include live tags, page configuration or Gateway settings. ## Parameters Types are inferred from saved defaults; directions come from native propConfig. These are not full schemas or validated ranges. | Parameter | Type | Direction | Default | | --- | --- | --- | --- | | title | string | input | "Activos · Planta Demo" | | size | string | input | "md" | | disabled | boolean | input | false | | selectedId | string | inout | "bomba-01" | | selectedLabel | string | inout | "Bomba-01" | | toggleIconType | string | input | "chevron" | | indent | number | input | 20 | | showIcons | boolean | input | true | | indicator | boolean | input | false | | iconFolder | string | input | "▦" | | iconLeaf | string | input | "◇" | | expPlanta | boolean | inout | true | | expAreaNorte | boolean | inout | true | | expLineaA | boolean | inout | true | | expLineaB | boolean | inout | false | | expAreaSur | boolean | inout | false | | expLineaC | boolean | inout | false | | labelPlanta | string | input | "Planta Demo" | | labelAreaNorte | string | input | "Área Norte" | | labelLineaA | string | input | "Línea A" | | labelBomba01 | string | input | "Bomba-01" | | labelBomba02 | string | input | "Bomba-02" | | labelValvula12 | string | input | "Válvula-12" | | labelLineaB | string | input | "Línea B" | | labelMotor03 | string | input | "Motor-03" | | labelAreaSur | string | input | "Área Sur" | | labelLineaC | string | input | "Línea C" | | labelTanque01 | string | input | "Tanque-01" | ## Embedded View usage ```json { "type": "ia.display.view", "props": { "path": "Viewcraft/Components/UI/FileTree/FileTree", "params": { "title": "Activos · Planta Demo", "size": "md", "disabled": false, "selectedId": "bomba-01", "selectedLabel": "Bomba-01", "toggleIconType": "chevron", "indent": 20, "showIcons": true, "indicator": false, "iconFolder": "▦", "iconLeaf": "◇", "expPlanta": true, "expAreaNorte": true, "expLineaA": true, "expLineaB": false, "expAreaSur": false, "expLineaC": false, "labelPlanta": "Planta Demo", "labelAreaNorte": "Área Norte", "labelLineaA": "Línea A", "labelBomba01": "Bomba-01", "labelBomba02": "Bomba-02", "labelValvula12": "Válvula-12", "labelLineaB": "Línea B", "labelMotor03": "Motor-03", "labelAreaSur": "Área Sur", "labelLineaC": "Línea C", "labelTanque01": "Tanque-01" }, "useDefaultViewWidth": false, "useDefaultViewHeight": false } } ``` ## Verification Source and archive hashes are checked. Designer import acceptance has not been completed for this archive; test in your development project before production. ## Files ### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/FileTree/FileTree/view.json ```json { "custom": {}, "params": { "title": "Activos · Planta Demo", "size": "md", "disabled": false, "selectedId": "bomba-01", "selectedLabel": "Bomba-01", "toggleIconType": "chevron", "indent": 20, "showIcons": true, "indicator": false, "iconFolder": "▦", "iconLeaf": "◇", "expPlanta": true, "expAreaNorte": true, "expLineaA": true, "expLineaB": false, "expAreaSur": false, "expLineaC": false, "labelPlanta": "Planta Demo", "labelAreaNorte": "Área Norte", "labelLineaA": "Línea A", "labelBomba01": "Bomba-01", "labelBomba02": "Bomba-02", "labelValvula12": "Válvula-12", "labelLineaB": "Línea B", "labelMotor03": "Motor-03", "labelAreaSur": "Área Sur", "labelLineaC": "Línea C", "labelTanque01": "Tanque-01" }, "propConfig": { "params.title": { "paramDirection": "input", "persistent": true }, "params.size": { "paramDirection": "input", "persistent": true }, "params.disabled": { "paramDirection": "input", "persistent": true }, "params.selectedId": { "paramDirection": "inout", "persistent": true }, "params.selectedLabel": { "paramDirection": "inout", "persistent": true }, "params.toggleIconType": { "paramDirection": "input", "persistent": true }, "params.indent": { "paramDirection": "input", "persistent": true }, "params.showIcons": { "paramDirection": "input", "persistent": true }, "params.indicator": { "paramDirection": "input", "persistent": true }, "params.iconFolder": { "paramDirection": "input", "persistent": true }, "params.iconLeaf": { "paramDirection": "input", "persistent": true }, "params.expPlanta": { "paramDirection": "inout", "persistent": true }, "params.expAreaNorte": { "paramDirection": "inout", "persistent": true }, "params.expLineaA": { "paramDirection": "inout", "persistent": true }, "params.expLineaB": { "paramDirection": "inout", "persistent": true }, "params.expAreaSur": { "paramDirection": "inout", "persistent": true }, "params.expLineaC": { "paramDirection": "inout", "persistent": true }, "params.labelPlanta": { "paramDirection": "input", "persistent": true }, "params.labelAreaNorte": { "paramDirection": "input", "persistent": true }, "params.labelLineaA": { "paramDirection": "input", "persistent": true }, "params.labelBomba01": { "paramDirection": "input", "persistent": true }, "params.labelBomba02": { "paramDirection": "input", "persistent": true }, "params.labelValvula12": { "paramDirection": "input", "persistent": true }, "params.labelLineaB": { "paramDirection": "input", "persistent": true }, "params.labelMotor03": { "paramDirection": "input", "persistent": true }, "params.labelAreaSur": { "paramDirection": "input", "persistent": true }, "params.labelLineaC": { "paramDirection": "input", "persistent": true }, "params.labelTanque01": { "paramDirection": "input", "persistent": true } }, "props": { "defaultSize": { "width": 280, "height": 280 } }, "root": { "type": "ia.container.flex", "version": 0, "meta": { "name": "FileTreeRoot" }, "props": { "direction": "column", "style": { "classes": "vc/file-tree-shell vc-r-tree" } }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "FieldLabel" }, "props": { "text": "Activos · Planta Demo", "style": { "classes": "vc/file-tree-label" } }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.title" } } }, "meta.visible": { "binding": { "type": "expr", "config": { "expression": "len(coalesce({view.params.title}, '')) > 0" } } } } }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "Tree" }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "props": { "direction": "column", "alignItems": "stretch", "style": { "classes": "vc/file-tree vc/file-tree-indent-step-20" } }, "propConfig": { "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "if(coalesce({view.params.size}, \"md\") = \"sm\", \"vc/file-tree vc/file-tree-sm\", \"vc/file-tree\") + (if(coalesce({view.params.showIcons}, true), \"\", \" vc/file-tree-no-icons\")) + (if(coalesce({view.params.toggleIconType}, \"chevron\") = \"plus-minus\", \" vc/file-tree-plusminus\", \"\")) + (if(coalesce({view.params.indicator}, false), \" vc-r-guides\", \"\")) + (if(coalesce({view.params.indent}, 20) = 12, \" vc/file-tree-indent-step-12\", if(coalesce({view.params.indent}, 20) = 16, \" vc/file-tree-indent-step-16\", if(coalesce({view.params.indent}, 20) = 24, \" vc/file-tree-indent-step-24\", \" vc/file-tree-indent-step-20\"))))" } } } }, "children": [ { "type": "ia.input.button", "version": 0, "meta": { "name": "Row_planta" }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "props": { "text": "Planta Demo", "style": { "classes": "vc-r-tree-row" } }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "true" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "((\"vc/file-tree-row vc/file-tree-indent-0\") + (if(coalesce({view.params.selectedId}, \"\") = \"planta\", \" vc/file-tree-row-selected\", \"\")) + (if(coalesce({view.params.disabled}, false), \" vc/file-tree-row-disabled\", \"\")) + \" vc-r-tree-row\" + if({view.params.showIcons}, \" vc-r-tree-icons\", \"\") + if({view.params.expPlanta}, \" vc-r-folder vc-r-expanded\", \" vc-r-folder\") + if({view.params.toggleIconType} = \"plus-minus\", \" vc-r-plusminus\", \"\")) + if(true, \"\", \" vc-r-hidden\")" } } }, "props.style.marginLeft": { "binding": { "type": "expr", "config": { "expression": "toString(0 * {view.params.indent}) + \"px\"" } } }, "props.text": { "binding": { "type": "property", "config": { "path": "view.params.labelPlanta" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.selectedId = 'planta'\n\tself.view.params.selectedLabel = self.view.params.labelPlanta\n\tself.view.params.expPlanta = not self.view.params.expPlanta\n" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tkey = event.key\n\tif key in ('ArrowDown', 'ArrowUp', 'Home', 'End'):\n\t\trows = [c for c in self.parent.getChildren() if c.meta.visible]\n\t\tindex = next((i for i,c in enumerate(rows) if c.meta.name == self.meta.name), 0)\n\t\tindex = 0 if key == 'Home' else len(rows)-1 if key == 'End' else max(0, min(len(rows)-1, index + (1 if key == 'ArrowDown' else -1)))\n\t\trows[index].focus()\n\telif key in (\"ArrowLeft\", \"ArrowRight\"):\n\t\tself.view.params.expPlanta = key == \"ArrowRight\"\n" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "Row_area_norte" }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "props": { "text": "Área Norte", "style": { "classes": "vc-r-tree-row" } }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.expPlanta}, false)" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "((\"vc/file-tree-row vc/file-tree-indent-1\") + (if(coalesce({view.params.selectedId}, \"\") = \"area-norte\", \" vc/file-tree-row-selected\", \"\")) + (if(coalesce({view.params.disabled}, false), \" vc/file-tree-row-disabled\", \"\")) + \" vc-r-tree-row\" + if({view.params.showIcons}, \" vc-r-tree-icons\", \"\") + if({view.params.expAreaNorte}, \" vc-r-folder vc-r-expanded\", \" vc-r-folder\") + if({view.params.toggleIconType} = \"plus-minus\", \" vc-r-plusminus\", \"\")) + if(coalesce({view.params.expPlanta}, false), \"\", \" vc-r-hidden\")" } } }, "props.style.marginLeft": { "binding": { "type": "expr", "config": { "expression": "toString(1 * {view.params.indent}) + \"px\"" } } }, "props.text": { "binding": { "type": "property", "config": { "path": "view.params.labelAreaNorte" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.selectedId = 'area-norte'\n\tself.view.params.selectedLabel = self.view.params.labelAreaNorte\n\tself.view.params.expAreaNorte = not self.view.params.expAreaNorte\n" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tkey = event.key\n\tif key in ('ArrowDown', 'ArrowUp', 'Home', 'End'):\n\t\trows = [c for c in self.parent.getChildren() if c.meta.visible]\n\t\tindex = next((i for i,c in enumerate(rows) if c.meta.name == self.meta.name), 0)\n\t\tindex = 0 if key == 'Home' else len(rows)-1 if key == 'End' else max(0, min(len(rows)-1, index + (1 if key == 'ArrowDown' else -1)))\n\t\trows[index].focus()\n\telif key in (\"ArrowLeft\", \"ArrowRight\"):\n\t\tself.view.params.expAreaNorte = key == \"ArrowRight\"\n" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "Row_linea_a" }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "props": { "text": "Línea A", "style": { "classes": "vc-r-tree-row" } }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false)" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "((\"vc/file-tree-row vc/file-tree-indent-2\") + (if(coalesce({view.params.selectedId}, \"\") = \"linea-a\", \" vc/file-tree-row-selected\", \"\")) + (if(coalesce({view.params.disabled}, false), \" vc/file-tree-row-disabled\", \"\")) + \" vc-r-tree-row\" + if({view.params.showIcons}, \" vc-r-tree-icons\", \"\") + if({view.params.expLineaA}, \" vc-r-folder vc-r-expanded\", \" vc-r-folder\") + if({view.params.toggleIconType} = \"plus-minus\", \" vc-r-plusminus\", \"\")) + if(coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false), \"\", \" vc-r-hidden\")" } } }, "props.style.marginLeft": { "binding": { "type": "expr", "config": { "expression": "toString(2 * {view.params.indent}) + \"px\"" } } }, "props.text": { "binding": { "type": "property", "config": { "path": "view.params.labelLineaA" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.selectedId = 'linea-a'\n\tself.view.params.selectedLabel = self.view.params.labelLineaA\n\tself.view.params.expLineaA = not self.view.params.expLineaA\n" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tkey = event.key\n\tif key in ('ArrowDown', 'ArrowUp', 'Home', 'End'):\n\t\trows = [c for c in self.parent.getChildren() if c.meta.visible]\n\t\tindex = next((i for i,c in enumerate(rows) if c.meta.name == self.meta.name), 0)\n\t\tindex = 0 if key == 'Home' else len(rows)-1 if key == 'End' else max(0, min(len(rows)-1, index + (1 if key == 'ArrowDown' else -1)))\n\t\trows[index].focus()\n\telif key in (\"ArrowLeft\", \"ArrowRight\"):\n\t\tself.view.params.expLineaA = key == \"ArrowRight\"\n" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "Row_bomba_01" }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "props": { "text": "Bomba-01", "style": { "classes": "vc-r-tree-row" } }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false) && coalesce({view.params.expLineaA}, false)" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "((\"vc/file-tree-row vc/file-tree-indent-3\") + (if(coalesce({view.params.selectedId}, \"\") = \"bomba-01\", \" vc/file-tree-row-selected\", \"\")) + (if(coalesce({view.params.disabled}, false), \" vc/file-tree-row-disabled\", \"\")) + \" vc-r-tree-row\" + if({view.params.showIcons}, \" vc-r-tree-icons\", \"\")) + if(coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false) && coalesce({view.params.expLineaA}, false), \"\", \" vc-r-hidden\")" } } }, "props.style.marginLeft": { "binding": { "type": "expr", "config": { "expression": "toString(3 * {view.params.indent}) + \"px\"" } } }, "props.text": { "binding": { "type": "property", "config": { "path": "view.params.labelBomba01" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.selectedId = 'bomba-01'\n\tself.view.params.selectedLabel = self.view.params.labelBomba01\n" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tkey = event.key\n\tif key in ('ArrowDown', 'ArrowUp', 'Home', 'End'):\n\t\trows = [c for c in self.parent.getChildren() if c.meta.visible]\n\t\tindex = next((i for i,c in enumerate(rows) if c.meta.name == self.meta.name), 0)\n\t\tindex = 0 if key == 'Home' else len(rows)-1 if key == 'End' else max(0, min(len(rows)-1, index + (1 if key == 'ArrowDown' else -1)))\n\t\trows[index].focus()\n" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "Row_bomba_02" }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "props": { "text": "Bomba-02", "style": { "classes": "vc-r-tree-row" } }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false) && coalesce({view.params.expLineaA}, false)" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "((\"vc/file-tree-row vc/file-tree-indent-3\") + (if(coalesce({view.params.selectedId}, \"\") = \"bomba-02\", \" vc/file-tree-row-selected\", \"\")) + (if(coalesce({view.params.disabled}, false), \" vc/file-tree-row-disabled\", \"\")) + \" vc-r-tree-row\" + if({view.params.showIcons}, \" vc-r-tree-icons\", \"\")) + if(coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false) && coalesce({view.params.expLineaA}, false), \"\", \" vc-r-hidden\")" } } }, "props.style.marginLeft": { "binding": { "type": "expr", "config": { "expression": "toString(3 * {view.params.indent}) + \"px\"" } } }, "props.text": { "binding": { "type": "property", "config": { "path": "view.params.labelBomba02" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.selectedId = 'bomba-02'\n\tself.view.params.selectedLabel = self.view.params.labelBomba02\n" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tkey = event.key\n\tif key in ('ArrowDown', 'ArrowUp', 'Home', 'End'):\n\t\trows = [c for c in self.parent.getChildren() if c.meta.visible]\n\t\tindex = next((i for i,c in enumerate(rows) if c.meta.name == self.meta.name), 0)\n\t\tindex = 0 if key == 'Home' else len(rows)-1 if key == 'End' else max(0, min(len(rows)-1, index + (1 if key == 'ArrowDown' else -1)))\n\t\trows[index].focus()\n" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "Row_valvula_12" }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "props": { "text": "Válvula-12", "style": { "classes": "vc-r-tree-row" } }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false) && coalesce({view.params.expLineaA}, false)" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "((\"vc/file-tree-row vc/file-tree-indent-3\") + (if(coalesce({view.params.selectedId}, \"\") = \"valvula-12\", \" vc/file-tree-row-selected\", \"\")) + (if(coalesce({view.params.disabled}, false), \" vc/file-tree-row-disabled\", \"\")) + \" vc-r-tree-row\" + if({view.params.showIcons}, \" vc-r-tree-icons\", \"\")) + if(coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false) && coalesce({view.params.expLineaA}, false), \"\", \" vc-r-hidden\")" } } }, "props.style.marginLeft": { "binding": { "type": "expr", "config": { "expression": "toString(3 * {view.params.indent}) + \"px\"" } } }, "props.text": { "binding": { "type": "property", "config": { "path": "view.params.labelValvula12" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.selectedId = 'valvula-12'\n\tself.view.params.selectedLabel = self.view.params.labelValvula12\n" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tkey = event.key\n\tif key in ('ArrowDown', 'ArrowUp', 'Home', 'End'):\n\t\trows = [c for c in self.parent.getChildren() if c.meta.visible]\n\t\tindex = next((i for i,c in enumerate(rows) if c.meta.name == self.meta.name), 0)\n\t\tindex = 0 if key == 'Home' else len(rows)-1 if key == 'End' else max(0, min(len(rows)-1, index + (1 if key == 'ArrowDown' else -1)))\n\t\trows[index].focus()\n" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "Row_linea_b" }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "props": { "text": "Línea B", "style": { "classes": "vc-r-tree-row" } }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false)" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "((\"vc/file-tree-row vc/file-tree-indent-2\") + (if(coalesce({view.params.selectedId}, \"\") = \"linea-b\", \" vc/file-tree-row-selected\", \"\")) + (if(coalesce({view.params.disabled}, false), \" vc/file-tree-row-disabled\", \"\")) + \" vc-r-tree-row\" + if({view.params.showIcons}, \" vc-r-tree-icons\", \"\") + if({view.params.expLineaB}, \" vc-r-folder vc-r-expanded\", \" vc-r-folder\") + if({view.params.toggleIconType} = \"plus-minus\", \" vc-r-plusminus\", \"\")) + if(coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false), \"\", \" vc-r-hidden\")" } } }, "props.style.marginLeft": { "binding": { "type": "expr", "config": { "expression": "toString(2 * {view.params.indent}) + \"px\"" } } }, "props.text": { "binding": { "type": "property", "config": { "path": "view.params.labelLineaB" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.selectedId = 'linea-b'\n\tself.view.params.selectedLabel = self.view.params.labelLineaB\n\tself.view.params.expLineaB = not self.view.params.expLineaB\n" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tkey = event.key\n\tif key in ('ArrowDown', 'ArrowUp', 'Home', 'End'):\n\t\trows = [c for c in self.parent.getChildren() if c.meta.visible]\n\t\tindex = next((i for i,c in enumerate(rows) if c.meta.name == self.meta.name), 0)\n\t\tindex = 0 if key == 'Home' else len(rows)-1 if key == 'End' else max(0, min(len(rows)-1, index + (1 if key == 'ArrowDown' else -1)))\n\t\trows[index].focus()\n\telif key in (\"ArrowLeft\", \"ArrowRight\"):\n\t\tself.view.params.expLineaB = key == \"ArrowRight\"\n" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "Row_motor_03" }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "props": { "text": "Motor-03", "style": { "classes": "vc-r-tree-row" } }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false) && coalesce({view.params.expLineaB}, false)" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "((\"vc/file-tree-row vc/file-tree-indent-3\") + (if(coalesce({view.params.selectedId}, \"\") = \"motor-03\", \" vc/file-tree-row-selected\", \"\")) + (if(coalesce({view.params.disabled}, false), \" vc/file-tree-row-disabled\", \"\")) + \" vc-r-tree-row\" + if({view.params.showIcons}, \" vc-r-tree-icons\", \"\")) + if(coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaNorte}, false) && coalesce({view.params.expLineaB}, false), \"\", \" vc-r-hidden\")" } } }, "props.style.marginLeft": { "binding": { "type": "expr", "config": { "expression": "toString(3 * {view.params.indent}) + \"px\"" } } }, "props.text": { "binding": { "type": "property", "config": { "path": "view.params.labelMotor03" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.selectedId = 'motor-03'\n\tself.view.params.selectedLabel = self.view.params.labelMotor03\n" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tkey = event.key\n\tif key in ('ArrowDown', 'ArrowUp', 'Home', 'End'):\n\t\trows = [c for c in self.parent.getChildren() if c.meta.visible]\n\t\tindex = next((i for i,c in enumerate(rows) if c.meta.name == self.meta.name), 0)\n\t\tindex = 0 if key == 'Home' else len(rows)-1 if key == 'End' else max(0, min(len(rows)-1, index + (1 if key == 'ArrowDown' else -1)))\n\t\trows[index].focus()\n" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "Row_area_sur" }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "props": { "text": "Área Sur", "style": { "classes": "vc-r-tree-row" } }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.expPlanta}, false)" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "((\"vc/file-tree-row vc/file-tree-indent-1\") + (if(coalesce({view.params.selectedId}, \"\") = \"area-sur\", \" vc/file-tree-row-selected\", \"\")) + (if(coalesce({view.params.disabled}, false), \" vc/file-tree-row-disabled\", \"\")) + \" vc-r-tree-row\" + if({view.params.showIcons}, \" vc-r-tree-icons\", \"\") + if({view.params.expAreaSur}, \" vc-r-folder vc-r-expanded\", \" vc-r-folder\") + if({view.params.toggleIconType} = \"plus-minus\", \" vc-r-plusminus\", \"\")) + if(coalesce({view.params.expPlanta}, false), \"\", \" vc-r-hidden\")" } } }, "props.style.marginLeft": { "binding": { "type": "expr", "config": { "expression": "toString(1 * {view.params.indent}) + \"px\"" } } }, "props.text": { "binding": { "type": "property", "config": { "path": "view.params.labelAreaSur" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.selectedId = 'area-sur'\n\tself.view.params.selectedLabel = self.view.params.labelAreaSur\n\tself.view.params.expAreaSur = not self.view.params.expAreaSur\n" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tkey = event.key\n\tif key in ('ArrowDown', 'ArrowUp', 'Home', 'End'):\n\t\trows = [c for c in self.parent.getChildren() if c.meta.visible]\n\t\tindex = next((i for i,c in enumerate(rows) if c.meta.name == self.meta.name), 0)\n\t\tindex = 0 if key == 'Home' else len(rows)-1 if key == 'End' else max(0, min(len(rows)-1, index + (1 if key == 'ArrowDown' else -1)))\n\t\trows[index].focus()\n\telif key in (\"ArrowLeft\", \"ArrowRight\"):\n\t\tself.view.params.expAreaSur = key == \"ArrowRight\"\n" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "Row_linea_c" }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "props": { "text": "Línea C", "style": { "classes": "vc-r-tree-row" } }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaSur}, false)" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "((\"vc/file-tree-row vc/file-tree-indent-2\") + (if(coalesce({view.params.selectedId}, \"\") = \"linea-c\", \" vc/file-tree-row-selected\", \"\")) + (if(coalesce({view.params.disabled}, false), \" vc/file-tree-row-disabled\", \"\")) + \" vc-r-tree-row\" + if({view.params.showIcons}, \" vc-r-tree-icons\", \"\") + if({view.params.expLineaC}, \" vc-r-folder vc-r-expanded\", \" vc-r-folder\") + if({view.params.toggleIconType} = \"plus-minus\", \" vc-r-plusminus\", \"\")) + if(coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaSur}, false), \"\", \" vc-r-hidden\")" } } }, "props.style.marginLeft": { "binding": { "type": "expr", "config": { "expression": "toString(2 * {view.params.indent}) + \"px\"" } } }, "props.text": { "binding": { "type": "property", "config": { "path": "view.params.labelLineaC" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.selectedId = 'linea-c'\n\tself.view.params.selectedLabel = self.view.params.labelLineaC\n\tself.view.params.expLineaC = not self.view.params.expLineaC\n" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tkey = event.key\n\tif key in ('ArrowDown', 'ArrowUp', 'Home', 'End'):\n\t\trows = [c for c in self.parent.getChildren() if c.meta.visible]\n\t\tindex = next((i for i,c in enumerate(rows) if c.meta.name == self.meta.name), 0)\n\t\tindex = 0 if key == 'Home' else len(rows)-1 if key == 'End' else max(0, min(len(rows)-1, index + (1 if key == 'ArrowDown' else -1)))\n\t\trows[index].focus()\n\telif key in (\"ArrowLeft\", \"ArrowRight\"):\n\t\tself.view.params.expLineaC = key == \"ArrowRight\"\n" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "Row_tanque_01" }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "props": { "text": "Tanque-01", "style": { "classes": "vc-r-tree-row" } }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaSur}, false) && coalesce({view.params.expLineaC}, false)" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "((\"vc/file-tree-row vc/file-tree-indent-3\") + (if(coalesce({view.params.selectedId}, \"\") = \"tanque-01\", \" vc/file-tree-row-selected\", \"\")) + (if(coalesce({view.params.disabled}, false), \" vc/file-tree-row-disabled\", \"\")) + \" vc-r-tree-row\" + if({view.params.showIcons}, \" vc-r-tree-icons\", \"\")) + if(coalesce({view.params.expPlanta}, false) && coalesce({view.params.expAreaSur}, false) && coalesce({view.params.expLineaC}, false), \"\", \" vc-r-hidden\")" } } }, "props.style.marginLeft": { "binding": { "type": "expr", "config": { "expression": "toString(3 * {view.params.indent}) + \"px\"" } } }, "props.text": { "binding": { "type": "property", "config": { "path": "view.params.labelTanque01" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tif self.view.params.disabled:\n\t\treturn\n\tself.view.params.selectedId = 'tanque-01'\n\tself.view.params.selectedLabel = self.view.params.labelTanque01\n" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tkey = event.key\n\tif key in ('ArrowDown', 'ArrowUp', 'Home', 'End'):\n\t\trows = [c for c in self.parent.getChildren() if c.meta.visible]\n\t\tindex = next((i for i,c in enumerate(rows) if c.meta.name == self.meta.name), 0)\n\t\tindex = 0 if key == 'Home' else len(rows)-1 if key == 'End' else max(0, min(len(rows)-1, index + (1 if key == 'ArrowDown' else -1)))\n\t\trows[index].focus()\n" } } } } } ] } ] } } ``` ### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/FileTree/FileTree/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "view.json" ] } ``` ### stylesheet-snippet.css ```css [class~="psc-vc/file-tree"], .psc-vc\/file-tree { position: relative !important; display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; width: 100% !important; padding: 4px !important; border-radius: 8px !important; border: 1px solid #27272a !important; background-color: transparent !important; box-sizing: border-box !important; overflow: hidden !important; box-shadow: none !important; filter: none !important; } [class~="psc-vc/file-tree-sm"], .psc-vc\/file-tree-sm { padding: 2px !important; gap: 1px !important; } [class~="psc-vc/file-tree-shell"], .psc-vc\/file-tree-shell { display: flex !important; flex-direction: column !important; gap: 8px !important; min-width: 0 !important; width: 100% !important; overflow: visible !important; } [class~="psc-vc/file-tree-label"], .psc-vc\/file-tree-label { color: var(--vc-muted-fg, #a1a1aa) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 16px !important; padding: 0 !important; margin: 0 !important; } [class~="psc-vc/file-tree-row"], .psc-vc\/file-tree-row { position: relative !important; display: grid !important; grid-template-columns: 16px 16px minmax(0, 1fr) !important; grid-template-rows: 16px !important; align-items: center !important; column-gap: 4px !important; row-gap: 0 !important; width: 100% !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 6px 8px !important; border-radius: 6px !important; border: none !important; background-color: transparent !important; color: var(--vc-muted-fg, #a1a1aa) !important; box-sizing: border-box !important; cursor: pointer !important; user-select: none !important; overflow: hidden !important; box-shadow: none !important; filter: none !important; flex: 0 0 32px !important; transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease !important; } [class~="psc-vc/file-tree-sm"] [class~="psc-vc/file-tree-row"], .psc-vc\/file-tree-sm .psc-vc\/file-tree-row { height: 28px !important; min-height: 28px !important; max-height: 28px !important; padding: 4px 6px !important; border-radius: 6px !important; flex: 0 0 28px !important; } [class~="psc-vc/file-tree-no-icons"] [class~="psc-vc/file-tree-row"], .psc-vc\/file-tree-no-icons .psc-vc\/file-tree-row { grid-template-columns: 16px minmax(0, 1fr) !important; } [class~="psc-vc/file-tree-row"]:hover, .psc-vc\/file-tree-row:hover { background-color: var(--vc-panel, #18181b) !important; color: var(--vc-foreground, #fafafa) !important; } [class~="psc-vc/file-tree-row-selected"], .psc-vc\/file-tree-row-selected { background-color: var(--vc-secondary, #27272a) !important; color: var(--vc-foreground, #fafafa) !important; font-weight: 500 !important; box-shadow: none !important; filter: none !important; } [class~="psc-vc/file-tree-row-selected"]:hover, .psc-vc\/file-tree-row-selected:hover { background-color: var(--vc-secondary, #27272a) !important; color: var(--vc-foreground, #fafafa) !important; } [class~="psc-vc/file-tree-row-disabled"], .psc-vc\/file-tree-row-disabled { opacity: 0.42 !important; cursor: not-allowed !important; pointer-events: none !important; } [class~="psc-vc/file-tree-row"] > [data-component="ia.display.label"] { display: flex !important; flex-direction: row !important; align-items: center !important; align-self: center !important; height: 16px !important; min-height: 16px !important; max-height: 16px !important; padding: 0 !important; margin: 0 !important; border: none !important; box-sizing: border-box !important; overflow: hidden !important; line-height: 16px !important; background: transparent !important; } [class~="psc-vc/file-tree-plusminus"] [class~="psc-vc/file-tree-chevron"], .psc-vc\/file-tree-plusminus .psc-vc\/file-tree-chevron { font-size: 14px !important; font-weight: 600 !important; color: var(--vc-muted-fg, #a1a1aa) !important; } [class~="psc-vc/file-tree-plusminus"] [class~="psc-vc/file-tree-chevron-open"], .psc-vc\/file-tree-plusminus .psc-vc\/file-tree-chevron-open { transform: none !important; color: var(--vc-muted-fg, #a1a1aa) !important; } [class~="psc-vc/file-tree-row-selected"] [class~="psc-vc/file-tree-icon"], .psc-vc\/file-tree-row-selected .psc-vc\/file-tree-icon { color: var(--vc-foreground, #fafafa) !important; } [class~="psc-vc/file-tree-sm"] [class~="psc-vc/file-tree-name"], .psc-vc\/file-tree-sm .psc-vc\/file-tree-name { font-size: 12px !important; } [class~="psc-vc/file-tree-indent-0"], .psc-vc\/file-tree-indent-0 { padding-left: 8px !important; } [class~="psc-vc/file-tree-indent-step-12"] [class~="psc-vc/file-tree-indent-1"], .psc-vc\/file-tree-indent-step-12 .psc-vc\/file-tree-indent-1 { padding-left: calc(8px + 12px) !important; } [class~="psc-vc/file-tree-indent-step-12"] [class~="psc-vc/file-tree-indent-2"], .psc-vc\/file-tree-indent-step-12 .psc-vc\/file-tree-indent-2 { padding-left: calc(8px + 24px) !important; } [class~="psc-vc/file-tree-indent-step-12"] [class~="psc-vc/file-tree-indent-3"], .psc-vc\/file-tree-indent-step-12 .psc-vc\/file-tree-indent-3 { padding-left: calc(8px + 36px) !important; } [class~="psc-vc/file-tree-indent-step-16"] [class~="psc-vc/file-tree-indent-1"], .psc-vc\/file-tree-indent-step-16 .psc-vc\/file-tree-indent-1 { padding-left: calc(8px + 16px) !important; } [class~="psc-vc/file-tree-indent-step-16"] [class~="psc-vc/file-tree-indent-2"], .psc-vc\/file-tree-indent-step-16 .psc-vc\/file-tree-indent-2 { padding-left: calc(8px + 32px) !important; } [class~="psc-vc/file-tree-indent-step-16"] [class~="psc-vc/file-tree-indent-3"], .psc-vc\/file-tree-indent-step-16 .psc-vc\/file-tree-indent-3 { padding-left: calc(8px + 48px) !important; } [class~="psc-vc/file-tree-indent-step-20"] [class~="psc-vc/file-tree-indent-1"], .psc-vc\/file-tree-indent-step-20 .psc-vc\/file-tree-indent-1 { padding-left: calc(8px + 20px) !important; } [class~="psc-vc/file-tree-indent-step-20"] [class~="psc-vc/file-tree-indent-2"], .psc-vc\/file-tree-indent-step-20 .psc-vc\/file-tree-indent-2 { padding-left: calc(8px + 40px) !important; } [class~="psc-vc/file-tree-indent-step-20"] [class~="psc-vc/file-tree-indent-3"], .psc-vc\/file-tree-indent-step-20 .psc-vc\/file-tree-indent-3 { padding-left: calc(8px + 60px) !important; } [class~="psc-vc/file-tree-indent-step-24"] [class~="psc-vc/file-tree-indent-1"], .psc-vc\/file-tree-indent-step-24 .psc-vc\/file-tree-indent-1 { padding-left: calc(8px + 24px) !important; } [class~="psc-vc/file-tree-indent-step-24"] [class~="psc-vc/file-tree-indent-2"], .psc-vc\/file-tree-indent-step-24 .psc-vc\/file-tree-indent-2 { padding-left: calc(8px + 48px) !important; } [class~="psc-vc/file-tree-indent-step-24"] [class~="psc-vc/file-tree-indent-3"], .psc-vc\/file-tree-indent-step-24 .psc-vc\/file-tree-indent-3 { padding-left: calc(8px + 72px) !important; } [class~="psc-vc/file-tree-indicator"] [class~="psc-vc/file-tree-indent-1"]::before, .psc-vc\/file-tree-indicator .psc-vc\/file-tree-indent-1::before, [class~="psc-vc/file-tree-indicator"] [class~="psc-vc/file-tree-indent-2"]::before, .psc-vc\/file-tree-indicator .psc-vc\/file-tree-indent-2::before, [class~="psc-vc/file-tree-indicator"] [class~="psc-vc/file-tree-indent-3"]::before, .psc-vc\/file-tree-indicator .psc-vc\/file-tree-indent-3::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; width: 1px !important; background-color: var(--vc-secondary, #27272a) !important; pointer-events: none !important; } [class~="psc-vc/file-tree-indent-step-20"][class~="psc-vc/file-tree-indicator"] [class~="psc-vc/file-tree-indent-1"]::before, .psc-vc\/file-tree-indent-step-20.psc-vc\/file-tree-indicator .psc-vc\/file-tree-indent-1::before { left: 16px !important; } [class~="psc-vc/file-tree-indent-step-20"][class~="psc-vc/file-tree-indicator"] [class~="psc-vc/file-tree-indent-2"]::before, .psc-vc\/file-tree-indent-step-20.psc-vc\/file-tree-indicator .psc-vc\/file-tree-indent-2::before { left: 36px !important; } [class~="psc-vc/file-tree-indent-step-20"][class~="psc-vc/file-tree-indicator"] [class~="psc-vc/file-tree-indent-3"]::before, .psc-vc\/file-tree-indent-step-20.psc-vc\/file-tree-indicator .psc-vc\/file-tree-indent-3::before { left: 56px !important; } @media (prefers-reduced-motion: reduce) { [class~="psc-vc/file-tree-row"], .psc-vc\/file-tree-row { transition: none !important; } } [class~="psc-vc/file-tree-row"].component-meta-hidden, .psc-vc\/file-tree-row.component-meta-hidden, [class~="psc-vc/file-tree"] .component-meta-hidden { display: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border: none !important; pointer-events: none !important; flex: 0 0 0px !important; } [class~="psc-vc/lab-hmi-page"] [class~="psc-vc/file-tree-row"], .psc-vc\/lab-hmi-page .psc-vc\/file-tree-row { min-height: 32px !important; height: 32px !important; max-height: 32px !important; } [class~="psc-vc/lab-hmi-page"] [class~="psc-vc/file-tree-sm"] [class~="psc-vc/file-tree-row"], .psc-vc\/lab-hmi-page .psc-vc\/file-tree-sm .psc-vc\/file-tree-row { min-height: 28px !important; height: 28px !important; max-height: 28px !important; } [class~="psc-vc/lab-hmi-page"] [class~="psc-vc/file-tree-row"]:hover, .psc-vc\/lab-hmi-page .psc-vc\/file-tree-row:hover { background-color: var(--vc-panel, #18181b) !important; } [class~="psc-vc/lab-hmi-page"] [class~="psc-vc/file-tree-row-selected"]:hover, .psc-vc\/lab-hmi-page .psc-vc\/file-tree-row-selected:hover { background-color: var(--vc-secondary, #27272a) !important; } [class~="psc-vc/lab-hmi-page"]:has([class~="psc-vc/file-tree-row"]), .psc-vc\/lab-hmi-page:has(.psc-vc\/file-tree-row) { grid-auto-rows: max-content !important; align-items: stretch !important; } [class~="psc-vc/lab-hmi-page"]:has([class~="psc-vc/file-tree-row"]) [class~="psc-vc/lab-hmi-card"], .psc-vc\/lab-hmi-page:has(.psc-vc\/file-tree-row) .psc-vc\/lab-hmi-card { overflow: hidden !important; height: max-content !important; min-height: max-content !important; align-self: stretch !important; } [class~="psc-vc/lab-hmi-page"]:has([class~="psc-vc/file-tree-row"]) [class~="psc-vc/lab-hmi-card"] > .view-parent, .psc-vc\/lab-hmi-page:has(.psc-vc\/file-tree-row) .psc-vc\/lab-hmi-card > .view-parent { min-height: max-content !important; height: auto !important; } .psc-vc-r-tree [class~="psc-vc/file-tree"] { border:0!important; background:transparent!important; padding:0!important; gap:2px!important; overflow:visible!important; } .psc-vc-r-tree [class~="psc-vc/file-tree-label"] { display:none!important; } .psc-vc-r-tree [class~="psc-vc/file-tree-row-selected"] { background:#262626!important; font-weight:400!important; } .psc-vc-r-tree [class~="psc-vc/file-tree-sm"] .psc-vc-r-tree-row { height:28px!important; min-height:28px!important; flex-basis:28px!important; padding-top:4px!important; padding-bottom:4px!important; } .psc-vc-r-tree [class~="psc-vc/file-tree"].psc-vc-r-guides { background-image:repeating-linear-gradient(to right,transparent 0 19px,#303030 19px 20px)!important; background-size:60px calc(100% - 32px)!important; background-position:9px 32px!important; background-repeat:no-repeat!important; } ```