Components

Nested Items (Table)

Widget bestellen

Hierarchical Expandable Entries

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

Preparation

First, consider which tables you need for your hierarchical entries. These could be, for example, projects with associated tasks. In our example, however, we only work with tasks and their subtasks, both of which are recorded in the table "Tasks." Each task is categorized either as a "Main Task" or "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 indentation for 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 this 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 accommodated in a separate helper tab since they do not have to be directly visible on the main interface.

Design of Rows with `nestedItem_row`

With the following code, you fill the formula field nestedItem_row, thereby controlling the presentation of individual rows in your custom table (Custom Table). In this example, the rows are designed to be clear and functional: they include an icon for expanding and collapsing, the name of the task, and a field that displays the number of subtasks. Additionally, the rows are clickable, allowing you to directly access the respective record. Here is the 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 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. Moreover, the icons are faded for tasks without subtasks.
Name of the Task: The name of the task is indented accordingly to make the hierarchy clearly recognizable.
Number of Subtasks: A text field displays the number of existing subtasks or indicates if none are present.

This structure provides a clear and functional framework for your hierarchical entries.

Inserting the Hierarchical Table into the Target Interface

You can now create a formula field in your Custom Table on your target interface that represents the previously defined rows with nestedItem_row. The following code implements the hierarchical expandable structure:

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)

With this, your table for hierarchical expandable elements is ready for use!

Nested Items (Table)

Hierarchical Expandable Entries

Preparation

Design of Rows with nestedItem_row

Inserting the Hierarchical Table into the Target Interface

Design of Rows with `nestedItem_row`