Developer Kit · Examples
Custom Drawing parte 2: localización de defectos con pines
Custom Drawing parte 2: localización de defectos con pines
Localización de defectos con pines
En <a href="https://www.arc-rider.de/documentation/custom-drawing">Custom Drawing parte 1: dibujar sobre una imagen</a> aprendiste a desarrollar una herramienta con la que puedes subir imágenes, dibujar sobre ellas y volver a guardar las imágenes editadas.
En esta parte 2 te mostramos cómo subir archivos PDF y colocar pines sobre ellos, por ejemplo para la localización de defectos. La interfaz de usuario se diferencia aquí sobre todo en el área de acciones de la derecha, donde los defectos se pueden pulsar directamente.
Además, los planos se pueden versionar, por ejemplo cuando se hacen cambios en el plano. Lo especial: al duplicar se conservan los defectos, mientras que el plano subyacente se puede actualizar. Así se pueden seguir y gestionar los cambios de forma eficiente.
Widgets necesarios
- Custom Drawing
- Custom Upload
- Custom Layout
- Input
- Icon
- Button
- Image
Procedimiento
Para usar Custom Drawing correctamente en el caso de uso "localización de pines sobre PDF", debes tener en cuenta algunos pasos en tu base de datos de Ninox.
<li data-preset-tag="h3">### Crear tablas
</li> En <a href="https://www.arc-rider.de/documentation/custom-drawing">Custom Drawing parte 1: dibujar sobre una imagen</a> ya has creado las siguientes tablas:
- Proyectos </p><ul><li data-preset-tag="p">Defectos (subtabla)
- Documentos (subtabla)
Shapes (subtabla)
</li></ul></li></ul></li></ul>Lo nuevo que se añade: para la localización de pines ahora creas una nueva tabla "Planos". Esta se vincula con Proyectos. Además, es importante que Shapes se vincule directamente con Defectos (N:1), y no solo, como hasta ahora, con Documentos.
- Proyectos </p><ul><li data-preset-tag="p"><p>Planos (subtabla)
- Defectos (subtabla) </p><ul><li data-preset-tag="p">Documentos (subtabla)
Shapes (subtabla)
</li></ul></li></ul></li></ul><li data-preset-tag="h3">### Crear campos en Shapes
</li> En <a href="https://www.arc-rider.de/documentation/custom-drawing">Custom Drawing parte 1: dibujar sobre una imagen</a> creaste la base de todos los campos. A continuación solo se explican los cambios o añadidos.
Vincula en la tabla Shapes la tabla Defectos. (N:1)
Mängel- Nombre:
Mängel - Tipo: Vínculo
- Asignación: por registro en el servidor
- Trigger tras cambio: ninguno
trigger_createMangel- Nombre:
trigger_createMangel - Tipo: Texto
- Asignación: por registro en memoria (navegador)
- Trigger tras cambio:
let current := this; let newMangel := (create 'Mängel'); newMangel.(Projekte := current.Dokumente.'Pläne'.Projekte); 'Mängel' := newMangel<li data-preset-tag="h3">### Crear campos en Documentos
</li> En <a href="https://www.arc-rider.de/documentation/custom-drawing">Custom Drawing parte 1: dibujar sobre una imagen</a> creaste la base de todos los campos. A continuación solo se explican los cambios o añadidos.
Pläne- Nombre:
Pläne - Tipo: Vínculo
- Asignación: por registro en el servidor
- Trigger tras cambio: ninguno
trigger_addBackgroundImage_browser- Nombre:
trigger_addBackgroundImage_browser - Tipo: Texto
- Asignación: por registro en el servidor
- Trigger tras cambio: (Nuevo)
let current := this; let recordDuplicatePlan := record(Dokumente,number('Pläne'.helper_duplicateVersion)); helper_base64 := trigger_addBackgroundImage_browser; let shapeImage := text({ type: "image", href: trigger_addBackgroundImage_browser, width: round(current.helper_width), height: round(current.helper_height), x: 0, y: 0 }); if cnt(Shapes[data_shapeData.isBackgroundImage]) = 0 then let newShape := (create Shapes); newShape.( Dokumente := current; helper_shapeDataValue := shapeImage ) end; if recordDuplicatePlan then let duplicatedShapes := recordDuplicatePlan.Shapes; for item in duplicatedShapes[data_shapeData.isBackgroundShape != true] do let newShape := (create Shapes); newShape.( Dokumente := current.Nr; helper_shapeDataValue := item.helper_shapeDataValue; 'Mängel' := item.'Mängel' ) end end; 'Pläne'.(helper_duplicateVersion := null); 'Pläne'.(helper_selectedImageDrawing := number(current.Nr)); trigger_addBackgroundImage_browser := nulltrigger_addBackgroundImage_app- Nombre:
trigger_addBackgroundImage_app - Tipo: Texto
- Asignación: por registro en memoria (navegador)
- Trigger tras cambio: (Nuevo)
let current := this; helper_base64 := trigger_addBackgroundImage_app; let shapeImage := text({ type: "image", href: trigger_addBackgroundImage_app, width: round(current.helper_width), height: round(current.helper_height), x: 0, y: 0 }); if cnt(Shapes[data_shapeData.isBackgroundImage]) = 0 then let newShape := (create Shapes); newShape.( Dokumente := current; helper_shapeDataValue := shapeImage ) end; let recordDuplicatePlan := record(Dokumente,number('Pläne'.helper_duplicateVersion)); if recordDuplicatePlan then let duplicatedShapes := recordDuplicatePlan.Shapes; for item in duplicatedShapes[data_shapeData.isBackgroundShape != true] do let newShape := (create Shapes); newShape.( Dokumente := current.Nr; helper_shapeDataValue := item.helper_shapeDataValue; 'Mängel' := item.'Mängel' ) end end; 'Pläne'.(helper_duplicateVersion := null); 'Pläne'.(helper_selectedImageDrawing := number(current.Nr)); trigger_addBackgroundImage_app := nulltrigger_deleteImage- Nombre:
trigger_deleteImage - Tipo: Sí / No
- Asignación: por registro en memoria (navegador)
- Trigger tras cambio: (Nuevo)
let current := this; if dialog("Plan-Version löschen", "Soll diese Plan-Version wirklich gelöscht werden?", ["Ja, löschen!", "Abbrechen"]) = "Ja, löschen!" then 'Pläne'.(helper_selectedImageDrawing := number(first(current.'Pläne'.Dokumente[Nr != current.Nr]).Nr)); delete this end; trigger_deleteImage := null<li data-preset-tag="h3">### Crear campos en
Pläne</li> En la tabla, crea una pestaña "Helper" para que todos los campos auxiliares se creen ahí y en la primera pestaña puedas tener tu Custom Drawing Image.
Bezeichnung- Nombre:
Bezeichnung - Tipo: Texto
- Asignación: por registro en el servidor
- Trigger tras cambio: ninguno
helper_base64- Nombre:
helper_base64 - Tipo: Texto
- Asignación: por registro en el servidor
- Trigger tras cambio: ninguno
helper_selectedImageDrawing- Nombre:
helper_selectedImageDrawing - Tipo: Número
- Asignación: por registro en el servidor
- Trigger tras cambio: ninguno
helper_duplicateVersion- Nombre:
helper_duplicateVersion - Tipo: Texto
- Asignación: por registro en el servidor
- Trigger tras cambio: ninguno
trigger_cancelUpload- Nombre:
trigger_cancelUpload - Tipo: Texto
- Asignación: por registro en memoria (navegador)
- Trigger tras cambio:
if cnt(Dokumente) = 0 then if dialog("Abbrechen", "Soll der gesamte Plan wirklich gelöscht werden?", ["Ja, löschen!", "Abbrechen"]) = "Ja, löschen!" then delete this end else if helper_duplicateVersion != null then if dialog("Duplizieren abbrechen?", "Soll der Vorgang wirklich abgebrochen werden?", ["Ja", "Nein"]) = "Ja" then helper_duplicateVersion := null end end; trigger_cancelUpload := null end<li data-preset-tag="h3">### Insertar widgets en Planos
</li> En la tabla Planos inserta ahora el siguiente código de aplicación. Este incluye los widgets descritos arriba.
let current := this; let fontColor := "#7a83a2"; let recordSelectedImageDrawing := record(Dokumente,helper_selectedImageDrawing); let drawingSticker := [{ uid: "red_sticker", image: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0icGluIiBkYXRhLW5hbWU9InBpbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTYwIDgwMCI+CiAgPGcgaWQ9InBpbiI+CiAgICA8cGF0aCBpZD0icGluLTIiIGRhdGEtbmFtZT0icGluIiAgZmlsbD0iIzNlNmZmZiIgZD0iTTU2MCwyODBjMCwxNTQuNjUtMjgwLDUyMC0yODAsNTIwLDAsMC0yODAtMzY1LjM1LTI4MC01MjBTMTI1LjM2LDAsMjgwLDBzMjgwLDEyNS4zNSwyODAsMjgwIi8+CiAgICA8cGF0aCBpZD0icm91bmRfb3V0ZXIiIGRhdGEtbmFtZT0icm91bmQgb3V0ZXIiIGZpbGw9IiNmZmYiIGQ9Ik00NTguMiwzMDUuMzljMC05OC40MS03OS43Ny0xNzguMi0xNzguMi0xNzguMnMtMTc4LjIsNzkuNzktMTc4LjIsMTc4LjIsNzkuNzcsMTc4LjIsMTc4LjIsMTc4LjIsMTc4LjItNzkuNzYsMTc4LjItMTc4LjIiLz4KICAgIDxwYXRoIGlkPSJyb3VuZF9pbm5lciIgZGF0YS1uYW1lPSJyb3VuZCBpbm5lciIgZmlsbD0iI2U5NTk1YyIgZD0iTTQwMS45NiwzMDUuMzljMCw2Ny4yNC01NC43NiwxMjEuOTYtMTIxLjk2LDEyMS45NnMtMTIxLjk2LTU0LjczLTEyMS45Ni0xMjEuOTYsNTQuNzYtMTIxLjk2LDEyMS45Ni0xMjEuOTYsMTIxLjk2LDU0Ljc5LDEyMS45NiwxMjEuOTYiLz4KICA8L2c+Cjwvc3ZnPg==", icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0icGluIiBkYXRhLW5hbWU9InBpbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTYwIDgwMCI+CiAgPGcgaWQ9InBpbiI+CiAgICA8cGF0aCBpZD0icGluLTIiIGRhdGEtbmFtZT0icGluIiAgZmlsbD0iIzNlNmZmZiIgZD0iTTU2MCwyODBjMCwxNTQuNjUtMjgwLDUyMC0yODAsNTIwLDAsMC0yODAtMzY1LjM1LTI4MC01MjBTMTI1LjM2LDAsMjgwLDBzMjgwLDEyNS4zNSwyODAsMjgwIi8+CiAgICA8cGF0aCBpZD0icm91bmRfb3V0ZXIiIGRhdGEtbmFtZT0icm91bmQgb3V0ZXIiIGZpbGw9IiNmZmYiIGQ9Ik00NTguMiwzMDUuMzljMC05OC40MS03OS43Ny0xNzguMi0xNzguMi0xNzguMnMtMTc4LjIsNzkuNzktMTc4LjIsMTc4LjIsNzkuNzcsMTc4LjIsMTc4LjIsMTc4LjIsMTc4LjItNzkuNzYsMTc4LjItMTc4LjIiLz4KICAgIDxwYXRoIGlkPSJyb3VuZF9pbm5lciIgZGF0YS1uYW1lPSJyb3VuZCBpbm5lciIgZmlsbD0iI2U5NTk1YyIgZD0iTTQwMS45NiwzMDUuMzljMCw2Ny4yNC01NC43NiwxMjEuOTYtMTIxLjk2LDEyMS45NnMtMTIxLjk2LTU0LjczLTEyMS45Ni0xMjEuOTYsNTQuNzYtMTIxLjk2LDEyMS45Ni0xMjEuOTYsMTIxLjk2LDU0Ljc5LDEyMS45NiwxMjEuOTYiLz4KICA8L2c+Cjwvc3ZnPg==", label: "Roter Pin", width: 60, height: 60, originX: 0.5, originY: 0.89, default: true }, { uid: "green_sticker", image: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0icGluIiBkYXRhLW5hbWU9InBpbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTYwIDgwMCI+CiAgPGcgaWQ9InBpbiI+CiAgICA8cGF0aCBpZD0icGluLTIiIGRhdGEtbmFtZT0icGluIiAgZmlsbD0iIzNlNmZmZiIgZD0iTTU2MCwyODBjMCwxNTQuNjUtMjgwLDUyMC0yODAsNTIwLDAsMC0yODAtMzY1LjM1LTI4MC01MjBTMTI1LjM2LDAsMjgwLDBzMjgwLDEyNS4zNSwyODAsMjgwIi8+CiAgICA8cGF0aCBpZD0icm91bmRfb3V0ZXIiIGRhdGEtbmFtZT0icm91bmQgb3V0ZXIiIGZpbGw9IiNmZmYiIGQ9Ik00NTguMiwzMDUuMzljMC05OC40MS03OS43Ny0xNzguMi0xNzguMi0xNzguMnMtMTc4LjIsNzkuNzktMTc4LjIsMTc4LjIsNzkuNzcsMTc4LjIsMTc4LjIsMTc4LjIsMTc4LjItNzkuNzYsMTc4LjItMTc4LjIiLz4KICAgIDxwYXRoIGlkPSJyb3VuZF9pbm5lciIgZGF0YS1uYW1lPSJyb3VuZCBpbm5lciIgZmlsbD0iIzc1YjY0OSIgZD0iTTQwMS45NiwzMDUuMzljMCw2Ny4yNC01NC43NiwxMjEuOTYtMTIxLjk2LDEyMS45NnMtMTIxLjk2LTU0LjczLTEyMS45Ni0xMjEuOTYsNTQuNzYtMTIxLjk2LDEyMS45Ni0xMjEuOTYsMTIxLjk2LDU0Ljc5LDEyMS45NiwxMjEuOTYiLz4KICA8L2c+Cjwvc3ZnPg==", icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0icGluIiBkYXRhLW5hbWU9InBpbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTYwIDgwMCI+CiAgPGcgaWQ9InBpbiI+CiAgICA8cGF0aCBpZD0icGluLTIiIGRhdGEtbmFtZT0icGluIiAgZmlsbD0iIzNlNmZmZiIgZD0iTTU2MCwyODBjMCwxNTQuNjUtMjgwLDUyMC0yODAsNTIwLDAsMC0yODAtMzY1LjM1LTI4MC01MjBTMTI1LjM2LDAsMjgwLDBzMjgwLDEyNS4zNSwyODAsMjgwIi8+CiAgICA8cGF0aCBpZD0icm91bmRfb3V0ZXIiIGRhdGEtbmFtZT0icm91bmQgb3V0ZXIiIGZpbGw9IiNmZmYiIGQ9Ik00NTguMiwzMDUuMzljMC05OC40MS03OS43Ny0xNzguMi0xNzguMi0xNzguMnMtMTc4LjIsNzkuNzktMTc4LjIsMTc4LjIsNzkuNzcsMTc4LjIsMTc4LjIsMTc4LjIsMTc4LjItNzkuNzYsMTc4LjItMTc4LjIiLz4KICAgIDxwYXRoIGlkPSJyb3VuZF9pbm5lciIgZGF0YS1uYW1lPSJyb3VuZCBpbm5lciIgZmlsbD0iIzc1YjY0OSIgZD0iTTQwMS45NiwzMDUuMzljMCw2Ny4yNC01NC43NiwxMjEuOTYtMTIxLjk2LDEyMS45NnMtMTIxLjk2LTU0LjczLTEyMS45Ni0xMjEuOTYsNTQuNzYtMTIxLjk2LDEyMS45Ni0xMjEuOTYsMTIxLjk2LDU0Ljc5LDEyMS45NiwxMjEuOTYiLz4KICA8L2c+Cjwvc3ZnPg==", label: "Green Sticker", width: 60, height: 60, originX: 0.5, originY: 0.89 }]; let drawingArea := arcCustomDrawing({ uniqueId: "issue board" + Nr, embedded: true, height: "100%", tableId: tableId("Shapes"), fieldId: fieldId("Shapes", "helper_shapeDataValue"), changeFieldValues: [{ fieldId: fieldId("Shapes", "Dokumente"), value: helper_selectedImageDrawing }, { fieldId: fieldId("Shapes", "trigger_createMangel"), value: "create" }], exportSettings: { allowedTypes: ["jpg", "png", "svg", "pdf"], target: "file", recordId: recordSelectedImageDrawing.Nr, fieldId: fieldId(recordSelectedImageDrawing.Nr, "helper_base64") }, canvas: { width: recordSelectedImageDrawing.helper_width, height: recordSelectedImageDrawing.helper_height, offsetX: 0, offsetY: 0 }, zooming: { step: 0.25, min: 0.3, max: 4 }, drawingSettings: { strokeWidth: 1, strokeColor: "#e9595c" }, artboard: { width: recordSelectedImageDrawing.helper_width, height: recordSelectedImageDrawing.helper_height }, stickerTypes: drawingSticker, shapes: (recordSelectedImageDrawing.Shapes[helper_disable != true] order by data_shapeData.sortId).[{ shapeId: Nr, movable: data_shapeData.movable, shapeDataValue: helper_shapeDataValue, sidebarItem: { header: arcCustomLayout({ uniqueId: "Beispiel " + Nr, embedded: true, fullscreen: false, ninoxVersion: "", page: true, fullscreenMode: "", showAdminTools: true, hideHeaderIcons: true, direction: "horizontal", alignX: "left", alignY: "center", width: "", height: "", gap: "10px", backgroundColor: "", paddingY: "", paddingX: "", styles: "", scrollSettings: { scrollY: false, scrollX: false }, blocks: [{ width: "fraction", height: "auto", lineHeight: "", alignX: "left", color: "#fff", styles: "", value: if data_shapeData.isBackgroundShape != true then "Mangel ID:" + 'Mängel'.Nr else "Plan Hintergrund" end }, if data_shapeData.isBackgroundShape != true then { width: "auto", height: "auto", lineHeight: "", alignX: "left", color: "", value: arcCustomButton({ title: "Öffnen", height: "20px", width: "auto", actions: [{ type: "popup", recordId: 'Mängel'.Nr }] }) } end] }), content: if data_shapeData.isBackgroundShape != true then arcCustomButton({ uniqueId: "undo action" + Nr, title: "Mangel löschen", width: "100%", height: "", alignY: "", alignX: "30px", gap: "5px", fontSize: "16px", fontColor: "#fff", backgroundColor: "#e9595c", borderColor: "transparent", borderRadius: "5px", showBadge: false, badgeTitle: "", badgeColor: "", badgeBackground: "", badgeBorderColor: "", badgePosition: "", actions: let id := this; [{ type: "update", recordId: 'Mängel'.Nr, field: fieldId('Mängel'.Nr, "trigger_deleteMangel"), value: true }] }) end } }], rightSideContent: { show: true, header: arcCustomLayout({ uniqueId: "drawing right side header " + Nr, embedded: true, direction: "vertical", alignX: "left", alignY: "top", width: "100%", height: "100%", gap: "10px", backgroundColor: "", paddingY: "20px", paddingX: "20px", styles: "", scrollSettings: { scrollY: false, scrollX: false }, blocks: [{ width: "", height: "auto", lineHeight: "", alignX: "left", color: "#fff", value: "Plan-Version ID " + helper_selectedImageDrawing }] }), content: { showShapeLayers: true, value: "" }, footer: arcCustomLayout({ uniqueId: "drawing right side footer " + Nr, embedded: true, direction: "vertical", alignX: "left", alignY: "center", width: "100%", height: "", gap: "0", backgroundColor: "", paddingY: "0", paddingX: "0", styles: "", scrollSettings: { scrollY: false, scrollX: false }, blocks: [{ width: "100%", height: "fraction", lineHeight: "", alignX: "left", color: "", styles: "border-bottom: 1px solid #262b40;", value: "" }, { width: "100%", height: "auto", lineHeight: "", alignX: "left", color: "", styles: "padding:8px;padding-bottom:0;", value: arcCustomButton({ uniqueId: "undo action" + Nr, title: "Duplizieren", width: "100%", height: "", alignY: "", alignX: "30px", gap: "5px", fontSize: "16px", fontColor: "#fff", backgroundColor: "#272A40", borderColor: "transparent", borderRadius: "5px", showBadge: false, badgeTitle: "", badgeColor: "", badgeBackground: "", badgeBorderColor: "", badgePosition: "", actions: let id := this; [{ type: "update", recordId: current.Nr, field: fieldId(current.Nr, "helper_duplicateVersion"), value: number(helper_selectedImageDrawing) }] }) }, { width: "100%", height: "auto", lineHeight: "", alignX: "left", color: "", styles: "padding:8px", value: arcCustomButton({ uniqueId: "undo action" + Nr, title: "Löschen", width: "100%", height: "", alignY: "", alignX: "30px", gap: "5px", fontSize: "16px", fontColor: "#fff", backgroundColor: "#e9595c", borderColor: "transparent", borderRadius: "5px", showBadge: false, badgeTitle: "", badgeColor: "", badgeBackground: "", badgeBorderColor: "", badgePosition: "", actions: let id := this; [{ type: "update", recordId: recordSelectedImageDrawing.Nr, field: fieldId(recordSelectedImageDrawing.Nr, "trigger_deleteImage"), value: true }] }) }] }) } }); arcCustomLayout({ uniqueId: "drawing " + Nr, embedded: false, fullscreen: true, ninoxVersion: "3.13", page: false, fullscreenMode: if isAdminMode() then " else "full" end, showAdminTools: false, hideHeaderIcons: false, direction: "vertical", alignX: "left", alignY: "top", width: "100%", height: "100%", gap: "0", backgroundColor: "#181d2c", paddingY: "", paddingX: "", styles: "", scrollSettings: { scrollY: true }, blocks: [{ width: "", height: "100px", lineHeight: "", alignX: "left", paddingX: "", styles: "", value: arcCustomLayout({ uniqueId: "layout header " + Nr, embedded: true, direction: "horizontal", alignX: "left", alignY: "center", width: "100%", height: "100%", gap: "10px", backgroundColor: "", paddingY: "", paddingX: "", styles: "", scrollSettings: { scrollY: true }, blocks: [{ width: "fraction", height: "auto", lineHeight: "", alignX: "left", color: "", styles: "font-size:24px;color:#7a83a2;text-wrap:nowrap;padding:0 40px;", value: arcCustomInput({ uniqueId: "Plan Titel " + Nr, recordId: Nr, fieldId: fieldId("Pläne", "Bezeichnung"), title: text(Bezeichnung), value: text(Bezeichnung), type: "text", embedded: true, disabled: false, tempStorage: false, suffix: "", width: "", height: "", alignX: "left", paddingY: "", paddingX: "0", fontColor: "#7a83a2", fontSize: "24px", fontWeight: "", backgroundColor: "transparent", borderWidth: "", borderColor: "transparent", borderRadius: "", placeholderSettings: { value: "Bezeichnung des Plans", fontColor: "#7a83a288", backgroundColor: "transparent" }, focusAction: { width: "100%", showFocusOutline: true, outlineWidth: "4px", outlineColor: "#04CD10" }, labelSettings: { title: "", fontSize: "", alignX: "", gap: "" } }) }, { width: "auto", height: "auto", lineHeight: "", alignX: "right", color: "", value: arcCustomButton({ uniqueId: "Button schließen" + Nr, title: "Schließen", width: "", height: "", alignY: "", alignX: "", paddingX: "", paddingY: "", gap: "5px", icon: arcCustomIcon({ name: "x", color: fontColor }), iconPosition: "right", fontSize: "", fontColor: fontColor, backgroundColor: "transparent", borderColor: "transparent", borderRadius: "5px", actions: [{ type: "closeRecord", recordId: current.Nr }] }) }] }) }, { width: "100%", height: "50px", lineHeight: "", alignX: "left", color: "", backgroundColor: "#141925", styles: "border-bottom: 1px solid #262b40;border-top: 1px solid #262b40;", value: arcCustomLayout({ comment: "Tab menu ausblenden", uniqueId: "Beispiel " + Nr, embedded: true, fullscreen: false, ninoxVersion: "", page: true, fullscreenMode: "", showAdminTools: true, hideHeaderIcons: true, direction: "horizontal", alignX: "left", alignY: "bottom", width: "100%", height: "100%", gap: "0", backgroundColor: "", paddingY: "", paddingX: "", styles: "", scrollSettings: { scrollY: false, scrollX: false }, blocks: Dokumente.[{ width: "auto", height: "40px", lineHeight: "", alignX: "left", color: fontColor, backgroundColor: if current.recordSelectedImageDrawing = number(Nr) then "#272A40" else "#181d2c" end, styles: "font-weight:600; padding:0 20px; border-left: 1px solid #262b40;border-right: 1px solid #262b40;", value: arcCustomLayout({ uniqueId: "Beispiel " + Nr, embedded: true, direction: "horizontal", alignX: "left", alignY: "center", width: "auto", height: "", gap: "10px", backgroundColor: "", paddingY: "", paddingX: "", styles: "", scrollSettings: { scrollY: false, scrollX: false }, blocks: [{ width: "auto", height: "auto", lineHeight: "", alignX: "left", color: fontColor, styles: "", value: "Plan-Version Nr." + Nr }] }), clickAction: { type: "update", recordId: current.Nr, field: fieldId(current.Nr, "helper_selectedImageDrawing"), value: number(Nr) } }] }) }, { width: "100%", height: "100%", lineHeight: "", alignX: "left", color: "", backgroundColor: "#181d2c", value: if helper_duplicateVersion != null or cnt(Dokumente) = 0 then arcCustomLayout({ uniqueId: "Upload und Button " + Nr, embedded: true, fullscreen: false, ninoxVersion: "", page: true, fullscreenMode: "", showAdminTools: true, hideHeaderIcons: true, direction: "vertical", alignX: "left", alignY: "top", width: "", height: "", gap: "5px", backgroundColor: "", paddingY: "", paddingX: "", styles: "", scrollSettings: { scrollY: false, scrollX: false }, blocks: [{ comment: "------------------------------- Custom Upload ------------------------------", width: "", height: "auto", lineHeight: "", alignX: "center", color: "", styles: "", value: arcCustomUpload({ uniqueId: "multi image upload in drawing " + current.Nr, capture: false, multiupload: false, embedded: true, container: { icon: "", label: "Bilder Upload", height: "100%", width: "100%", value: arcCustomLayout({ uniqueId: "Beispiel " + Nr, embedded: true, fullscreen: false, ninoxVersion: "", page: true, fullscreenMode: "", showAdminTools: true, hideHeaderIcons: true, direction: "vertical", alignX: "center", alignY: "center", width: "", height: "100%", gap: "10px", backgroundColor: "", paddingY: "", paddingX: "", styles: "", scrollSettings: { scrollY: false, scrollX: false }, blocks: [{ width: "auto", height: "auto", lineHeight: "", alignX: "left", color: "", styles: "border-radius:50px;overflow:hidden;", value: html(--- <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" style="background-color:#7a83a2;"><path fill="#181d2c" d="M29 21v6a.75.75 0 0 1-.75.75h-16.5A.75.75 0 0 1 11 27v-6a.75.75 0 0 1 1.5 0v5.25h15V21a.75.75 0 0 1 1.5 0m-12.219-6.219 2.469-2.471V21a.75.75 0 0 0 1.5 0v-8.69l2.469 2.471a.751.751 0 0 0 1.062-1.062l-3.75-3.75a.754.754 0 0 0-1.062 0l-3.75 3.75a.751.751 0 0 0 1.062 1.062"></path></svg> ---) }, { width: "auto", height: "auto", lineHeight: "", alignX: "left", color: "#7a83a2", value: html(--- **Neue Planversion hochladen** ---) }] }) }, filename: { tableId: tableId("Dokumente"), fieldId: fieldId("Dokumente", "Dateiname") }, image: { tableId: tableId("Dokumente"), fieldId: if ninoxApp() = "web" then fieldId("Dokumente", "trigger_addBackgroundImage_browser") else fieldId("Dokumente", "trigger_addBackgroundImage_app") end, width: 2000, height: 1000, widthFieldId: fieldId("Dokumente", "helper_width"), heightFieldId: fieldId("Dokumente", "helper_height") }, convertSettings: { fileType: "jpg", apiKey: "something", width: 9000, height: 9000, dpi: 150 }, changeFieldValues: [{ fieldId: fieldId("Dokumente", "Pläne"), value: number(current.Nr) }] }) }, { comment: "------------------------------- Custom Button Abbrechen ------------------------------", width: "", height: "auto", lineHeight: "", alignX: "center", color: "", value: arcCustomButton({ uniqueId: "Button cancel" + Nr, title: "Abbrechen", width: "", height: "", alignY: "", alignX: "", paddingX: "", paddingY: "", gap: "5px", icon: "", iconPosition: "left", fontSize: "", fontColor: "#181d2c", backgroundColor: "#7a83a2", borderColor: "#7a83a2", borderRadius: "50px", showBadge: false, badgeTitle: "", badgeColor: "", badgeBackground: "", badgeBorderColor: "", badgePosition: "", hoverActions: { fontColor: "", iconColor: "", backgroundColor: "", borderColor: "", animation: "0.25s" }, actions: [{ type: "update", recordId: current.Nr, field: fieldId(current.Nr, "trigger_cancelUpload"), value: "cancel" }] }) }] }) else drawingArea end }] })¡Tadaaaaa 🧙🏼♀️ El widget de localización de defectos con pines ya debería funcionar en tu sistema.
- Nombre: