Mehrfachauswahl 2.0

Die Mehrfachauswahl 2.0 ist ein Listenelement, in dem mehrere Einträge auf einmal ausgewählt werden können. Es eignet sich z.B. für Verteilerlisten, Artikelgruppen und vieles mehr. Ausgewählte Einträge werden beim Speichern der Seite im verbundenen Datenfeld abgelegt, wenn eine entsprechende Verknüpfung besteht.

Die Mehrfachauswahl 2.0 ist responsiv und sehr bedienungsfreundlich.

Sie kann mit Vorgabewerten konfiguriert werden. Als Einträge kommen statische Einträge, Werte aus Applikationen oder auch aus speziellen Wertequellen in Frage.

Die Einträge können mit den Suchoperationen "Beginnt mit" oder "Enthält" gefiltert werden.

Einträge können mit Bildern oder Initialen angezeigt werden. Außerdem kann neben dem Titel auch ein Untertitel in die Anzeige eines Eintrags aufgenommen werden.

Die Mehrfachauswahl 2.0 kann über eine API gesteuert werden und ist mit der Tastatur bedienbar. Ihr Layout kann über CSS-Variablen gestylt werden.

Das Element gibt es als Eingabe- und Ansichtselement.

Eingabeelement

Eigenschaften im Browser

Die Mehrfachauswahl 2.0 zeigt sich als Eingabekontrolle in Form einer Auswahlliste im Browser. Klicken Sie auf das Pfeilsymbol rechts im Element, um die Einträge der Mehrfachauswahl einzublenden.

In dieser Beispielabbildung sehen Sie eine Mehrfachauswahl, die mit den Daten aus der Benutzerverwaltung des Portals verbunden ist. Das Feld oben kann für die Filterung der Einträge genutzt werden, z.B. indem Sie den Namen eines Benutzers eingeben.

Die Einträge werden dann entsprechend gefiltert. Der Begriff, den Sie eingetragen haben, wird in den Einträgen optisch hervorgehoben. Wenn Sie den Filter entfernen und damit wieder alle Einträge anzeigen wollen, klicken Sie auf das Schließen-Symbol rechts im Filterfeld.

Klicken Sie auf den bzw. die Einträge, die ausgewählt werden sollen. Bei den ausgewählten Einträgen finden Sie rechts ein Hakensymbol.

Um alle Einträge aus- bzw. abzuwählen kann auch der Schieberegler "Alle selektieren" oben links unterhalb des Filterfeldes verwendet werden. Die Funktion wirkt sich nur auf die aktuell sichtbaren Einträge aus.

Rechts unterhalb des Filterfeldes wird angezeigt, wie viele Einträge aktuell selektiert sind. Die Anzahl bezieht sich auf alle Einträge inklusive derjenigen, die aufgrund von eventuell gesetzten Filtern nicht angezeigt werden.

Links unterhalb der Liste wird angezeigt, wie viele Einträge von der Gesamtanzahl der vorhandenen Einträge ausgewählt sind.

Rechts unterhalb der Liste sehen Sie, wie viele Einträge mindestens und wie viele Einträge höchstens ausgewählt werden sollen.

Sind die gewünschten Einträge ausgewählt, klicken Sie bitte auf das Pfeilsymbol rechts im Filterfeld der Mehrfachauswahl oder alternativ in einen Bereich außerhalb der Mehrfachauswahl. Die Liste wird daraufhin geschlossen und die ausgewählten Einträge werden angezeigt. Einzelne Einträge können mit Klick auf das Schließen-Symbol rechts neben dem Eintrag wieder abgewählt werden.

Eigenschaften im Modul "Applikationen"

Wenn Sie eine Mehrfachauswahl 2.0 im Modul "Applikationen" erstellen, wird automatisch der Eigenschaftendialog geöffnet.

Allgemein

Hier werden die allgemeinen Eigenschaften der Mehrfachauswahl festgelegt.

Titel

Tragen Sie hier den Titel ein. Weitere Informationen zum Thema finden Sie hier.

Titel in Kontrolle anzeigen

Wenn keine Werte ausgewählt sind, wird mit dieser Option der Titel der Mehrfachauswahl als Platzhalter im Browser angezeigt.

Eingabebeschränkungen

Eingabe erforderlich

