Beispiele

Image-Slider

Widget bestellen

Image-Slider

Du willst verschiedene Bilder aus einer Tabelle mithilfe eines Image-Sliders einfach und übersichtlich durchschalten? In diesem Beitrag findest du eine detaillierte Anleitung, welche Ninox-Einstellungen du benötigst und den dazugehörigen Anwendungscode.

Widgets, die dafür benötigst:

Ninox Einstellungen, die du benötigst:

Eine Tabelle mit folgenden Feldern:
- Bild (Dokumenten/Bild Feld)
- shareUrl (URL Feld)
- sortId (Zahlen-Feld)
- Beschreibung (Text-Feld)
Ein Hilfsfeld (Text) in der Tabelle, in der der Image-Slider dargestellt werden soll. Hier im Beispiel: currentImage

Anwendungscode

let current := this;
let nextImage := number(first(Images_Slider[sortId > record(Images_Slider,number(current.currentImage)).sortId] order by sortId).Nr);
let previousImage := number(last(Images_Slider[sortId < record(Images_Slider,number(current.currentImage)).sortId] order by sortId).Nr);
let firstImage := number(first(Images_Slider order by sortId));
let lastImage := number(last(Images_Slider order by sortId));
arcCustomLayout({
		uniqueId: "fullLayout_Image-Slider_" + Nr,
		embedded: false,
		fullscreen: false,
		direction: "horizontal",
		alignX: "center",
		alignY: "center",
		width: "",
		height: "auto",
		gap: "",
		backgroundColor: "",
		paddingY: "",
		paddingX: "30px",
		blocks: [{
				width: "",
				height: "auto",
				lineHeight: "",
				alignX: "center",
				color: "",
				styles: "",
				value: arcCustomButton({
						uniqueId: "leftButton " + Nr,
						title: "",
						width: "",
						height: "",
						alignY: "",
						alignX: "",
						icon: arcCustomIcon({
								name: "caret-left",
								color: "#9ba3af",
								iconSize: "80px"
							}),
						fontSize: "",
						fontColor: "",
						backgroundColor: "transparent",
						borderColor: "transparent",
						borderRadius: "",
						actions: [{
								recordId: Nr,
								type: "update",
								field: "X",
								value: if previousImage then previousImage else lastImage end
							}]
					})
			}, {
				width: "auto",
				height: "auto",
				lineHeight: "",
				alignX: "center",
				color: "",
				value: arcCustomLayout({
						uniqueId: "Image und Description " + Nr,
						embedded: true,
						fullscreen: false,
						direction: "vertical",
						alignX: "center",
						alignY: "center",
						width: "",
						height: "",
						gap: "20px",
						backgroundColor: "",
						paddingY: "",
						paddingX: "",
						blocks: [{
								width: "",
								height: "auto",
								lineHeight: "",
								alignX: "center",
								color: "",
								styles: "",
								value: arcCustomText({
										uniqueId: "Headline " + Nr,
										embedded: true,
										width: "",
										height: "",
										alignY: "",
										alignX: "center",
										fontSize: "20px",
										fontWeight: "",
										fontColor: "",
										lineHeight: "",
										textWrap: "",
										textScroll: "",
										textAlign: "",
										textDirection: "horizontal",
										textDecoration: {
											type: "",
											style: "",
											color: "",
											thickness: ""
										},
										value: record(Images_Slider,number(currentImage)).Bezeichnung
									})
							}, {
								width: "",
								height: "auto",
								lineHeight: "",
								alignX: "center",
								color: "",
								value: arcCustomImage({
										uniqueId: "Image " + Nr,
										title: "",
										width: "400px",
										height: "400px",
										backgroundSize: "cover",
										backgroundColor: "",
										style: "",
										radius: "5px",
										borderColor: "",
										link: record(Images_Slider,number(currentImage)).shareURL
									})
							}]
					})
			}, {
				width: "",
				height: "100% ",
				lineHeight: "",
				alignX: "center",
				color: "",
				value: arcCustomButton({
						uniqueId: "leftButton " + Nr,
						title: "",
						width: "",
						height: "",
						alignY: "",
						alignX: "",
						icon: arcCustomIcon({
								name: "caret-right",
								color: "#9ba3af",
								iconSize: "80px"
							}),
						fontSize: "",
						fontColor: "",
						backgroundColor: "transparent",
						borderColor: "transparent",
						borderRadius: "",
						actions: [{
								recordId: Nr,
								type: "update",
								field: "X",
								value: if nextImage then nextImage else firstImage end
							}]
					})
			}]
	})

Vorgehensweise

Solltest du die oben beschriebenen Vorkehrungen bei dir getroffen haben, kannst du loslegen und den Anwendungscode des Image-Sliders in einem Formelfeld integrieren.

Ninox Einstellungen

In der Ninox Tabelle für die Bilder, sollte das Zahlenfeld der sortId immer ausgefüllt sein mit einer aufsteigenden Nummer. Diese bestimmt wann welches Bild angezeigt werden soll. Die shareUrl des Bildes ist besonders wichtig, damit das Bild über das Widget Custom Image richtig ausgegeben wird. Hier kannst du bei dem Bild-Feld einen Trigger nach Änderung hinterlegen, der bei Upload eines Bildes, die share URL automatisch in das Feld schreibt. So sieht der Code für Trigger nach Änderung aus:

shareURL := shareFile(Bild)

Hinterlege ein Textfeld auf der Tabelle, auf der du deinen Image-Slider integrieren möchtest. (Hier: currentImage)

Anwendungscode

Erstelle ein Formelfeld, in dem du den oben beschriebenen Anwendungscode einfügst.

Als erstes müsstest du in den Variablen deine Tabelle referenzieren. Statt "Images_Slider" setzt du den Namen deiner Ninox Tabelle mit den Bildern ein. Für "sortId" nimmst du den Namen deines Sortierungsfeldes in der Bildertabelle.

let nextImage := number(first(Images_Slider[sortId > record(Images_Slider,number(current.currentImage)).sortId] order by sortId).Nr);
let previousImage := number(last(Images_Slider[sortId < record(Images_Slider,number(current.currentImage)).sortId] order by sortId).Nr);
let firstImage := number(first(Images_Slider order by sortId));
let lastImage := number(last(Images_Slider order by sortId));

Ersetze dann in den Custom Buttons die fieldId mit der Field Id des Feldes currentImage auf deiner Zieltabelle. Dies machst du bei dem Butten "caret-left" und bei dem Button "caret-right".

				value: arcCustomButton({
						uniqueId: "leftButton " + Nr,
						title: "",
						width: "",
						height: "",
						alignY: "",
						alignX: "",
						icon: arcCustomIcon({
								name: "caret-left",
								color: "#9ba3af",
								iconSize: "80px"
							}),
						fontSize: "",
						fontColor: "",
						backgroundColor: "transparent",
						borderColor: "transparent",
						borderRadius: "",
						actions: [{
								recordId: Nr,
								type: "update",
								field: "X",
								value: if previousImage then previousImage else lastImage end
							}]
					})

Setze in den Record-Referenzierungen den Namen deiner Bildertabelle und deines Feldes auf der Zieltabelle ein. Nun solltest du startklar sein mit deinem Bilder-Slider. 🚀 🏞️