Select
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 denstyle-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 daslabel, diecomboboxund die einzelnenitems. - 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
json
GIP_select({
uniqueId: "myUniqueName" + Nr,
embedded: true,
selectType: "single",
recordId: raw(Nr),
fieldId: "",
iconSelected: true,
iconUnselected: true,
items: [{
itemId: 1,
value: *any*,
}],
selectedItems: [1, 2, 4, 7],
})json
GIP_select({
uniqueId: "myUniqueName" + Nr,
embedded: true,
selectType: "single",
recordId: raw(Nr),
fieldId: "",
style: "",
iconSelected: true,
iconUnselected: true,
combobox: true,
items: [{
itemId: 1,
style: "",
value: *any*,
}],
selectedItems: [1, 2, 4, 7],
selectableItems: [1, 3, 4, 5, 7],
})json
GIP_select({
uniqueId: "myUniqueName" + Nr,
embedded: true,
selectType: "single",
recordId: raw(Nr),
fieldId: "",
formId: "myForm" + Nr,
class: "",
styleSelected: true,
styleHovered: true,
style: "",
searchBar: true,
iconSelected: true,
iconUnselected: true,
combobox: true,
items: [{
itemId: 1,
style: "",
value: *any*,
actions: [{
trigger: "click",
scripts: [{
type: "",
}],
}],
selectable: true,
selected: true,
}],
selectedItems: [1, 2, 4, 7],
selectableItems: [1, 3, 4, 5, 7],
selectOnAll: true,
actions: [{
trigger: "click",
scripts: [{
type: "",
}],
}],
})json
GIP_select({
uniqueId: "",
embedded: {
height: "",
styleHtml: "",
styleStri: "",
},
selectType: "",
recordId: "",
fieldId: "",
formId: "",
class: "",
styleSelected: "" / true,
styleHovered: "" / true,
style: "",
searchBar: {
style: "",
placeholder: {
style: "",
value: *any*,
},
},
iconSelected: true / *any*,
iconUnselected: true / *any*,
combobox: {
class: "",
style: "",
expandIcon: true / *any*,
placeholder: {
style: "",
value: *any*,
},
collapseAfterSelect: true,
expandOnAll: true,
},
label: {
class: "",
style: "",
value: *any*,
orientation: "",
},
items: [{
itemId: "" / 0,
style: "",
value: *any*,
displayInCombobox: true / *any*,
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
iconSelectedActions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
iconUnselectedActions: [{
scripts: [{
type: "",
}],
}],
selectable: true,
selected: true,
}],
selectedItems: "" / 0 / [""] / [0],
selectableItems: "" / 0 / [""] / [0],
selectOnAll: true,
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
htmlAttribute: "",
})json
html( raw(GIP_master({})) +
raw(GIP_select({
uniqueId: "",
embedded: {
height: "",
styleHtml: "",
styleStri: "",
},
selectType: "",
recordId: "",
fieldId: "",
formId: "",
class: "",
styleSelected: "" / true,
styleHovered: "" / true,
style: "",
searchBar: {
style: "",
placeholder: {
style: "",
value: *any*,
},
},
iconSelected: true / *any*,
iconUnselected: true / *any*,
combobox: {
class: "",
style: "",
expandIcon: true / *any*,
placeholder: {
style: "",
value: *any*,
},
collapseAfterSelect: true,
expandOnAll: true,
},
label: {
class: "",
style: "",
value: *any*,
orientation: "",
},
items: [{
itemId: "" / 0,
style: "",
value: *any*,
displayInCombobox: true / *any*,
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
iconSelectedActions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
iconUnselectedActions: [{
scripts: [{
type: "",
}],
}],
selectable: true,
selected: true,
}],
selectedItems: "" / 0 / [""] / [0],
selectableItems: "" / 0 / [""] / [0],
selectOnAll: true,
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
htmlAttribute: "",
})
))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
json
html(raw(GIP_master({})) +
raw(GIP_select({
uniqueId: "SingleBasic" + Nr,
embedded: false,
class: "",
style: "",
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..."
}
},
selectContainer: {
style: "max-height: 400px; height:auto;",
toggleButtonNone: "(leer)",
itemGroup: {
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"
}]
}
}
})
))json
GIP_select({
uniqueId: "SingleBasic" + Nr,
embedded: true,
class: "",
style: "",
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..."
}
},
selectContainer: {
style: "max-height: 400px; height:auto;",
toggleButtonNone: "(leer)",
itemGroup: {
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
json
html(raw(GIP_master({})) +
raw(GIP_select({
uniqueId: "MultiBasic" + Nr,
embedded: false,
class: "",
style: "",
selectType: "multi",
combobox: {
class: "",
style: "",
expandIcon: true,
expandOnAll: true,
collapseAfterSelect: false,
placeholder: {
style: "",
value: "Einkaufsliste schreiben..."
}
},
recordId: raw(Nr),
fieldId: fieldId(this, "Einkaufen"),
formId: "",
label: {
class: "",
style: "",
value: "Multi Select (basic)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
htmlAttribute: "",
toggleButtonAll: false,
toggleButtonNone: false,
itemGroup: {
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"
}]
}
}
})
))json
GIP_select({
uniqueId: "MultiBasic" + Nr,
embedded: true,
class: "",
style: "",
selectType: "multi",
combobox: {
class: "",
style: "",
expandIcon: true,
expandOnAll: true,
collapseAfterSelect: false,
placeholder: {
style: "",
value: "Einkaufsliste schreiben..."
}
},
recordId: raw(Nr),
fieldId: fieldId(this, "Einkaufen"),
formId: "",
label: {
class: "",
style: "",
value: "Multi Select (basic)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
htmlAttribute: "",
toggleButtonAll: false,
toggleButtonNone: false,
itemGroup: {
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
json
let workers := (select Mitarbeiter);
html(raw(GIP_master({})) +
raw(GIP_select({
uniqueId: "SingleCustomIcons" + Nr,
embedded: false,
class: "",
style: "",
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)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
itemGroup: {
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)
}
}
}
})
))json
let workers := (select Mitarbeiter);
GIP_select({
uniqueId: "SingleCustomIcons" + Nr,
embedded: true,
class: "",
style: "",
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)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
itemGroup: {
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 Combobox-Icon
Beschreibung
Wir möchten ein Select-Modul bauen und dabei das Ausklapp-Symbol der Combobox durch ein eigenes Symbol ersetzen, hier beispielhaft für eine Einfachauswahl. Dafür übergeben wir im Key expandIcon ein Material-Symbol mit eigenen Stylings.
Code des Beispiels
json
html(raw(GIP_master({})) +
raw(GIP_select({
uniqueId: "SingleExpandIcon" + Nr,
embedded: false,
class: "",
style: "",
selectType: "single",
recordId: raw(Nr),
fieldId: fieldId(this, "Antwortoptionen"),
label: {
class: "",
style: "",
value: "Single Select (Expand Icon)"
},
combobox: {
class: "",
style: "",
expandIcon: GIP_materialSymbols({
embedded: true,
filling: false,
color: "#3381ff",
secondColor: "#e3e7ff",
icon: "expand_circle_down"
}),
expandOnAll: false,
collapseAfterSelect: true,
placeholder: {
style: "",
value: "Antwort wählen..."
}
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
toggleButtonNone: "(leer)",
itemGroup: {
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"
}]
}
}
})
))json
GIP_select({
uniqueId: "SingleExpandIcon" + Nr,
embedded: true,
class: "",
style: "",
selectType: "single",
recordId: raw(Nr),
fieldId: fieldId(this, "Antwortoptionen"),
label: {
class: "",
style: "",
value: "Single Select (Expand Icon)"
},
combobox: {
class: "",
style: "",
expandIcon: GIP_materialSymbols({
embedded: true,
filling: false,
color: "#3381ff",
secondColor: "#e3e7ff",
icon: "expand_circle_down"
}),
expandOnAll: false,
collapseAfterSelect: true,
placeholder: {
style: "",
value: "Antwort wählen..."
}
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
toggleButtonNone: "(leer)",
itemGroup: {
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: 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
json
let workers := (select Mitarbeiter);
html(raw(GIP_master({})) +
raw(GIP_select({
uniqueId: "SingleSearchbar" + Nr,
embedded: false,
class: "",
style: "",
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)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
searchBar: {
style: "",
placeholder: {
style: "",
value: "Suchen..."
}
},
toggleButtonAll: false,
toggleButtonNone: false,
itemGroup: {
iconSelected: true,
iconUnselected: true,
selectOnAll: true,
selectedItems: number('Verantwortlicher Mitarbeiter (single)'),
items: workers.{
style: "",
value: Name,
itemId: number(Nr)
}
}
}
})
))json
GIP_select({
uniqueId: "SingleSearchbar" + Nr,
embedded: true,
class: "",
style: "",
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)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
searchBar: {
style: "",
placeholder: {
style: "",
value: "Suchen..."
}
},
toggleButtonAll: false,
toggleButtonNone: false,
itemGroup: {
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
json
let workers := (select Mitarbeiter);
html(raw(GIP_master({})) +
raw(GIP_select({
uniqueId: "MultiToggleButton" + Nr,
embedded: false,
class: "",
style: "",
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: "",
label: {
class: "",
style: "",
value: "Multi Select (Toggle Button)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
htmlAttribute: "",
toggleButtonAll: true,
toggleButtonNone: true,
itemGroup: {
iconSelected: true,
iconUnselected: true,
selectOnAll: true,
selectedItems: numbers('Verantwortliche Mitarbeiter (multi)'),
items: workers.{
style: "",
value: Name,
itemId: number(Nr)
}
}
}
})
))json
let workers := (select Mitarbeiter);
GIP_select({
uniqueId: "MultiToggleButton" + Nr,
embedded: true,
class: "",
style: "",
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: "",
label: {
class: "",
style: "",
value: "Multi Select (Toggle Button)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
htmlAttribute: "",
toggleButtonAll: true,
toggleButtonNone: true,
itemGroup: {
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
json
let workers := (select Mitarbeiter);
html(raw(GIP_master({})) +
raw(GIP_select({
uniqueId: "MultiOhneCombobox" + Nr,
embedded: false,
class: "",
style: "",
selectType: "multi",
recordId: raw(Nr),
fieldId: fieldId(this, "Verantwortliche Mitarbeiter (multi)"),
formId: "",
label: {
class: "",
style: "",
value: "Multi Select (Ohne Combobox)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
htmlAttribute: "",
itemGroup: {
iconSelected: true,
iconUnselected: true,
selectOnAll: true,
selectedItems: numbers('Verantwortliche Mitarbeiter (multi)'),
items: workers.{
style: "",
value: Name,
itemId: number(Nr)
}
}
}
})
))json
let workers := (select Mitarbeiter);
GIP_select({
uniqueId: "MultiOhneCombobox" + Nr,
embedded: true,
class: "",
style: "",
selectType: "multi",
recordId: raw(Nr),
fieldId: fieldId(this, "Verantwortliche Mitarbeiter (multi)"),
formId: "",
label: {
class: "",
style: "",
value: "Multi Select (Ohne Combobox)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
htmlAttribute: "",
itemGroup: {
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
json
let workers := (select Mitarbeiter);
html(raw(GIP_master({})) +
raw(GIP_select({
uniqueId: "MultiAdvanced" + Nr,
embedded: false,
class: "",
style: "",
selectType: "multi",
recordId: raw(Nr),
fieldId: fieldId(this, "Verantwortliche Mitarbeiter (multi)"),
formId: "",
combobox: {
class: "",
style: "",
expandIcon: true,
expandOnAll: true,
collapseAfterSelect: false,
placeholder: {
style: "",
value: "Mitarbeiter wählen..."
}
},
label: {
class: "",
style: "",
value: "Multi Select (Advanced)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
htmlAttribute: "",
searchBar: {
style: "",
placeholder: {
style: "",
value: "Suchen..."
}
},
toggleButtonAll: true,
toggleButtonNone: true,
itemGroup: {
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)
}
}
}
})
))json
let workers := (select Mitarbeiter);
GIP_select({
uniqueId: "MultiAdvanced" + Nr,
embedded: true,
class: "",
style: "",
selectType: "multi",
recordId: raw(Nr),
fieldId: fieldId(this, "Verantwortliche Mitarbeiter (multi)"),
formId: "",
combobox: {
class: "",
style: "",
expandIcon: true,
expandOnAll: true,
collapseAfterSelect: false,
placeholder: {
style: "",
value: "Mitarbeiter wählen..."
}
},
label: {
class: "",
style: "",
value: "Multi Select (Advanced)"
},
selectContainer: {
class: "",
style: "max-height: 400px; height:auto;",
htmlAttribute: "",
searchBar: {
style: "",
placeholder: {
style: "",
value: "Suchen..."
}
},
toggleButtonAll: true,
toggleButtonNone: true,
itemGroup: {
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 als Switch
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
json
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"
}]
}
}
})))json
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"
}]
}
}
})