Mit dieser Einstellung wird die Mehrfachauswahl zum Pflichtfeld.

Minimale / Maximale Anzahl auszuwählender Einträge

Legt fest, wie viele Einträge mindestens bzw. höchstens ausgewählt werden sollen. Die minimale bzw. maximale Anzahl der auszuwählenden Einträge wird im Browser unten rechts in der Mehrfachauswahl angezeigt.

Wenn als Maximum nichts eingetragen wird, können alle Einträge gewählt werden. Ein Minimum muss angegeben werden, wenn bei der Mehrfachauswahl in den allgemeinen Eigenschaften die Einstellung "Eingabe erforderlich" gesetzt ist.

Suchoperation

Mit der Suchoperation wird bestimmt, auf welche Art und Weise nach den im Filterfeld der Mehrfachauswahl im Browser eingetragenen Begriffen gesucht wird.

Beginnt mit

Es werden alle Einträge angezeigt, bei denen der Titel mit dem eingegebenen Begriff beginnt.

Enthält

Es werden alle Einträge angezeigt, bei denen der Begriff in Titel oder Untertitel vorkommt.

Klicken Sie "Weiter", wenn alle Einstellungen wunschgemäß gesetzt sind.

Vorlage

Hier kann ausgewählt werden, in welcher Form die Einträge der Mehrfachauswahl angezeigt werden sollen. Von links nach rechts und oben nach unten gesehen gibt es folgende Möglichkeiten:

• Bild, Titel und Untertitel

• Titel und Untertitel

• Bild und Titel

• Titel

Wählen Sie die gewünschte Art aus und klicken Sie "Weiter".

Datenquelle

Werte aus Applikation

Applikation, Datengruppe

Wählen Sie hier die Applikation und Datengruppe aus, deren Werte in der Mehrfachauswahl angezeigt werden sollen.

Filter

Öffnet einen Dialog, in dem ein Filter definiert werden kann. Die Daten werden dann entsprechend der Filterkriterien in der Mehrfachauswahl angezeigt.

Gespeicherter Wert

Hier werden alle Datenfelder der ausgewählten Datengruppe angezeigt. Legen Sie das Feld fest, dessen Werte gespeichert werden soll, wenn vom Anwender ein Eintrag in der Mehrfachauswahl selektiert wurde. So haben Sie z.B. die Möglichkeit, Namen von Mitarbeitern in der Mehrfachauswahl anzuzeigen, aber nicht den Namen, sondern die zugehörige ID abzuspeichern.

Sortierung

Hier werden die Felder angezeigt, nach denen die Einträge in der Mehrfachauswahl sortiert werden.

Sortierung

Öffnet einen Dialog, in dem die Sortierfelder ausgewählt werden können.

Doppelte Einträge ausblenden

Mit dieser Einstellung werden doppelte Einträge nur einfach angezeigt.

Datenzuordnung

Hier werden genau die Elemente angezeigt, die Sie zuvor in den Einstellungen der "Art der Mehrfachauswahl" festgelegt haben. Klicken Sie auf die einzelnen Elemente, um die Datenzuordnung anzuzeigen bzw. festzulegen. Dabei können auch andere Datentypen verwendet werden, als im Beispiel gezeigt. Dem Titel kann z.B. auch ein Datenfeld zugeordnet werden, das Ganzzahlen enthält.

Wenn Sie auf das Bild klicken, wird ein Dialog geöffnet, in dem Sie die gewünschten Bilder festlegen können.

Datenquelle "Bild" - Bild aus Initialen

Mit dieser Einstellung werden statt einem Bild die beiden Anfangsbuchstaben von Titel und Untertitel auf einem kreisförmigen Hintergrund angezeigt.

Datenquelle "Bild" - Statisches Bild

Hier kann ein statisches Bild festgelegt werden, das dann bei jedem einzelnen Eintrag in der Mehrfachauswahl angezeigt wird. "Bearbeiten" öffnet einen Dialog, in dem ein geeignetes Bild ausgewählt werden kann. "Entfernen" entfernt die Zuordnung wieder.

Datenquelle "Bild" - Bild aus Datenfeld

Datenfeld

Wählen Sie hier das gewünschte Datenfeld aus. Falls noch kein geeignetes Feld vorhanden ist, kann mit Klick auf "Neues Datenfeld" ein Dialog geöffnet werden, in dem ein neues Datenfeld erstellt werden kann.

