Select

0_24 pre0_23 pre0_22 pre0_21 pre0_20 pre0_19 pre0_18 pre0_17 pre0_16 pre0_15 pre

Mit dem Select-Modul erstellst du hochgradig anpassbare und leistungsstarke Auswahl-Steuerelemente. Egal, ob du eine einfache Liste oder eine komplexe Combobox mit Suchfunktion benötigst, dieses Modul bietet dir die nötigen Werkzeuge. Wie immer steht bei uns die Performance im Fokus, gefolgt von maximaler Flexibilität. Und auch über die vielen Features wirst du dich freuen, unter anderem:

• Wahl zwischen Single- und Multi-Select
• Integrierte Suchfunktion für lange Listen
• Add-Button zum Hinzufügen neuer Auswahloptionen
• Darstellung als einfache Liste oder als platzsparende Combobox
• Definiere Actions pro Item
• Vollständige Kontrolle über das Aussehen mit eigenen Icons und Styles
• Form-ID Kompatibilität: Speichere Eingaben temporär zwischen und übertrage sie gesammelt an Ninox.

Funktion und Aussehen

Unser Select-Modul ist extrem vielseitig und kann auf zwei Arten dargestellt werden: Als immer sichtbare Liste von Optionen oder als Combobox, die sich erst bei einem Klick öffnet. Beide Varianten können als Single-Select (nur eine Option wählbar) oder Multi-Select (mehrere Optionen wählbar) konfiguriert werden.

Mächtige Combobox

Die Combobox ist die platzsparende und oft bevorzugte Variante. Sie zeigt im geschlossenen Zustand die aktuell ausgewählten Items an und öffnet bei einem Klick ein Dialogfenster. In diesem Dialogfenster findest du eine Liste aller verfügbaren Optionen. Für lange Listen kannst du eine Suchleiste einblenden, um die Optionen in Echtzeit zu filtern. Für Multi-Select-Listen gibt es außerdem Buttons, um alle sichtbaren Optionen auf einmal aus- oder abzuwählen.

Maximale Gestaltungsfreiheit

Du hast die volle Kontrolle über das Aussehen und Verhalten.

• Styling: Nutze den class-Key, um CSS-Klassen zuzuweisen, die von dir oder uns im Globalen CSS-Code definiert wurden. Für spezifische Anpassungen kannst du den style-Key für Inline-CSS verwenden. Beachte, dass Inline-Styles immer Vorrang vor den Klassen-Styles haben. Dieses Prinzip gilt für das gesamte Modul, aber auch für einzelne Komponenten wie das label, die combobox und die einzelnen items.
• Icons: Du kannst eigene Icons für ausgewählte und nicht ausgewählte Zustände definieren. Nutze dafür zum Beispiel unsere Material Symbols.
• Anzeige in der Combobox: Du kannst festlegen, ob und wie die ausgewählten Items in der geschlossenen Combobox dargestellt werden. Standardmäßig wird eine Kopie des Items angezeigt, aber du hast die volle Freiheit, eine individuelle Darstellung zu definieren. Hierfür kannst du einfachen Text, andere GIP-Module oder sogar eigene HTML-Strukturen verwenden. Auch Actions können damit an die Combobox-Items übergeben werden.
• HTML-Attribute: Mit dem htmlAttribute-Key kannst du dem Hauptcontainer des Moduls beliebige HTML-Attribute hinzufügen, z.B. "tabindex='5'".

Werte zwischenspeichern mit einer Form-ID

Das Select-Modul ist vollständig kompatibel mit unserem Form-System. Das bedeutet, du kannst eine formId angeben, um die Auswahl 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.

Der Prozess ist identisch zum Input-Modul: Gibst du eine formId an, wird die Auswahl (die itemIds der ausgewählten Optionen) zusammen mit recordId und fieldId im Session Storage des Browsers gespeichert. 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

Wie die meisten unserer Module ist auch das Select-Modul mit dem actions-Key ausgestattet. Du kannst Actions für das gesamte Modul definieren, aber auch für jedes einzelne Item in der Liste. Das ermöglicht dir, auf die Auswahl eines bestimmten Items zu reagieren und spezifische Skripte auszuführen.

