Examples

Image slider

Order widget

📸 Image Slider in Ninox

This is how you build your custom-designed image slider – completely without external gallery tools.

Do you want to browse multiple images from a table clearly and interactively? In this post, we will show you step by step which widgets and Ninox settings you need – including example code for implementation.

🧩 Required Widgets

📁 Structure of Your Table

You need a table with the following fields:

Field Name	Type
`Image`	Document/Image Field
`shareUrl`	URL Field
`sortId`	Number Field (for sorting)
`Description`	Text Field
`currentImage`	Helper Field (Text), e.g., in the layout

💡 Tip: The field currentImage is used to control the currently displayed image in the slider.

🛠️ Procedure

Once you have implemented the requirements mentioned above, you can begin with the actual setup of the image slider.

1. Insert Code

The application code for the slider is placed in a Form Field (e.g., imageSlider_Layout). This field is responsible for the visual display of the images and the navigation.

2. Important Ninox Settings

In your image table, you should pay attention to the following points:

sortId (Number Field)
→ This field must be filled with an ascending number for each image (e.g., 1, 2, 3 …).
→ It controls the order in which the images are displayed in the slider.
shareUrl (URL Field)
→ This field contains the direct link to the image file – important for display in the Custom Image widget.
→ It is best to set this value automatically when uploading an image.

Automatically populate shareUrl

To automatically populate the shareUrl, you can set a Trigger on Change in the Image Field. This way, the URL will be updated every time a new image is uploaded.

Example Code for the Trigger on Change:

shareURL := shareFile(Bild)

3. Create Helper Field

Create a Text Field in the table where you want to display the image slider – e.g., currentImage. This field stores the currently displayed image ID and will be changed via the navigation buttons in the slider.

Insert Application Code

Now create a Form Field, e.g., imageSlide_Layout, and insert the application code there. Pay attention to the following adjustments:

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

💡 Tip: embedded - Parameter Set Correctly

Depending on where you want to use the image slider, you must set the embedded parameter correctly:

embedded: false
→ When you use the slider directly in a Ninox form field (e.g., as its own layout field).
→ The slider behaves like a standalone widget.
embedded: true
→ When you embed the slider within another widget or in a larger custom layout.
→ The slider will then adapt to the surrounding structure.

5. Set Table & Field References

At the beginning of the code, your variables must correctly refer to your own image table and the fields contained within it.

✍️ What do you need to adjust here?

Images_Slider → Replace this name with the actual name of your Ninox table containing the images.
sortId → Replace with the name of your sorting field in this table (e.g., Order).

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

In the Custom Buttons of the slider, you need to provide the fieldId of the currentImage field to ensure the buttons work correctly. Make sure to replace the fieldId in both buttons:

Button "caret-left"
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
							}]
					})

6. Final Step: Adjust References ✅

Set the name of your image table and your field in the target table in the record references.

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

⚠️ This adjustment is crucial for the navigation in the slider to work correctly.

🚀 And now: Get Started!

Once you have implemented all the steps, your custom-configured image slider is ready to go.
Whether it is a team gallery, portfolio or visual highlight – you can now easily browse through the images. 🏞️✨