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: Nr,
    embedded: true, 
    fullscreen: false,
	direction: "vertical",
	alignX: "center",
	alignY: "center",
	width: "",
	height: "",
	gap: "5px",
	backgroundColor: "",
	paddingY: "",
	paddingX: "",
	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",
	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 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 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

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: 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: 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 gibt die Weite an.

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

height gibt die Höhe an.

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

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 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

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

lineHeight: "1.6", // default: normal

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

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

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

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

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: "", 
		}

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 Actions benötigen nur den Parameter "type" in der clickAction.
"closeFullScreen"
"closeRecord"
"closeAllRecords"

💡 Hinweis: Du kannst auch mehrere Aktionen auf einem Feld ausführen. Diese setzt du in eine eckige Klammer und trennst sie durch ein Komma (,). Zum Beispiel so:

clickAction: [{
	recordId: Nr,
	type: "popup"
	}, {
	recordId: Nr,
	type: "update",
	field: "A"
}]

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