Custom Layout

With arcCustomLayout, you can design your interface in Ninox exactly how you want it – completely without table constraints or rigid layouts. The widget is based on a flexible container approach (similar to flexbox in CSS) and allows you to align, group, and customize content precisely.

Whether you want to arrange simple sections side by side, create an info card with a graphic background, or structure interactive elements on a page – arcCustomLayout is your tool for that.

What you control:

• Alignment (horizontal / vertical)

• Spacing, colors, background images

• Flexible behavior for screen sizes

• Custom styles per block

• Interactions (e.g., click actions on areas)

In contrast to arcCustomGrid, which is designed for two-dimensional structures (rows and columns), the layout consciously works one-dimensionally: You determine whether the contents are displayed horizontally (side by side) or vertically (one below the other) – including alignment, spacing, colors, and responsive adjustments.

🎯 What you can do with it:

• Card-like layouts with titles, descriptions, and buttons side by side

• Hero sections with large text blocks + images side by side (horizontal)

• Vertical form blocks with targeted spacing and background colors

• Interactive blocks with click functions (popup, update, delete, etc.)

• Combination of multiple data sources in a dynamic layout

Application Code

Quick Start – Simple Basic Layout

A compact example that you can start with directly. Ideal if you want to arrange a few contents side by side (direction: "horizontal") or one below the other (direction: "vertical") – for example, text blocks, KPIs, or buttons. The most important parameters such as alignment, width, and spacing are already set and can be easily adjusted.

✅ Quickly usable
✅ Flexibly adjustable
✅ Perfect for copying and getting started

arcCustomLayout({
	uniqueId: "Beispiel "+ Nr,
    embedded: true, 
	direction: "horizontal",
	alignX: "left",
	alignY: "center",
	width: "100%",
	height: "auto",
	gap: "10px",
	backgroundColor: "",
	paddingY: "",
	paddingX: "",
    styles: "",
    scrollSettings: {
			scrollY: false, 
            scrollX: false, 
		},
	blocks: [{
            width: "fraction",
            height: "auto",
            lineHeight: "", 
			alignX: "left",
            color: "", 
			styles: "",
			value: ""
    			}, {
            width: "auto",
            height: "auto",
            lineHeight: "", 
			alignX: "left",
            color: "", 
    		value: "",
           
    		}]
	})

Full Layout Base – Wide Layout in Record Container

This setup is intended for layouts that are not embedded and extend over the entire content area of a record or page. Particularly suitable for dashboards, overview pages, or start screens that should appear tidy and focused within Ninox.

✅ Full width within the tab or record
✅ No embedding – the layout stands alone
✅ Ideal for larger components, panels, or overview pages

arcCustomLayout({
	uniqueId: "Beispiel "+ Nr,
    embedded: false, 
    fullscreen: true,
    fullscreenMode: if isAdminMode() then "full" else "" end,
    ninoxVersion: "", 
	page: true,
	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: "",
            height: "auto",
            lineHeight: "", 
			alignX: "left",
            color: "", 
			styles: "",
			value: ""
    			}, {
            width: "",
            height: "auto",
            lineHeight: "", 
			alignX: "left",
            color: "", 
    		value: "",
           
    		}]
	})

Code with all Parameters

arcCustomLayout({
	uniqueId: Nr,
    embedded: true, 
    fullscreen: false, // Gibst du hier "true" an, wird das Layout in dem ganzen Datensatz eingebunden
	fullscreenMode: "full",
    page: false, // Gibst du an, wenn du den fullscreen auf einer Tabelle einstellen möchtest.
	showAdminTools: false,
	hideHeaderIcons: true,
	direction: "vertical",
	alignX: "center",
	alignY: "center",
	width: "",
	height: "",
	gap: "5px",
	backgroundColor: "#ccc",
	paddingY: "10px",
	paddingX: "5px",
	blocks: [{
            width: "",
            height: "auto",
            lineHeight: "1.6", 
			alignX: "left",
			value: "",
            color: "#000", 
			styles: "", // Hier kannst du eigene CSS Styles hinterlegen.
			clickAction: {
					recordId: Nr,
					type: "popup" 
							}
    			}, {
            width: "",
            height: "auto",
            lineHeight: "", 
			alignX: "left",
    		value: "",
            color: "", // Fallback: "#000" 
			clickAction: {
    			type: "openFullscreen",
    			recordId: raw(record(Firmen,1).Nr)
            	},
    		}]
	})

💡Note: You can also nest multiple layouts within each other. This allows you to build complex interfaces and make Ninox even clearer.

General Settings

The upper parameters specify the general settings of your entire layout. This is basically the outermost container of your layout.

uniqueId

uniqueId is the individual designation of your layout. Make sure to give a unique title here. This is important if you want to display multiple layouts on a page / in a table and not overwrite each other.

uniqueId: "Layout container",

embedded

embedded specifies whether your layout should be integrated into another widget.

embedded: true, // Ja, es wird in einem anderen Widget integriert
embedded: false, // Nein, es ist nicht in anderen Widgets integriert 
embedded: "", // default: false

Fullscreen Settings

With fullscreen, you determine whether your layout should be displayed across the entire screen. For proper use, please specify in the ninoxVersion parameter which web version you are using. For example, "3.13".

With page, you define whether you are embedding the layout on a page or in a table. If you specify true here, you are on a page; if you specify false, you are in a table. So far, fullscreenMode: "full" has only worked on Ninox Pages, not on Ninox Tables. With the parameter "page", the fullscreenMode: "full" effects also work on records of a table. For this, you must set the page parameter to false.

With the fullscreenMode: "full", Ninox headers and tabs can be hidden. To continue using the layout fullscreenMode: "full", the version must be added as a parameter ninoxVersion: "3.13". The parameter also applies to versions after 3.13 (for example, if you have 3.15 set).

