Examples

Custom Drawing Part 1: Drawing in the Image

Widget bestellen

Drawing in the Picture

In the following use case, we will show you a step-by-step guide on how to build a tool where you can upload images, draw on the images, and save them again. And best of all, it's child’s play in Ninox.

Necessary Widgets

Custom Drawing
Custom Upload
Custom Layout
Custom Grid
Icon
Button
Image

Procedure

To properly use Custom Drawing for the use case "Drawing in the Picture" in your Ninox database, you need to follow a few steps.

Creating Tables

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

Creating Fields in Shapes

You should now create the following fields in the subtable Shapes. Please ensure that the fields are named exactly as listed here.

`helper_shapeDataValue`

Label: helper_shapeDataValue
Type: Text
Trigger on change: none
Assignment: Per record on the server

`data_shapeData`

Label: data_shapeData
Type: Function
Code:

let current := this;
let backgroundShape := first(Dokumente.Shapes[helper_shapeDataValue != null and parseJSON(helper_shapeDataValue).type = "image"]);
let parsedShapeData := parseJSON(helper_shapeDataValue);
setItem(parsedShapeData, "x", parsedShapeData.x);
setItem(parsedShapeData, "y", parsedShapeData.y);
parsedShapeData;
let isBackgroundShape := backgroundShape = Nr;
{
	dataTableId: tableId(this),
	dataFieldId: fieldId(this, "shapeDataValue"),
	sortId: if isBackgroundShape then 0 else number(Nr) end,
	isBackgroundShape: isBackgroundShape,
	movable: first(Dokumente.Shapes[helper_shapeDataValue != null and parseJSON(helper_shapeDataValue).type = "image"]) != Nr,
	x: if backgroundShape = true then
		0
	else
		number(parseJSON(helper_shapeDataValue).x)
	end,
	y: if backgroundShape = true then
		0
	else
		number(parseJSON(helper_shapeDataValue).y)
	end,
	width: parsedShapeData.width,
	height: parsedShapeData.height,
	type: parsedShapeData.type
}

`helper_disable`

Label: helper_disable
Type: Yes / No
Trigger on change: none
Assignment: Per record on the server

Creating Fields in Documents

`FileName`

Label: FileName
Type: Text
Trigger on change: none
Assignment: Per record on the server

`helper_base64`

Label: helper_base64
Type: Text
Trigger on change: none
Assignment: Per record on the server

`helper_width`

Label: helper_width
Type: Number
Trigger on change: none
Assignment: Per record on the server

`helper_height`

Label: helper_height
Type: Number
Trigger on change: none
Assignment: Per record on the server

`trigger_addBackgroundImage_browser`

Label: trigger_addBackgroundImage_browser
Type: Text
Assignment: Per record on the server
Trigger on change:

let current := this;
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;
'Mängel'.(helper_selectedImageDrawing := number(current.Nr));
trigger_addBackgroundImage_browser := null

`trigger_addBackgroundImage_app`

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

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;
trigger_addBackgroundImage_app := null;
'Mängel'.(helper_selectedImageDrawing := number(current.Nr))

`trigger_deleteImage`

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

let current := this;
'Mängel'.(helper_selectedImageDrawing := first(current.'Mängel'.Dokumente[Nr != current.Nr]));
delete this

Creating Fields in Defects

Please create an extra tab "Helper" here. This is helpful because on the first tab your widget Custom Drawing will be displayed, and no unnecessary Ninox fields should be visible. In the "Helper" tab you will now create the following fields:

`helper_selectedImageDrawing`

Label: helper_selectedImageDrawing
Type: Number
Trigger on change: none
Assignment: Per record in storage (Browser)

`helper_showLayer`

Label: helper_showLayer
Type: Yes / No
Trigger on change: none
Assignment: Per record in storage (Browser)

`helper_currentColor`

Label: helper_currentColor
Type: Text
Trigger on change: none
Assignment: Per record in storage (Browser)

`helper_strokeWidth`

Label: helper_strokeWidth
Type: Number
Trigger on change: none
Assignment: Per record in storage (Browser)

`trigger_undoLastShape`

