Beispiele

Hierarchisch Ausklappbare Einträge

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
Dieses Feld sorgt für den Abstand auf der linken Seite (eingerückte Unteraufgaben) der Einträge und verwendet folgende Logik:

let parent := Oberaufgabe;
let insetCount := 10;
while parent != null do 
	insetCount := insetCount + 10;
	parent := parent.Oberaufgabe
end
;
insetCount + "px"

Formelfeld: Level
Bestimmt die Hierarchieebene der Aufgabe. Die Formel dafür lautet:

let parent := Oberaufgabe;
let levelCount := 0;
while parent != null do 
	levelCount := levelCount + 1;
	parent := parent.Oberaufgabe
end
;
levelCount

Formelfeld: cntUnteraufgaben
Zählt die Anzahl der Unteraufgaben und verwendet diese Formel:

let children := Unteraufgaben;
cnt(children)

Formelfeld: nestedItem_row
Dieses Feld bereitet die Struktur für die Anzeige der hierarchischen Einträge vor.

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 (Custom Table) 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!

Zurück

Sortierung innerhalb einer Table

Zurück

Sortierung innerhalb einer Table

Weiter

Individuelles Design in der calendarWeek

Weiter

Individuelles Design in der calendarWeek

Hierarchisch Ausklappbare Einträge

Hierarchisch Ausklappbare Einträge

Vorbereitung

Gestaltung der Zeilen mit nestedItem_row

Einfügen der hierarchischen Tabelle in die Zieloberfläche

Gestaltung der Zeilen mit `nestedItem_row`