Gedrehte Bilder rotieren

Die meisten Kameras schreiben Informationen über die Orientierung des Bildes (Drehung um 90, 180 bzw. 270 Grad) in den Header der Bilddatei. Mit der Einstellung "Gedrehte Bilder rotieren" werden diese Informationen ausgewertet und die Bilder bei der Anzeige im Portal automatisch so gedreht, dass sie nicht auf dem Kopf stehen.

Bild skalieren

Das Bild wird auf das in "Maximale Breite" und "Maximale Höhe" eingetragene Maß skaliert.

Bild zuschneiden

Das Bild wird auf das in "Maximale Breite" und "Maximale Höhe" eingetragene Maß zugeschnitten.

Kleinere Bilder vergrößern

Ist das Bild zu klein, so wird es auf das in "Maximale Breite" und "Maximale Höhe" eingetragene Maß vergrößert.

Dateigröße für Thumbnails optimieren (verringern)

Bewirkt die Reduzierung der Dateigröße zugunsten einer schnelleren Ladezeit der Applikationsseite.

Vorgabe Bild

Das hier ausgewählte Bild wird angezeigt, wenn das verbundene Datenfeld keinen Wert liefert.

"Bearbeiten"

Öffnet einen Dialog, in dem ein geeignetes Bild ausgewählt werden kann.

"Entfernen"

Entfernt die Zuordnung wieder.

Klicken Sie "OK", um die Einstellungen zu speichern und den Dialog zu schließen.

Mit Klick auf "[Titel]" oder "[Untertitel]" wird ein Dialog geöffnet, in dem die Bearbeitung entsprechend vorgenommen werden kann.

Ein Klick auf "Bearbeiten" öffnet erneut den Dialog für die Auswahl der "Art der Mehrfachauswahl", womit die Elemente für die Datenzuordnung geändert werden können.

Benutzerdefinierte Werte

Benutzerdefinierte Werte sind Einträge, die nicht aus einer Datenquelle stammen, sondern statisch eingetragen werden.

Datentyp des gespeicherten Wertes

Geben Sie hier den Datentyp an, mit dem der ausgewählte Wert gespeichert werden soll. Das Format des gespeicherten Wertes aller definierten Einträge muss dem hier gewählten Datentyp entsprechen. Ob dies für die einzelnen benutzerdefinierten Werte der Fall ist, wird in der letzten Spalte der Tabelle mit einem entsprechenden Symbol angezeigt.

Spalte "Gespeicherter Wert"

Der hier eingetragene Wert wird in dem Datenfeld, das in den Speicheroptionen mit der Mehrfachauswahl verbunden ist, gespeichert.

Spalte "Ansicht"

Zeigt eine Vorschau auf das spätere Aussehen der Einträge im Browser. Ein Klick auf den Titel öffnet den Dialog, in dem der Eintrag bearbeitet werden kann.

Spalte "Vorauswahl"

Der Eintrag, bei dem das Kontrollkästchen in dieser Spalte markiert ist, wird bei neuen und leeren Datensätzen in der Mehrfachauswahl vorausgewählt. Die Spalte ist deaktiviert, wenn die Vorgabewerte in den Vorgabe-Einstellungen angepasst wurden.

Neuen benutzerdefinierten Wert hinzufügen / Benutzerdefinierten Wert bearbeiten

Öffnet einen Dialog, in dem ein neuer benutzerdefinierter, statischer Wert angelegt werden kann. Dabei können, je nach der zuvor ausgewählten Art der Mehrfachauswahl Titel, gespeicherter Wert, Untertitel und Bild festgelegt werden. Der gespeicherte Wert muss dem Datentyp, der zuvor für die benutzerdefinierten Werte festgelegt wurde, entsprechen. Ist dies nicht der Fall, werden Sie mit einer Meldung darauf hingewiesen.

Wenn zuvor ein Datums- oder Boolean-Datentyp festgelegt wurde, so wird hier im unteren Bereich des Dialogs ein Beispiel für das korrekte Format, mit dem der Wert in "Gespeicherter Wert" angegeben werden muss, angezeigt.

Titel / Untertitel

Hier kann ein statischer Titel bzw. Untertitel eingetragen oder wahlweise eine Konstante als Quelle für den Titel verwendet werden. Informationen dazu finden Sie hier.

