Hierarchisch Ausklappbare Einträge

In diesem Artikel zeigen wir dir, wie du das Widget arcComponentNestedLayout 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 nested_row

Mit dem folgenden Code befüllst du das Formelfeld nested_row, wodurch du die Darstellung der einzelnen Zeilen in deinem benutzerdefinierten Layout 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:

arcCustomLayout({
		uniqueId: Nr,
		embedded: true,
		fullscreen: false,
		direction: "horizontal",
		alignX: "center",
		alignY: "center",
		width: "",
		height: "",
		gap: "5px",
		backgroundColor: "",
		paddingY: "",
		paddingX: "",
		styles: "padding-left:" + paddingLeft + ";",
		blocks: [{
				width: "40px",
				height: "auto",
				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
							"#ffffff"
						else
							"#ffffff33"
						end,
						backgroundColor: if cnt(Unteraufgaben) > 0 then
							"#4b4d4a"
						else
							"#4b4d4a"
						end
					}),
				color: "",
				styles: "",
				clickAction: if cnt(Unteraufgaben) > 0 then
					{
						type: "update",
						recordId: Nr,
						field: "T1",
						value: if showChildren = true then null else true end
					}
				end
			}, {
				width: "",
				height: "auto",
				lineHeight: "",
				alignX: "left",
				value: Aufgabe,
				color: "",
				clickAction: {
					type: "popup",
					recordId: 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 des hierarchischen Layouts in die Zieloberfläche

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

let list := (select Aufgaben);
let data := {
		uniqueId: "Verschachtelte Items",
		items: list[Oberaufgabe = null and Aufgabe != null].[{
				recordId: Nr,
				title: nested_row,
				backgroundColor: "",
				items: if showChildren = true then
					let id := Nr;
					Unteraufgaben.[{
							recordId: Nr,
							title: nested_row,
							startDate: Startdatum,
							backgroundColor: "",
							items: if showChildren = true then
								Unteraufgaben.[{
										recordId: Nr,
										backgroundColor: "",
										title: nested_row,
										items: if showChildren = true then
											Unteraufgaben.[{
													recordId: Nr,
													backgroundColor: "",
													title: nested_row
												}]
										end
									}]
							end
						}]
				end
			}]
	};
---
 Hier betten wir die arcComponentNestedLayout() nochmal in ein Layout für das bessere Handling 
---;
arcCustomLayout({
		uniqueId: "nested layout tours" + Nr,
		embedded: false,
		fullscreen: false,
		direction: "vertical",
		alignX: "center",
		alignY: "top",
		width: "",
		styles: "",
		height: "500px",
		gap: "5px",
		backgroundColor: "#e6f0fe",
		paddingY: "20px",
		paddingX: "20px",
		scrollSettings: {
			scrollY: true
		},
		blocks: [{
				width: "100%",
				height: "auto",
				lineHeight: "",
				alignX: "left",
				color: "",
				styles: "flex-direction: column;",
				value: arcComponentNestedLayout(data)
			}]
	})

Damit ist dein Layout für hierarchisch ausklappbare Elemente einsatzbereit!