Interaktive Buttons für deine Ninox-App

Das arcCustomButton-Widget bietet dir voll konfigurierbare Buttons, mit denen du in deiner Ninox-Datenbank gezielt Aktionen auslösen kannst. Ob Datensatz erstellen, Link öffnen, Popup anzeigen oder benutzerdefinierten JavaScript-Code ausführen – alles ist über ein flexibles Aktionssystem steuerbar.

Zusätzlich kannst du Aussehen und Verhalten des Buttons individuell gestalten: Farben, Schriftgrößen, Icons, Abstände, Ausrichtung und Hover-Effekte lassen sich per Konfigurationsobjekt steuern. Auch ein optionales Badge (z. B. zur Anzeige eines Counters) ist integrierbar.

Das Widget eignet sich besonders für:

• interaktive Dashboards (z. B. Schnellaktionen wie „neuen Auftrag anlegen“),

• Kundencockpits (z. B. „PDF herunterladen“, „Support kontaktieren“),

• Workflow-Steuerung (z. B. „Status ändern“, „Nächster Schritt“),

• oder jede andere Stelle, an der du Aktionen visuell zugänglich machen willst.

Wie bei allen arcWidgets erfolgt die Konfiguration direkt über einen Anwendungscode (JSON-Objekt) Formel-Feld solo, bzw. in einem anderen Widget integriert.

Gesamter Anwendungscode

Folgend siehst du einen beispielhaften Anwendungscode für einen Button:

arcCustomButton({
		uniqueId: "Button " + Nr,
		title: "Neuen Eintrag erstellen",
		width: "",
        height: "",
        alignY: "",  
        alignX: "",
        paddingX: "", 
        paddingY: "",
        gap: "5px",
		icon: arcCustomIcon({
				name: "plus-bold",
				color: "#fff"
			}),
        iconPosition: "left",
		fontSize: "",
		fontColor: "#fff",
		backgroundColor: "#0062AA",
		borderColor: "#0062AA",
		borderRadius: "5px",
		showBadge: false,
		badgeTitle: "",
		badgeColor: "",
		badgeBackground: "",
		badgeBorderColor: "",
		badgePosition: "",
		hoverActions: {
			fontColor: "",
			iconColor: "",
			backgroundColor: "",
			borderColor: "",
			animation: "0.25s"
		},
		actions: [{
				type: "create",
				tableId: "",
				popup: true,
				changeFieldValues: [{
						fieldId: "",
						value: ""
					}, {
						fieldId: "",
						value: ""
					}]
			}]
	})

Erklärung einzelner Parameter

Folgend wird dir aufgeschlüsselt, welche Parameter du verwenden kannst und was du jeweils eintragen musst.

uniqueId (Pflichtfeld)

Die uniqueId ist eine eindeutige Kennung des Buttons innerhalb der Seite. Sie wird intern für das Styling (CSS-Selektoren) und zur technischen Identifizierung des Buttons verwendet.

Typ: text
Beispiel: "create-button-123" oder "delete " + Nr

Diese ID sollte:

• pro Komponente eindeutig sein (z. B. durch Kombination aus Text und Datensatz-ID)

• keine Sonderzeichen oder Leerzeichen enthalten (werden intern automatisch durch Bindestriche ersetzt)

💡 Tipp: Wenn du mehrere Buttons auf einer Seite nutzt, z. B. in einer Liste oder Tabelle, empfiehlt sich ein Format wie "edit-" + Nr oder "btn-" + Nr.

uniqueId: Nr, 
uniqueId: "Button 1", // Text in "" 

title

Der title bestimmt den sichtbaren Text innerhalb des Buttons. Er sollte kurz und eindeutig formuliert sein, damit Nutzer sofort erkennen, was der Button auslöst.

Typ: text
Beispiel: "Neuen Eintrag erstellen" oder "PDF herunterladen"

💡 Tipp: Wenn du einen reinen Icon-Button erstellen möchtest (z. B. nur ein Plus-Symbol), kannst du title einfach auf "" setzen.

title: "",

width

Der Parameter width legt fest, wie breit der Button dargestellt wird. Wenn kein Wert angegeben wird, passt sich der Button automatisch dem Inhalt an.

Typ: text (mit CSS-Einheit)
Beispiel: "120px", "100%"

💡 Tipp: Verwende "100%", wenn der Button die gesamte verfügbare Breite des Containers ausfüllen soll – z. B. bei responsiven Layout oder in mobilen Ansichten.

width: "100%",// Prozent-Werte in "" 
width: "100px",// Pixel-Werte in "" 

height

Der Parameter height legt fest, wie hoch der Button dargestellt wird. Wenn kein Wert angegeben wird oder "auto" gesetzt ist, richtet sich die Höhe nach dem Inhalt und dem Padding.

Typ: text (mit CSS-Einheit)
Beispiel: "40px", "auto"