Eine besondere Stärke liegt in der Kombination mit benutzerdefinierten Icons. Du kannst sogar separate Actions für das Klicken auf das "Ausgewählt"-Icon (iconSelectedActions) und das "Nicht ausgewählt"-Icon (iconUnselectedActions) festlegen. Damit lassen sich komplexe Interaktionslogiken umsetzen, die weit über eine einfache Auswahl hinausgehen.

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. Je nach Anwendung können auch andere HTML Events funktionieren. Eine Liste solcher Events findest du beispielsweise hier. Weitere Infos zu Actions findest du in diesem Teil unserer Doku.

Modulcode

Basis

GIP_select({
   uniqueId: "myUniqueName" + Nr
   embedded: true
   selectType: "single"
   recordId: raw(Nr)
   fieldId: ""
   selectContainer: {
   	itemGroup: {
   		items: [{
   			itemId: 1
   			value: *any*
   		}],
   		selectedItems: [1, 2, 4, 7]
   	},
   },
})

Medium

GIP_select({
   uniqueId: "myUniqueName" + Nr
   embedded: true
   selectType: "single"
   recordId: raw(Nr)
   fieldId: ""
   style: ""
   combobox: true
   selectContainer: {
   	style: ""
   	toggleButtonAll: true
   	toggleButtonNone: true
   	itemGroup: {
   		style: ""
   		items: [{
   			itemId: 1
   			style: ""
   			value: *any*
   		}],
   		selectableItems: [1, 3, 4, 5, 7]
   		selectedItems: [1, 2, 4, 7]
   	},
   },
})

Fortgeschritten

GIP_select({
   uniqueId: "myUniqueName" + Nr
   embedded: true
   selectType: "single"
   recordId: raw(Nr)
   fieldId: ""
   formId: "myForm" + Nr
   class: ""
   style: ""
   combobox: true
   selectContainer: {
   	class: ""
   	style: ""
   	searchBar: true
   	toggleButtonAll: true
   	toggleButtonNone: true
   	itemGroup: {
   		class: ""
   		style: ""
   		styleHovered: true
   		styleSelected: true
   		iconSelected: true
   		iconUnselected: true
   		items: [{
   			itemId: 1
   			style: ""
   			value: *any*
   			actions: [{
   				trigger: "click"
   				scripts: [{
   					type: ""
   				}],
   			}],
   			selectable: true
   			selected: true
   		}],
   		selectableItems: [1, 3, 4, 5, 7]
   		selectedItems: [1, 2, 4, 7]
   		selectOnAll: true
   	},
   },
   actions: [{
   	trigger: "click"
   	scripts: [{
   		type: ""
   	}],
   }],
})

Vollständig

GIP_select({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
   selectType: "",
   recordId: "",
   fieldId: "",
   formId: "",
   class: "",
   style: "",
   combobox: {
   	class: "",
   	style: "",
   	expandIcon: true / *any*,
   	placeholder: {
   		style: "",
   		value: *any*,
   	},
   	collapseAfterSelect: true,
   	expandOnAll: true,
   },
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   selectContainer: {
   	class: "",
   	style: "",
   	searchBar: {
   		style: "",
   		placeholder: {
   			style: "",
   			value: *any*,
   		},
   		addButton: {
   			tableId: "",
   			tab: "",
   			searchTextToFieldId: "",
   			changeFieldValues: [{
   				fieldId: "",
   				value: *any*,
   			}],
   			displayAfterCreate: "",
   			setNewRecordId: [{
   				recordId: "",
   				fieldId: "",
   			}],
   		},
   	},
   	toggleButtonAll: true / *any*,
   	toggleButtonNone: true / *any*,
   	itemGroup: {
   		class: "",
   		style: "",
   		styleHovered: "" / true,
   		styleSelected: "" / true,
   		iconSelected: true / *any*,
   		iconUnselected: true / *any*,
   		items: [{
   			itemId: "" / 0,
   			style: "",
   			value: *any*,
   			displayInCombobox: true / *any*,
   			actions: [{
   				trigger: "",
   				scripts: [{
   					type: "",
   				}],
   			}],
   			iconSelectedActions: [{
   				trigger: "",
   				scripts: [{
   					type: "",
   				}],
   			}],
   			iconUnselectedActions: [{
   				scripts: [{
   					type: "",
   				}],
   			}],
   			selectable: true,
   			selected: true,
   		}],
   		selectableItems: "" / 0 / [""] / [0],
   		selectedItems: "" / 0 / [""] / [0],
   		selectOnAll: true,
   	},
   	htmlAttribute: "",
   },
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
})

