Beispiele

Custom Table mit Mini Widgets

In diesem Blogbeitrag findet ihr ein komplexes Beispiel einer Custom Table, die eure Aufgabenverwaltung auf ein neues Level hebt. Diese Tabelle zeigt euch Aufgaben, gruppiert nach Aufträgen, und bietet eine Vielzahl von Funktionen, die eure Arbeit erheblich erleichtern werden. Widget: Custom Table mit integrierten Mini Widgets: Checkbox, Input, Progress Bar, Button, Select, Icon und Pagination.

Aufgabenverwaltung leicht gemacht

Unsere Custom Table ermöglicht es euch, Aufgaben effizient zu organisieren und zu bearbeiten. Die Aufgaben sind nach Aufträgen gruppiert, was für eine klare Struktur und Übersichtlichkeit sorgt. Doch das ist erst der Anfang.

Integrierte Checkboxen

Mit den integrierten Checkboxen könnt ihr jede Aufgabe einfach abhaken, sobald sie erledigt ist. Dies ist nicht nur praktisch, sondern gibt euch auch sofort visuelles Feedback über euren Fortschritt.

Mehrzeilige Inputfelder

In der Spalte "Beschreibung" findet ihr mehrzeilige Inputfelder. Diese ermöglichen es euch, Aufgaben direkt in der Tabelle detailliert zu beschreiben, ohne dass ihr extra in den Datensatz gehen müsst. Das spart Zeit und macht die Bearbeitung intuitiver.

Datumsfeld

Das Datum eurer Aufgaben könnt ihr direkt in der Tabelle ändern. Dazu nutzt ihr ein Input-Feld mit dem Typ "date". Diese direkte Bearbeitungsmöglichkeit sorgt für eine reibungslose und schnelle Anpassung der Termine.

Fortschrittsanzeige

Eine ProgressBar kann eingeblendet werden, um den Fortschritt eurer Aufgaben visuell darzustellen. Dies hilft euch, auf einen Blick zu erkennen, wie weit ihr mit euren Projekten seid.

Unteraufgaben erstellen

Mit einem einfachen Klick auf den entsprechenden Button könnt ihr neue Unteraufgaben erstellen. Diese öffnen sich in einem Ninox-Popup, in dem ihr alle notwendigen Einstellungen vornehmen könnt. Diese Funktion erleichtert das Hinzufügen von Detailaufgaben und die detaillierte Planung.

Statusänderung per Dropdown

Den Status einer Aufgabe könnt ihr ganz einfach per Dropdown ändern. Diese Funktion ist nicht nur benutzerfreundlich, sondern sorgt auch dafür, dass ihr jederzeit den aktuellen Stand eurer Aufgaben im Blick habt.

Direkte Löschung

In der letzten Spalte findet ihr ein delete-Icon. Mit diesem könnt ihr Aufgaben direkt löschen, ohne dass ihr extra auf den Datensatz gehen müsst. Dies macht die Verwaltung von erledigten oder obsoleten Aufgaben deutlich einfacher.

Dynamische Farbgestaltung

Die dynamische groupRowColor-Funktion färbt die Aufgabenzeilen je nach Fortschritt der Aufgaben ein. Diese visuelle Unterstützung hilft euch, schnell zu erkennen, welche Aufgaben noch offen sind und welche bereits abgeschlossen wurden.

Automationen in Ninox

Ihr könnt Automationen einstellen, die beispielsweise das Datum auf today() setzen, sobald eine Aufgabe erledigt wurde. Dies stellt ihr ganz normal in den Ninox-Feldern unter "Trigger nach Änderung" ein. Es ist wichtig zu beachten, dass die Widgets wie ein Overlay über eurer vorhandenen Datenstruktur funktionieren. Alle datentechnischen Automatisierungen könnt ihr wie gewohnt mittels Feldern und Triggern in Ninox bearbeiten.

Fazit

Diese komplexe Custom Table in Ninox bietet euch ein leistungsstarkes Werkzeug zur effizienten Verwaltung eurer Aufgaben. Mit Funktionen wie integrierten Checkboxen, mehrzeiligen Inputfeldern, direkter Datumsänderung, Fortschrittsanzeigen, einfachen Erstellung von Unteraufgaben, Statusänderungen per Dropdown, direkter Löschung und dynamischer Farbgestaltung habt ihr alle Werkzeuge zur Hand, die ihr für ein effektives Aufgabenmanagement benötigt. Nutzt diese Möglichkeiten, um eure Projekte noch erfolgreicher zu gestalten!

Anwendungscode des Beispiels