Titel / Speicherwert synchronisieren

In der Regel wird der Inhalt bei einer Änderung in einem der beiden Felder "Titel" und "Gespeicherter Wert" automatisch in das andere Feld übernommen. Das Verhalten kann mit Klick auf "Titel / Speicherwert synchronisieren" unterbunden werden.

"Bearbeiten"

Öffnet einen Dialog, in dem ein Bild ausgewählt werden kann.

Klicken Sie "OK", um die Einstellungen zu speichern und den Dialog zu schließen.

Benutzerdefinierten Wert löschen

Löscht den aktuell markierten Wert.

Wert in der Anzeigereihenfolge nach oben / unten verschieben

Ändert die Reihenfolge der Einträge.

Spezielle Wertequellen

Diese Option kann nur gewählt werden, wenn in der Art der Mehrfachauswahl kein Untertitel enthalten ist. Alle weiteren Informationen zu den Einstellungen finden Sie hier.

Klicken Sie "Weiter".

Speicheroptionen

Alle Informationen zu diesem Thema finden Sie hier.

Klicken Sie "Weiter".

Abschließende Einstellungen

Alle Informationen zu diesem Dialog finden Sie hier.

Klicken Sie "Fertig stellen". Die Mehrfachauswahl ist nun konfiguriert und kann nach dem Speichern der Applikation im Browser verwendet werden.

Vorgabe

Ist die Mehrfachauswahl fertig gestellt und angelegt, so kann der Eigenschaftendialog erneut geöffnet werden. Hier finden Sie dann zusätzlich den Reiter "Vorgabe", auf dem Sie einstellen können, welcher Wert bei neuen oder bestehenden leeren Datensätzen in der Mehrfachauswahl angezeigt wird.

Bearbeiten

Öffnet einen Dialog, in dem die Vorgabewerte definiert werden können.

Übernehmen

Der jeweilige Wert wird auch für die andere Einstellung übernommen.

Ansicht

Styleklasse

Hier kann eine Styleklasse gewählt werden, die im Layout oder Applikationslayout für die aktuelle Mehrfachauswahl definiert ist.

Individuelle Anpassungen

Alle Informationen dazu finden Sie hier.

Mehrfachauswahl 2.0 Ansicht

Eigenschaften im Browser

Die Mehrfachauswahl 2.0 zeigt sich als Ansichtskontrolle in Form einer Auswahlliste im Browser. Klicken Sie auf das Pfeilsymbol rechts im Element, um die Einträge der Mehrfachauswahl einzublenden.

Der obere Teil der Mehrfachauswahl kann - wie bei der Eingabekontrolle - für die Filterung der Einträge verwendet werden.

Eigenschaften im Modul "Applikationen"

Wenn Sie eine Mehrfachauswahl Ansicht 2.0 im Modul "Applikationen" erstellen, wird automatisch der Eigenschaftendialog geöffnet.

Übernahme der Kontrolleigenschaften

Ist bereits eine Mehrfachauswahl 2.0-Eingabekontrolle vorhanden, so können hier ganz einfach die Einstellungen übernommen werden. Wählen Sie dazu die gewünschte Mehrfachauswahl aus und setzen Sie die Einstellung "Einstellungen von Eingabekontrolle übernehmen".

Klicken Sie "Weiter".

Allgemein

Titel

Tragen Sie hier den Titel ein. Weitere Informationen zum Thema finden Sie hier.

Suchoperation

Mit der Suchoperation wird bestimmt, auf welche Art und Weise nach den im Filterfeld der Mehrfachauswahl im Browser eingetragenen Begriffen gesucht wird.

Beginnt mit

Es werden alle Einträge angezeigt, bei denen der Titel mit dem eingegebenen Begriff beginnt.

Enthält

Es werden alle Einträge angezeigt, bei denen der Begriff in Titel oder Untertitel vorkommt.

Klicken Sie "Weiter".

Vorlage

Hier kann die gewünschte Art der Mehrfachauswahl geändert werden. Weitere Informationen dazu finden Sie hier. Klicken Sie "Weiter".

Datenquelle

Wie bei der Mehrfachauswahl-Eingabekontrolle kann hier die Datenquelle bestimmt werden. Informationen zu den Einstellungen finden Sie hier. Klicken Sie "Weiter".