Vollständig mit Master

html( raw(GIP_master({})) + 
raw(GIP_select({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
   selectType: "",
   recordId: "",
   fieldId: "",
   formId: "",
   class: "",
   style: "",
   combobox: {
   	class: "",
   	style: "",
   	expandIcon: true / *any*,
   	placeholder: {
   		style: "",
   		value: *any*,
   	},
   	collapseAfterSelect: true,
   	expandOnAll: true,
   },
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   selectContainer: {
   	class: "",
   	style: "",
   	searchBar: {
   		style: "",
   		placeholder: {
   			style: "",
   			value: *any*,
   		},
   		addButton: {
   			tableId: "",
   			tab: "",
   			searchTextToFieldId: "",
   			changeFieldValues: [{
   				fieldId: "",
   				value: *any*,
   			}],
   			displayAfterCreate: "",
   			setNewRecordId: [{
   				recordId: "",
   				fieldId: "",
   			}],
   		},
   	},
   	toggleButtonAll: true / *any*,
   	toggleButtonNone: true / *any*,
   	itemGroup: {
   		class: "",
   		style: "",
   		styleHovered: "" / true,
   		styleSelected: "" / true,
   		iconSelected: true / *any*,
   		iconUnselected: true / *any*,
   		items: [{
   			itemId: "" / 0,
   			style: "",
   			value: *any*,
   			displayInCombobox: true / *any*,
   			actions: [{
   				trigger: "",
   				scripts: [{
   					type: "",
   				}],
   			}],
   			iconSelectedActions: [{
   				trigger: "",
   				scripts: [{
   					type: "",
   				}],
   			}],
   			iconUnselectedActions: [{
   				scripts: [{
   					type: "",
   				}],
   			}],
   			selectable: true,
   			selected: true,
   		}],
   		selectableItems: "" / 0 / [""] / [0],
   		selectedItems: "" / 0 / [""] / [0],
   		selectOnAll: true,
   	},
   	htmlAttribute: "",
   },
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
})
))

Key-Table

Beispiele

Select: Einfachauswahl

Beschreibung

Wir möchten eine Einfachauswahl im Combobox-Stil bauen, die ein Ninox-Auswahlfeld "Antwortoptionen" updated. Dafür vergeben wir "single" als selectType und konfigurieren unsere Combobox.

Im Key items übergeben wir die Auswahloptionen für das Select. Für die itemId wählen wir hier dieselbe ID, die auch im Ninox-Auswahlfeld vergeben ist.

Um dem Nutzer zusätzlich die Option zu geben, die Auswahl wieder zu leeren übergeben wir für den Key toggleButtonNone den Wert "(leer)".

Code des Beispiels

Standalone Code mit Master

html(raw(GIP_master({})) +
raw(GIP_select({
		uniqueId: "SingleBasic" + Nr,
		embedded: false,
		class: "",
		style: "max-height: 400px; height:auto;",
		selectType: "single",
		recordId: raw(Nr),
		fieldId: fieldId(this, "Antwortoptionen"),
		label: {
			class: "",
			style: "",
			value: "Single Select (basic)"
		},
		combobox: {
			class: "",
			style: "",
			expandOnAll: true,
			collapseAfterSelect: true,
			placeholder: {
				style: "",
				value: "Antwort wählen..."
			}
		},
		toggleButtonNone: "(leer)",
		iconSelected: true,
		iconUnselected: true,
		selectOnAll: true,
		selectedItems: number(Antwortoptionen),
		items: [{
				itemId: 1,
				style: "",
				value: "Ja"
			}, {
				itemId: 2,
				style: "",
				value: "Nein"
			}, {
				itemId: 3,
				style: "",
				value: "Vielleicht"
			}]
	})))

Embedded Code

