Progress

0_15 pre0_14 pre0_13 pre0_12 pre0_11 pre

Mit unserem Progress-Modul kannst du ganz einfach sowohl Fortschrittsbalken, als auch Slider-Inputs bauen.

Weitere Details folgen demnächst...

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,
   style: "",
   minValue: 0,
   maxValue: 0,
   steps: {
   	value: *any*,
   },
   displayValue: {
   	style: "",
   },
   track: {
   	style: "",
   },
   value: *any*,
   contentEditable: true,
})

Vollständig

GIP_progress({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
   recordId: "",
   fieldId: "",
   formId: "",
   style: "",
   minValue: 0,
   maxValue: 0,
   steps: {
   	value: *any*,
   },
   displayValue: {
   	style: "",
   	displayMax: true,
   	displayMin: true,
   	separator: "",
   	orientation: "",
   },
   track: {
   	style: "",
   	colorLeft: "",
   	colorRight: "",
   },
   thumb: {
   	style: "",
   },
   value: *any*,
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   contentEditable: true,
})

Vollständig mit Master

html( raw(GIP_master({})) + 
raw(GIP_progress({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
   recordId: "",
   fieldId: "",
   formId: "",
   style: "",
   minValue: 0,
   maxValue: 0,
   steps: {
   	value: *any*,
   },
   displayValue: {
   	style: "",
   	displayMax: true,
   	displayMin: true,
   	separator: "",
   	orientation: "",
   },
   track: {
   	style: "",
   	colorLeft: "",
   	colorRight: "",
   },
   thumb: {
   	style: "",
   },
   value: *any*,
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   contentEditable: true,
})
))

Key-Table

arrow_rightuniqueIdRequired string Default: - Eindeutige Kennung des eingesetzten Moduls. Ideal ist eine Kombination aus Text und der Record-ID, also z.B.: uniqueId: "LayoutÜberschrift" + Nr Ist die ID nicht einzigartig, kann es zu Fehlern bei Anzeige und Funktion der eingesetzten Module in der Tabelle kommen.

arrow_rightembeddedRequired boolean, object Default: false Wenn des Modul in einem anderen Modul eingebettet ist, wird der boolesche Wert true eingetragen. Liegt das Modul alleine, bzw. als äußerster Container in einem Formelfeld, kann entweder false oder ein Object mit Angaben zur Höhe und Styling des Formelfeldes angegeben werden.

arrow_rightheight string Default: "auto" Höhe des Moduls in Pixeln (px).

arrow_rightstyleHtml string Default: "padding: 0 !important; user-select: none !important; -webkit-user-select: none !important; -ms-user-select: none !important; background: none !important; border-radius: 0px !important; height: auto; min-height: 34px !important;" Inline CSS-Styling des Html-Containers des Formel-Feldes, in dem die GIP-Module liegen.

arrow_rightstyleStri string Default: "background: none !important; border: 0 !important;" Inline CSS-Styling des Stringeditor-Containers des Formel-Feldes, in dem die GIP-Module liegen.

arrow_rightpresets string Default: - Mit diesem Key können Voreingestellte, besondere Stylings übergeben werden. Die aktuell verfügbaren sind: paddingless: Entfernt Paddings des Ninox-Formelfeldes. borderless: Entfernt Paddings sowie den Titel des Ninox-Formelfeldes und skaliert es auf 100% der Seiten-Höhe. fullscreen: Entfernt die Ninox-Kopfleiste des Records (enthält Tabs, Schließen-Button, Anhänge, Kommentare und Änderungsverlauf). Für eine vollständige Vollbild-Ansicht muss der Record entweder mit der Ninox Funktion "openFullscreen()" oder dem GIP-Action-Type "openFullscreen" geöffnet werden. Nach Ändern der Presets sollte die Ansicht neu geladen werden. Den Ninox-Tab zu wechseln reicht.

arrow_rightrecordIdRequired string Default: - ID des Ziel-Records.

arrow_rightfieldIdRequired string Default: - ID des Ziel-Feldes.

arrow_rightformId string Default: - Wenn eine Form-ID angegeben wird, wird der in ein GIP-Feld eingegebene Wert nicht direkt in das verknüpfte Ninox-Feld, sondern in den Session Storage des Browsers geschrieben. Der Wert wird also zwischengespeichert, bis er tatsächlich in Ninox eingetragen werden soll. Es können mehrere GIP-Felder gleichzeitig Daten unter derselben Form-ID speichern. Mit der Funktion submitGIPform (siehe actions-Key) können alle Werte, die unter der Form-ID gespeichert wurden, wieder aus dem Session Storage gelesen und in die entsprechenden Ninox-Felder geschrieben werden.

arrow_rightstyle string Default: Siehe <a href="/GlobalerCSS-Code">Globaler CSS-Code</a> Inline CSS-Styling des Moduls oder Elements.

arrow_rightminValueRequired number Default:

arrow_rightmaxValueRequired number Default:

arrow_rightsteps object Default:

arrow_rightvalueRequired any Default: - Eingabe des gewünschten Wertes.

arrow_rightdisplayValue object Default:

arrow_rightstyle string Default: Siehe <a href="/GlobalerCSS-Code">Globaler CSS-Code</a> Inline CSS-Styling des Moduls oder Elements.

arrow_rightdisplayMax boolean Default:

arrow_rightdisplayMin boolean Default:

arrow_rightseparator string Default:

arrow_rightorientation string Default: "top" Gibt die Anordnung an. Zur Auswahl stehen die Schlüsselwörter "left", "right", "bottom" und "top".

arrow_righttrack object Default:

arrow_rightstyle string Default: Siehe <a href="/GlobalerCSS-Code">Globaler CSS-Code</a> Inline CSS-Styling des Moduls oder Elements.

arrow_rightcolorLeft string Default:

arrow_rightcolorRight string Default:

arrow_rightthumb object Default:

arrow_rightstyle string Default: Siehe <a href="/GlobalerCSS-Code">Globaler CSS-Code</a> Inline CSS-Styling des Moduls oder Elements.

arrow_rightvalueRequired any Default: - Eingabe des gewünschten Wertes.

arrow_rightlabel object Default: - Die Label der Tabs werden nebeneinander (Modul direction: "horizontal"), bzw. untereinander (Modul direction: "vertical") angezeigt. Im label-Objekt werden für jeden Tab Wert, Styling und Aktionen bei Interaktion mit dem Label angegeben.

arrow_rightclass string Default: - Styling des Moduls mithilfe der in GIP_globalCSS vordefinierten CSS-Stylings (siehe globaler GIP-Modul-Code). Um mehrere CSS-Stylings zu referenzieren, werden die Class-Namen einfach mit Leerzeichen als String aneinandergereiht.

arrow_rightstyle string Default: Siehe <a href="/GlobalerCSS-Code">Globaler CSS-Code</a> Inline CSS-Styling des Moduls oder Elements.

arrow_rightvalueRequired any Default: - Eingabe des gewünschten Wertes.

arrow_rightorientation string Default: "top" Gibt die Anordnung an. Zur Auswahl stehen die Schlüsselwörter "left", "right", "bottom" und "top".

arrow_rightcontentEditable boolean Default: true Bestimmt, ob der Inhalt eines Input-Feldes bearbeitet werden darf (true) oder nicht (false).

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: ""
	}
})