let current := this;
let list := (flteredList_Aufgaben[cnt(Auftrag.Aufgaben) > 5] order by cnt(Auftrag.Aufgaben)); //Ihr könnt euch Listen in extra Formel-Feldern vorfiltern, damit der Code nicht so lang wird
let maxEntries := 'Einträge pro Seite'; // Hilfsfeld Zahl 
let currentPage := 'Aktuelle Seite'; // Hilfsfeld Zahl 
let paginatedList := unique(record(Aufgaben,0))[!= 0]; 
for listItem in slice(list.Nr, maxEntries * (currentPage - 1), maxEntries * currentPage) do
	paginatedList := unique(paginatedList, record(Aufgaben,listItem))
end;
let data := {
		uniqueListId: "Aufgaben Demo 1",
		tableId: tableId(first(list)),
		height: "600px",
		width: "100px",
		groupedBy: "Aufgabe",
        groupsCollapsed: false, 
		embedded: false,
		table: paginatedList.[{
				recordId: Nr,
				rowColor: "",
				rowHeight: "auto",
				rowPaddingY: "10px",
				groupRowColor: let currentRecord := Nr;
				if cnt(list[Checkliste.Nr = currentRecord.Checkliste.Nr and Erledigt = true]) = cnt(list[Checkliste.Nr = currentRecord.Checkliste.Nr]) then
					"#dcf2de"
				else
					"#eee"
				end,
				columns: [{
						field: "Erledigt",
						title: arcCheckBox({
								value: if cnt(list[Erledigt = true]) != cnt(list) then
									false
								else
									if cnt(list[Erledigt = null]) = cnt(list) then
										null
									else
										if cnt(list[Erledigt = true]) = cnt(list) then
											true
										end
									end
								end
							}),
						value: arcCheckBox({
								value: Erledigt
							}),
						width: "40px",
						align: "center",
						fixed: "left",
						actions: [{
								recordId: Nr,
								type: "update",
								field: "G",
								value: if Erledigt = true then null else true end,
								headerAction: true
							}],
						groupValue: arcCustomIcon({
								name: "caret-circle-double-down-fill"
							})
					}, {
						field: "Aufgabe",
						title: "Aufgabe",
						width: "",
						value: replace(Aufgabe, ">", "❯"),
						actions: [{
								recordId: Nr,
								type: "popup",
								showPopupButton: true
							}],
						groupValue: html("<b>" + Auftrag.Titel + "</b>"),
						groupByValue: Auftrag.Nr
					}, {
						field: "'Erledigt am'",
						title: "Beschreibung",
						value: arcCustomInput({
								uniqueId: "Mein-Textarea-" + Nr,
								recordId: Nr,
								fieldId: "B",
								title: Beschreibung,
								value: Beschreibung,
								type: "textarea",
								embedded: true,
								disabled: false,
								width: "",
								height: "auto",
								minHeight: "40px",
								fontColor: "",
								fontSize: "",
								fontWeight: "",
								backgroundColor: "",
								borderWidth: "",
								borderColor: "",
								borderRadius: "",
								placeholderSettings: {
									value: "Beschreibe die Aufgabe..."
								},
								focusAction: {
									width: "",
									showFocusOutline: "",
									outlineWidth: "",
									outlineColor: ""
								},
								alignX: "left",
								paddingX: ""
							}),
						align: "left",
						width: "280px"
					}, {
						field: "'Erledigt am'",
						title: "Erledigt am",
						value: arcCustomInput({
								uniqueId: "Mein-Input-" + Nr,
								recordId: Nr,
								fieldId: "A1",
								title: text(Startdatum),
								value: text(Startdatum),
								type: "date",
								embedded: true,
								disabled: false,
								width: "",
								height: "",
								fontColor: "",
								fontSize: "",
								fontWeight: "",
								backgroundColor: "#fff6d8",
								borderWidth: "",
								borderColor: "",
								borderRadius: "",
								placeholderSettings: {
									value: "Datum eintragen",
									fontColor: "#e9595c",
									backgroundColor: "#fff7f7"
								},
								focusAction: {
									width: "",
									showFocusOutline: "",
									outlineWidth: "",
									outlineColor: ""
								},
								alignX: "left",
								paddingX: ""
							}),
						align: "left",
						width: "180px"
					}, {
						field: "Aufgaben",
						title: "Aufgaben",
						value: arcCustomProgressBar({
								uniqueId: "",
								width: "",
								fontSize: "",
								fontColor: "",
								backgroundColor: "",
								progressColor: "",
								valueTotal: cnt(Unteraufgaben),
								valueProgress: cnt(Unteraufgaben[Erledigt = true]),
								valueText: cnt(Unteraufgaben[Erledigt = true]) + "/" + cnt(Unteraufgaben)
							}),
						align: "left",
						width: "150px",
						groupValue: arcCustomProgressBar({
								uniqueId: "Erledigte Aufgaben",
								title: "",
								width: "",
								fontSize: "",
								fontColor: "",
								backgroundColor: "#fff",
								progressColor: "",
								valueTotal: cnt(Auftrag.Aufgaben),
								valueProgress: cnt(Auftrag.Aufgaben[Erledigt = true]),
								valueText: cnt(Auftrag.Aufgaben[Erledigt = true]) + "/" + cnt(Auftrag.Aufgaben)
							})
					}, {
						field: "",
						title: "",
						value: arcCustomButton({
								uniqueId: "Unteraufgabe erstellen" + Nr,
								title: "Unteraufgabe",
								width: "100%",
								icon: arcCustomIcon({
										name: "plus-bold",
										color: "#0062AA"
									}),
								fontSize: "",
								fontColor: "#0062AA",
								iconColor: "#0062AA",
								backgroundColor: "#0062AA33",
								borderColor: "#0062AA",
								borderRadius: "50px",
								showBadge: false,
								badgeTitle: cnt(Unteraufgaben),
								badgeColor: "",
								badgeBackground: "",
								badgeBorderColor: "",
								badgePosition: "",
								hoverActions: {
									fontColor: "#ffffff",
									iconColor: "#ffffff",
									backgroundColor: "#0062AA",
									borderColor: "#0062AA",
									animation: "0.5s"
								},
								actions: [{
										type: "create",
										tableId: "B",
										popup: true,
										changeFieldValues: [{
												fieldId: "S",
												value: number(Nr)
											}]
									}]
							}),
						align: "left",
						width: "180px"
					}, {
						field: "Status",
						title: "Status",
						value: arcCustomSelect({
								uniqueId: "Status" + Nr,
								currentValue: text(Status),
								recordId: Nr,
								field: "Q",
								width: "100%",
								height: "30px",
								fontSize: "10px",
								placeholder: "Status wählen",
								emptyValue: "Zurücksetzen",
								items: let id := Nr;
								(select Status_Aufgabe).[{
										title: Bezeichnung,
										active: number(id.Status) = number(Nr),
										value: number(Nr)
									}]
							}),
						align: "right",
						width: "150px"
					}, {
						field: "delete",
						title: arcCustomIcon({
								name: "trash"
							}),
						width: "40px",
						align: "center",
						value: arcCustomIcon({
								name: "trash"
							}),
						actions: [{
								recordId: Nr,
								type: "delete"
							}]
					}]
			}],
		footer: {
			showFooter: true,
			showActionButton: false,
			actionButtonTitle: "Neue Aufgabe hinzufügen",
			leftSideContent: arcCustomButton({
					uniqueId: "Button popUp" + Nr,
					title: "Neue Checkliste hinzufügen",
					width: "",
					icon: arcCustomIcon({
							name: "plus-bold",
							color: "#0062AA"
						}),
					fontSize: "",
					fontColor: "#0062AA",
					iconColor: "#0062AA",
					backgroundColor: "#0062AA33",
					borderColor: "#0062AA",
					borderRadius: "50px",
					showBadge: false,
					badgeTitle: "",
					badgeColor: "",
					badgeBackground: "",
					badgeBorderColor: "",
					badgePosition: "",
					hoverActions: {
						fontColor: "#ffffff",
						iconColor: "#ffffff",
						backgroundColor: "#0062AA",
						borderColor: "#0062AA",
						animation: "0.8s"
					},
					actions: [{
							type: "create",
							tableId: "C",
							popup: true,
							changeFieldValues: [{
									fieldId: "",
									value: ""
								}, {
									fieldId: "",
									value: ""
								}]
						}]
				}),
			rightSideContent: arcCustomPagination({
					uniqueId: Nr,
					editable: true,
					recordId: current.Nr,
					fieldId: "P",
					direction: "horizontal",
					title: current.'Aktuelle Seite',
					value: current.'Aktuelle Seite',
					total: ceil(cnt(list) / maxEntries),
					totalPrefix: " von "
				})
		}
	};
arcCustomTable(data)

Zurück

Installation Anwendungscode

Zurück

Installation Anwendungscode

Weiter

Dahsboardansicht mit Grid

Weiter

Dahsboardansicht mit Grid