GIP_select({
	uniqueId: "SingleBasic" + Nr,
	embedded: true,
	class: "",
	style: "max-height: 400px; height:auto;",
	selectType: "single",
	recordId: raw(Nr),
	fieldId: fieldId(this, "Antwortoptionen"),
	label: {
		class: "",
		style: "",
		value: "Single Select (basic)"
	},
	combobox: {
		class: "",
		style: "",
		expandOnAll: true,
		collapseAfterSelect: true,
		placeholder: {
			style: "",
			value: "Antwort wählen..."
		}
	},
	toggleButtonNone: "(leer)",
	iconSelected: true,
	iconUnselected: true,
	selectOnAll: true,
	selectedItems: number(Antwortoptionen),
	items: [{
			itemId: 1,
			style: "",
			value: "Ja"
		}, {
			itemId: 2,
			style: "",
			value: "Nein"
		}, {
			itemId: 3,
			style: "",
			value: "Vielleicht"
		}]
})

Select: Mehrfachauswahl

Beschreibung

Wir möchten eine Mehrfachauswahl im Combobox-Stil bauen, die ein Ninox-Auswahlfeld "Einkaufen" updated. Dafür vergeben wir "multi" als selectType an und konfigurieren unsere Combobox. Mit dem Type "multi" brauchen wir keinerlei Hilfsfelder, um das Ninox-Mehrfachauswahl-Feld zu updaten.

Im Key items übergeben wir die Auswahloptionen für das Select. Für die itemId wählen wir hier dieselbe ID, die auch im Ninox-Auswahlfeld vergeben ist, in diesem Fall eine Zahl:

Code des Beispiels

Standalone Code mit Master

html(raw(GIP_master({})) +
raw(GIP_select({
		uniqueId: "MultiBasic" + Nr,
		embedded: false,
		class: "",
		style: "max-height: 400px; height:auto;",
		selectType: "multi",
		combobox: {
			class: "",
			style: "",
			expandIcon: true,
			expandOnAll: true,
			collapseAfterSelect: false,
			placeholder: {
				style: "",
				value: "Einkaufsliste schreiben..."
			}
		},
		recordId: raw(Nr),
		fieldId: fieldId(this, "Einkaufen"),
		formId: "",
		htmlAttribute: "",
		label: {
			class: "",
			style: "",
			value: "Multi Select (basic)"
		},
		iconSelected: true,
		iconUnselected: true,
		selectOnAll: true,
		selectedItems: numbers(Einkaufen),
		items: [{
				itemId: 1,
				style: "",
				value: "Apfel"
			}, {
				itemId: 2,
				style: "",
				value: "Mehl"
			}, {
				itemId: 3,
				style: "",
				value: "Butter"
			}, {
				itemId: 4,
				style: "",
				value: "KiBa"
			}]
	})))

Embedded Code

GIP_select({
	uniqueId: "MultiBasic" + Nr,
	embedded: true,
	class: "",
	style: "max-height: 400px; height:auto;",
	selectType: "multi",
	combobox: {
		class: "",
		style: "",
		expandIcon: true,
		expandOnAll: true,
		collapseAfterSelect: false,
		placeholder: {
			style: "",
			value: "Einkaufsliste schreiben..."
		}
	},
	recordId: raw(Nr),
	fieldId: fieldId(this, "Einkaufen"),
	formId: "",
	htmlAttribute: "",
	label: {
		class: "",
		style: "",
		value: "Multi Select (basic)"
	},
	iconSelected: true,
	iconUnselected: true,
	selectOnAll: true,
	selectedItems: numbers(Einkaufen),
	items: [{
			itemId: 1,
			style: "",
			value: "Apfel"
		}, {
			itemId: 2,
			style: "",
			value: "Mehl"
		}, {
			itemId: 3,
			style: "",
			value: "Butter"
		}, {
			itemId: 4,
			style: "",
			value: "KiBa"
		}]
})

Select: Einfachauswahl mit Custom Icons

Beschreibung

Wir möchten ein Select-Modul bauen und dabei die Checkboxen durch eigene Symbole ersetzen, hier beispielhaft für eine Einfachauswahl. Dafür übergeben wir in den Keys iconSelected und iconUnselected Material-Symbols, die wir wiederum stylen können.

