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.

Beispiel innerhalb einer Custom Table:

Anwendungscode

arcCustomLayout({
	uniqueId: Nr,
	direction: "vertical",
	alignX: "center",
	alignY: "center",
	width: "",
    line-height:"",
	height: "",
	gap: "5px",
	backgroundColor: "#ccc",
	paddingY: "10px",
	paddingX: "5px",
	blocks: [{
			align: "left",
			value: "",
			styles: "flex:1 0 0;",
			clickAction: {
					recordId: Nr,
					type: "popup"
							}
    			}, {
			align: "left",
    		value: "",
			clickAction: {
    			type: "fullscreen",
    			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.

uniqueListID 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",

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
alignX: "left", // linksbündig
alignX: "right", // rechtsbündig

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