Label: trigger_undoLastShape
Type: Text
Assignment: Per record in storage (Browser)
Trigger on change:

let recordSelectedImageDrawing := record(Dokumente,number(helper_selectedImageDrawing));
if trigger_undoLastShape != null then
	let lastEdited := last(recordSelectedImageDrawing.Shapes order by 'Erstellt am');
	if trigger_undoLastShape = "undo" then
		last(recordSelectedImageDrawing.Shapes[helper_disable != true and data_shapeData.isBackgroundShape != true] order by 'Erstellt am').(helper_disable := true)
	else
		if trigger_undoLastShape = "redo" then
			lastEdited.(helper_disable := if lastEdited.helper_disable = true then
					null
				else
					true
				end)
		end
	end;
	trigger_undoLastShape := null
end

Inserting Widgets in Defects

In the Defects table, you will 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 colors := ["#FF5733", "#33FF57", "#3357FF", "#FF33A6", "#FFC300", "#DAF7A6", "#900C3F", "#581845", "#C70039", "#FFC0CB"];
let colorSet := arcCustomGrid({
			uniqueId: "colorGrid",
			width: "100%",
			height: "auto",
			columns: "auto-fill",
			columnWidth: "38px",
			gap: "5px",
			paddingY: "20px",
			paddingX: "0",
			blocks: for item in colors do
				{
					width: "38px",
					height: "38px",
					alignX: "center",
					alignY: "center",
					backgroundColor: item,
					styles: html(---
border-radius: 50%; border: 4px solid { if helper_currentColor = item then }#575b79{  else }#272A40{  end };
					---),
					value: "",
					clickAction: {
						type: "update",
						recordId: current.Nr,
						field: fieldId(current.Nr, "helper_currentColor"),
						value: item
					}
				}
			end
		});
let strokeSizes := [5, 10, 15, 20, 25, 30];
let strokeSet := arcCustomLayout({
			uniqueId: "colorGrid",
			width: "100%",
			height: "45px",
			direction: "horizontal",
			gap: "5px",
			alignX: "between",
			alignY: "center",
			paddingY: "0",
			paddingX: "0",
			blocks: for item in strokeSizes do
				{
					width: "fraction",
					height: "100%",
					alignX: "center",
					alignY: "center",
					backgroundColor: "",
					styles: html(---
align-items:center; justify-content:center;
 border-bottom:3px solid { if item = helper_strokeWidth then }{ if current.helper_currentColor then }{ current.helper_currentColor }{  else }#575b79{  end }{  else }#181C2B{  end }; { if item != 30 then }border-right:1px solid #262b40;{  else }{  end }
					---),
					value: html(---
<div style="width:{ item }px; height:{ item }px;background-color:{ if current.helper_currentColor then }{ current.helper_currentColor }{  else }#fff{  end };border-radius:50%;"></div>
					---),
					clickAction: {
						type: "update",
						recordId: current.Nr,
						field: fieldId(current.Nr, "helper_strokeWidth"),
						value: item
					}
				}
			end
		});
let imageGrid := arcCustomGrid({
			uniqueId: "imageGrid " + Nr,
			embedded: true,
			width: "100%",
			height: "100%",
			columns: "auto-fill",
			columnWidth: "50px",
			gap: "10px",
			paddingY: "0",
			paddingX: "0",
			blocks: let images := Dokumente.[{
						blockId: "",
						width: "100%",
						height: "100px",
						alignX: "center",
						alignY: "center",
						paddingY: "",
						paddingX: "",
						backgroundColor: "",
						lineHeight: "",
						styles: "",
						value: arcCustomImage({
								uniqueId: "image mangel " + Nr,
								title: Dateiname,
								width: "100%",
								height: "100%",
								backgroundSize: "cover",
								backgroundColor: "",
								style: "",
								radius: "5px",
								borderColor: "",
								link: helper_base64
							}),
						clickAction: {
							type: "update",
							recordId: current.Nr,
							field: fieldId(current.Nr, "helper_selectedImageDrawing"),
							value: number(Nr)
						}
					}];
			let new := [{
						blockId: "",
						width: "100%",
						height: "100px",
						alignX: "center",
						alignY: "center",
						paddingY: "",
						paddingX: "",
						backgroundColor: "#272a40",
						lineHeight: "",
						styles: "",
						value: arcCustomUpload({
								uniqueId: "multi image upload in drawing " + current.Nr,
								capture: true,
								multiupload: true,
								embedded: true,
								container: {
									icon: "",
									label: "Bilder Upload",
									height: "100%",
									width: "100%",
									value: arcCustomIcon({
											name: "plus",
											color: "#fff"
										})
								},
								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")
								},
								changeFieldValues: [{
										fieldId: fieldId("Dokumente", "Mängel"),
										value: number(current.Nr)
									}]
							})
					}];
			array(images, new)
		});