Code des Beispiels

Standalone Code mit Master

let workers := (select Mitarbeiter);
html(raw(GIP_master({})) +
raw(GIP_select({
		uniqueId: "SingleCustomIcons" + Nr,
		embedded: false,
		class: "",
		style: "max-height: 400px; height:auto;",
		selectType: "single",
		combobox: {
			class: "",
			style: "",
			expandIcon: true,
			expandOnAll: true,
			collapseAfterSelect: true,
			placeholder: {
				style: "",
				value: "Mitarbeiter wählen..."
			}
		},
		recordId: raw(Nr),
		fieldId: fieldId(this, "Verantwortlicher Mitarbeiter (single)"),
		label: {
			class: "",
			style: "",
			value: "Single Select (Custom Icons)"
		},
		iconSelected: GIP_materialSymbols({
				embedded: true,
				color: "#3381ff",
				icon: "radio_button_checked"
			}),
		iconUnselected: GIP_materialSymbols({
				embedded: true,
				color: "#3381ff",
				icon: "radio_button_unchecked"
			}),
		selectOnAll: true,
		selectedItems: number('Verantwortlicher Mitarbeiter (single)'),
		items: workers.{
			style: "",
			value: Name,
			itemId: number(Nr)
		}
	})))

Embedded Code

let workers := (select Mitarbeiter);
GIP_select({
	uniqueId: "SingleCustomIcons" + Nr,
	embedded: true,
	class: "",
	style: "max-height: 400px; height:auto;",
	selectType: "single",
	combobox: {
		class: "",
		style: "",
		expandIcon: true,
		expandOnAll: true,
		collapseAfterSelect: true,
		placeholder: {
			style: "",
			value: "Mitarbeiter wählen..."
		}
	},
	recordId: raw(Nr),
	fieldId: fieldId(this, "Verantwortlicher Mitarbeiter (single)"),
	label: {
		class: "",
		style: "",
		value: "Single Select (Custom Icons)"
	},
	iconSelected: GIP_materialSymbols({
			embedded: true,
			color: "#3381ff",
			icon: "radio_button_checked"
		}),
	iconUnselected: GIP_materialSymbols({
			embedded: true,
			color: "#3381ff",
			icon: "radio_button_unchecked"
		}),
	selectOnAll: true,
	selectedItems: number('Verantwortlicher Mitarbeiter (single)'),
	items: workers.{
		style: "",
		value: Name,
		itemId: number(Nr)
	}
})

Select: Einfachauswahl mit Searchbar

Beschreibung

Wir möchten ein Select-Modul mit einer Suchleiste bauen, hier beispielhaft mit einer Einfachauswahl. Dafür können wir entweder true für den Key searchBar übergeben, oder wie im Beispiel-Code gezeigt ein Object mit weiteren Einstellungen zur Suchleiste, wie den Platzhalter.

Code des Beispiels

Standalone Code mit Master

let workers := (select Mitarbeiter);
html(raw(GIP_master({})) +
raw(GIP_select({
		uniqueId: "SingleSearchbar" + Nr,
		embedded: false,
		class: "",
		style: "max-height: 400px; height:auto;",
		selectType: "single",
		combobox: {
			class: "",
			style: "",
			expandIcon: true,
			expandOnAll: true,
			collapseAfterSelect: true,
			placeholder: {
				style: "",
				value: "Mitarbeiter wählen..."
			}
		},
		recordId: raw(Nr),
		fieldId: fieldId(this, "Verantwortlicher Mitarbeiter (single)"),
		label: {
			class: "",
			style: "",
			value: "Single Select (Searchbar)"
		},
		searchBar: {
			style: "",
			placeholder: {
				style: "",
				value: "Suchen..."
			}
		},
		iconSelected: true,
		iconUnselected: true,
		selectOnAll: true,
		selectedItems: number('Verantwortlicher Mitarbeiter (single)'),
		items: workers.{
			style: "",
			value: Name,
			itemId: number(Nr)
		}
	})))

Embedded Code

