Widgets

Custom Kanban

1.3.2

Order widget

Custom Kanban

The Kanban displays data from a table (Kanban cards) in a certain status (in the swim lanes). To do this, you create a variable data as usual, which you then output in the global function arcCustomKanban. There are two ways to create a Kanban:

dynamically (swim lanes refer to a list/table/for-loop)
manually (swim lanes are defined manually)

Dynamic Application Code

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)

Set Variables

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

General Settings in data

uniqueId is the individual designation of your Kanban. Make sure to give it a unique title. This is important if you want to display multiple Kanbans on a page and ensure that your style settings do not override each other.

uniqueId: "Kanban individuell",

height defines the height of your Kanban.

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%

With collapsible, you can set it so that the user can collapse or expand the swim lanes by clicking on the collapse icon (caret-up).

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

With showScrollbar, the horizontal scrollbar for the entire Kanban can be displayed. This is especially helpful for users without a trackpad or tablet.

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

Swim Lane Settings in data

The parameter swimlane defines the appearance of your individual columns in your Kanban. These are defined within the square and curly brackets.

swimlanes: listStates.[{
			
			}]

title defines the title of your respective swim lane. In this example, this could be the title from the table listStates - it is dynamic.

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

recordId defines the record from the dynamic list you previously defined. Here: listStates.

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

backgroundColorHeader defines the background color of the header of each swim lane.

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

backgroundColorBody defines the background color of the swim lane body.

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

fontColor defines the font color for the header.

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

minWidth sets the minimum width of the swim lanes. This prevents the swim lanes from being pressed smaller on smaller screens. Thus, your content is always displayed clearly, as it can scroll to the right.

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

amount defines what number is displayed in the swim lane header.

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

Item Settings (Cards) within swim lanes

The parameter items defines the appearance of your cards within the swim lane. These are defined within the square and curly brackets.

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

  }]

itemId defines the record of the item list. Here: listFirmen.

 itemId: Nr, // Record-Id

fieldId defines the field to be changed when moving the swim lane. In most cases, this is the status.

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

clickAction defines whether the respective record should be opened with popupRecord when clicking on the card.

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

dragAction defines whether the user can move the card by drag and drop.

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

paddingX defines the spacing from the border to the content on the right and left within the card.

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

paddingY defines the spacing from the border to the content at the top and bottom within the card.

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

borderPosition defines whether you want to display a one-sided border in the card. This could represent another attribute/category of your content (for example, Active / Inactive) through color.

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 defines the color of your border.

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

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

title displays the top title in the card and is bold.

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

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

With value, you can customize your card as you wish. Here you can work with text or integrate any other widget. For example, you can set up more complex cards with arcCustomLayout or simply use a progress bar with arcCustomProgressBar.

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