Beispiele
Custom Drawing Teil 2: Mangel-Verortung mit Pins
Mangel-Verortung mit Pins
In Custom Drawing Teil 1: Zeichnen im Bild hast du gelernt, wie du ein Tool entwickelst, mit dem du Bilder hochladen, darin zeichnen und die bearbeiteten Bilder wieder abspeichern kannst.
In diesem Teil 2 zeigen wir dir, wie du PDF-Dateien hochladen und darauf Pins setzen kannst – zum Beispiel für die Mangelverortung. Das User Interface unterscheidet sich hier insbesondere im rechten Aktionsbereich, wo die Mängel direkt klickbar sind.
Zusätzlich können Pläne versioniert werden, etwa wenn Änderungen am Plan vorgenommen werden. Das Besondere dabei: Beim Duplizieren bleiben die Mängel erhalten, während sich der zugrunde liegende Plan aktualisieren kann. So lassen sich Änderungen effizient nachvollziehen und verwalten.
Notwendige Widgets
Custom Drawing
Custom Upload
Custom Layout
Input
Icon
Button
Image
Vorgehensweise
Um Custom Drawing für den Use Case "Pin-Verortung auf PDF" bei dir richtig einzusetzen, musst du einige Schritte in deiner Ninox Datenbank beachten.
Anlegen von Tabellen
In Custom Drawing Teil 1: Zeichnen im Bild hast du folgende Tabellen bereits angelegt:
Projekte
Mängel (Untertabelle)
Dokumente (Untertabelle)
Shapes (Untertabelle)
Was neu dazu kommt: Für die Pin-Verortung legst du nun eine neue Tabelle "Pläne" an. Diese wird mit Projekte verknüpft. Außerdem ist es wichtig, dass Shapes direkt mit Mängel (N:1) verknüpft wird und nicht nur, wie bislang, mit Dokumente.
Projekte
Pläne (Untertabelle)
Mängel (Untertabelle)
Dokumente (Untertabelle)
Shapes (Untertabelle)
Felder in Shapes anlegen
In Custom Drawing Teil 1: Zeichnen im Bild hast du die Grundlage aller Felder geschaffen. Folgend werden nur Änderungen oder Ergänzungen erläutert.
Bitte verknüpfe in der Tabelle Shapes die Tabelle Mängel. (N:1)
Mängel
Bezeichnung:
MängelTyp: Verknüpfung
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine
trigger_createMangel
Bezeichnung:
trigger_createMangelTyp: Text
Zuweisung: Pro Datensatz im Speicher (Browser)
Trigger nach Änderung:
let current := this;
let newMangel := (create 'Mängel');
newMangel.(Projekte := current.Dokumente.'Pläne'.Projekte);
'Mängel' := newMangelFelder in Dokumente anlegen
In Custom Drawing Teil 1: Zeichnen im Bild hast du die Grundlage aller Felder geschaffen. Folgend werden nur Änderungen oder Ergänzungen erläutert.
Pläne
Bezeichnung:
PläneTyp: Verknüpfung
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine
trigger_addBackgroundImage_browser
Bezeichnung:
trigger_addBackgroundImage_browserTyp: Text
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: (Neu)
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
Bezeichnung:
trigger_addBackgroundImage_appTyp: Text
Zuweisung: Pro Datensatz im Speicher (Browser)
Trigger nach Änderung: (Neu)
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
Bezeichnung:
trigger_deleteImageTyp: Ja / Nein
Zuweisung: Pro Datensatz im Speicher (Browser)
Trigger nach Änderung: (Neu)
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 := nullFelder in
Pläneanlegen
In der Tabelle legst du dir einen Karteireiter "Helper" an, damit alle Hilfsfelder hier erstellt werden und auf dem ersten Karteireiter dein Custom Drawing Image liegen kann.
Bezeichnung
Bezeichnung:
BezeichnungTyp: Text
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine
helper_base64
Bezeichnung:
helper_base64Typ: Text
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine
helper_selectedImageDrawing
Bezeichnung:
helper_selectedImageDrawingTyp: Zahl
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine
helper_duplicateVersion
Bezeichnung:
helper_duplicateVersionTyp: Text
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine
trigger_cancelUpload
Bezeichnung:
trigger_cancelUploadTyp: Text
Zuweisung: Pro Datensatz im Speicher (Browser)
Trigger nach Änderung:
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
endWidgets in Pläne einfügen
In der Tabelle Pläne fügst du nun den folgenden Anwendungscode ein. Dieser umfasst die oben beschriebenen Widgets.
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(---
<b>Neue Planversion hochladen</b>
---)
}]
})
},
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: "svg"
},
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 🧙🏼♀️ Das Widget Mangel-Verortung mit Pins sollte nun funktionsfähig bei dir laufen.