let workers := (select Mitarbeiter);
GIP_select({
	uniqueId: "SingleSearchbar" + Nr,
	embedded: true,
	class: "",
	style: "max-height: 400px; height:auto;",
	selectType: "single",
	combobox: {
		class: "",
		style: "",
		expandIcon: true,
		expandOnAll: true,
		collapseAfterSelect: true,
		placeholder: {
			style: "",
			value: "Mitarbeiter wählen..."
		}
	},
	recordId: raw(Nr),
	fieldId: fieldId(this, "Verantwortlicher Mitarbeiter (single)"),
	label: {
		class: "",
		style: "",
		value: "Single Select (Searchbar)"
	},
	searchBar: {
		style: "",
		placeholder: {
			style: "",
			value: "Suchen..."
		}
	},
	iconSelected: true,
	iconUnselected: true,
	selectOnAll: true,
	selectedItems: number('Verantwortlicher Mitarbeiter (single)'),
	items: workers.{
		style: "",
		value: Name,
		itemId: number(Nr)
	}
})

Select: Mehrfachauswahl mit Toggle-Button

Beschreibung

Wir möchten eine Mehrfachauswahl bauen, in der wir Button haben, um alle Optionen an- bzw. abzuwählen. Dafür nutzen wir die Keys toggleButtonAll und toggleButtonNone. In diesem Beispiel setzen wir die Werte beider Keys auf true, um sie mit Default Einstellungen anzuzeigen. Wir können aber auch einen String oder ein Modul übergeben, um den Text und die Erscheinung der Button zu personalisieren.

Code des Beispiels

Standalone Code mit Master

let workers := (select Mitarbeiter);
html(raw(GIP_master({})) +
raw(GIP_select({
		uniqueId: "MultiToggleButton" + Nr,
		embedded: false,
		class: "",
		style: "max-height: 400px; height:auto;",
		selectType: "multi",
		combobox: {
			class: "",
			style: "",
			expandIcon: true,
			expandOnAll: true,
			collapseAfterSelect: false,
			placeholder: {
				style: "",
				value: "Mitarbeiter wählen..."
			}
		},
		recordId: raw(Nr),
		fieldId: fieldId(this, "Verantwortliche Mitarbeiter (multi)"),
		formId: "",
		htmlAttribute: "",
		label: {
			class: "",
			style: "",
			value: "Multi Select (Toggle Button)"
		},
		toggleButtonNone: true,
		toggleButtonAll: true,
		iconSelected: true,
		iconUnselected: true,
		selectOnAll: true,
		selectedItems: numbers('Verantwortliche Mitarbeiter (multi)'),
		items: workers.{
			style: "",
			value: Name,
			itemId: number(Nr)
		}
	})))

Embedded Code

let workers := (select Mitarbeiter);
GIP_select({
	uniqueId: "MultiToggleButton" + Nr,
	embedded: true,
	class: "",
	style: "max-height: 400px; height:auto;",
	selectType: "multi",
	combobox: {
		class: "",
		style: "",
		expandIcon: true,
		expandOnAll: true,
		collapseAfterSelect: false,
		placeholder: {
			style: "",
			value: "Mitarbeiter wählen..."
		}
	},
	recordId: raw(Nr),
	fieldId: fieldId(this, "Verantwortliche Mitarbeiter (multi)"),
	formId: "",
	htmlAttribute: "",
	label: {
		class: "",
		style: "",
		value: "Multi Select (Toggle Button)"
	},
	toggleButtonNone: true,
	toggleButtonAll: true,
	iconSelected: true,
	iconUnselected: true,
	selectOnAll: true,
	selectedItems: numbers('Verantwortliche Mitarbeiter (multi)'),
	items: workers.{
		style: "",
		value: Name,
		itemId: number(Nr)
	}
})

Select: Mehrfachauswahl ohne Combobox

Beschreibung

Wir möchten ein Select-Modul ohne Combobox bauen, hier beispielhaft für eine Mehrfachauswahl. Dafür können wir für den Key combobox den Wert false übergeben oder, wie im Beispiel-Code, den Key komplett weg lassen.

Code des Beispiels

Standalone Code mit Master

