GIP
Suche K

Appearance

Color-Picker

Mit dem Color-Picker-Modul bringst du Farbe in deine Anwendungen und ermöglichst eine intuitive, visuelle Gestaltung deiner Daten. Egal ob für feingliedrige Design-Einstellungen oder klare Status-Markierungen – unser Modul bietet die perfekte Balance zwischen höchster Präzision und maximaler Benutzerfreundlichkeit. Wie bei allen unseren Modulen stehen dabei Performance und Flexibilität an erster Stelle.

Funktion und Aussehen ​

Der Color-Picker ist flexibel konzipiert und passt sich nahtlos deinem Interface an. Du hast die Wahl zwischen zwei grundlegenden Darstellungsformen:

  • Feld-Modus (Dialog): Ähnlich zum klassischen Ninox-Design zeigt das Modul ein rundes Farbfeld, das erst bei Klick des Nutzers den Auswahldialog öffnet. Ideal für platzsparende und aufgeräumte Formulare.
  • Direkt-Modus (Container): Der Picker wird direkt als dauerhaft sichtbares Element (Farbraster und Eingabefelder) eingebettet. Perfekt für Dashboards oder Konfigurationsseiten, auf denen Schnelligkeit zählt.

Die verschiedenen Elemente des Color-Pickers können sowohl über Inline-Styles mit dem Styles-Key oder über den Classes-Key mit eigenen globalen Classes gestaltet werden. Dadurch hast du die volle Kontrolle über das Aussehen des Moduls.

Individuelle Farbpalette ​

Mit dem Color-Picker-Modul kannst du eine individuelle Farbpalette definieren. Nutze dabei eigene Farbcodes oder greife auf unsere vorkonfigurierten Presets wie GIPColorPresetNinox, GIPColorPresetVibrant oder GIPColorPresetPastel zurück. Diese Presets sind als CSS-Variablen im :root-Bereich definiert und können über deinen eigenen CSS-Code angepasst werden. Mit Trennlinien (-) verleihst du deiner Farbpalette eine klare Struktur. Zusätzlich kann der Nutzer mit dem nativen Farb-Dialog des Browsers eine Farbwahl treffen oder manuell einen Farbcode in das Textfeld eingeben. Der Farbcode wird automatisch validiert und der Nutzer kann sogar zwischen den verschiedenen Farbformaten wechseln. Für die Farbpalette und Nutzereingaben werden die folgenden Farbformate unterstützt:

  • HEX (inklusive Alpha-Kanal für Transparenz)
  • RGB / RGBA
  • HSL / HSLA

Aktuelle Farb-Presets ​

Die folgenden Farb-Presets haben wir für dich als CSS-Variablen im :root-Bereich hinterlegt. Du kannst diese über GIP_customCSS() anpassen oder eigene Presets hinzufügen:

GIPColorPresetNinox(29 colors)
GIPColorPresetVibrant(9 colors)
GIPColorPresetVintage(11 colors)
GIPColorPresetBright(11 colors)
GIPColorPresetMacarons(20 colors)
GIPColorPresetInfographic(15 colors)
GIPColorPresetRoma(20 colors)
GIPColorPresetTropical(10 colors)
GIPColorPresetBeeInspired(7 colors)
GIPColorPresetBlue(8 colors)
GIPColorPresetCaravan(8 colors)
GIPColorPresetCarp(8 colors)
GIPColorPresetMixed(10 colors)
GIPColorPresetOcean(8 colors)
GIPColorPresetPastel(10 colors)
GIPColorPresetGray(6 colors)
GIPColorPresetGreen(8 colors)
GIPColorPresetHelianthus(10 colors)
GIPColorPresetJazz(9 colors)
GIPColorPresetLondon(8 colors)
GIPColorPresetLavender(6 colors)
GIPColorPresetRed(7 colors)
GIPColorPresetRedVelvet(8 colors)
GIPColorPresetRoyal(8 colors)
GIPColorPresetSakura(5 colors)
GIPColorPresetTech(6 colors)

Werte zwischenspeichern mit einer Form-ID ​

Das Color-Picker-Modul ist vollständig kompatibel mit unserem Form-System. Das bedeutet, du kannst eine formId angeben, um die Eingabe eines Benutzers temporär im Browser zwischenzuspeichern, anstatt sie 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.

Modulcode ​

