--- title: "Custom Drawing parte 2: localización de defectos con pines" slug: "custom-drawing-teil-2-mangel-verortung-mit-pins" category: "Ejemplos" hosts: "ninox" locale: "es" reactExampleKind: "recipe" reactExample: "recipe-drawing-pins.tsx" --- # Custom Drawing parte 2: localización de defectos con pines # Localización de defectos con pines ![](https://framerusercontent.com/images/XSN9KLdAVIgeizkqag1BjBvXo.png) En [Custom Drawing parte 1: dibujar sobre una imagen](https://www.arc-rider.de/documentation/custom-drawing) 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.
  • ### Crear tablas
    • En [Custom Drawing parte 1: dibujar sobre una imagen](https://www.arc-rider.de/documentation/custom-drawing) ya has creado las siguientes tablas: - Proyectos

    **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

  • ### Crear campos en Shapes
    • En [Custom Drawing parte 1: dibujar sobre una imagen](https://www.arc-rider.de/documentation/custom-drawing) 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 ![](https://framerusercontent.com/images/Ds2ai9f0JnAY41kcEDmjNMKUaf4.png) #### `trigger_createMangel` - Nombre: `trigger_createMangel` - Tipo: Texto - Asignación: por registro en memoria (navegador) - Trigger tras cambio: ```javascript let current := this; let newMangel := (create 'Mängel'); newMangel.(Projekte := current.Dokumente.'Pläne'.Projekte); 'Mängel' := newMangel ```
  • ### Crear campos en Documentos
    • En [Custom Drawing parte 1: dibujar sobre una imagen](https://www.arc-rider.de/documentation/custom-drawing) 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 ![](https://framerusercontent.com/images/vArz7BA7MbQNGAaCuZamFTp4DY.png) #### `trigger_addBackgroundImage_browser` - Nombre: `trigger_addBackgroundImage_browser` - Tipo: Texto - Asignación: por registro en el servidor - Trigger tras cambio: **(Nuevo)** ```javascript 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 := null ``` #### `trigger_addBackgroundImage_app` - Nombre: `trigger_addBackgroundImage_app` - Tipo: Texto - Asignación: por registro en memoria (navegador) - Trigger tras cambio: **(Nuevo)** ```javascript 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 := null ``` #### `trigger_deleteImage` - Nombre: `trigger_deleteImage` - Tipo: Sí / No - Asignación: por registro en memoria (navegador) - Trigger tras cambio: **(Nuevo)** ```javascript 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 ```
  • ### Crear campos en `Pläne`
    • 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. ![](https://framerusercontent.com/images/ZXqJg1Ln3GN9ietnyxtz1diUxg.png) #### `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: ```javascript 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 ```
  • ### Insertar widgets en Planos
    • En la tabla Planos inserta ahora el siguiente código de aplicación. Este incluye los widgets descritos arriba. ```javascript 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(--- ---) }, { 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. **