Widgets

Custom Drawing

1.5.0

Order widget

Custom Drawing

The Custom Drawing Widget allows you to upload any images or PDFs (e.g., floor plans, product photos, body silhouettes) and enhance them with interactive pins, stickers, or freehand drawings. Each mark can be linked with a note, category, or additional information. Ideal for applications in construction, fashion, medicine, logistics, and much more.

Application Code

arcCustomDrawing({
			uniqueId: "titel " + Nr,
			embedded: false,
			height: "800px",
			tableId: tableId("Shapes"),
			fieldId: fieldId("Shapes", "helper_shapeDataValue"),
			changeFieldValues: [{
					fieldId: fieldId("Tabelle", "Feld Name"),
					value: "Wert"
				}],
			exportSettings: {
				allowedTypes: [{
						format: "jpg"
					}, {
						format: "png"
					}, {
						format: "svg"
					}, {
						format: "pdf",
						mergeFile: false
					}],
				target: "file",
				recordId: Nr,
				fieldId: fieldId("Tabelle", "Feld für den Export"),
				mergeFile: "Feld mit der Originaldatei",
				apiKey: "API_KEY",
			},
			canvas: {
				width: 4000,
				height: 4000,
				offsetX: 0,
				offsetY: 0
			},
			zooming: {
				step: 0.25,
				min: 0.01,
				max: 4
			},
			drawingSettings: {
				strokeWidth: 1,
				strokeColor: "#ffffff"
			},
			artboard: {
				width: 1000,
				height: 1000,
			},
			stickerTypes:[{
				uid: uid,
				image: "stickerBase64",
				icon: base64,
				label: Name,
				width: 100,
				height: 100,
				originX: 0.5,
				originY: 0.89,
				default: false
			}],
			shapes: (Shapes).[{
					shapeId: Nr,
					movable: true,
					shapeDataValue: helper_shapeDataValue,
					stickerUID: "",
					sidebarItem: {
						header: "Titel des Eintrags",
						content: "Beschreibung des Eintrags",
					}
				}],
			rightSideContent: {
				show: true,
				header: "Header",
				footer: "Footer"
			}
		})

🔸 `embedded`

Indicates whether the widget is integrated into an existing form (e.g., Ninox form).

embedded: "" // default: false
embedded: true,

👀 Tip: With true, no fixed height is required – the widget automatically adjusts to the parent container.

🔸 `height`

With the height parameter, you specify the total height of the drawing tool in pixels.
It determines how much vertical space the widget occupies in the embedded context (e.g., in a form or on a page).

Recommendation: The widget should ideally be integrated into a custom layout for better UI. The height should be determined in the layout block.

height: "", // default: 600px
height: "800px",
height: "100%", // z. B. in einem Layout Block

🔸 `tableId` & `fieldId`

These two parameters define where the form data (shapes) are stored or loaded.

tableId indicates the table in which the shapes are managed.
fieldId refers to the specific field within this table that contains the geometry data (shapeDataValue) of the respective shapes. Note: A Ninox text field must be used here.

You can dynamically save your own shapes, markers, or objects – e.g., rectangles, stickers, circles, images, or lines.

tableId: tableId("Shapes"),
fieldId: fieldId("Shapes", "helper_shapeDataValue"),

🔸 `changeFieldValues`

Allows you to fill additional fields or links when creating a new shape – e.g., category, creator, etc.

changeFieldValues: [{
					fieldId: fieldId("Tabelle", "Feld Name"),
					value: "Wert"
				}],

🔸 `exportSettings`

With this block, you configure the export function of the widget. You can specify the formats in which the user is allowed to export (e.g., PNG, PDF), where the file should be saved, and whether an existing document is merged when exporting to PDF.

💡 Note: Conversion to a vectorized PDF incurs costs, and an internet connection is required (it does not work in offline mode). Please inquire about exact costs from arcRider support.

exportSettings: {
				allowedTypes: [{
						format: "jpg"
					}, {
						format: "png"
					}, {
						format: "svg"
					}, {
						format: "pdf",
						mergeFile: false
					}],
				target: "file",
				recordId: Nr,
				fieldId: fieldId("Tabelle", "Feld für den Export"),
				mergeFile: "Feld mit der Originaldatei",
				apiKey: "API_KEY",
			},

Field	Description
`allowedTypes`	List of allowed export formats. You can specify `"jpg"`, `"png"`, `"svg"`, and `"pdf"`. For the `"pdf"` format, you can also optionally set `mergeFile: false` or a field name to add to an existing PDF.
`target`	Specifies where the file should be exported. `"file"` means the file will be downloaded. `"field"` means the file will be uploaded to a file field in Ninox.
`recordId`	Specifies the record into which it should be exported (only required for `target: "field"`).
`fieldId`	Defines the exact field in the record where the exported file will be written.
`mergeFile`	Relevant only for PDF exports. If specified, the exported drawing will be merged with the PDF from this field.
`apiKey`	Required only for PDF export with merging. Here, an API key from Arc Rider is used to perform the PDF rendering server-side.

