Arc Rider Docs · Markdown

Developer Kit · Components

Nested Items (Table)

Nested Items (Table)

Hierarchisch Ausklappbare Einträge

Native nested rows (empfohlen)

Ab der Next-Gen arcCustomTable kannst du Hierarchien direkt im Widget abbilden — ohne arcComponentNestedItems und ohne showChildren-DB-Updates.

Zwei gleichwertige Top-Level-Formen:

  • Classic: table: [{ columns, items: [...] }]
  • Neu: root-items: [{ columns, items: [...] }]
arcCustomTable({
  uniqueListId: "tasks-" + Nr,
  header: { columns: [ /* widths required */ ] },
  collapsible: { enabled: true, expandColumn: 0, indentColumn: 1 },
  table: oberaufgaben.[{
    id: Nr,
    recordId: Nr,
    columns: nestedItem_row.columns,
    items: unteraufgaben.[{ id: Nr, recordId: Nr, columns: nestedItem_row.columns, items: ... }]
  }]
})
  • Collapse läuft im Browser (persistiert pro uniqueListId).
  • Einrückung: collapsible.indentColumn + automatische Tiefe — paddingLeft-Formelfeld optional.
  • Parent mit breiter Zelle: span: 3 auf der Zelle statt Width-Summen in Ninox.

Vollständige API: <a href="/custom-table#nested-rows-items">Custom Table — Nested rows</a>.

---

Legacy: arcComponentNestedItems (deprecated)

Der folgende Abschnitt beschreibt das ältere Ninox-Pattern mit arcComponentNestedItems und flachem table[]. Es funktioniert weiterhin, Migration zum nativen items[]-Baum wird empfohlen.

In diesem Artikel zeigen wir dir, wie du das Widget arcComponentNestedItems optimal anpasst, um hierarchisch ausklappbare Elemente in deinem Projekt umzusetzen. Egal ob du verschachtelte Menüs, Kategorien oder andere Listenstrukturen benötigst – mit unseren Tipps und Tricks kannst du die Funktionalität des Widgets erweitern und es perfekt auf deine Anforderungen abstimmen.

Vorbereitung

Überlege dir zunächst, welche Tabellen du für deine hierarchischen Einträge benötigst. Das könnten zum Beispiel Projekte mit zugehörigen Aufgaben sein. In unserem Beispiel arbeiten wir jedoch nur mit Aufgaben und deren Unteraufgaben, die beide in der Tabelle "Aufgaben" erfasst werden. Jede Aufgabe wird dabei entweder als "Oberaufgabe" oder "Unteraufgabe" kategorisiert. Um die Hierarchie optimal darzustellen, sind folgende Felder in der Tabelle erforderlich:

  • Ja/Nein-Feld: showChildren – Steuert, ob die Unteraufgaben angezeigt werden sollen.
  • Formelfeld: paddingLeft
let parent := Oberaufgabe;
let insetCount := 10;
while parent != null do 
	insetCount := insetCount + 10;
	parent := parent.Oberaufgabe
end
;
insetCount + "px"
  • Formelfeld: Level
let parent := Oberaufgabe;
let levelCount := 0;
while parent != null do 
	levelCount := levelCount + 1;
	parent := parent.Oberaufgabe
end
;
levelCount
  • Formelfeld: cntUnteraufgaben
let children := Unteraufgaben;
cnt(children)
  • Formelfeld: nestedItem_row

Diese Felder dienen als Hilfsfelder und können in einem eigenen Helper-Tab untergebracht werden, da sie auf der Hauptoberfläche nicht direkt sichtbar sein müssen.

Gestaltung der Zeilen mit nestedItem_row

Mit dem folgenden Code befüllst du das Formelfeld nestedItem_row, wodurch du die Darstellung der einzelnen Zeilen in deiner benutzerdefinierten Tabelle (<a href="/custom-table">Custom Table</a>) steuern kannst. In diesem Beispiel werden die Zeilen übersichtlich und funktional aufgebaut: Sie enthalten ein Symbol zum Ein- und Ausklappen, die Bezeichnung der Aufgabe und ein Feld, das die Anzahl der Unteraufgaben anzeigt. Außerdem sind die Zeilen klickbar, sodass du direkt auf den jeweiligen Datensatz zugreifen kannst. Hier der Code:

