Components

Nested Layout

Widget bestellen

Hierarchically Expandable Entries

In this article, we will show you how to optimally adjust the widget arcComponentNestedLayout to implement hierarchically expandable elements in your project. Whether you need nested menus, categories, or other list structures – with our tips and tricks, you can extend the functionality of the widget and tailor it perfectly to your requirements.

Preparation

First, think about which tables you need for your hierarchical entries. These could be projects with associated tasks, for example. In our example, however, we will only work with tasks and their subtasks, which are both recorded in the table "Tasks". Each task is categorized either as a "parent task" or a "subtask". To optimally represent the hierarchy, the following fields are required in the table:

Yes/No Field: showChildren – Controls whether the subtasks should be displayed.
Formula Field: paddingLeft
This field provides the spacing on the left side (indented subtasks) of the entries and uses the following logic:

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

Formula Field: Level
Determines the hierarchy level of the task. The formula for that is:

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

Formula Field: cntUnteraufgaben
Counts the number of subtasks and uses this formula:

let children := Unteraufgaben;
cnt(children)

Formula Field: nestedItem_row
This field prepares the structure for displaying the hierarchical entries.

These fields serve as helper fields and can be placed in their own Helper tab since they do not need to be directly visible on the main interface.

Designing Rows with `nested_row`

With the following code, you populate the formula field nested_row, which allows you to control the presentation of individual rows in your custom layout. In this example, the rows are structured clearly and functionally: they contain an icon for expanding and collapsing, the designation of the task, and a field that shows the number of subtasks. Additionally, the rows are clickable, allowing you to directly access the respective data record. Here is the 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 this configuration:

Icon for Expanding and Collapsing: The icon shows either a minus (for expanded) or a plus (for collapsed) depending on the showChildren status. Additionally, the icons are faded for tasks without subtasks.
Designation of the Task: The designation of the task is indented accordingly, making the hierarchy clearly recognizable.
Number of Subtasks: A text field displays the number of existing subtasks or indicates when none are present.

This setup allows for a clear and functional structure for your hierarchical entries.

Inserting the Hierarchical Layout into the Target Interface

Now you can create a formula field in your Custom Layout on your target interface that reproduces the rows defined earlier with nested_row. The following code implements the hierarchically expandable structure:

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

Now your layout for hierarchically expandable elements is ready for use!

Nested Layout

Hierarchically Expandable Entries

Preparation

Designing Rows with nested_row

Inserting the Hierarchical Layout into the Target Interface

Designing Rows with `nested_row`