🔸 `canvas`

With the canvas block, you define the technical drawing area, i.e., the entire space in which shapes can be drawn and moved.

This area can be significantly larger than the visible section (artboard) and determines how far users can move in the drawing area (e.g., when moving or zooming).

🔧 Structure:

width: The total width of the drawing area in pixels.
height: The total height of the drawing area in pixels.
offsetX: Distance from the left and right edge – can be used to center content.
offsetY: Distance from the top and bottom edge – ideal for extra workspace or print margins.

Tip: You can also use dynamic values from Ninox fields or calculations here. For example, we have developed workflows in which we made the canvas size dependent on the size of the background shape.

canvas: {
				width: 4000,
				height: 4000,
				offsetX: 0,
				offsetY: 0
			},

🔸 `zooming`

The zooming block controls how far you can zoom in or out of the drawing field – for example, using the mouse wheel or touch gestures. This defines the zoom range and how finely you can zoom.

🔧 Structure:

step: Specifies how large a zoom step is, e.g., when clicking the plus/minus buttons or scrolling while holding down the Ctrl key. A small value (e.g., 0.1) means finer zoom steps.
min: The smallest allowed zoom factor (e.g., 0.1 = 10 %). This defines how far you can zoom out at the maximum.
max: The largest allowed zoom factor (e.g., 4 = 400 %). This limits zooming in to a certain level of detail.

zooming: {
				default: 0.5,
                step: 0.25,
				min: 0.01,
				max: 4
			},

💡 Notes:

The initial zoom is automatically set so that the artboard fits nicely into the widget.
Zoom actions affect the display of the shapes, not their actual size in the canvas.
If no zooming block is set, default values apply (zooming between approx. 10 % and 400 %).

🔸 `drawingSettings`

With the drawingSettings block, you define the default properties for new drawing objects – e.g., line color and thickness. These values apply to all newly drawn shapes such as lines, rectangles, or circles as long as the user does not change any individual settings.

🔧 Structure:

strokeWidth: Determines the line width in pixels.
A value of 1 results in a fine line, 2 or 3 appear slightly bolder.
strokeColor: Defines the color of the lines in hex format, e.g., #ffffff for white or #ffaa21 for orange.

drawingSettings: {
				strokeWidth: 1,
				strokeColor: "#ffffff"
			},

💡 Note:

You can also dynamically pass strokeColor and strokeWidth from Ninox fields to make the drawing options selectable by the user. This allows you to provide individual drawing styles per record.

🔸 `artboard`

The artboard block defines the visible section of your drawing area – that is, what the user initially sees when opening the widget. It is essentially the "paper" on which drawing occurs – while the canvas area represents the "entire studio".

🔧 Structure:

width: Width of the visible drawing area in pixels.
height: Height of the visible drawing area in pixels.

This area is automatically displayed centered and scaled so that it is fully visible in the widget (depending on zoom and display parameters).

artboard: {
				width: 1000,
				height: 1000,
			},

💡 Notes:

The artboard is purely visual – all shapes can also be located outside this area as long as they are within the canvas.
If you want a specific aspect ratio (e.g., A4 or square), you can set the width and height accordingly.
In combination with zooming and canvas, you can specifically control how much space users have for their drawing – and what is immediately visible at startup.

Tip: You can also use dynamic values from Ninox fields or calculations here. For example, we have developed workflows in which we made the size of the artboard dependent on the size of the background shape. This way, the user does not have to scroll as much.

🔸 `stickerTypes`

The stickerTypes block allows you to provide custom stickers that users can place in the drawing area – e.g., icons, symbols, markers, or pictograms.

Each sticker is an object with properties such as image source, size, and positioning behavior.
Ideal for use cases such as:

🔧 Technical markings on photos or plans
📍 Location pins on maps or floor plans
👕 Quality control in the fashion industry
🏥 Medical annotations on body silhouettes

🔧 Structure per sticker:

uid: Unique ID of the sticker (e.g., "pin_red").
image: Base64 data URL or URL to the graphic.
icon (optional): Preview image in the sticker menu (if different from the sticker image).
label: Text label of the sticker in the menu. (Important later when a specific sticker needs to be dynamically changed to another sticker, e.g., when completed)
width: Width of the sticker in pixels.
height: Height of the sticker in pixels.
originX: Horizontal anchor point (0 = left, 0.5 = center, 1 = right).
originY: Vertical anchor point (0 = top, 0.5 = center, 1 = bottom).
default (optional): If true, this sticker is pre-selected.