let workers := (select Mitarbeiter);
html(raw(GIP_master({})) +
raw(GIP_select({
		uniqueId: "MultiOhneCombobox" + Nr,
		embedded: false,
		class: "",
		style: "max-height: 400px; height:auto;",
		selectType: "multi",
		recordId: raw(Nr),
		fieldId: fieldId(this, "Verantwortliche Mitarbeiter (multi)"),
		formId: "",
		htmlAttribute: "",
		label: {
			class: "",
			style: "",
			value: "Multi Select (Ohne Combobox)"
		},
		iconSelected: true,
		iconUnselected: true,
		selectOnAll: true,
		selectedItems: numbers('Verantwortliche Mitarbeiter (multi)'),
		items: workers.{
			style: "",
			value: Name,
			itemId: number(Nr)
		}
	})))

Embedded Code

let workers := (select Mitarbeiter);
GIP_select({
	uniqueId: "MultiOhneCombobox" + Nr,
	embedded: true,
	class: "",
	style: "max-height: 400px; height:auto;",
	selectType: "multi",
	recordId: raw(Nr),
	fieldId: fieldId(this, "Verantwortliche Mitarbeiter (multi)"),
	formId: "",
	htmlAttribute: "",
	label: {
		class: "",
		style: "",
		value: "Multi Select (Ohne Combobox)"
	},
	iconSelected: true,
	iconUnselected: true,
	selectOnAll: true,
	selectedItems: numbers('Verantwortliche Mitarbeiter (multi)'),
	items: workers.{
		style: "",
		value: Name,
		itemId: number(Nr)
	}
})

Select: Mehrfachauswahl Fortgeschritten

Beschreibung

Wir möchten ein Select-Modul bauen, das viele der möglichen Optionen vereint: Combobox, Searchbar, Toggle-Button und selbst definierte Symbole. Dafür vergeben wir in den entsprechenden Keys entweder den Wert true oder weitere Eigenschaften als Object oder String.

Code des Beispiels

Standalone Code mit Master

let workers := (select Mitarbeiter);
html(raw(GIP_master({})) +
raw(GIP_select({
		uniqueId: "MultiAdvanced" + Nr,
		embedded: false,
		class: "",
		style: "max-height: 400px; height:auto;",
		selectType: "multi",
		combobox: {
			class: "",
			style: "",
			expandIcon: true,
			expandOnAll: true,
			collapseAfterSelect: false,
			placeholder: {
				style: "",
				value: "Mitarbeiter wählen..."
			}
		},
		searchBar: {
			style: "",
			placeholder: {
				style: "",
				value: "Suchen..."
			}
		},
		toggleButtonNone: true,
		toggleButtonAll: true,
		recordId: raw(Nr),
		fieldId: fieldId(this, "Verantwortliche Mitarbeiter (multi)"),
		formId: "",
		htmlAttribute: "",
		label: {
			class: "",
			style: "",
			value: "Multi Select (Advanced)"
		},
		iconSelected: GIP_materialSymbols({
				embedded: true,
				color: "#3381ff",
				icon: "radio_button_checked"
			}),
		iconUnselected: GIP_materialSymbols({
				embedded: true,
				color: "#3381ff",
				icon: "radio_button_unchecked"
			}),
		selectOnAll: true,
		selectedItems: numbers('Verantwortliche Mitarbeiter (multi)'),
		items: workers.{
			style: "",
			value: Name,
			itemId: number(Nr)
		}
	})))

Embedded Code

let workers := (select Mitarbeiter);
GIP_select({
	uniqueId: "MultiAdvanced" + Nr,
	embedded: true,
	class: "",
	style: "max-height: 400px; height:auto;",
	selectType: "multi",
	combobox: {
		class: "",
		style: "",
		expandIcon: true,
		expandOnAll: true,
		collapseAfterSelect: false,
		placeholder: {
			style: "",
			value: "Mitarbeiter wählen..."
		}
	},
	searchBar: {
		style: "",
		placeholder: {
			style: "",
			value: "Suchen..."
		}
	},
	toggleButtonNone: true,
	toggleButtonAll: true,
	recordId: raw(Nr),
	fieldId: fieldId(this, "Verantwortliche Mitarbeiter (multi)"),
	formId: "",
	htmlAttribute: "",
	label: {
		class: "",
		style: "",
		value: "Multi Select (Advanced)"
	},
	iconSelected: GIP_materialSymbols({
			embedded: true,
			color: "#3381ff",
			icon: "radio_button_checked"
		}),
	iconUnselected: GIP_materialSymbols({
			embedded: true,
			color: "#3381ff",
			icon: "radio_button_unchecked"
		}),
	selectOnAll: true,
	selectedItems: numbers('Verantwortliche Mitarbeiter (multi)'),
	items: workers.{
		style: "",
		value: Name,
		itemId: number(Nr)
	}
})