💡 Tipp: Eine feste Höhe kann hilfreich sein, wenn du mehrere Buttons nebeneinander gleich hoch darstellen möchtest – z. B. in Toolbars oder Tabellen.

height: "100%", // Prozent-Werte in "" 
height: "100px", // Pixel-Werte in "" 
height: "", // default: auto

alignY & alignX

Diese beiden Parameter steuern die Ausrichtung des Buttons innerhalb seines Containers – vertikal (alignY) und horizontal (alignX). Wenn keine Werte gesetzt sind, wird der Button standardmäßig zentriert angezeigt.

paddingX & paddingY

Mit diesen Parametern legst du den inneren Abstand des Buttons zum Text bzw. Icon fest – horizontal (paddingX) und vertikal (paddingY). Wenn keine Werte gesetzt sind, gelten die Standardabstände des Widgets.

Typ: text (mit CSS-Einheit, z. B. px, em, %)

💡 Tipp: Mit paddingX kannst du die Buttonbreite optisch beeinflussen – unabhängig von width. paddingY sorgt für angenehme Klickflächen, besonders auf Touch-Geräten.

gap

Der Parameter gap legt den Abstand zwischen Text und Icon im Inneren des Buttons fest. Wenn kein Wert gesetzt ist, beträgt der Standardabstand 5px.

Typ: text (mit CSS-Einheit, z. B. px, em)
Beispiel: "4px", "0.5em", "8px"

💡 Tipp: Wenn du Buttons mit nur Text oder nur Icon verwendest, kannst du gap auch weglassen – relevant wird er nur, wenn beide Elemente vorhanden sind.

gap: "10px", // z.B. Pixel-Werte
gap: "", // default: 5px

icon

Der Parameter icon ermöglicht es, dem Button ein beliebiges Icon hinzuzufügen. Das Icon wird mit Hilfe des Widgets arcCustomIcon erzeugt und kann frei gestaltet werden (Name, Farbe, Größe etc.). Über dein User Cockpit kannst du deine Wunsch Icons auswählen, die du verwenden möchtest.

Typ: Widget (arcCustomIcon)
Beispiel:

icon: arcCustomIcon({
				name: "plus-bold",
				color: "#fff"
			}), // arcCustomIcon einsetzen, um Icon einzufügen. 
icon: "", // default: Kein Icon wird ausgegeben.

💡 Tipp: Du kannst den Button auch ohne Text verwenden (title: "") und nur über ein Icon darstellen – ideal für kompakte Toolbars oder Symbolleisten.

iconPosition

Der Parameter iconPosition legt fest, wo das Icon im Verhältnis zum Text angezeigt wird. Wenn kein Wert gesetzt ist, wird das Icon links vom Text dargestellt.

Typ: text
Beispiel:

iconPosition: "left", // Icon erscheint links vom Text.
iconPosition: "right", // Icon erscheint rechts vom Text.
iconPosition: "top", // Icon erscheint oben vom Text.
iconPosition: "buttom", // Icon erscheint unten vom Text.

iconPosition: "", // default: links

fontSize

Der Parameter fontSize legt die Schriftgröße des Button-Texts fest. Wird kein Wert gesetzt, beträgt die Standardgröße 13px.

Typ: text (mit CSS-Einheit)
Beispiel: "14px"

💡 Tipp: Wenn du Buttons in unterschiedlichen Kontexten einsetzt (z. B. in Karten oder Listen), kannst du mit fontSize eine visuelle Hierarchie erzeugen – z. B. kleinere Buttons für Nebenaktionen, größere für zentrale Funktionen.

fontSize: "18px",// Pixel-Werte in ""

fontColor