let drawingSticker := [{
			uid: "red_sticker",
			image: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA3MiA3Mic+PHBhdGggZmlsbD0nI0VBNUE0NycgZD0nTTM1Ljk3MiA5LjcyYy02LjQyMiAwLTExLjY0NiA1LjIyNC0xMS42NDYgMTEuNjQ2UzI5LjU1IDMzLjAxIDM1Ljk3MiAzMy4wMWM2LjQyMSAwIDExLjY0Ni01LjIyNCAxMS42NDYtMTEuNjQ1UzQyLjM5MyA5LjcyIDM1Ljk3MiA5LjcyJy8+PHBhdGggZmlsbD0nI0QyMkYyNycgZD0nTTM5LjE2OSAzMi4zODJjMS43MjYtLjY0NiAzLjI4OS0uODE3IDQuODE0LTIuMjEyIDIuMTAyLTEuOTIzIDMuOTA0LTUuMzQgMy45MDQtOC4wMjQgMC0yLjQ0NS0uNTc4LTUuMzAzLTIuMzQyLTcuNjMzLTEuNjI4LTIuMTUtNC4zNjEtMy44NDItNi4zNzYtNC41NTQgMCAwIDMuNTE3IDUuNjUgMy41MTcgMTEuMzczcy0zLjUxNyAxMS4wNS0zLjUxNyAxMS4wNScvPjxwYXRoIGZpbGw9JyNEMENGQ0UnIGQ9J20zNS44MzcgNjMuNDg5IDIuODQ3LTcuNjdzLS44MjUtMTkuNTc3LS4zOC0xOS42NzhoLTUuMTY4Yy40NDYuMS0uMjI1IDE5LjU1OS0uMjI1IDE5LjU1OXonLz48cGF0aCBmaWxsPScjOUI5QjlBJyBkPSdtMzUuOTU2IDYyLjczOCAyLjY0OS03LjA3OHMuMTA0LTE5LjA1Ny4wNjItMTkuNTI2bC0yLjkzMy4wMDd6Jy8+PGcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS1taXRlcmxpbWl0PScxMCc+PGNpcmNsZSBjeD0nMzUuOTcxJyBjeT0nMjEuMzY2JyByPScxMS44MDgnIHN0cm9rZS13aWR0aD0nMicvPjxwYXRoIGQ9J00zOC41MiAzNy4wOTh2MTguNjE2bC0yLjU4NCA4LjUwNS0zLjAxNS04LjUwNVYzNy4wOTgnLz48L2c+PC9zdmc+Cg==",
			icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA3MiA3Mic+PHBhdGggZmlsbD0nI0VBNUE0NycgZD0nTTM1Ljk3MiA5LjcyYy02LjQyMiAwLTExLjY0NiA1LjIyNC0xMS42NDYgMTEuNjQ2UzI5LjU1IDMzLjAxIDM1Ljk3MiAzMy4wMWM2LjQyMSAwIDExLjY0Ni01LjIyNCAxMS42NDYtMTEuNjQ1UzQyLjM5MyA5LjcyIDM1Ljk3MiA5LjcyJy8+PHBhdGggZmlsbD0nI0QyMkYyNycgZD0nTTM5LjE2OSAzMi4zODJjMS43MjYtLjY0NiAzLjI4OS0uODE3IDQuODE0LTIuMjEyIDIuMTAyLTEuOTIzIDMuOTA0LTUuMzQgMy45MDQtOC4wMjQgMC0yLjQ0NS0uNTc4LTUuMzAzLTIuMzQyLTcuNjMzLTEuNjI4LTIuMTUtNC4zNjEtMy44NDItNi4zNzYtNC41NTQgMCAwIDMuNTE3IDUuNjUgMy41MTcgMTEuMzczcy0zLjUxNyAxMS4wNS0zLjUxNyAxMS4wNScvPjxwYXRoIGZpbGw9JyNEMENGQ0UnIGQ9J20zNS44MzcgNjMuNDg5IDIuODQ3LTcuNjdzLS44MjUtMTkuNTc3LS4zOC0xOS42NzhoLTUuMTY4Yy40NDYuMS0uMjI1IDE5LjU1OS0uMjI1IDE5LjU1OXonLz48cGF0aCBmaWxsPScjOUI5QjlBJyBkPSdtMzUuOTU2IDYyLjczOCAyLjY0OS03LjA3OHMuMTA0LTE5LjA1Ny4wNjItMTkuNTI2bC0yLjkzMy4wMDd6Jy8+PGcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS1taXRlcmxpbWl0PScxMCc+PGNpcmNsZSBjeD0nMzUuOTcxJyBjeT0nMjEuMzY2JyByPScxMS44MDgnIHN0cm9rZS13aWR0aD0nMicvPjxwYXRoIGQ9J00zOC41MiAzNy4wOTh2MTguNjE2bC0yLjU4NCA4LjUwNS0zLjAxNS04LjUwNVYzNy4wOTgnLz48L2c+PC9zdmc+Cg==",
			label: "Red Sticker",
			width: 100,
			height: 100,
			originX: 0.5,
			originY: 0.89,
			default: true
		}, {
			uid: "green_sticker",
			image: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA3MiA3Mic+PHBhdGggZmlsbD0nIzQ2ZWI1ZCcgZD0nTTM1Ljk3MiA5LjcyYy02LjQyMiAwLTExLjY0NiA1LjIyNC0xMS42NDYgMTEuNjQ2UzI5LjU1IDMzLjAxIDM1Ljk3MiAzMy4wMWM2LjQyMSAwIDExLjY0Ni01LjIyNCAxMS42NDYtMTEuNjQ1UzQyLjM5MyA5LjcyIDM1Ljk3MiA5LjcyJy8+PHBhdGggZmlsbD0nIzI3ZDIzZScgZD0nTTM5LjE2OSAzMi4zODJjMS43MjYtLjY0NiAzLjI4OS0uODE3IDQuODE0LTIuMjEyIDIuMTAyLTEuOTIzIDMuOTA0LTUuMzQgMy45MDQtOC4wMjQgMC0yLjQ0NS0uNTc4LTUuMzAzLTIuMzQyLTcuNjMzLTEuNjI4LTIuMTUtNC4zNjEtMy44NDItNi4zNzYtNC41NTQgMCAwIDMuNTE3IDUuNjUgMy41MTcgMTEuMzczcy0zLjUxNyAxMS4wNS0zLjUxNyAxMS4wNScvPjxwYXRoIGZpbGw9JyNEMENGQ0UnIGQ9J20zNS44MzcgNjMuNDg5IDIuODQ3LTcuNjdzLS44MjUtMTkuNTc3LS4zOC0xOS42NzhoLTUuMTY4Yy40NDYuMS0uMjI1IDE5LjU1OS0uMjI1IDE5LjU1OXonLz48cGF0aCBmaWxsPScjOUI5QjlBJyBkPSdtMzUuOTU2IDYyLjczOCAyLjY0OS03LjA3OHMuMTA0LTE5LjA1Ny4wNjItMTkuNTI2bC0yLjkzMy4wMDd6Jy8+PGcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS1taXRlcmxpbWl0PScxMCc+PGNpcmNsZSBjeD0nMzUuOTcxJyBjeT0nMjEuMzY2JyByPScxMS44MDgnIHN0cm9rZS13aWR0aD0nMicvPjxwYXRoIGQ9J00zOC41MiAzNy4wOTh2MTguNjE2bC0yLjU4NCA4LjUwNS0zLjAxNS04LjUwNVYzNy4wOTgnLz48L2c+PC9zdmc+Cg==",
			icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA3MiA3Mic+PHBhdGggZmlsbD0nIzQ2ZWI1ZCcgZD0nTTM1Ljk3MiA5LjcyYy02LjQyMiAwLTExLjY0NiA1LjIyNC0xMS42NDYgMTEuNjQ2UzI5LjU1IDMzLjAxIDM1Ljk3MiAzMy4wMWM2LjQyMSAwIDExLjY0Ni01LjIyNCAxMS42NDYtMTEuNjQ1UzQyLjM5MyA5LjcyIDM1Ljk3MiA5LjcyJy8+PHBhdGggZmlsbD0nIzI3ZDIzZScgZD0nTTM5LjE2OSAzMi4zODJjMS43MjYtLjY0NiAzLjI4OS0uODE3IDQuODE0LTIuMjEyIDIuMTAyLTEuOTIzIDMuOTA0LTUuMzQgMy45MDQtOC4wMjQgMC0yLjQ0NS0uNTc4LTUuMzAzLTIuMzQyLTcuNjMzLTEuNjI4LTIuMTUtNC4zNjEtMy44NDItNi4zNzYtNC41NTQgMCAwIDMuNTE3IDUuNjUgMy41MTcgMTEuMzczcy0zLjUxNyAxMS4wNS0zLjUxNyAxMS4wNScvPjxwYXRoIGZpbGw9JyNEMENGQ0UnIGQ9J20zNS44MzcgNjMuNDg5IDIuODQ3LTcuNjdzLS44MjUtMTkuNTc3LS4zOC0xOS42NzhoLTUuMTY4Yy40NDYuMS0uMjI1IDE5LjU1OS0uMjI1IDE5LjU1OXonLz48cGF0aCBmaWxsPScjOUI5QjlBJyBkPSdtMzUuOTU2IDYyLjczOCAyLjY0OS03LjA3OHMuMTA0LTE5LjA1Ny4wNjItMTkuNTI2bC0yLjkzMy4wMDd6Jy8+PGcgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS1taXRlcmxpbWl0PScxMCc+PGNpcmNsZSBjeD0nMzUuOTcxJyBjeT0nMjEuMzY2JyByPScxMS44MDgnIHN0cm9rZS13aWR0aD0nMicvPjxwYXRoIGQ9J00zOC41MiAzNy4wOTh2MTguNjE2bC0yLjU4NCA4LjUwNS0zLjAxNS04LjUwNVYzNy4wOTgnLz48L2c+PC9zdmc+Cg==",
			label: "Green Sticker",
			width: 100,
			height: 100,
			originX: 0.5,
			originY: 0.89
		}, {
			uid: "red_arrow_up_right",
			image: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y1MTQxNCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMDAsNjRWMTY4YTgsOCwwLDAsMS0xNiwwVjgzLjMxTDY5LjY2LDE5Ny42NmE4LDgsMCwwLDEtMTEuMzItMTEuMzJMMTcyLjY5LDcySDg4YTgsOCwwLDAsMSwwLTE2SDE5MkE4LDgsMCwwLDEsMjAwLDY0WiI+PC9wYXRoPjwvc3ZnPg==",
			icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y1MTQxNCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMDAsNjRWMTY4YTgsOCwwLDAsMS0xNiwwVjgzLjMxTDY5LjY2LDE5Ny42NmE4LDgsMCwwLDEtMTEuMzItMTEuMzJMMTcyLjY5LDcySDg4YTgsOCwwLDAsMSwwLTE2SDE5MkE4LDgsMCwwLDEsMjAwLDY0WiI+PC9wYXRoPjwvc3ZnPg==",
			label: "Pfeil 1",
			width: 100,
			height: 100,
			originX: 0.5,
			originY: 0.5,
			default: true
		}, {
			uid: "red_arrow_down_left",
			image: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y1MTQxNCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xOTcuNjYsNjkuNjYsODMuMzEsMTg0SDE2OGE4LDgsMCwwLDEsMCwxNkg2NGE4LDgsMCwwLDEtOC04Vjg4YTgsOCwwLDAsMSwxNiwwdjg0LjY5TDE4Ni4zNCw1OC4zNGE4LDgsMCwwLDEsMTEuMzIsMTEuMzJaIj48L3BhdGg+PC9zdmc+",
			icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y1MTQxNCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xOTcuNjYsNjkuNjYsODMuMzEsMTg0SDE2OGE4LDgsMCwwLDEsMCwxNkg2NGE4LDgsMCwwLDEtOC04Vjg4YTgsOCwwLDAsMSwxNiwwdjg0LjY5TDE4Ni4zNCw1OC4zNGE4LDgsMCwwLDEsMTEuMzIsMTEuMzJaIj48L3BhdGg+PC9zdmc+",
			label: "Pfeil 2",
			width: 100,
			height: 100,
			originX: 0,
			originY: -0.0001
		}];
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
				}],
			exportSettings: {
				allowedTypes: ["jpg"],
				target: "field",
				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: if helper_strokeWidth then helper_strokeWidth else 5 end,
				strokeColor: if helper_currentColor then helper_currentColor else "#e9595c" end
			},
			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: "Object ID:" + Nr,
						content: arcCustomButton({
								title: "Öffnen",
								actions: [{
										type: "popup",
										recordId: Nr
									}]
							})
					}
				}],
			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: "",
								value: imageGrid
							}]
					}),
				content: {
					showShapeLayers: helper_showLayer,
					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: "border-bottom: 1px solid #262b40;",
								value: strokeSet
							}, {
								width: "100%",
								height: "auto",
								lineHeight: "",
								alignX: "left",
								color: "",
								styles: "border-bottom: 1px solid #262b40;padding:8px;",
								value: colorSet
							}, {
								width: "100%",
								height: "auto",
								lineHeight: "",
								alignX: "left",
								color: "",
								styles: "padding:8px",
								value: arcCustomButton({
										uniqueId: "undo action" + Nr,
										title: "Aktion rückgängig",
										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, "trigger_undoLastShape"),
												value: "undo"
											}]
									})
							}, {
								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: "center",
		width: "100%",
		height: "100%",
		gap: "0",
		backgroundColor: "#181d2c",
		paddingY: "",
		paddingX: "",
		styles: "",
		scrollSettings: {
			scrollY: true
		},
		blocks: [if false then
				{
					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: "border-bottom: 1px solid #262b40;",
							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: html(---
 Title
									---)
								}, {
									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: "openRecord",
													tab: "Allgemeines",
													recordId: current.Nr
												}]
										})
								}]
						})
				}
			end, if false then
				{
					width: "100%",
					height: "50px",
					lineHeight: "",
					alignX: "left",
					color: "",
					backgroundColor: "#141925",
					styles: "border-bottom: 1px solid #262b40;border-top: 1px solid #262b40;",
					value: arcCustomLayout({
							uniqueId: "layout action bar " + 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: "200px",
									height: "100%",
									lineHeight: "",
									alignX: "left",
									color: "",
									styles: "",
									value: "block 1"
								}, {
									width: "",
									height: "auto",
									lineHeight: "",
									alignX: "left",
									color: "",
									value: "block 2"
								}]
						})
				}
			end, {
				width: "100%",
				height: "100%",
				lineHeight: "",
				alignX: "left",
				color: "",
				backgroundColor: "#181d2c",
				value: drawingArea
			}]
	})

Tadaaaaa 🧙🏼‍♀️ The Drawing in the Picture widget should now be functional for you.

Custom Drawing Part 1: Drawing in the Image

Drawing in the Picture

Necessary Widgets

Procedure

Creating Tables

Creating Fields in Shapes

helper_shapeDataValue

data_shapeData

helper_disable

Creating Fields in Documents

FileName

helper_base64

helper_width

helper_height

trigger_addBackgroundImage_browser

trigger_addBackgroundImage_app

trigger_deleteImage

Creating Fields in Defects

helper_selectedImageDrawing

helper_showLayer

helper_currentColor

helper_strokeWidth

trigger_undoLastShape

Inserting Widgets in Defects