With showAdminTools, you decide whether to hide the admin button for admins.

fullscreen: false, // default: false
ninoxVersion: "", 
page: true,
fullscreenMode: "", // default: deaktiviert
showAdminTools: true, // default: true
hideHeaderIcons: true,

Scroll Settings

In the scroll settings, you can determine whether your layout should be scrollable vertically (scrollY) or horizontally (scrollX). The layout also remembers the scroll position. This means: If you apply triggers that briefly reload Ninox, the layout remains at the last scroll position and does not change.

  scrollSettings: {
			scrollY: false, // true oder false einsetzen
            scrollX: false, // true oder false einsetzen
		},

direction

direction specifies how your other contents (blocks) should be arranged.

direction: "vertical", // Alle Inhalte werden untereinander angeordnet.
direction: "horizontal", // Alle Inhalte werden nebeneinander angeordnet. 

alignX

alignX: specifies how your contents are arranged on the X-axis.

alignX: "center", // zentriert // default: center
alignX: "left", // linksbündig
alignX: "right", // rechtsbündig
alignX: "between", // teilt Blocks auf Gesamtbreite auf

alignY

alignY: specifies how your contents are arranged on the Y-axis.

alignY: "center", // zentriert // default: center
alignY: "top", // oben angeordnet
alignY: "bottom", // unten angeordnet
alignY: "between", // teilt Blocks auf Gesamthöhe auf

width

width specifies the width.

width: "100%", // Prozent-Werte. Hier: volle Breite.
width: "100px", // Pixel-Werte

height

height specifies the height.

height: "auto", // Automatisch an den Inhalt angepasste Höhe.
height: "300px", // Pixel-Werte

gap

With gap, you determine how much space should be between your blocks.

gap: "5px", // Pixel-Werte

Settings in the Layout Block

The parameters within a block determine values that belong to a respective layout block. You can also add additional blocks (separated by commas).

blocks: [{ // Beginn Block 1
            width: "",
            height: "auto",
            lineHeight: "1.6", // default: normal
			alignX: "left",
            color: "#000", // Schriftfarbe von Text im Layoutblock
            backgroundColor: "#333", // Hintergrundfarbe von Text im Layoutblock
			styles: "", // Hier kannst du eigene CSS Styles hinterlegen.
			value: "", // Hier gibst du den Wert an, der im Block ausgegeben werden soll.
			clickAction: {
					recordId: Nr,
					type: "popup" 
							}
    			},
             { // Beginn Block 2
            width: "",
            height: "auto",
            lineHeight: "1.6", // default: normal
			alignX: "left",
            color: "#000",
            backgroundColor: "#ccc",
			styles: "", // Hier kannst du eigene CSS Styles hinterlegen.
			value: "",
			clickAction: {
					recordId: Nr,
					type: "popup" 
							}
    			}
    		}]

width

width and height specify the width and height of the layout block.

width: "auto", // Automatisch an den Inhalt angepasste Weite. // default: 
width: "300px", // Pixel-Werte oder Prozenz-Werte

height: "auto", // Automatisch an den Inhalt angepasste Höhe. // default: 
height: "300px", // Pixel-Werte oder Prozenz-Werte

lineHeight

With lineHeight, you determine the spacing between the lines in the layout.

lineHeight: "1.6", // default: normal

alignX

alignX: specifies how your contents are arranged on the X-axis within the layout block.

alignX: "center", // zentriert // default: center
alignX: "left", // linksbündig
alignX: "right", // rechtsbündig
alignX: "between", // teilt Blocks auf Gesamtbreite auf

color & backgroundColor

With color and backgroundColor you determine the font color and background color of the text within your layout block.

color: "#33AAFF", //  default: #000
backgroundColor: "#ccc", // default: no default color

styles

In styles, you can add your own CSS styles to the layout block.

styles: "", // z.B. font-weight: 700;

value

value is the value that is output within the layout block. Here you can specify, for example, text, Ninox fields, or customWidgets.

value: "Überschrift", // einfacher Text
value: Titel, // Ninox-Feld
value: arcCustomButton({...}) // arcRider Custom Widgets

value: "", // default: Gibst du keinen Wert an, wird nichts ausgegeben ;)

clickAction Block

clickAction describes your actions in the respective blocks.

clickAction: {
	recordId: Nr,
	type: "update", 
    field: "",
    value: "", 
		}

openTable opens a table view in Ninox.

clickAction: {
	type: "openTable", 
    tableId: "A",
		}

openURL opens an external URL that you define.

clickAction: {
	type: "openUrl", 
    value: "https://www.arc-rider.com",
		}

types in the clickActions are as follows:

// Folgende Actions benötigen die zwei Parameter: "recordId" und "type"
"popup"
"delete"
"openRecord"
"fullscreen"

// Folgender Actions benötigt die 4 Parameter: "recordId", "type", "field", "value" 
"update" 

// Folgende Action benötigt 2 Parameter: "type", "value"
"openUrl"

// Folgende Action benötigt 2 Paramater: "type", "tableId"
"openTable"

// Folgende Actions benötigen nur den Parameter "type" in der clickAction.
"closeFullScreen"
"closeRecord"
"closeAllRecords"

Fullscreen Mode

fullscreenMode allows you to hide all Ninox elements in the form with fullscreen:true. Additionally, through showAdminTools, the Ninox key for other admins (e.g., admins in customer databases) can be hidden. You could, for example, use if else end to show the key only for your user. hideHeaderHeaderIcons can also give more control over hiding Ninox symbols in the header.

fullscreen: true,
fullscreenMode: "full",
showAdminTools: true,
hideHeaderIcons: true,