Der Parameter fontColor legt die Farbe des Button-Texts fest. Wenn kein Wert gesetzt ist, wird standardmäßig ein dunkles Grau (#515971) verwendet.

Typ: text (Hex-Code oder CSS-Farbname)
Beispiel: "#ffffff", "black", "rgb(255, 0, 0)"

💡 Tipp: Achte auf ausreichenden Kontrast zur Hintergrundfarbe (backgroundColor), um Lesbarkeit und Barrierefreiheit sicherzustellen – besonders bei farbigen Buttons oder dunklen Themes.

fontColor: "#ffffff", // HEX-Wert in ""

backgroundColor

Der Parameter backgroundColor definiert die Hintergrundfarbe des Buttons. Wenn kein Wert angegeben wird, verwendet das Widget standardmäßig ein helles Grau (#F7F8FC).

Typ: text (Hex-Code oder CSS-Farbname)
Beispiel: "#0062AA", "white", "rgba(0, 0, 0, 0.1)"

💡 Tipp: Für eine klare visuelle Rückmeldung bei Aktionen empfiehlt sich ein kräftiger Farbton – ideal in Kombination mit weißer Schrift (fontColor: "#ffffff").

backgroundColor: "#4970ff", // HEX-Wert in ""

borderColor

Der Parameter borderColor legt die Rahmenfarbe des Buttons fest. Wenn kein Wert angegeben wird, wird standardmäßig ein dezentes Hellgrau verwendet (#E9ECF4).

Typ: text (Hex-Code oder CSS-Farbname)
Beispiel: "#0062AA", "transparent", "rgba(0, 0, 0, 0.2)"

💡 Tipp: Wenn du einen vollständig flächigen Button ohne sichtbaren Rahmen gestalten möchtest, kannst du borderColor auf "transparent" setzen – oder passend zur Hintergrundfarbe.

 borderColor: "#EEEEEE", // HEX-Wert in ""

borderRadius

Der Parameter borderRadius bestimmt, wie stark die Ecken des Buttons abgerundet sind. Wird kein Wert gesetzt, verwendet das Widget standardmäßig 3px.

Typ: text (mit CSS-Einheit)
Beispiel: "0px" (rechteckig), "5px" (leicht abgerundet), "50px" (pillenförmig)

💡 Tipp: Für moderne UI-Elemente eignen sich leicht abgerundete Ecken (4–8px).

 borderRadius: "50px", // 50px = ganz abgerundet // default Wert sind: 3px

embedded

Der Parameter embedded steuert, ob das Widget innerhalb eines anderen Widgets (z. B. in einer Karte oder einem Layout-Container) eingebettet ist.

Typ: boolean (true / false)
Standardwert: false

embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets)
embedded: true,  // Fallback

Badge

Mit dem Badge-System kannst du dem Button eine kleine Zusatzmarkierung hinzufügen – z. B. einen Zähler, ein Label („Neu“, „!“, „3“), oder ein Symbol für besondere Hinweise. Der Badge wird optisch abgesetzt dargestellt und lässt sich farblich sowie in der Position anpassen.

hoverActions

Mit hoverActions kannst du definieren, wie sich der Button visuell verhält, wenn der Nutzer mit der Maus darüberfährt („Hover-Effekt“). Du kannst damit gezielt Farbe, Rahmen und Animation verändern – sowohl für den Button selbst als auch das Icon.

hoverActions: {
	fontColor: "#ffffff",
	iconColor: "#ffffff",
	backgroundColor: "#0062AA",
	borderColor: "#0062AA",
	animation: "0.1s"
},

💡 Tipp: Wenn du gar keine Hover-Effekte brauchst, kannst du hoverActions komplett weglassen. Wenn dein Button eine helle Hintergrundfarbe hat, empfiehlt sich beim Hover ein dunklerer Farbton mit weißem Text, um Interaktivität und Kontrast zu erhöhen. So wird die Aktion visuell klar erkennbar und barriereärmer.

actions ✅

Mit dem Parameter actions definierst du, was passieren soll, wenn der Button geklickt wird. Du kannst eine oder mehrere Aktionen hinterlegen – von einfachem URL-Öffnen über das Erstellen neuer Datensätze bis hin zu benutzerdefiniertem JavaScript.

Typ: Liste von Objekten (Array mit mindestens einem Action-Objekt)
Aufbau einer Action: Jede Action ist ein Objekt mit mindestens dem Feld type – je nach Typ sind weitere Felder erforderlich oder optional.

Unterstützte Aktionstypen

{type: "openUrl", 
value: "https://example.com" }

{ type: "openRecord", 
  recordId: first(select Dashboard).Nr}

{ type: "openFullscreen",
  recordId: Nr, 
  tab: "Details" }

{ type: "popup",
recordId: Nr,
tab: "Info" }

{ type: "closeRecord", 
  recordId: Nr }

{ type: "closeFullscreen",
  recordId: Nr }

{ type: "closeAllRecords" }

{ type: "delete",
recordId: Nr }

{ type: "update", 
recordId: Auftrag.Nr, 
field: "A1", 
value: "Erledigt" }

{ type: "create", 
tableId: "A", 
popup: true, 
changeFieldValues: [{ fieldId: "AZ", 
                      value: "Neu" }] }

{ type: "customJS", 
value: "alert('Hallo Welt!');" }

💡 Tipp: Du kannst mehrere Aktionen hintereinander ausführen, indem du sie im Array kombinierst. Die Ausführung erfolgt in der Reihenfolge, in der sie im Array angegeben sind.

Fazit

Das arcCustomButton-Widget ist ein vielseitiges Werkzeug, um Aktionen in deiner Ninox-App sichtbar und interaktiv zu machen – egal ob du einfache Links, komplexe Workflows oder optisch ansprechende Dashboards gestalten möchtest. Dank der flexiblen Gestaltungsmöglichkeiten und des leistungsstarken Aktionssystems lässt sich der Button nahtlos in bestehende Layouts und Komponenten integrieren.

💡 Pro-Tipp: In Kombination mit anderen arcWidgets – z. B. arcCustomText oder arcCustomCard – kannst du komplette UI-Bausteine entwickeln, die sowohl funktional als auch visuell überzeugen.