let current := this;
{
	recordId: Nr,
	rowColor: if Level = 0 then
		"#87c5f2"
	else
		if Level = 1 then
			"#c5e4f9"
		else
			if Level = 2 then "#eff7fc" end
		end
	end,
	rowHeight: "auto",
	rowPaddingY: "5px",
	rowHoverAction: {
		hoverActive: false,
		backgroundColor: "",
		fontColor: ""
	},
	groupRowColor: "",
	groupRowSettings: {
		height: "30px"
	},
	columns: [{
			field: "",
			title: "",
			width: "40px",
			height: "",
			lineHeight: "",
			alignX: "left",
			value: arcCustomIcon({
					name: if showChildren then "minus-bold" else "plus-bold" end,
					containerSize: "25px",
					borderSize: "",
					borderColor: "",
					iconSize: "",
					borderRadius: "4px",
					color: if cnt(Unteraufgaben) > 0 then
						"
					else
						"#c5cce2"
					end,
					backgroundColor: "#eee"
				}),
			color: "",
			styles: "",
			actions: if cnt(Unteraufgaben) > 0 then
				[{
						type: "update",
						recordId: current.Nr,
						field: fieldId(this, "showChildren"),
						value: if showChildren = true then null else true end
					}]
			end
		}, {
			field: "Bezeichnung",
			title: "Bezeichnung",
			paddingX: paddingLeft,
			value: Aufgabe,
			color: "",
			backgroundColor: "",
			width: "200px",
			align: "left",
			actions: [{
					type: "popup",
					showPopupButton: false,
					recordId: current.Nr
				}]
		}, {
			field: "Anzahl Aufgaben",
			title: "Anzahl Aufgaben",
			value: if cntUnteraufgaben > 0 then
				cntUnteraufgaben + " Aufgaben"
			else
				"Keine Unteraufgaben"
			end,
			color: "",
			backgroundColor: "",
			width: "",
			align: "left",
			paddingX: paddingLeft,
			paddingY: "",
			groupExpandAction: false,
			groupValue: arcCustomIcon({
					name: "caret-down"
				}),
			groupByValue: "",
			actions: [{
					type: "popup",
					showPopupButton: false,
					recordId: current.Nr
				}]
		}]
}

In dieser Konfiguration:

  • Icon zum Ein- und Ausklappen: Das Icon zeigt abhängig vom showChildren-Status entweder ein Minus (für ausgeklappt) oder ein Plus (für eingeklappt) an. Zudem sind die Icons bei Aufgaben ohne Unteraufgaben abgeblendet.
  • Bezeichnung der Aufgabe: Die Bezeichnung der Aufgabe wird entsprechend eingerückt, damit die Hierarchie klar erkennbar ist.
  • Anzahl der Unteraufgaben: Ein Textfeld zeigt die Anzahl der vorhandenen Unteraufgaben oder gibt an, wenn keine vorhanden sind.

Dieser Aufbau ermöglicht eine übersichtliche und funktionale Struktur für deine hierarchischen Einträge.

Einfügen der hierarchischen Tabelle in die Zieloberfläche

Nun kannst du auf deiner Zieloberfläche ein Formelfeld in deiner Custom Table erstellen, das die zuvor definierten Zeilen mit nestedItem_row wiedergibt. Der folgende Code setzt die hierarchisch ausklappbare Struktur um:

let list := (select Aufgaben where Oberaufgabe = null);
let showLogik := true;
let nestedData := {
		uniqueId: "Verschachtelte Items Aufgaben" + Nr,
		items: list.[{
				recordId: format(number(Nr), "0000"),
				row: nestedItem_row,
				items: if showChildren = true then
					Unteraufgaben.[{
							recordId: format(number(Nr), "0000"),
							row: nestedItem_row,
							items: if showChildren = true then
								Unteraufgaben.[{
										recordId: format(number(Nr), "0000"),
										row: nestedItem_row
									}]
							end
						}]
				end
			}]
	};
let tableData := {
		uniqueListId: "Nested Example" + Nr,
		tableId: "",
		height: "700px",
		embedded: false,
		rowHoverAction: {
			hoverActive: false,
			backgroundColor: "",
			fontColor: ""
		},
		header: {
			showHeader: true,
			height: "",
			fontColor: "",
			backgroundColor: "",
			fontSize: ""
		},
		emptyTable: {
			title: "Keine Aufgaben gefunden"
		},
		scrollBar: {
			showScrollBar: false,
			height: "",
			backgroundColor: "",
			handle: {
				height: "",
				borderRadius: "",
				backgroundColor: ""
			}
		},
		table: sort(arcComponentNestedItems(nestedData).items).row,
		footer: {
			showFooter: false,
			showActionButton: true,
			actionButtonTitle: "",
			leftSideContent: "",
			rightSideContent: ""
		}
	};
arcCustomTable(tableData)

Damit ist deine Tabelle für hierarchisch ausklappbare Elemente einsatzbereit!