Leseoptionen

Alle Informationen zu diesem Dialog finden Sie hier.

Abschließende Einstellungen

Alle Informationen zu diesem Dialog finden Sie hier.

Klicken Sie "OK", um geänderte Einstellungen zu speichern und den Dialog wieder zu schließen.

Layout

Im Modul "Design" gibt es in jedem Layout das Kontroll-Element "Mehrfachauswahl 2.0" mit der Styleklasse "Multiselect-Standard".

Wenn das Kontrollelement "Mehrfachauswahl 2.0" im Bereich "Kontroll-Elemente" ausgewählt ist, klicken Sie im Bereich "Stile" auf "CSS-Variablen anzeigen". Die Variablenwerte können hier in der Spalte "Wert" komfortabel bearbeitet werden.

Alle Änderungen werden unmittelbar in der Vorschau im mittleren Bereich des Moduls "Design" angezeigt. Auf der folgenden Abbildung finden Sie eine Übersicht über die Bestandteile der Mehrfachauswahl und die zugehörigen Variablengruppen.

Wie gewohnt können neue Kontroll-Elemente vom Typ "Mehrfachauswahl 2.0" im Bereich "Kontroll-Elemente" in allen Layouts hinzugefügt und deren Aussehen über Veränderung der Werte bei den Variablen bearbeitet werden.

Die Kontroll-Elemente können anschließend über die Styleklasse auf dem Reiter "Ansicht" im Applikationsdesigner den Mehrfachauswahl 2.0-Elementen in Applikationen zugewiesen werden.

Das Aussehen einer einzelnen Mehrfachauswahl kann mit einer individuellen Anpassung geändert werden. Mit der individuellen Anpassung werden die Werte der entsprechenden CSS-Variablen überschrieben. Die individuelle Anpassung ist ausschließlich für die aktuell bearbeitete Mehrfachauswahl gültig und zeigt auf andere, ebenfalls in der Applikation enthaltenen Mehrfachauswahl 2.0-Elemente keine Wirkung.

Abhängigkeiten

Die Mehrfachauswahl 2.0 kann sowohl als auslösende Kontrolle in Abhängigkeiten eingesetzt als auch abhängig gefiltert werden. Als einziges Ereignis steht dabei "onchange" zur Verfügung. Im Filter der Abhängigkeit steht die Mehrfachauswahl als Vergleichswert zur Verfügung. Verglichen werden kann ausschließlich mit dem gespeicherten Wert.

Unterabfrage

Der Filter-Dialog wurde mit der Möglichkeit einer Unterabfrage erweitert, wenn bei der Mehrfachauswahl eine Abhängigkeit definiert wird. Bei der Auswahl des Vergleichswertes gibt es neben dem Vergleich mit dem Wert einer Kontrolle auch noch die Möglichkeit mit einem Wert aus einer Unterabfrage zu vergleichen. Weitere Informationen zum Filterdialog finden Sie hier.

Tastaturbedienung

Die Kontrolle ist den WCAG Vorschlägen folgend per Tastatur bedienbar.

Die belegten Tasten sind:

• Tab - nächstes fokussierbares Element

• Leertaste - selektieren / deselektieren des aktuellen Elements

• CTRL + ↑ - Liste schließen

• CTRL + ↓ - Liste öffnen

• ↑ - Liste schließen bzw. vorherigen Listeneintrag fokussieren

• ↓ - Liste öffnen bzw. nächsten Eintrag fokussieren

• Enter - fokussierten Eintrag auswählen

• Backspace - fokussierten Eintrag abwählen

API

Alle Informationen zu diesem Thema finden Sie hier:

https://docs.intrexx.com/intrexx/version/steady/api/js/html/modules/Controls.Edit.List.UpMultiselectControl.html

Kontrolltyp "Mehrfachauswahl 2.0" in Ansichtstabellen

In Ansichtstabellen kann der Kontrolltyp "Mehrfachauswahl 2.0" ausgewählt werden, wenn Datenfelder der Mehrfachauswahl als Spalte in der Tabelle eingebunden sind. Im Browser werden die enthaltenen Daten dann in der Tabellenspalte pro Zelle in einer Auswahlliste angezeigt.

Weitere Informationen zu diesem Thema finden Sie hier.