Progress

0_14 pre0_13 pre0_12 pre0_11 pre

Mit unserem Progress-Modul kannst du ganz einfach den Fortschritt deiner Prozesse in Ninox visualisieren. Gleichzeitig ist das Modul auch ein Slider-Input, sodass die Werte interaktiv verändert werden können. Es kombiniert eine intuitive Bedienung mit flexiblen Anpassungsmöglichkeiten für dein Design.

Funktion und Aussehen

Das Progress-Modul kann in zwei verschiedenen Modi betrieben werden: Als reiner Anzeige-Fortschrittsbalken (contentEditable: false) oder als interaktiver Slider (contentEditable: true). Dadurch ist es ganz einfach, zwischen einer reinen Anzeige und einer interaktiven Nutzer-Eingabe zu wechseln.

In beiden Fällen hast du eine Vielzahl an Anpassungs- und Styling-Optionen zur Verfügung. So kannst du beispielsweise die Farben des Fortschrittsbalkens, die Schrittweite des Sliders, die Anzeige des Minimal- und Maximalwerts, die Formatierung der Zahlen und die Position des Labels anpassen. Wie bei allen anderen Modulen stellen wir dir dafür auf jeder Ebene den Style-Key zur Verfügung. Außerdem kannst du auf vielen Ebenen den Class-Key nutzen, um deine eigenen globalen Classes zu referenzieren.

Werte zwischenspeichern mit einer Form-ID

Das Progress-Modul ist vollständig kompatibel mit unserem Form-System. Das bedeutet, du kannst eine formId angeben, um den Wert eines Sliders temporär im Browser zwischenzuspeichern, anstatt ihn sofort in ein Ninox-Feld zu schreiben. Das ist besonders nützlich bei komplexen Formularen, bei denen der Benutzer erst am Ende alle Eingaben mit einem einzigen Klick speichern soll.

Um die zwischengespeicherten Werte aller Felder eines Formulars in die entsprechenden Ninox-Felder zu schreiben, nutzt du ein GIP-Element mit dem actions-Key (z.B. einen Button) und dem Script-Type submitGIPform.

Nutzer-Interaktion

Wenn contentEditable auf true gesetzt ist, können Benutzer den Slider durch Verschieben des Schiebereglers bedienen. Zusätzlich zur eigentlichen Slider-Funktion kannst du deinem Progress-Element eine beliebige Anzahl an actions zuweisen. Jede Action besteht aus einem auslösenden trigger und einem Array von scripts, die bei Auslösen des Triggers ausgeführt werden. Als Trigger können Klick, Mausbewegung und alle weiteren HTML Mouse Events eingesetzt werden. Weitere Infos zu Actions findest du in diesem Teil unserer Doku.

Modulcode

Basis

GIP_progress({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   recordId: raw(Nr),
   fieldId: "",
   minValue: 0,
   maxValue: 0,
   value: *any*,
})

Medium

GIP_progress({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   recordId: raw(Nr),
   fieldId: "",
   style: "",
   minValue: 0,
   maxValue: 0,
   track: {
   	style: "",
   },
   value: *any*,
   contentEditable: true,
})

Fortgeschritten

GIP_progress({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   recordId: raw(Nr),
   fieldId: "",
   formId: "myForm" + Nr,
   class: "",
   style: "",
   minValue: 0,
   maxValue: 0,
   steps: {
   	value: *any*,
   },
   displayValue: {
   	class: "",
   	style: "",
   },
   track: {
   	style: "",
   },
   value: *any*,
   contentEditable: true,
   actions: [{
   	trigger: "click",
   	scripts: [{
   		type: "",
   	}],
   }],
})

Vollständig

GIP_progress({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	styleFn: "",
   	styleLabel: "",
   	styleComp: "",
   	presets: "",
   },
   recordId: "",
   fieldId: "",
   formId: "",
   class: "",
   style: "",
   minValue: 0,
   maxValue: 0,
   steps: {
   	value: *any*,
   },
   displayValue: {
   	class: "",
   	style: "",
   	displayMax: true,
   	displayMin: true,
   	separator: "",
   	orientation: "",
   	numberFormat: {
   		formatType: "",
   		decimalDigits: 0,
   		decimalSign: "",
   		separatorDigits: 0,
   		separatorSign: "",
   		locale: "",
   		options: {
   		},
   	},
   },
   track: {
   	style: "",
   	colorLeft: "",
   	colorRight: "",
   },
   thumb: {
   	style: "",
   },
   value: *any*,
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   contentEditable: true,
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
   htmlAttribute: "",
})

Vollständig mit Master

html( raw(GIP_master({})) + 
raw(GIP_progress({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	styleFn: "",
   	styleLabel: "",
   	styleComp: "",
   	presets: "",
   },
   recordId: "",
   fieldId: "",
   formId: "",
   class: "",
   style: "",
   minValue: 0,
   maxValue: 0,
   steps: {
   	value: *any*,
   },
   displayValue: {
   	class: "",
   	style: "",
   	displayMax: true,
   	displayMin: true,
   	separator: "",
   	orientation: "",
   	numberFormat: {
   		formatType: "",
   		decimalDigits: 0,
   		decimalSign: "",
   		separatorDigits: 0,
   		separatorSign: "",
   		locale: "",
   		options: {
   		},
   	},
   },
   track: {
   	style: "",
   	colorLeft: "",
   	colorRight: "",
   },
   thumb: {
   	style: "",
   },
   value: *any*,
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   contentEditable: true,
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
   htmlAttribute: "",
})
))

Key-Table

Beispiele

Progress: Basis Fortschrittsbalken

Beschreibung

Wir möchten einen einfachen Fortschrittsbalken mit einem Label erstellen. Um den Thumb auszublenden und damit eine reine Progress-Bar zu erhalten, setzen wir den ContentEditable-Key auf "false". Danach geben wir noch den minimalen Wert des Fortschrittsbalken (hier "0"), den maximalen Wert (hier "20") und den aktuell hinterlegten Wert in Ninox an.

Code des Beispiels

Standalone Code mit Master

html(raw(GIP_master({})) +
raw(GIP_progress({
		uniqueId: "Basic Not Editable" + Nr,
		embedded: false,
		style: "",
		contentEditable: false,
		value: Zahl,
		minValue: 0,
		maxValue: 20,
		label: {
			style: "",
			value: "Fortschrittsbalken",
			orientation: ""
		}
	})
))

Embedded Code

GIP_progress({
	uniqueId: "Basic Not Editable" + Nr,
	embedded: true,
	style: "",
	contentEditable: false,
	value: Zahl,
	minValue: 0,
	maxValue: 20,
	label: {
		style: "",
		value: "Fortschrittsbalken",
		orientation: ""
	}
})