Examples

Custom Drawing Part 2: Defect Localization with Pins

Widget bestellen

Defect Localization with Pins

In Custom Drawing Part 1: Drawing in the Image you learned how to develop a tool that allows you to upload images, draw on them, and save the edited images back.

In this Part 2, we will show you how to upload PDF files and place pins on them – for example, for defect localization. The user interface differs particularly in the right action area, where the defects are directly clickable.

Additionally, plans can be versioned, for example, when changes are made to the plan. The special thing about this is: When duplicating, the defects remain intact, while the underlying plan can be updated. This allows changes to be efficiently tracked and managed.

Necessary Widgets

Custom Drawing
Custom Upload
Custom Layout
Input
Icon
Button
Image

Procedure

To properly use Custom Drawing for the use case "Pin Localization on PDF", you need to keep in mind a few steps in your Ninox database.

Creating Tables

In Custom Drawing Part 1: Drawing in the Image, you have already created the following tables:

Projects
- Defects (Subtable)
  - Documents (Subtable)
    - Shapes (Subtable)

What is new: For the pin localization, you will now create a new table "Plans". This will be linked with Projects. Additionally, it is important that Shapes is directly linked with Defects (N:1) and not just, as previously, with Documents.

Projects
- Plans (Subtable)
- Defects (Subtable)
  - Documents (Subtable)
    - Shapes (Subtable)

Creating Fields in Shapes

In Custom Drawing Part 1: Drawing in the Image, you laid the foundation for all fields. The following only explains changes or additions.

Please link the table Shapes with the table Defects. (N:1)

`Defects`

Name: Defects
Type: Link
Assignment: Per record on the server
Trigger on change: None

`trigger_createDefect`

Name: trigger_createDefect
Type: Text
Assignment: Per record in storage (Browser)
Trigger on change:

let current := this;
let newMangel := (create 'Mängel');
newMangel.(Projekte := current.Dokumente.'Pläne'.Projekte);
'Mängel' := newMangel

Creating Fields in Documents

In Custom Drawing Part 1: Drawing in the Image, you laid the foundation for all fields. The following only explains changes or additions.

`Plans`

Name: Plans
Type: Link
Assignment: Per record on the server
Trigger on change: None

`trigger_addBackgroundImage_browser`

Name: trigger_addBackgroundImage_browser
Type: Text
Assignment: Per record on the server
Trigger on change: (New)

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`

Name: trigger_addBackgroundImage_app
Type: Text
Assignment: Per record in storage (Browser)
Trigger on change: (New)

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`

Name: trigger_deleteImage
Type: Yes / No
Assignment: Per record in storage (Browser)
Trigger on change: (New)

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

Creating Fields in Plans

In the table, you create a tab "Helper" so that all helper fields can be created here and your custom drawing image can be placed on the first tab.

`Name`

Name: Name
Type: Text
Assignment: Per record on the server
Trigger on change: None

`helper_base64`

Name: helper_base64
Type: Text
Assignment: Per record on the server
Trigger on change: None

`helper_selectedImageDrawing`

Name: helper_selectedImageDrawing
Type: Number
Assignment: Per record on the server
Trigger on change: None

`helper_duplicateVersion`

Name: helper_duplicateVersion
Type: Text
Assignment: Per record on the server
Trigger on change: None

`trigger_cancelUpload`

Name: trigger_cancelUpload
Type: Text
Assignment: Per record in storage (Browser)
Trigger on change:

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

Inserting Widgets into Plans

In the table Plans, you now insert the following application code. This includes the widgets described above.

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 🧙🏼‍♀️ The widget Defect Localization with Pins should now be functioning for you.

Custom Drawing Part 2: Defect Localization with Pins

Defect Localization with Pins

Necessary Widgets

Procedure

Creating Tables

Creating Fields in Shapes

Defects

trigger_createDefect

Creating Fields in Documents

Plans

trigger_addBackgroundImage_browser

trigger_addBackgroundImage_app

trigger_deleteImage

Creating Fields in Plans

Name

helper_base64

helper_selectedImageDrawing

helper_duplicateVersion

trigger_cancelUpload

Inserting Widgets into Plans