Select: Mehrfachauswahl Fortgeschritten

Beschreibung

Wir möchten ein Select-Modul in Switch-Darstellung bauen, hier am Beispiel einer Mehrfachauswahl. Dieser Switch soll keine Checkboxen in den einzelnen Items haben und ausgewählte Items sollen mit blauem Hintergrund dargestellt werden.

Zunächst müssen wir die Combobox deaktivieren, um die Items direkt angezeigt zu bekommen. Nun möchten wir diese Items aber nicht untereinander, sondern nebeneinander darstellen. Außerdem soll der Text innerhalb der Items zentriert sein. Dafür geben wir itemGroups den style "display: flex; flex-direction: row; text-align: center;".

Das Styling der ausgewählten Items bestimmen wir mit dem Key styleSelected. Optional können wir auch den Style beim Überfahren mit der Maus anpassen über styleHovered. Zuletzt geben wir noch allen Items, außer dem letzten, eine Rahmenlinie rechts, um die Items optisch voneinander zu trennen.

Code des Beispiels

Standalone Code mit Master

html(raw(GIP_master({})) +
raw(GIP_select({
		uniqueId: "MultiSwitch" + Nr,
		embedded: false,
		class: "",
		style: "max-height: 400px; height:auto;",
		selectType: "multi",
		combobox: false,
		recordId: raw(Nr),
		fieldId: fieldId(this, "Einkaufen"),
		formId: "",
		htmlAttribute: "",
		label: {
			class: "",
			style: "",
			value: "Multi Select (Switch)"
		},
		selectContainer: {
			class: "",
			style: "",
			itemGroup: {
				class: "",
				style: "display: flex; flex-direction: row; text-align: center;",
				styleSelected: "background-color: #3381ff; color: white;",
				styleHovered: "background-color: #f1f1f4;",
				iconSelected: false,
				iconUnselected: false,
				selectOnAll: true,
				selectedItems: numbers(Einkaufen),
				items: [{
						itemId: 1,
						style: "border-right: 1px solid; border-color: #E9ECF4;",
						value: "Apfel"
					}, {
						itemId: 2,
						style: "border-right: 1px solid; border-color: #E9ECF4;",
						value: "Mehl"
					}, {
						itemId: 3,
						style: "border-right: 1px solid; border-color: #E9ECF4;",
						value: "Butter"
					}, {
						itemId: 4,
						style: "",
						value: "KiBa"
					}]
			}
		}
	})))

Embedded Code

GIP_select({
	uniqueId: "MultiSwitch" + Nr,
	embedded: true,
	class: "",
	style: "max-height: 400px; height:auto;",
	selectType: "multi",
	combobox: false,
	recordId: raw(Nr),
	fieldId: fieldId(this, "Einkaufen"),
	formId: "",
	htmlAttribute: "",
	label: {
		class: "",
		style: "",
		value: "Multi Select (Switch)"
	},
	selectContainer: {
		class: "",
		style: "",
		itemGroup: {
			class: "",
			style: "display: flex; flex-direction: row; text-align: center;",
			styleSelected: "background-color: #3381ff; color: white;",
			styleHovered: "background-color: #f1f1f4;",
			iconSelected: false,
			iconUnselected: false,
			selectOnAll: true,
			selectedItems: numbers(Einkaufen),
			items: [{
					itemId: 1,
					style: "border-right: 1px solid; border-color: #E9ECF4;",
					value: "Apfel"
				}, {
					itemId: 2,
					style: "border-right: 1px solid; border-color: #E9ECF4;",
					value: "Mehl"
				}, {
					itemId: 3,
					style: "border-right: 1px solid; border-color: #E9ECF4;",
					value: "Butter"
				}, {
					itemId: 4,
					style: "",
					value: "KiBa"
				}]
		}
	}
})