Widgets

Custom Layout

2.9.0

Custom Layout

Mit diesem Widget kannst du deine Inhalte beliebig anordnen. Zum Beispiel drei-spaltig oder Texte aus verschiedenen Datensätzen direkt in einer Zelle.

Der grundlegende Unterschied zwischen dem Grid und Layout besteht darin, dass das Layout in einer Dimension konzipiert wurde – entweder einer Zeile oder einer Spalte. Grid wurde für ein zweidimensionales Layout konzipiert – Zeilen und Spalten gleichzeitig.

Beispiel innerhalb einer Custom Table:

Anwendungscode

Simple Basis

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: "",
            height: "auto",
            lineHeight: "", 
			alignX: "left",
            color: "", 
			styles: "",
			value: ""
    			}, {
            width: "",
            height: "auto",
            lineHeight: "", 
			alignX: "left",
            color: "", 
    		value: "",
           
    		}]
	})

Code mit allen Parametern

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)
            	},
    		}]
	})

💡Hinweis: Du kannst auch mehrere Layouts ineinander verschachteln. Somit kannst du komplexe Interfaces aufbauen und Ninox noch übersichtlicher gestalten.

Allgemeine Settings

Die oberen Parameter geben die allgemeinen Settings deines gesamten Layouts an. Das ist sozusagen der äußerste Container deines Layouts.

uniqueId

uniqueId ist die individuelle Bezeichnung deines Layouts. Achte darauf, dass du hier einen einzigartigen Titel vergibst. Das ist wichtig, falls du mehrere Layouts auf einer Seite / in einer Tabelle darstellen möchtest und diese sich nicht gegenseitig überschreiben.

uniqueId: "Layout container",

embedded

embedded gibt an, ob dein Layout in einem anderen Widget integriert werden soll.

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

Fullscreen Einstellungen

Mit fullscreen bestimmst du, ob dein Layout über den gesamten Bildschirm angezeigt werden soll. Gib für die einwandfreie Benutzung bitte in dem Parameter ninoxVersion an, in welcher Web-Version du dich befindest. Zum Beispiel "3.13".

Mit page definierst du, ob du das Layout auf einer Page oder einer Tabelle einbindest. Gibst du hier true an, bist du auf einer Page, gibst du false an, befindest du dich auf einer Tabelle. Bislang hat fullscreenMode:"full" nur bei Ninox-Pages, nicht aber bei Ninox-Tabellen funktioniert. Über den Parameter "page" funktionieren die fullscreenMode: "full"-Auswirkungen auch bei Records einer Tabelle. Hierzu musst du den Parameter page auf false setzen.

Mit dem Parameter fullscreenMode: "full" können Ninox Header und Tabs ausgeblendet werden. Um im Layout fullscreenMode: "full" weiterhin zu verwenden muss die Version als Parameter ninoxVersion: "3.13" hinzugefügt werden. Der Parameter wirkt auch für Versionen nach 3.13 (als falls ihr z.B. 3.15 hinterlegt).

Mit showAdminTools, entscheidest du, ob für Admins der Admin-Button ausgeblendet werden.

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

Scroll Settings

In den Scroll Settings kannst du einstellen, ob dein Layout vertikal (scrollY) oder horizontal (scrollX) scrollbar sein soll. Das Layout merkt sich auch die Scroll-Position. Das heißt: Wenn du Trigger anwendest, die Ninox kurz neu lädt, dann bleibt das Layout an der letzten Scroll Position und verändert sich nicht.

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

direction

direction gibt an, wie deine weiteren Inhalte (blocks) angeordnet werden sollen.

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

alignX

alignX: gibt an, wie deine Inhalte auf der X-Achse angeordnet werden.

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

alignY

alignY: gibt an, wie deine Inhalte auf der Y-Achse angeordnet werden.

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

width

width gibt die Weite an.

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

height

height gibt die Höhe an.

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

gap

Mit gap bestimmst du, wie viel Abstand zwischen deinen blocks sein soll.

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

Settings im Layout Block

Die Parameter innerhalb eines Blocks bestimmen Werte die zu einem jeweiligen Layoutblock gehören. Du kannst auch weitere Blöcke hinzufügen (Komma getrennt).

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 und height geben die Breite und Höhe des Layoutblocks an.

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

Mit lineHeight bestimmst du den Abstand zwischen den Zeilen im Layout.

lineHeight: "1.6", // default: normal

alignX

alignX: gibt an, wie deine Inhalte auf der X-Achse innerhalb des Layoutblocks angeordnet werden.

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

color & backgroundColor

Mit color und backgroundColor bestimmst du die Schriftfarbe und Hintergrundfarbe des Textes innerhalb deines Layoutblocks.

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

styles

Bei styles kannst du dem Layoutblock eigene CSS styles hinzufügen.

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

value

value ist der Wert, der innerhalb des Layoutblocks ausgegeben wird. Hier kannst du z.B. Text, Ninox-Felder oder customWidgets angeben.

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 beschreibt deine Aktionen in den jeweiligen Blocks.

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

openTable öffnet eine Tabellenansicht in Ninox.

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

openURL öffnet eine externe Url, die du definierst.

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

types in den clickActions sind folgende:

// 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 erlaubt es euch beim fullscreen:true alle Ninox Elemente in der Form auszublenden. Zusätzlich können über showAdminTools der Ninox Schlüssel für andere Admins (z.B. Admins in Kundendatenbanken) ausgeblendet werden. Ihr könnten z.B. mit if else end den Schlüssel nur für euren User einblenden lassen. hideHeaderHeaderIcons kann zusätzlich mehr Kontrolle für die Ausblendung von Ninox Symbolen im Header geben.

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

Zurück

Custom Table

Zurück

Custom Table

Weiter

Custom KPI Bar

Weiter

Custom KPI Bar