Beispiele

Custom Drawing Teil 2: Mangel-Verortung mit Pins

Widget bestellen

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ängel
Typ: Verknüpfung
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine

`trigger_createMangel`

Bezeichnung: trigger_createMangel
Typ: 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' := newMangel

Felder 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äne
Typ: Verknüpfung
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine

`trigger_addBackgroundImage_browser`

Bezeichnung: trigger_addBackgroundImage_browser
Typ: 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 := null

`trigger_addBackgroundImage_app`

Bezeichnung: trigger_addBackgroundImage_app
Typ: 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 := null

`trigger_deleteImage`

Bezeichnung: trigger_deleteImage
Typ: 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 := null

Felder in Pläne anlegen

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: Bezeichnung
Typ: Text
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine

`helper_base64`

Bezeichnung: helper_base64
Typ: Text
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine

`helper_selectedImageDrawing`

Bezeichnung: helper_selectedImageDrawing
Typ: Zahl
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine

`helper_duplicateVersion`

Bezeichnung: helper_duplicateVersion
Typ: Text
Zuweisung: Pro Datensatz im Server
Trigger nach Änderung: Keine

`trigger_cancelUpload`

Bezeichnung: trigger_cancelUpload
Typ: 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
end

Widgets 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: "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 🧙🏼‍♀️ Das Widget Mangel-Verortung mit Pins sollte nun funktionsfähig bei dir laufen.

Custom Drawing Teil 2: Mangel-Verortung mit Pins

Mangel-Verortung mit Pins

Notwendige Widgets

Vorgehensweise

Anlegen von Tabellen

Felder in Shapes anlegen

Mängel

trigger_createMangel

Felder in Dokumente anlegen

Pläne

trigger_addBackgroundImage_browser

trigger_addBackgroundImage_app

trigger_deleteImage

Felder in Pläne anlegen

Bezeichnung

helper_base64

helper_selectedImageDrawing

helper_duplicateVersion

trigger_cancelUpload

Widgets in Pläne einfügen