Mini Widgets

Pagination

1.1.2

Order widget

arcCustomPagination

With arcCustomPagination, content can be elegantly displayed page by page – especially with long lists or tables, it is a real game changer in terms of performance and clarity. Instead of loading all records at once, only the currently visible entries are displayed. This saves loading time and makes your interface much smoother.

When should one use pagination?

Pagination is especially recommended when:

a list contains many entries (e.g., messages, projects, clients),
rendering becomes slow due to too many simultaneously loaded elements,
better user guidance through page numbers is desired,
you want to optimize UI/UX, e.g., for mobile devices.

Example of paginated list

Before you paginate your list, you first need to define the Ninox list itself. With this loop, only the corresponding section from the entire list is loaded – depending on the current page number:

let current := this;
let maxEntries := 30;
let currentPage := 'Aktuelle Seite'; // Zahlenfeld in Ninox
let list := select Nachrichten; // Ninox-Tabelle
let paginatedList := unique(record(Nachrichten,0))[!= 0];
for listItem in slice(list.Nr, maxEntries * (currentPage - 1), maxEntries * currentPage) do
	paginatedList := unique(paginatedList, record(Nachrichten,listItem))
end;

Application code for the widget

You insert this application code at the place where you want the pagination to be displayed.

arcCustomPagination({
		uniqueId: Nr,
		editable: true,
		recordId: Nr,
		fieldId: "S1", // fieldId vom Ninox Feld "Aktuelle Seite"
		direction: "horizontal",
		title: current.'Aktuelle Seite',
		value: current.'Aktuelle Seite',
		total: ceil(cnt(list) / 30),
		totalPrefix: " von "
})

Parameters

Parameter	Type	Description
`uniqueId`	Text	Unique ID for the pagination element. Required field.
`editable`	Boolean	Allows manual entry of the page number in the input field.
`recordId`	Text	ID of the current record to which the update applies. (The action is executed)
`fieldId`	Text	The field that stores the current page.
`direction`	Text	Layout of the pagination: `"horizontal"` (default) or `"vertical"`.
`title`	Text	The currently displayed value in the input field.
`value`	Number	Current page number – important for navigation and button conditions.
`total`	Number	Total number of pages (e.g., `ceil(cnt(list) / 30)`).
`totalPrefix`	Text	Small addition before the total number of pages, e.g., `" of "`.
`valuePrefix`	Text	Optional string that is placed before the page number on update.
`buttonFirst`	Widget	Optional content (text or widget) for the “first page” button.
`buttonMinus`	Widget	Optional content (text or widget) for the “back” button.
`buttonPlus`	Widget	Optional content (text or widget) for the “next” button.
`buttonLast`	Widget	Optional content (text or widget) for the “last page” button.

Structure in a Custom Table

let current := this;
let projectList := filteredList_Personen;
let current := this;
let maxEntries := 'Einträge pro Seite';
let currentPage := 'Aktuelle Seite';
let list := filteredList_Personen;
let paginatedList := unique(record('Stammdaten Person',0))[!= 0];
for listItem in slice(list.Nr, maxEntries * (currentPage - 1), maxEntries * currentPage) do
	paginatedList := unique(paginatedList, record('Stammdaten Person',listItem))
end;
let data := {
		uniqueListId: "Personen " + Nr,
		tableId: tableId(first(projectList)),
		height: "100%",
		embedded: true,
		table: paginatedList.[{
				recordId: Nr,
				groupRowColor: text(designSystem().colors.borderBlue),
				rowHeight: "auto",
				rowPaddingY: "5px",
				columns: [{
						field: "Name",
						title: "Name",
						align: "left",
						value: data.name
					}, {
						field: "Typ",
						title: "Typ",
						width: "120px",
						align: "left",
						value: html(data.monteur.badge)
						
					},
						{
							field: "Adresse",
							title: "Adresse",
							align: "left",
							alignY: "center",
							value: data.address.block,
						}
					]
			}],
		footer: {
			showFooter: true,
			showActionButton: false,
			leftSideContent:"",
			rightSideContent: arcCustomPagination({
					uniqueId: "pagination-person" + Nr,
					editable: true,
					recordId: Nr,
					fieldId: fieldId(current.Nr, "Aktuelle Seite"),
					direction: "horizontal",
					title: current.'Aktuelle Seite',
					value: current.'Aktuelle Seite',
					total: ceil(cnt(list) / 'Einträge pro Seite'),
					totalPrefix: " von "
				})
		}
	};
arcCustomTable(data)

Application Code Complex

arcCustomPagination({
					uniqueId: Nr,
					editable: true,
					recordId: Nr,
					fieldId: "E2",
					direction: "horizontal",
					title: current.'Aktuelle Seite',
					value: current.'Aktuelle Seite',
					total: ceil(cnt(list) / maxEntries),
					totalPrefix: " von ",
					buttonMinus: arcCustomButton({
							uniqueId: "ButtonMinus" + Nr,
							icon: arcCustomIcon({
									name: "caret-left",
									color: "#555",
									size: 20
								}),
							fontSize: "18px",
							fontColor: "",
							iconColor: "",
							backgroundColor: "transparent",
							borderColor: "transparent"
						}),
					buttonPlus: arcCustomButton({
							uniqueId: "ButtonPlus" + Nr,
							icon: arcCustomIcon({
									name: "caret-right",
									color: "#555",
									size: 20
								}),
							fontSize: "18px",
							fontColor: "",
							iconColor: "",
							backgroundColor: "transparent",
							borderColor: "transparent"
						}),
					buttonFirst: arcCustomButton({
							uniqueId: "ButtonFirst" + Nr,
							icon: arcCustomIcon({
									name: "caret-double-left",
									color: "#555",
									size: 20
								}),
							fontSize: "18px",
							fontColor: "",
							iconColor: "",
							backgroundColor: "transparent",
							borderColor: "transparent"
						}),
					buttonLast: arcCustomButton({
							uniqueId: "ButtonLast" + Nr,
							icon: arcCustomIcon({
									name: "caret-double-right",
									color: "#555",
									size: 20
								}),
							fontSize: "18px",
							fontColor: "",
							iconColor: "",
							backgroundColor: "transparent",
							borderColor: "transparent"
						})
				})

💡 Pro Tip: If you want to display multiple lists on one page, you can create your own pagination with different uniqueId values and your own fieldId fields for each list. This keeps everything independent.

Conclusion

arcCustomPagination is perfect for elegantly, performantly, and user-friendly presenting large amounts of data. A must for anyone working with long lists – whether in CRM, projects, or support tickets.

Let’s paginate smart. 🚀