json
GIP_colorPicker({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   recordId: raw(Nr),
   fieldId: "",
   value: *any*,
   colorContainer: {
   	colorPalette: [""],
   },
})
json
GIP_colorPicker({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   recordId: raw(Nr),
   fieldId: "",
   style: "",
   value: *any*,
   colorField: {
   	style: "",
   },
   colorContainer: {
   	style: "",
   	colorPalette: [""],
   },
   contentEditable: true,
})
json
GIP_colorPicker({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   recordId: raw(Nr),
   fieldId: "",
   formId: "myForm" + Nr,
   class: "",
   style: "",
   value: *any*,
   colorField: {
   	class: "",
   	style: "",
   },
   colorContainer: {
   	class: "",
   	style: "",
   	colorPalette: [""],
   },
   contentEditable: true,
})
json
GIP_colorPicker({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	styleFn: "",
   	styleLabel: "",
   	styleComp: "",
   	presets: "",
   },
   recordId: "",
   fieldId: "",
   formId: "",
   class: "",
   style: "",
   value: *any*,
   colorField: {
   	class: "",
   	style: "",
   },
   colorContainer: {
   	class: "",
   	style: "",
   	colorPalette: [""],
   },
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   contentEditable: true,
})
json
html( raw(GIP_master({})) + 
raw(GIP_colorPicker({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	styleFn: "",
   	styleLabel: "",
   	styleComp: "",
   	presets: "",
   },
   recordId: "",
   fieldId: "",
   formId: "",
   class: "",
   style: "",
   value: *any*,
   colorField: {
   	class: "",
   	style: "",
   },
   colorContainer: {
   	class: "",
   	style: "",
   	colorPalette: [""],
   },
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   contentEditable: true,
})
))

Key-Table ​

Beispiele ​

Color-Picker: Basis ​

Beschreibung

Wir möchten einen Color-Picker einbauen, der wie die Ninox-Farbauswahl einen Dialog öffnet.

Wir geben dem Color-Picker-Element zunächst die folgenden Werte:

json
GIP_colorPicker({
	uniqueId: "Auswahl Mit Dialog" + Nr,
	embedded: true,
	contentEditable: true,
	class: "",
	style: "",
	recordId: raw(Nr),
	fieldId: fieldId(this, "Farbe"),
	value: Farbe
})

Zusätzlich müssen wir festlegen, welche Farben zur Auswahl stehen sollen in der Farb-Palette des Dialogs. Andernfalls wird nur "transparent" (also farblos) als Option angezeigt. In diesem Beispiel möchten wir als erstes die Standard-Ninox-Farben anzeigen. Diese können wir ganz einfach mit dem Farb-Preset "GIPColorPresetNinox" übergeben.

Danach wollen wir noch weitere Optionen für die Palette festlegen und trennen die einzelnen Abschnitte mit einer horizontalen Linie, indem wir "-" als Element im Array übergeben.

json
GIP_colorPicker({
	uniqueId: "Auswahl Mit Dialog" + Nr,
	embedded: true,
	contentEditable: true,
	class: "",
	style: "",
	recordId: raw(Nr),
	fieldId: fieldId(this, "Farbe"),
	value: Farbe,
	colorContainer: {
		class: "",
		style: "",
		colorPalette: ["GIPColorPresetNinox", "-", "red", "-", "GIPColorPresetVibrant", "-", "#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#EE82EE"]
	}
})

Schlussendlich vergeben wir noch ein Label und setzen "colorField" auf true, damit sich der Color-Picker-Container im Dialog öffnet und nicht direkt eingebettet wird.

Code des Beispiels
json
html(raw(GIP_master({})) +
raw(GIP_colorPicker({
	uniqueId: "Auswahl Mit Dialog" + Nr,
	embedded: false,
	contentEditable: true,
	class: "",
	style: "",
	recordId: raw(Nr),
	fieldId: fieldId(this, "Farbe"),
	value: Farbe,
	label: {
		class: "",
		style: "color: orange;",
		value: "GIP Color Picker",
		orientation: ""
	},
	colorField: true,
	colorContainer: {
		class: "",
		style: "",
		colorPalette: ["GIPColorPresetNinox", "-", "red", "-", "GIPColorPresetVibrant", "-", "#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#EE82EE"]
	}
})
))
json
GIP_colorPicker({
	uniqueId: "Auswahl Mit Dialog" + Nr,
	embedded: true,
	contentEditable: true,
	class: "",
	style: "",
	recordId: raw(Nr),
	fieldId: fieldId(this, "Farbe"),
	value: Farbe,
	label: {
		class: "",
		style: "color: orange;",
		value: "GIP Color Picker",
		orientation: ""
	},
	colorField: true,
	colorContainer: {
		class: "",
		style: "",
		colorPalette: ["GIPColorPresetNinox", "-", "red", "-", "GIPColorPresetVibrant", "-", "#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#EE82EE"]
	}
})