# Kanban Plan work orders across operational stages. ## Installation Download: /api/catalog/kanban/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/Kanban/Kanban, 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 | "Tablero de mantenimiento" | | subtitle | string | input | "Intervenciones, equipos y responsables." | | instanceId | string | input | "maintenance-kanban" | | demoMode | boolean | input | false | | readOnly | boolean | input | true | | dragEnabled | boolean | input | true | | permissions | object | input | {"moveItems":true,"reorderColumns":true,"createItems":true} | | board | object | input | {"revision":0,"columnOrder":[],"columns":[],"value":{}} | | owners | array | input | [] | | onCommitMessage | string | input | "viewcraft.kanban.commit" | | lastCommit | object | output | {} | ## Embedded View usage ```json { "type": "ia.display.view", "props": { "path": "Viewcraft/Kanban/Kanban", "params": { "title": "Tablero de mantenimiento", "subtitle": "Intervenciones, equipos y responsables.", "instanceId": "maintenance-kanban", "demoMode": false, "readOnly": true, "dragEnabled": true, "permissions": { "moveItems": true, "reorderColumns": true, "createItems": true }, "board": { "revision": 0, "columnOrder": [], "columns": [], "value": {} }, "owners": [], "onCommitMessage": "viewcraft.kanban.commit" }, "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/Kanban/Kanban/view.json ```json { "custom": { "state": { "base": { "revision": 0, "columnOrder": [], "columns": [], "value": {} }, "visible": { "revision": 0, "columnOrder": [], "columns": [], "value": {} }, "token": "unmounted", "pending": {}, "drag": {}, "notice": "", "tone": "neutral", "needsSync": false, "cancelledAt": 0, "uncertainRequestId": "" }, "ready": false, "query": "", "priority": "*", "owner": "*", "model": { "columns": [], "visibleCount": 0, "total": 0, "countText": "0 de 0 órdenes", "hint": "Solo lectura. Los movimientos están deshabilitados.", "boardClass": "vc/kb-board", "canCreate": false, "notice": "", "noticeClass": "vc/kb-hidden", "dragCancelClass": "vc/kb-hidden", "filterClearClass": "vc/kb-hidden", "busyText": "Sincronizado", "ownerOptions": [ { "value": "*", "label": "Todos los técnicos" } ], "avatars": [], "overflow": 0, "filtered": false, "error": "" }, "error": "" }, "params": { "title": "Tablero de mantenimiento", "subtitle": "Intervenciones, equipos y responsables.", "instanceId": "maintenance-kanban", "demoMode": false, "readOnly": true, "dragEnabled": true, "permissions": { "moveItems": true, "reorderColumns": true, "createItems": true }, "board": { "revision": 0, "columnOrder": [], "columns": [], "value": {} }, "owners": [], "onCommitMessage": "viewcraft.kanban.commit", "lastCommit": {} }, "propConfig": { "params.title": { "paramDirection": "input", "persistent": true }, "params.subtitle": { "paramDirection": "input", "persistent": true }, "params.instanceId": { "paramDirection": "input", "persistent": true }, "params.demoMode": { "paramDirection": "input", "persistent": true }, "params.readOnly": { "paramDirection": "input", "persistent": true, "onChange": { "enabled": true, "script": "\tviewcraft.kanban.cancel(self)" } }, "params.dragEnabled": { "paramDirection": "input", "persistent": true, "onChange": { "enabled": true, "script": "\tviewcraft.kanban.cancel(self)" } }, "params.permissions": { "paramDirection": "input", "persistent": true, "onChange": { "enabled": true, "script": "\tviewcraft.kanban.cancel(self)" } }, "params.board": { "paramDirection": "input", "persistent": true, "onChange": { "enabled": true, "script": "\tviewcraft.kanban.sync(self)" } }, "params.owners": { "paramDirection": "input", "persistent": true }, "params.onCommitMessage": { "paramDirection": "input", "persistent": true }, "params.lastCommit": { "paramDirection": "output", "persistent": true }, "custom.state": { "persistent": false }, "custom.ready": { "persistent": false }, "custom.query": { "persistent": false, "onChange": { "enabled": true, "script": "\tviewcraft.kanban.filters_changed(self)" } }, "custom.priority": { "persistent": false, "onChange": { "enabled": true, "script": "\tviewcraft.kanban.filters_changed(self)" } }, "custom.owner": { "persistent": false, "onChange": { "enabled": true, "script": "\tviewcraft.kanban.filters_changed(self)" } }, "custom.model": { "persistent": false, "binding": { "type": "expr-struct", "config": { "struct": { "state": "{view.custom.state}", "owners": "{view.params.owners}", "query": "{view.custom.query}", "priority": "{view.custom.priority}", "owner": "{view.custom.owner}", "readOnly": "{view.params.readOnly} || len({view.custom.error}) > 0", "dragEnabled": "{view.params.dragEnabled}", "permissions": "{view.params.permissions}" }, "waitOnAll": true }, "transforms": [ { "type": "script", "code": "\treturn viewcraft.kanban.safe_ui_model(value[\"state\"], value[\"owners\"], value[\"query\"], value[\"priority\"], value[\"owner\"], value[\"readOnly\"], value[\"dragEnabled\"], value[\"permissions\"])" } ] } }, "custom.error": { "persistent": false } }, "props": { "defaultSize": { "width": 1280, "height": 800 } }, "root": { "type": "ia.container.flex", "version": 0, "meta": { "name": "Kanban" }, "props": { "direction": "column", "wrap": "nowrap", "justify": "flex-start", "alignItems": "stretch", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "classes": "vc/kb-root", "height": "100%", "width": "100%", "backgroundColor": "#0a0a0a", "color": "#e5e5e5", "padding": "28px 28px 20px", "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.container.flex", "version": 0, "meta": { "name": "Header" }, "props": { "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "center", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "classes": "vc/kb-header", "gap": "20px", "marginBottom": "26px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.container.flex", "version": 0, "meta": { "name": "Identity" }, "props": { "direction": "column", "wrap": "nowrap", "justify": "flex-start", "alignItems": "stretch", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "gap": "3px" } }, "position": { "basis": "auto", "grow": 1, "shrink": 1, "display": true }, "children": [ { "type": "ia.container.flex", "version": 0, "meta": { "name": "Breadcrumb" }, "props": { "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "center", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "gap": "8px", "marginBottom": "8px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "BoardIcon" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "lineHeight": "20px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "width": "15px", "height": "15px", "backgroundImage": "url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhM2EzYTMiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjMiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjMiLz48cGF0aCBkPSJNOSA3djEwTTE1IDd2NiIvPjwvc3ZnPg==\")", "backgroundPosition": "center", "backgroundRepeat": "no-repeat", "backgroundSize": "contain" } }, "position": { "basis": "15px", "grow": 0, "shrink": 0, "display": true } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "BreadcrumbText" }, "props": { "text": "Operaciones / Órdenes de trabajo", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "12px", "lineHeight": "20px", "color": "#a3a3a3", "minWidth": 0, "boxSizing": "border-box" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "DemoBadge" }, "props": { "text": "DEMO", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "9px", "lineHeight": "20px", "color": "#a3a3a3", "minWidth": 0, "boxSizing": "border-box", "letterSpacing": "1px", "border": "1px solid #333333", "borderRadius": "4px", "padding": "0 5px", "height": "17px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "position.display": { "binding": { "type": "expr", "config": { "expression": "{view.params.demoMode}" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "if({view.params.demoMode}, \"\", \"vc/kb-hidden\")" } } } } } ] }, { "type": "ia.display.label", "version": 0, "meta": { "name": "BoardTitle" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "23px", "lineHeight": "30px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "fontWeight": 600, "letterSpacing": "-0.5px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.title" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "BoardSubtitle" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "lineHeight": "20px", "color": "#a3a3a3", "minWidth": 0, "boxSizing": "border-box" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.subtitle" } } } } } ] }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "HeaderTools" }, "props": { "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "center", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "classes": "vc/kb-header-tools", "gap": "8px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.display.flex-repeater", "version": 0, "meta": { "name": "Owners" }, "props": { "path": "Viewcraft/Kanban/Avatar", "instances": [], "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "stretch", "alignContent": "flex-start", "useDefaultViewWidth": true, "useDefaultViewHeight": true, "elementPosition": { "basis": "24px", "grow": 0, "shrink": 0 }, "elementStyle": { "minWidth": 0, "minHeight": 0, "width": "28px" }, "style": { "minWidth": 0, "minHeight": "28px", "width": "auto", "gap": 0, "classes": "vc/kb-avatars", "height": "28px", "maxHeight": "28px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 1, "display": true }, "propConfig": { "props.instances": { "binding": { "type": "property", "config": { "path": "view.custom.model.avatars" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "MoreOwners" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "10px", "lineHeight": "20px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "height": "26px", "width": "26px", "borderRadius": "50%", "backgroundColor": "#262626", "textAlign": "center" } }, "position": { "basis": "26px", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "expr", "config": { "expression": "\"+\" + toStr({view.custom.model.overflow})" } } }, "position.display": { "binding": { "type": "expr", "config": { "expression": "{view.custom.model.overflow} > 0" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "if({view.custom.model.overflow} > 0, \"\", \"vc/kb-hidden\")" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "CreateTask" }, "props": { "text": "Nueva OT", "primary": false, "enabled": true, "align": "center", "justify": "center", "textStyle": { "fontFamily": "inherit", "fontSize": "inherit", "color": "inherit", "fontWeight": "inherit" }, "style": { "classes": "vc/kb-button vc/kb-primary", "height": "32px", "padding": "0 10px", "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "fontWeight": 500, "backgroundColor": "#e5e5e5", "color": "#171717", "border": "1px solid #e5e5e5", "borderRadius": "7px", "boxSizing": "border-box", "whiteSpace": "nowrap", "minWidth": 0 }, "image": { "source": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMxNzE3MTciIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiA1djE0TTUgMTJoMTQiLz48L3N2Zz4=", "height": 15, "width": 15, "position": "left", "style": { "marginRight": "6px" } } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.open_dialog(self.view, mode='create')" } } } }, "propConfig": { "props.enabled": { "binding": { "type": "property", "config": { "path": "view.custom.model.canCreate" } } } } } ] } ] }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "Toolbar" }, "props": { "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "center", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "classes": "vc/kb-toolbar", "gap": "8px", "marginBottom": "16px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.input.text-field", "version": 0, "meta": { "name": "Search", "tooltip": { "enabled": true, "text": "Buscar orden o equipo…", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "placeholder": "Buscar orden o equipo…", "deferUpdates": false, "rejectUpdatesWhileFocused": true, "enabled": true, "style": { "classes": "vc/kb-input", "height": "34px", "width": "100%", "backgroundColor": "#141414", "color": "#e5e5e5", "border": "1px solid #333333", "borderRadius": "7px", "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "padding": "0 10px", "boxSizing": "border-box", "minWidth": 0, "paddingLeft": "32px", "backgroundImage": "url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhM2EzYTMiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEwLjUiIGN5PSIxMC41IiByPSI2LjUiLz48cGF0aCBkPSJtMTYgMTYgNSA1Ii8+PC9zdmc+\")", "backgroundRepeat": "no-repeat", "backgroundPosition": "10px center", "backgroundSize": "14px 14px" } }, "position": { "basis": "270px", "grow": 0, "shrink": 1, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.custom.query", "bidirectional": true } } } } }, { "type": "ia.input.dropdown", "version": 0, "meta": { "name": "Prioridad", "tooltip": { "enabled": true, "text": "Prioridad", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "options": [ { "value": "*", "label": "Todas las prioridades" }, { "value": "high", "label": "Alta" }, { "value": "medium", "label": "Media" }, { "value": "low", "label": "Baja" } ], "value": "", "multiSelect": false, "showClearIcon": false, "allowCustomOptions": false, "search": { "enabled": false }, "placeholder": { "text": "Seleccionar", "color": "#a3a3a3" }, "dropdownOptionStyle": { "backgroundColor": "#202020", "color": "#e5e5e5", "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px" }, "maxMenuHeight": 260, "style": { "classes": "vc/kb-dropdown", "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "height": "34px", "minWidth": 0, "width": "100%", "backgroundColor": "#171717", "color": "#e5e5e5", "border": "1px solid #333333", "borderRadius": "7px" } }, "position": { "basis": "174px", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.value": { "binding": { "type": "property", "config": { "path": "view.custom.priority", "bidirectional": true } } } } }, { "type": "ia.input.dropdown", "version": 0, "meta": { "name": "Técnico", "tooltip": { "enabled": true, "text": "Técnico", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "options": [], "value": "", "multiSelect": false, "showClearIcon": false, "allowCustomOptions": false, "search": { "enabled": false }, "placeholder": { "text": "Seleccionar", "color": "#a3a3a3" }, "dropdownOptionStyle": { "backgroundColor": "#202020", "color": "#e5e5e5", "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px" }, "maxMenuHeight": 260, "style": { "classes": "vc/kb-dropdown", "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "height": "34px", "minWidth": 0, "width": "100%", "backgroundColor": "#171717", "color": "#e5e5e5", "border": "1px solid #333333", "borderRadius": "7px" } }, "position": { "basis": "170px", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.value": { "binding": { "type": "property", "config": { "path": "view.custom.owner", "bidirectional": true } } }, "props.options": { "binding": { "type": "property", "config": { "path": "view.custom.model.ownerOptions" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "ClearFilters" }, "props": { "text": "Limpiar", "primary": false, "enabled": true, "align": "center", "justify": "center", "textStyle": { "fontFamily": "inherit", "fontSize": "inherit", "color": "inherit", "fontWeight": "inherit" }, "style": { "classes": "vc/kb-button vc/kb-ghost", "height": "32px", "padding": "0 10px", "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "fontWeight": 500, "backgroundColor": "transparent", "color": "#e5e5e5", "border": "1px solid transparent", "borderRadius": "7px", "boxSizing": "border-box", "whiteSpace": "nowrap", "minWidth": 0 }, "image": { "source": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNWU1ZTUiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Im02IDYgMTIgMTJNNiAxOCAxOCA2Ii8+PC9zdmc+", "height": 15, "width": 15, "position": "left", "style": { "marginRight": "6px" } } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.command(self.view, 'resetFilters')" } } } }, "propConfig": { "props.style.classes": { "binding": { "type": "property", "config": { "path": "view.custom.model.filterClearClass" } } } } }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "Spacer" }, "props": { "direction": "column", "wrap": "nowrap", "justify": "flex-start", "alignItems": "stretch", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0 } }, "position": { "basis": "0px", "grow": 1, "shrink": 1, "display": true }, "children": [] }, { "type": "ia.display.label", "version": 0, "meta": { "name": "TotalCount" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "12px", "lineHeight": "20px", "color": "#a3a3a3", "minWidth": 0, "boxSizing": "border-box", "whiteSpace": "nowrap" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.custom.model.countText" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "Refresh", "tooltip": { "enabled": true, "text": "Restablecer demo / solicitar sincronización al anfitrión", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "primary": false, "enabled": true, "align": "center", "justify": "center", "textStyle": { "fontFamily": "inherit", "fontSize": "inherit", "color": "inherit", "fontWeight": "inherit" }, "style": { "classes": "vc/kb-button vc/kb-ghost", "height": "26px", "padding": 0, "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "fontWeight": 500, "backgroundColor": "transparent", "color": "#e5e5e5", "border": "1px solid transparent", "borderRadius": "7px", "boxSizing": "border-box", "whiteSpace": "nowrap", "minWidth": 0, "width": "26px" }, "image": { "source": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNWU1ZTUiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0zIDExYTkgOSAwIDEgMSAyIDdNMyA0djdoNyIvPjwvc3ZnPg==", "height": 15, "width": 15, "position": "center", "style": { "marginRight": "0px" } } }, "position": { "basis": "26px", "grow": 0, "shrink": 0, "display": true }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.command(self.view, 'refresh')" } } } } } ] }, { "type": "ia.display.label", "version": 0, "meta": { "name": "BoardError" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "lineHeight": "20px", "color": "#fb7185", "minWidth": 0, "boxSizing": "border-box", "classes": "vc/kb-error", "padding": "12px", "border": "1px solid #783244", "borderRadius": "7px", "whiteSpace": "normal", "marginBottom": "12px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "expr", "config": { "expression": "if(len({view.custom.error}) > 0, {view.custom.error}, {view.custom.model.error})" } } }, "position.display": { "binding": { "type": "expr", "config": { "expression": "len({view.custom.error}) > 0 || len({view.custom.model.error}) > 0" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "if(len({view.custom.error}) > 0 || len({view.custom.model.error}) > 0, \"vc/kb-error\", \"vc/kb-hidden\")" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "Notice" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "12px", "lineHeight": "20px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "padding": "8px 12px", "borderRadius": "7px", "border": "1px solid #333333", "backgroundColor": "#171717", "marginBottom": "10px", "whiteSpace": "normal" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.custom.model.notice" } } }, "props.style.classes": { "binding": { "type": "property", "config": { "path": "view.custom.model.noticeClass" } } } } }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "Board" }, "props": { "direction": "column", "wrap": "nowrap", "justify": "flex-start", "alignItems": "stretch", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": "360px", "classes": "vc/kb-board" } }, "position": { "basis": "0px", "grow": 1, "shrink": 1, "display": true }, "children": [ { "type": "ia.display.flex-repeater", "version": 0, "meta": { "name": "Columns" }, "props": { "path": "Viewcraft/Kanban/Column", "instances": [], "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "stretch", "alignContent": "flex-start", "useDefaultViewWidth": false, "useDefaultViewHeight": false, "elementPosition": { "basis": "278px", "grow": 1, "shrink": 0 }, "elementStyle": { "minWidth": "278px", "minHeight": 0, "height": "100%" }, "style": { "minWidth": 0, "minHeight": 0, "width": "100%", "gap": "14px", "height": "100%", "overflowX": "auto", "paddingBottom": "8px", "classes": "vc/kb-columns" } }, "position": { "basis": "0px", "grow": 1, "shrink": 1, "display": true }, "propConfig": { "props.instances": { "binding": { "type": "property", "config": { "path": "view.custom.model.columns" } } } } } ], "propConfig": { "props.style.classes": { "binding": { "type": "property", "config": { "path": "view.custom.model.boardClass" } } } } }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "Footer" }, "props": { "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "center", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "gap": "10px", "marginTop": "10px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "Hint" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "11px", "lineHeight": "18px", "color": "#858585", "minWidth": 0, "boxSizing": "border-box", "whiteSpace": "normal" } }, "position": { "basis": "auto", "grow": 1, "shrink": 1, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.custom.model.hint" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "CancelDrag" }, "props": { "text": "Cancelar", "primary": false, "enabled": true, "align": "center", "justify": "center", "textStyle": { "fontFamily": "inherit", "fontSize": "inherit", "color": "inherit", "fontWeight": "inherit" }, "style": { "classes": "vc/kb-button vc/kb-outline", "height": "32px", "padding": "0 10px", "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "fontWeight": 500, "backgroundColor": "#171717", "color": "#e5e5e5", "border": "1px solid #333333", "borderRadius": "7px", "boxSizing": "border-box", "whiteSpace": "nowrap", "minWidth": 0 } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.command(self.view, 'cancel')" } } } }, "propConfig": { "props.style.classes": { "binding": { "type": "property", "config": { "path": "view.custom.model.dragCancelClass" } } } } } ] } ], "events": { "system": { "onStartup": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.start(self.view)" } } }, "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tif event.key == 'Escape':\n\t viewcraft.kanban.cancel(self.view)" } } } }, "scripts": { "messageHandlers": [ { "messageType": "viewcraft.kanban.internal", "pageScope": true, "sessionScope": false, "viewScope": false, "script": "\tviewcraft.kanban.receive(self.view, payload)" }, { "messageType": "viewcraft.kanban.result", "pageScope": true, "sessionScope": false, "viewScope": false, "script": "\tviewcraft.kanban.receive_result(self.view, payload)" } ] } } } ``` ### com.inductiveautomation.perspective/views/Viewcraft/Kanban/Kanban/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "view.json" ] } ``` ### com.inductiveautomation.perspective/views/Viewcraft/Kanban/Avatar/view.json ```json { "custom": {}, "params": { "name": "Ana Mart\u00edn", "initials": "AM", "color": "#4e394c", "id": "ana" }, "propConfig": { "params.name": { "paramDirection": "input", "persistent": true }, "params.initials": { "paramDirection": "input", "persistent": true }, "params.color": { "paramDirection": "input", "persistent": true }, "params.id": { "paramDirection": "input", "persistent": true } }, "props": { "defaultSize": { "width": 28, "height": 28 } }, "root": { "type": "ia.container.flex", "version": 0, "meta": { "name": "AvatarRoot" }, "props": { "direction": "column", "wrap": "nowrap", "justify": "flex-start", "alignItems": "stretch", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0 } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "Avatar", "tooltip": { "enabled": true, "text": "", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "9px", "lineHeight": "20px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "classes": "vc/kb-avatar", "width": "28px", "height": "28px", "borderRadius": "50%", "textAlign": "center", "fontWeight": 600, "border": "2px solid #0a0a0a" } }, "position": { "basis": "28px", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.initials" } } }, "props.style.backgroundColor": { "binding": { "type": "property", "config": { "path": "view.params.color" } } }, "meta.tooltip.text": { "binding": { "type": "property", "config": { "path": "view.params.name" } } } } } ] } } ``` ### com.inductiveautomation.perspective/views/Viewcraft/Kanban/Avatar/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "view.json" ] } ``` ### com.inductiveautomation.perspective/views/Viewcraft/Kanban/Column/view.json ```json { "custom": {}, "params": { "column": { "id": "backlog", "title": "Pendiente", "color": "#a3a3a3", "wipLimit": null, "locked": false, "count": 3, "visibleCount": 3, "index": 0, "countText": "3", "atLimit": false, "countColor": "#a3a3a3", "tasks": [ { "task": { "id": "OT-0261", "title": "Revisar sello mecánico", "equipment": "P-103 · Bomba de impulsión", "priority": "high", "assigneeId": "ana", "dueDate": "2026-09-12", "completedTasks": 0, "totalTasks": 6, "category": "Correctivo", "description": "Comprobar estanqueidad y documentar la intervención.", "locked": false, "columnId": "backlog", "token": "preview", "drag": {}, "ownerName": "Ana Martín", "initials": "AM", "avatarColor": "#4e394c", "dueText": "12 sep", "priorityText": "Alta", "priorityColor": "#fb7185", "progressText": "0/6", "subtitle": "P-103 · Bomba de impulsión", "categoryText": "Correctivo", "canDrag": true, "canMove": true, "cardClass": "vc/kb-card", "lockedText": "", "lockClass": "vc/kb-hidden" } }, { "task": { "id": "OT-0262", "title": "Calibrar transmisor de presión", "equipment": "PT-305 · Línea de llenado", "priority": "medium", "assigneeId": "lucia", "dueDate": "2026-09-14", "completedTasks": 0, "totalTasks": 4, "category": "Calibración", "description": "Contrastar lectura con el patrón y registrar resultados.", "locked": false, "columnId": "backlog", "token": "preview", "drag": {}, "ownerName": "Lucía Vega", "initials": "LV", "avatarColor": "#413c5b", "dueText": "14 sep", "priorityText": "Media", "priorityColor": "#fbbf24", "progressText": "0/4", "subtitle": "PT-305 · Línea de llenado", "categoryText": "Calibración", "canDrag": true, "canMove": true, "cardClass": "vc/kb-card", "lockedText": "", "lockClass": "vc/kb-hidden" } }, { "task": { "id": "OT-0263", "title": "Inspección del cuadro eléctrico", "equipment": "CCM-01 · Servicios auxiliares", "priority": "low", "assigneeId": "david", "dueDate": "2026-09-15", "completedTasks": 0, "totalTasks": 8, "category": "Preventivo", "description": "Pendiente de asignación de ventana de intervención.", "locked": true, "columnId": "backlog", "token": "preview", "drag": {}, "ownerName": "David León", "initials": "DL", "avatarColor": "#544735", "dueText": "15 sep", "priorityText": "Baja", "priorityColor": "#a3a3a3", "progressText": "0/8", "subtitle": "CCM-01 · Servicios auxiliares", "categoryText": "Preventivo", "canDrag": false, "canMove": false, "cardClass": "vc/kb-card", "lockedText": "Bloqueada", "lockClass": "" } } ], "token": "preview", "drag": {}, "canDrag": true, "canLeft": false, "canRight": true, "emptyText": "No hay órdenes", "emptyClass": "vc/kb-hidden", "canCreate": true, "canDrop": true, "rootClass": "vc/kb-column", "dropText": "Final de columna" } }, "propConfig": { "params.column": { "paramDirection": "input", "persistent": true } }, "props": { "defaultSize": { "width": 294, "height": 640 } }, "root": { "type": "ia.container.flex", "version": 0, "meta": { "name": "KanbanColumn" }, "props": { "direction": "column", "wrap": "nowrap", "justify": "flex-start", "alignItems": "stretch", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": "360px", "classes": "vc/kb-column", "width": "100%", "height": "100%", "border": "1px solid #2b2b2b", "borderRadius": "14px", "backgroundColor": "#111111", "overflow": "hidden" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.container.flex", "version": 0, "meta": { "name": "ColumnHeader" }, "props": { "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "center", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "height": "44px", "padding": "0 12px", "gap": "6px", "borderBottom": "1px solid #292929" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "ColumnDot" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "lineHeight": "20px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "height": "7px", "width": "7px", "borderRadius": "50%" } }, "position": { "basis": "7px", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.style.backgroundColor": { "binding": { "type": "property", "config": { "path": "view.params.column.color" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "ColumnTitle" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "lineHeight": "20px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "fontWeight": 600 } }, "position": { "basis": "auto", "grow": 1, "shrink": 1, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.column.title" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "ColumnCount", "tooltip": { "enabled": true, "text": "Tarjetas totales / límite WIP, cuando está configurado", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "11px", "lineHeight": "18px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "padding": "0 6px", "border": "1px solid #333333", "borderRadius": "5px", "height": "20px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.column.countText" } } }, "props.style.color": { "binding": { "type": "property", "config": { "path": "view.params.column.countColor" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "NewInColumn", "tooltip": { "enabled": true, "text": "Nueva orden en esta columna", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "primary": false, "enabled": true, "align": "center", "justify": "center", "textStyle": { "fontFamily": "inherit", "fontSize": "inherit", "color": "inherit", "fontWeight": "inherit" }, "style": { "classes": "vc/kb-button vc/kb-ghost", "height": "26px", "padding": 0, "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "fontWeight": 500, "backgroundColor": "transparent", "color": "#e5e5e5", "border": "1px solid transparent", "borderRadius": "7px", "boxSizing": "border-box", "whiteSpace": "nowrap", "minWidth": 0, "width": "26px" }, "image": { "source": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNWU1ZTUiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiA1djE0TTUgMTJoMTQiLz48L3N2Zz4=", "height": 15, "width": 15, "position": "center", "style": { "marginRight": "0px" } } }, "position": { "basis": "26px", "grow": 0, "shrink": 0, "display": true }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.emit(self, 'open', {'mode':'create','columnId':self.view.params.column.id})" } } }, "dom": { "onClick": { "type": "script", "scope": "G", "config": { "script": "\tpass" }, "stopPropagation": true } } }, "propConfig": { "props.enabled": { "binding": { "type": "property", "config": { "path": "view.params.column.canCreate" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "DragColumn", "tooltip": { "enabled": true, "text": "Mover columna: pulsa aquí y después otra cabecera.", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "primary": false, "enabled": true, "align": "center", "justify": "center", "textStyle": { "fontFamily": "inherit", "fontSize": "inherit", "color": "inherit", "fontWeight": "inherit" }, "style": { "classes": "vc/kb-button vc/kb-ghost", "height": "26px", "padding": 0, "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "fontWeight": 500, "backgroundColor": "transparent", "color": "#e5e5e5", "border": "1px solid transparent", "borderRadius": "7px", "boxSizing": "border-box", "whiteSpace": "nowrap", "minWidth": 0, "width": "26px" }, "image": { "source": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNWU1ZTUiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjkiIGN5PSI1IiByPSIxIi8+PGNpcmNsZSBjeD0iMTUiIGN5PSI1IiByPSIxIi8+PGNpcmNsZSBjeD0iOSIgY3k9IjEyIiByPSIxIi8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxMiIgcj0iMSIvPjxjaXJjbGUgY3g9IjkiIGN5PSIxOSIgcj0iMSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTkiIHI9IjEiLz48L3N2Zz4=", "height": 15, "width": 15, "position": "center", "style": { "marginRight": "0px" } } }, "position": { "basis": "26px", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.enabled": { "binding": { "type": "property", "config": { "path": "view.params.column.canDrag" } } } }, "events": { "dom": { "onClick": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.begin_column(self, event)" }, "stopPropagation": true } } } } ], "events": { "dom": { "onClick": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.drop_column(self, event)" }, "stopPropagation": true } } } }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "ColumnBody" }, "props": { "direction": "column", "wrap": "nowrap", "justify": "flex-start", "alignItems": "stretch", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "classes": "vc/kb-column-body", "padding": "12px", "gap": "10px", "overflowY": "auto", "overflowX": "hidden" } }, "position": { "basis": "0px", "grow": 1, "shrink": 1, "display": true }, "children": [ { "type": "ia.display.flex-repeater", "version": 0, "meta": { "name": "Cards" }, "props": { "path": "Viewcraft/Kanban/TaskCard", "instances": [], "direction": "column", "wrap": "nowrap", "justify": "flex-start", "alignItems": "stretch", "alignContent": "flex-start", "useDefaultViewWidth": false, "useDefaultViewHeight": false, "elementPosition": { "basis": "auto", "grow": 0, "shrink": 0 }, "elementStyle": { "minWidth": 0, "minHeight": 0, "width": "100%" }, "style": { "minWidth": 0, "minHeight": 0, "width": "100%", "gap": "10px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 1, "display": true }, "propConfig": { "props.instances": { "binding": { "type": "property", "config": { "path": "view.params.column.tasks" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "EmptyColumn" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "12px", "lineHeight": "20px", "color": "#737373", "minWidth": 0, "boxSizing": "border-box", "height": "68px", "textAlign": "center", "border": "1px dashed #333333", "borderRadius": "9px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.column.emptyText" } } }, "props.style.classes": { "binding": { "type": "property", "config": { "path": "view.params.column.emptyClass" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "DropEnd" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "11px", "lineHeight": "20px", "color": "#737373", "minWidth": 0, "boxSizing": "border-box", "classes": "vc/kb-end", "height": "34px", "textAlign": "center", "border": "1px dashed transparent", "borderRadius": "7px" } }, "position": { "basis": "34px", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.column.dropText" } } } }, "events": { "dom": { "onClick": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.drop_item(self, event, True)" }, "stopPropagation": true } } } } ], "events": { "dom": { "onClick": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.drop_item(self, event, True)" }, "stopPropagation": true } } } }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "ColumnFooter" }, "props": { "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "center", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "padding": "5px 10px", "borderTop": "1px solid #252525", "gap": "4px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "ColumnOrderLabel" }, "props": { "text": "Orden de columnas", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "10px", "lineHeight": "20px", "color": "#737373", "minWidth": 0, "boxSizing": "border-box" } }, "position": { "basis": "auto", "grow": 1, "shrink": 0, "display": true } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "ColumnLeft", "tooltip": { "enabled": true, "text": "Mover columna a la izquierda", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "primary": false, "enabled": true, "align": "center", "justify": "center", "textStyle": { "fontFamily": "inherit", "fontSize": "inherit", "color": "inherit", "fontWeight": "inherit" }, "style": { "classes": "vc/kb-button vc/kb-ghost", "height": "26px", "padding": 0, "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "fontWeight": 500, "backgroundColor": "transparent", "color": "#e5e5e5", "border": "1px solid transparent", "borderRadius": "7px", "boxSizing": "border-box", "whiteSpace": "nowrap", "minWidth": 0, "width": "26px" }, "image": { "source": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNWU1ZTUiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Im0xNCA2LTYgNiA2IDYiLz48L3N2Zz4=", "height": 15, "width": 15, "position": "center", "style": { "marginRight": "0px" } } }, "position": { "basis": "26px", "grow": 0, "shrink": 0, "display": true }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.emit(self, 'columnStep', {'id':self.view.params.column.id,'step':-1})" } } } }, "propConfig": { "props.enabled": { "binding": { "type": "property", "config": { "path": "view.params.column.canLeft" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "ColumnRight", "tooltip": { "enabled": true, "text": "Mover columna a la derecha", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "primary": false, "enabled": true, "align": "center", "justify": "center", "textStyle": { "fontFamily": "inherit", "fontSize": "inherit", "color": "inherit", "fontWeight": "inherit" }, "style": { "classes": "vc/kb-button vc/kb-ghost", "height": "26px", "padding": 0, "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "fontWeight": 500, "backgroundColor": "transparent", "color": "#e5e5e5", "border": "1px solid transparent", "borderRadius": "7px", "boxSizing": "border-box", "whiteSpace": "nowrap", "minWidth": 0, "width": "26px" }, "image": { "source": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNWU1ZTUiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Im0xMCA2IDYgNi02IDYiLz48L3N2Zz4=", "height": 15, "width": 15, "position": "center", "style": { "marginRight": "0px" } } }, "position": { "basis": "26px", "grow": 0, "shrink": 0, "display": true }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.emit(self, 'columnStep', {'id':self.view.params.column.id,'step':1})" } } } }, "propConfig": { "props.enabled": { "binding": { "type": "property", "config": { "path": "view.params.column.canRight" } } } } } ] } ], "propConfig": { "props.style.classes": { "binding": { "type": "property", "config": { "path": "view.params.column.rootClass" } } } } } } ``` ### com.inductiveautomation.perspective/views/Viewcraft/Kanban/Column/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "view.json" ] } ``` ### com.inductiveautomation.perspective/views/Viewcraft/Kanban/TaskCard/view.json ```json { "custom": {}, "params": { "task": { "id": "OT-0261", "title": "Revisar sello mecánico", "equipment": "P-103 · Bomba de impulsión", "priority": "high", "assigneeId": "ana", "dueDate": "2026-09-12", "completedTasks": 0, "totalTasks": 6, "category": "Correctivo", "description": "Comprobar estanqueidad y documentar la intervención.", "locked": false, "columnId": "backlog", "token": "preview", "drag": {}, "ownerName": "Ana Martín", "initials": "AM", "avatarColor": "#4e394c", "dueText": "12 sep", "priorityText": "Alta", "priorityColor": "#fb7185", "progressText": "0/6", "subtitle": "P-103 · Bomba de impulsión", "categoryText": "Correctivo", "canDrag": true, "canMove": true, "cardClass": "vc/kb-card", "lockedText": "", "lockClass": "vc/kb-hidden" } }, "propConfig": { "params.task": { "paramDirection": "input", "persistent": true } }, "props": { "defaultSize": { "width": 280, "height": 208 } }, "root": { "type": "ia.container.flex", "version": 0, "meta": { "name": "TaskCard" }, "props": { "direction": "column", "wrap": "nowrap", "justify": "flex-start", "alignItems": "stretch", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "classes": "vc/kb-card", "padding": "10px 12px 12px", "border": "1px solid #303030", "borderRadius": "10px", "backgroundColor": "#171717", "width": "100%" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.container.flex", "version": 0, "meta": { "name": "CardHeader" }, "props": { "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "center", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "gap": "5px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.input.button", "version": 0, "meta": { "name": "DragTask", "tooltip": { "enabled": true, "text": "Mover orden: pulsa aquí y después el destino.", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "primary": false, "enabled": true, "align": "center", "justify": "center", "textStyle": { "fontFamily": "inherit", "fontSize": "inherit", "color": "inherit", "fontWeight": "inherit" }, "style": { "classes": "vc/kb-button vc/kb-ghost", "height": "26px", "padding": 0, "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "fontWeight": 500, "backgroundColor": "transparent", "color": "#e5e5e5", "border": "1px solid transparent", "borderRadius": "7px", "boxSizing": "border-box", "whiteSpace": "nowrap", "minWidth": 0, "width": "26px" }, "image": { "source": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNWU1ZTUiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjkiIGN5PSI1IiByPSIxIi8+PGNpcmNsZSBjeD0iMTUiIGN5PSI1IiByPSIxIi8+PGNpcmNsZSBjeD0iOSIgY3k9IjEyIiByPSIxIi8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxMiIgcj0iMSIvPjxjaXJjbGUgY3g9IjkiIGN5PSIxOSIgcj0iMSIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTkiIHI9IjEiLz48L3N2Zz4=", "height": 15, "width": 15, "position": "center", "style": { "marginRight": "0px" } } }, "position": { "basis": "26px", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.enabled": { "binding": { "type": "property", "config": { "path": "view.params.task.canDrag" } } } }, "events": { "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tif event.key == 'Escape':\n\t viewcraft.kanban.emit(self, 'cancel')" } }, "onClick": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.begin_item(self, event)" }, "stopPropagation": true } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "TaskId" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Consolas, ui-monospace, monospace", "fontSize": "11px", "lineHeight": "20px", "color": "#a3a3a3", "minWidth": 0, "boxSizing": "border-box" } }, "position": { "basis": "auto", "grow": 1, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.task.id" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "Priority" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "10px", "lineHeight": "18px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "height": "20px", "border": "1px solid #353535", "borderRadius": "5px", "padding": "0 6px", "backgroundColor": "#1e1e1e" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.task.priorityText" } } }, "props.style.color": { "binding": { "type": "property", "config": { "path": "view.params.task.priorityColor" } } } } }, { "type": "ia.input.button", "version": 0, "meta": { "name": "TaskMenu", "tooltip": { "enabled": true, "text": "Detalle y mover orden", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "primary": false, "enabled": true, "align": "center", "justify": "center", "textStyle": { "fontFamily": "inherit", "fontSize": "inherit", "color": "inherit", "fontWeight": "inherit" }, "style": { "classes": "vc/kb-button vc/kb-ghost", "height": "26px", "padding": 0, "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "fontWeight": 500, "backgroundColor": "transparent", "color": "#e5e5e5", "border": "1px solid transparent", "borderRadius": "7px", "boxSizing": "border-box", "whiteSpace": "nowrap", "minWidth": 0, "width": "26px" }, "image": { "source": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlNWU1ZTUiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjUiIGN5PSIxMiIgcj0iLjgiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIuOCIvPjxjaXJjbGUgY3g9IjE5IiBjeT0iMTIiIHI9Ii44Ii8+PC9zdmc+", "height": 15, "width": 15, "position": "center", "style": { "marginRight": "0px" } } }, "position": { "basis": "26px", "grow": 0, "shrink": 0, "display": true }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.emit(self, 'open', {'id': self.view.params.task.id})" } } }, "dom": { "onClick": { "type": "script", "scope": "G", "config": { "script": "\tpass" }, "stopPropagation": true } } } } ] }, { "type": "ia.display.label", "version": 0, "meta": { "name": "TaskTitle", "tooltip": { "enabled": true, "text": "Revisar sello mecánico", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "14px", "lineHeight": "20px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "fontWeight": 600, "whiteSpace": "normal", "overflow": "hidden", "classes": "vc/kb-task-title" } }, "position": { "basis": "40px", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.task.title" } } }, "meta.tooltip.text": { "binding": { "type": "property", "config": { "path": "view.params.task.title" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "Equipment", "tooltip": { "enabled": true, "text": "", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "12px", "lineHeight": "18px", "color": "#a3a3a3", "minWidth": 0, "boxSizing": "border-box", "whiteSpace": "nowrap", "textOverflow": "ellipsis", "overflow": "hidden" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.task.subtitle" } } }, "meta.tooltip.text": { "binding": { "type": "property", "config": { "path": "view.params.task.subtitle" } } } } }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "CardMeta" }, "props": { "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "center", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "gap": "5px", "marginTop": "8px", "marginBottom": "10px" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "Category" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "11px", "lineHeight": "20px", "color": "#888888", "minWidth": 0, "boxSizing": "border-box" } }, "position": { "basis": "auto", "grow": 1, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.task.categoryText" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "Locked", "tooltip": { "enabled": true, "text": "Orden bloqueada para movimientos", "location": "auto", "delay": 300, "style": { "color": "#e5e5e5", "backgroundColor": "#262626", "padding": "6px 9px", "borderRadius": "6px", "fontSize": "12px" } } }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "lineHeight": "20px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "width": "13px", "height": "13px", "backgroundImage": "url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhM2EzYTMiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjUiIHk9IjEwIiB3aWR0aD0iMTQiIGhlaWdodD0iMTEiIHJ4PSIyIi8+PHBhdGggZD0iTTggMTBWN2E0IDQgMCAwIDEgOCAwdjMiLz48L3N2Zz4=\")", "backgroundPosition": "center", "backgroundRepeat": "no-repeat", "backgroundSize": "contain" } }, "position": { "basis": "13px", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.style.classes": { "binding": { "type": "property", "config": { "path": "view.params.task.lockClass" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "Checklist" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "lineHeight": "20px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "width": "13px", "height": "13px", "backgroundImage": "url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhM2EzYTMiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjQiIHk9IjUiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjIiLz48cGF0aCBkPSJNOSA1VjNoNnYyTTggMTJsMiAyIDUtNW0tNyA4aDgiLz48L3N2Zz4=\")", "backgroundPosition": "center", "backgroundRepeat": "no-repeat", "backgroundSize": "contain" } }, "position": { "basis": "13px", "grow": 0, "shrink": 0, "display": true } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "TasksCount" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "11px", "lineHeight": "20px", "color": "#a3a3a3", "minWidth": 0, "boxSizing": "border-box" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.task.progressText" } } } } } ] }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "CardFooter" }, "props": { "direction": "row", "wrap": "nowrap", "justify": "flex-start", "alignItems": "center", "alignContent": "flex-start", "style": { "boxSizing": "border-box", "minWidth": 0, "minHeight": 0, "gap": "5px", "paddingTop": "10px", "borderTop": "1px solid #2b2b2b" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "AssigneeAvatar" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "8px", "lineHeight": "20px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "width": "22px", "height": "22px", "borderRadius": "50%", "textAlign": "center", "fontWeight": 600 } }, "position": { "basis": "22px", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.task.initials" } } }, "props.style.backgroundColor": { "binding": { "type": "property", "config": { "path": "view.params.task.avatarColor" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "Assignee" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "11px", "lineHeight": "20px", "color": "#a3a3a3", "minWidth": 0, "boxSizing": "border-box", "whiteSpace": "nowrap", "overflow": "hidden", "textOverflow": "ellipsis" } }, "position": { "basis": "auto", "grow": 1, "shrink": 1, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.task.ownerName" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "Calendar" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "13px", "lineHeight": "20px", "color": "#e5e5e5", "minWidth": 0, "boxSizing": "border-box", "width": "12px", "height": "12px", "backgroundImage": "url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNhM2EzYTMiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjUiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNiIgcng9IjIiLz48cGF0aCBkPSJNNyAzdjRtMTAtNHY0TTMgMTBoMTgiLz48L3N2Zz4=\")", "backgroundPosition": "center", "backgroundRepeat": "no-repeat", "backgroundSize": "contain" } }, "position": { "basis": "12px", "grow": 0, "shrink": 0, "display": true } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "DueDate" }, "props": { "text": "", "alignVertical": "center", "style": { "fontFamily": "Viewcraft Geist, Geist, Inter, Arial, sans-serif", "fontSize": "10px", "lineHeight": "20px", "color": "#a3a3a3", "minWidth": 0, "boxSizing": "border-box", "whiteSpace": "nowrap", "fontVariantNumeric": "tabular-nums" } }, "position": { "basis": "auto", "grow": 0, "shrink": 0, "display": true }, "propConfig": { "props.text": { "binding": { "type": "property", "config": { "path": "view.params.task.dueText" } } } } } ] } ], "propConfig": { "props.style.classes": { "binding": { "type": "property", "config": { "path": "view.params.task.cardClass" } } } }, "events": { "dom": { "onKeyDown": { "type": "script", "scope": "G", "config": { "script": "\tif event.key == 'Escape':\n\t viewcraft.kanban.emit(self, 'cancel')" } }, "onClick": { "type": "script", "scope": "G", "config": { "script": "\tviewcraft.kanban.drop_item(self, event)" }, "stopPropagation": true } } } } } ``` ### com.inductiveautomation.perspective/views/Viewcraft/Kanban/TaskCard/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "view.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-board/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-board/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-hidden/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-hidden/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-root/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-root/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-header/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-header/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-header-tools/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-header-tools/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-button/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-button/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-primary/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-primary/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-toolbar/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-toolbar/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-input/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-input/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-dropdown/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-dropdown/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-ghost/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-ghost/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-error/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-error/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-columns/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-columns/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-outline/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-outline/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-avatar/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-avatar/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-card/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-card/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-column/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-column/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-column-body/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-column-body/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-end/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-end/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-task-title/style.json ```json { "base": { "style": {} } } ``` ### com.inductiveautomation.perspective/style-classes/vc/kb-task-title/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### stylesheet-snippet.css ```css .psc-vc\/kb-root{ --kb-fg:#e5e5e5;--kb-muted:#a3a3a3;--kb-edge:#303030; color-scheme:dark;container-type:inline-size; font-family:"Viewcraft Geist",Geist,Inter,Arial,sans-serif; } .psc-vc\/kb-root *{box-sizing:border-box;} .psc-vc\/kb-root .psc-vc\/kb-button, .psc-vc\/kb-dialog .psc-vc\/kb-button{ display:flex!important;align-items:center!important;justify-content:center!important; cursor:pointer;transition:background-color 130ms ease,border-color 130ms ease,color 130ms ease; } .psc-vc\/kb-root .psc-vc\/kb-button:hover, .psc-vc\/kb-dialog .psc-vc\/kb-button:hover{background-color:#262626!important;border-color:#414141!important;} .psc-vc\/kb-root .psc-vc\/kb-primary:hover, .psc-vc\/kb-dialog .psc-vc\/kb-primary:hover{background-color:#ffffff!important;color:#171717!important;} .psc-vc\/kb-root button:disabled{opacity:.35;cursor:not-allowed;} .psc-vc\/kb-root :is(button,input,select):focus-visible{ outline:2px solid #bdbdbd!important;outline-offset:2px; } .psc-vc\/kb-root .psc-vc\/kb-card{ transition:border-color 130ms ease,background-color 130ms ease,opacity 130ms ease; box-shadow:0 1px 2px #00000018; } .psc-vc\/kb-root .psc-vc\/kb-card:hover{border-color:#454545!important;background-color:#191919!important;} .psc-vc\/kb-root .psc-vc\/kb-task-title{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .psc-vc\/kb-root .psc-vc\/kb-source{opacity:.38;} .psc-vc\/kb-root .psc-vc\/kb-column-source{opacity:.5;} .psc-vc\/kb-root .psc-vc\/kb-drag-item, .psc-vc\/kb-root .psc-vc\/kb-drag-column{cursor:grabbing;user-select:none;} .psc-vc\/kb-root .psc-vc\/kb-drag-item .psc-vc\/kb-card:not(.psc-vc\/kb-source):hover{ border-top:2px solid #d4d4d4!important;padding-top:9px!important;background-color:#202020!important; } .psc-vc\/kb-root .psc-vc\/kb-drag-column .psc-vc\/kb-column:not(.psc-vc\/kb-column-source):hover{border-color:#a3a3a3!important;} .psc-vc\/kb-root .psc-vc\/kb-end{opacity:0;transition:opacity 100ms ease,background-color 100ms ease;} .psc-vc\/kb-root .psc-vc\/kb-drag-item .psc-vc\/kb-end{opacity:1;border-color:#404040!important;} .psc-vc\/kb-root .psc-vc\/kb-drag-item .psc-vc\/kb-end:hover{border-color:#bdbdbd!important;color:#e5e5e5!important;background-color:#222222!important;} .psc-vc\/kb-root .psc-vc\/kb-avatar{transition:transform 130ms ease;} .psc-vc\/kb-root .psc-vc\/kb-avatar:hover{transform:translateY(-2px);} .psc-vc\/kb-root .psc-vc\/kb-warning{color:#fbbf24!important;border-color:#594822!important;} .psc-vc\/kb-root .psc-vc\/kb-success{color:#86d9bd!important;} .psc-vc\/kb-root .psc-vc\/kb-hidden, .psc-vc\/kb-dialog .psc-vc\/kb-hidden{ display:none!important;min-width:0!important;min-height:0!important;width:0!important;height:0!important; flex:0 0 0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important; } .psc-vc\/kb-root .psc-vc\/kb-column-body, .psc-vc\/kb-root .psc-vc\/kb-columns{scrollbar-width:thin;scrollbar-color:#3b3b3b transparent;} @container (max-width:850px){ .psc-vc\/kb-root .psc-vc\/kb-toolbar{flex-wrap:wrap!important;} } @container (max-width:850px){ .psc-vc\/kb-root .psc-vc\/kb-header{align-items:flex-start!important;} } @container (max-width:850px){ .psc-vc\/kb-root .psc-vc\/kb-header-tools{flex-wrap:wrap;justify-content:flex-end;} } @container (max-width:500px){ .psc-vc\/kb-root .psc-vc\/kb-header{flex-direction:column!important;gap:12px!important;margin-bottom:18px!important;} } @container (max-width:500px){ .psc-vc\/kb-root .psc-vc\/kb-header-tools{width:100%;justify-content:flex-end!important;} } @media(max-width:600px){.psc-vc\/kb-root{padding:18px 14px 14px!important;}} @media(prefers-reduced-motion:reduce){ .psc-vc\/kb-root *{transition:none!important;animation:none!important;scroll-behavior:auto!important;} } .psc-vc\/kb-dialog .psc-vc\/kb-dropdown{ background:#0a0a0a!important;border:1px solid #333!important;color:#e5e5e5!important; box-shadow:none!important;outline:none!important; } .psc-vc\/kb-avatars{ display:flex!important; align-items:center!important; height:28px!important; min-height:28px!important; max-height:28px!important; overflow:visible!important; } .psc-vc\/kb-avatars>.view-parent{ flex:0 0 28px!important; width:28px!important; height:28px!important; min-width:28px!important; min-height:28px!important; overflow:visible!important; } .psc-vc\/kb-avatars>.view-parent:not(:first-child){margin-left:-6px!important} ```