stickerTypes:[{
				uid: uid,
				image: "stickerBase64",
				icon: base64,
				label: Name,
				width: 100,
				height: 100,
				originX: 0.5,
				originY: 0.89,
				default: false
			}],

💡 Notes:

The stickers appear in the left menu of the widget under "Stickers".
When placing a sticker, its position is automatically calculated based on originX / originY. This allows you to align markers precisely at the click point.
You can define as many stickers as you want – e.g., colored pins, icons for defects, emojis, status symbols, etc.
The sticker graphics should ideally be prepared as SVG or as PNG with a transparent background.

Tip: Create a Ninox table with stickers. Upload your SVG or PNG file into an image field. Use the Ninox function loadFileAsBase64URL(Image) in a function field to get the base64 for your sticker list in the drawing. Of course, you can also define width, height, name, etc., in your sticker list.

🔸 `shapes`

The shapes block defines the list of drawing objects you store in the widget. Each object in the array corresponds to a saved entry in your tableId and contains the necessary information for display, position, and interaction.

Important: To use Drawing correctly, it is essential to set up a table for Shapes and to include at least one text field helper_shapeDataValue.

🔧 Structure per shape:

shapeId: The unique ID of the shape (usually the number of the record).
movable: Indicates whether the object can be moved in the drawing area (true or false).
shapeDataValue: The saved shape data (e.g., coordinates, size, color, type, etc.). This field contains the JSON data generated by the widget.
stickerUID: If you want to display a different sticker than the initially created one (e.g., because a status has changed), you must specify the UID of the corresponding sticker here.
sidebarItem: Optional – additionally shows the shape in the right sidebar with:
- header: Title (e.g., "Defect #3")
- content: Description or additional information

shapes: (Shapes).[{
					shapeId: Nr,
					movable: true,
					shapeDataValue: helper_shapeDataValue,
					stickerUID: "",
					sidebarItem: {
						header: "Title Entry",
						content: "Discription Entry",
					}
				}],

🔸 `rightSideContent`

The rightSideContent block controls whether a right sidebar is displayed in the widget and what is to be displayed there. This sidebar is particularly useful for displaying a list of drawn elements or providing additional information.

🔧 Structure:

show: true or false – activates or deactivates the right sidebar.
header: (optional) Widgets or text content for the upper area of the sidebar.
footer: (optional) Widgets or text content for the lower area of the sidebar.
content: (optional) Individual configuration of the middle content.

If show: true is set and the shapes contain sidebarItem entries (see shapes), an interactive list of all shapes will be displayed automatically – with title, description, hover effect, and selection behavior.

🔍 `content` block in detail:

showShapeLayers:
If true, a list of all existing shapes (with sidebarItem) will be displayed – including title, description, hover & click behavior.
Ideal for defect lists, checkpoints, or annotations.
customLayout:
Optional custom content that can be displayed in the middle area.
Here you can embed HTML, Ninox formula results, or prepared layout components.

If showShapeLayers is active, the shape list will be displayed. If you want to display your own layout instead, you can use customLayout.

rightSideContent: {
            show: true,
            header: "",
            content: {
                showShapeLayers: true,
                customLayout: "test"
            },
            footer: ""
        }

💡 Notes:

The sidebar works particularly well if you provide shapes with sidebarItem information.
The area can be purely informative, interactive, or visually adapted, depending on the use case.
You can also dynamically take customLayout from a Ninox field – e.g., through a text formula or HTML component.
If you want to combine both (layer list + custom content), you can insert customLayout above the footer and leave showShapeLayers set to true.

🔧 No developer? No problem.

You don’t have time to deal with code and configuration? We at the arcRider team offer you installation and setup support for the arcCustomDrawing widget – tailored to your use case.

➡️ Just write to us at office@arc-rider.com.

We will help you get started in just a few hours – without technical headaches.

Custom Drawing

Custom Drawing

Application Code

🔸 embedded

🔸 height

🔸 tableId & fieldId

🔸 changeFieldValues

🔸 exportSettings

🔸 canvas

🔧 Structure:

🔸 zooming

🔧 Structure:

🔸 drawingSettings

🔧 Structure:

🔸 artboard

🔧 Structure:

🔸 stickerTypes

🔧 Structure per sticker:

🔸 shapes

🔧 Structure per shape:

🔸 rightSideContent

🔧 Structure:

🔍 content block in detail:

🔧 No developer? No problem.

🔸 `embedded`

🔸 `height`

🔸 `tableId` & `fieldId`

🔸 `changeFieldValues`

🔸 `exportSettings`

🔸 `canvas`

🔸 `zooming`

🔸 `drawingSettings`

🔸 `artboard`

🔸 `stickerTypes`

🔸 `shapes`

🔸 `rightSideContent`

🔍 `content` block in detail: