Widgets

Custom Kanban

1.3.2

Widget bestellen

Custom Kanban

Das Kanban stellt Daten einer Tabelle (Kanban Karten) in einem bestimmten Status (in den Swimlanes) dar. Dafür legst du wie gewöhnlich eine Variable data an, die du dann in der globalen Funktion arcCustomKanban ausgibst. Es gibt zwei Möglichkeiten ein Kanban anzulegen:

dynamisch (Swimlanes beziehen sich auf eine Liste/Tabelle/for-Schleife)
manuell (Swimlanes werden manuell definiert)

Dynamischer Anwendungscode

let current := this;
let listFirmen := (select Firmen);
let listStates := (select Status_Leads);
let data := {
		uniqueId: "Kanban individuell",
		height: "600px",
        collapsible: true,
		showScrollbar: true,
		swimlanes: listStates.[{
				title: Titel,
				recordId: number(Nr),
                empty: "true", 
				backgroundColorHeader: text(color(Farbe)),
                backgroundColorBody: "",
				fontColor: "",
				minWidth: "",
				amount: let id := Nr;
				cnt(listFirmen[number(Status) = number(id)]),
				items: let id := Nr;
				listFirmen[number(Status) = number(id)].[{
            		itemId: Nr,
					fieldId: "D",
                    clickAction: false, 
					dragAction: true,
                    paddingX:"", 
                    paddingY: "",
                    borderPosition: "", 
                    borderColor: "", 
                    borderWidth: "",
					title: Name,
					subtitle: "Kunden-Nr.:" + Nr,
					value: arcCustomProgressBar({
							uniqueId: "progress" + Nr,
							title: "",
							width: "100%",
							fontSize: "",
							fontColor: "",
							backgroundColor: "",
							progressColor: "",
							valueTotal: stateTotal,
							valueProgress: stateCurrent,
							valueText: stateCurrent + "/" + stateTotal
										})
					}]
			}]
	};
arcCustomKanban(data)

Variablen einstellen

let current := this; // Definiert diesen Record
let listFirmen := (select Firmen); // Definiert die Tabelle für die darzustellenden Inhalte
let listStates := (select Status_Leads); // Definiert die Liste für die Swimlanes

Allgemeine Einstellungen in data

uniqueId ist die individuelle Bezeichnung deines Kanbans. Achte darauf, dass du hier einen einzigartigen Titel vergibst. Das ist wichtig, falls du mehrere Kanbans auf einer Seite darstellen möchtest und deine Style-Einstellungen sich nicht überschreiben.

uniqueId: "Kanban individuell",

height defineirt die Höhe deines Kanbans.

height: "600px", // Pixel-Werte
height: "auto", // Passt die Höhe an die Inhalte an.
height: "100%", // Passt sich der Höhe des Funktionsfeldes an.
height: "", // Fallback-Wert: 100%

Mit collapsible kannst du einstellen, dass der User die Swimlanes über einen Klick auf das Einklapp-Icon (caret-up) ein- oder aufklappen kann.

collapsible: true, // Aktiviert die Funktion
collapsible: "", // Fallback-Wert = "false"

Mit showScrollbar kann die horizontale Scrollbar für das gesamte Kanban eingeblendet werden. Dies hilft vor allem Usern ohne Trackpad oder Tablet.

showScrollbar: true, // Scrollbar wird eingeblendet
showScrollbar: false, // keine Anzeige der Scrollbar
showScrollbar: "", // default: false

Swimlane Einstellungen in data

Der Parameter swimlane definiert die Darstellung deiner einzelnen Spalten deines Kanbans. Diese werden innerhalb der eckigen und geschwungenen Klammer definiert.

swimlanes: listStates.[{
			
			}]

title definiert den Titel deiner jeweiligen Swimlane. Dieser kann in diesem Beispiel der Titel aus der Tabelle listStates sein - ist also dynamisch.

title: Titel, // Ninox-Feld im Textformat.
title: "Hans" // Text in "", wenn das Kanban manuell angelegt ist
title: "" // Kein Fallback hinterlegt.

recordId definiert den Datensatz aus der dynamischen Liste, die du vorher definiert hast. Hier: listStates.

recordId: number(Nr), // Nr des jeweiligen Records aus der Liste

backgroundColorHeader definiert die Hintergrund-Farbe der Kopfzeile jeder Swimlane.

backgroundColorHeader: text(color(Farbe)), // Ninox Feld , das Farbe referenziert (HEX Wert ausgibt) 
backgroundColorHeader: "#000", // HEX Wert in ""
backgroundColorHeader: "" ,// Fallback-Wert: #8594c1

backgroundColorBody definiert die Hintergrund-Farbe Swimlane-Körpers (Body).

backgroundColorBody: text(color(Farbe)), // Ninox Feld , das Farbe referenziert (HEX Wert ausgibt) 
backgroundColorBody: "#000", // HEX Wert in "" 
backgroundColorBody: "", // Fallback-Wert: #f4f7ff

fontColor definiert die Schriftfarbe für den Header.

fontColor: "#000", // Hex-Wert in ""
fontColor: "", // Fallback-Wert: #fff

minWidth gibt die minimale Breite der Swimlanes an. Das verhindert, dass die Swimlanes bei kleineren Bildschirmen immer kleiner gedrückt werden. Somit werden deine Inhalte immer gut lesbar dargestellt, da dann nach rechts gescrollt werden kann.

minWidth: "300px", // Pixel-Wert in ""
minWidth: "", // Fallback-Wert: 150px

amount definiert, welche Anzahl in dem Swimlane Header angezeigt wird.

amount: let id := Nr; cnt(list[number(Status) = number(id)]), 
amount: "" // Kein Fallback-Wert. Die Amount-Bubble wird in diesem Fall ausgeblendet.

Item Einstellungen (Cards) innerhalb von swimlanes

Der Parameter items definiert die Darstellung deiner Karten innerhalb der Swimlane. Diese werden innerhalb der eckigen und geschwungenen Klammer definiert.

items: let id := Nr;
listFirmen[number(Status) = number(id)].[{

  }]

itemId definiert den Record der item-Liste. hier: listFirmen.

 itemId: Nr, // Record-Id

fieldId definiert das Feld, das geändert werden soll, beim Wechsel der Swimlane. In den meisten Fällen ist das der Status.

fieldId: "D", // Field ID findest du mit dem arcFieldFinder heraus

clickAction definiert, ob bei Klick auf die Karte der jeweilige Record mit popupRecord geöffnet werden soll.

 clickAction: false, // Deaktiviert die Klick-Aktion
 clickAction: "", // Fallback-Wert: true (Öffnet immer den jeweiligen Record)

dragAction definiert, ob der User die Karte per Drag and Drop verschieben kann.

dragAction: false, // Deaktiviert die Drag & Drop Funktion.
dragAction: "", // Fallback-Wert: true

paddingX definiert den Abstand von der Border zum Inhalt rechts und links innerhalb der Karte.

paddingX: "10px" // Pixel-Wert in ""
paddingX:"",  // Fallback-Wert: 12px

paddingY definiert den Abstand von der Border zum Inhalt oben und unten innerhalb der Karte.

paddingY: "10px" // Pixel-Wert in ""
paddingY: "", // Fallback-Wert: 12px

borderPosition definiert ob du in der Karte eine einseitige border darstellen möchtest. Diese könnte durch de Farbe ein weiteres Attribut / Kategorie deiner Inhalte darstellen (Zum Beispiel Aktiv / Inaktiv)

borderPosition: "left", // Border auf der linken Seite
borderPosition: "right", // Border auf der rechten Seite
borderPosition: "top", // Border auf der oberen Seite
borderPosition: "bottom", // Border auf der unteren Seite
borderPosition: "", // Fallback-Wert: keine border

borderColor definiert die Farbe deiner Border.

borderColor: if aktiv=true then "#c5f2b3" else "#ccc"// HEX-Wert in ""
borderColor: "", // Fallback-Wert:

borderWidth: "1px", // Pixel-Wert in ""
borderWidth: "", // Fallback-Wert:

title gibt den Obersten Titel in der Karte aus und ist fett gedruckt.

title: Name, // Ninox-feld in Text-Format
title: "" // Kein Fallback

subtitle: "Kunden-Nr.:" + Nr, // Text und/oder Ninox Felder in Textformat
subtitle: "", // Kein Fallback

Mit value kannst du deine Karte so individuell gestalten, wie du möchtest. Hier kannst du mit Schrift arbeiten oder auch jedes andere Widget integrieren. Zum Beispiel kannst du mit arcCustomLayout komplexere Karten aufsetzen oder einfach eine Progressbar mit arcCustomProgressBar einsetzen.

value: "Hier steht Text" // Texte oder Werte aus Ninox-Feldern
value: arcCustomProgressBar({
            uniqueId: "progress" + Nr,
    		title: "",
			width: "100%",
			fontSize: "",
			fontColor: "",
			backgroundColor: "",
			progressColor: "",
			valueTotal: stateTotal,
			valueProgress: stateCurrent,
			valueText: stateCurrent + "/" + stateTotal
		}) // Andere Widgets 
value: "", // Kein Fallback