Visual Picker

Der Avonni Visual Picker verwandelt das Auswählen von Optionen in ein unterhaltsames, interaktives Erlebnis! Anstelle einfacher Dropdowns oder Listen bietet er Benutzern eine visuell ansprechende Möglichkeit, Elemente auszuwählen

Übersicht

Der Visual Picker ist ideal für Szenarien, in denen die visuelle Darstellung der Optionen die Benutzererfahrung verbessert. Wichtige Funktionen umfassen:

• Visuelle Optionen: Optionen mit Bildern, Symbolen und Text anzeigen, wodurch sie ansprechender sind als einfache Textlisten.

• Einzelauswahl oder Mehrfachauswahl: Konfigurieren Sie die Komponente so, dass Benutzer entweder eine einzelne Option (wie Radiobuttons) oder mehrere Optionen (wie Kontrollkästchen) auswählen können.

• Anpassbares Layout: Steuern Sie das Erscheinungsbild und die Anordnung der Optionen (z. B. Seitenverhältnis, Styling).

• Datengetrieben: Befüllen Sie die Optionen aus verschiedenen Datenquellen (Manuell, Variable, Abfrage, Picklist).

• Reaktiv: Der/die ausgewählte(n) Wert(e) werden in einer Variable gespeichert, wodurch sie in anderen Teilen Ihrer dynamischen Komponente (Filter, Formeln, Interaktionen) verfügbar sind.

Konfiguration des Visual Pickers

Wählen Sie die Visual Picker-Komponente auf der Leinwand aus, um auf ihre Eigenschaften im Eigenschaftenbereich (rechter Bereich) zuzugreifen.

Grundlegende Eigenschaften

Diese Eigenschaften steuern die grundlegenden Daten und Bezeichnungen des Visual Pickers.

• API-Name: (Text) Eine eindeutige Kennung für diese Komponenteninstanz (z. B. ProductCategoryPicker, PriorityPicker).

• Bezeichnung: (Text) Die Textbezeichnung, die über oder neben dem Visual Picker angezeigt wird. Beispiel: "Wählen Sie eine Kategorie:", "Wählen Sie Ihre Interessen:".

• Feldhilfetext: (Text, optional) Hilfetext, der neben der Bezeichnung angezeigt wird.

• Wert: (Text oder Sammlung - äußerst wichtig) Diese Eigenschaft hält den/die Wert(e) der aktuell ausgewählten(n) Elemente.

  • Einzelauswahl (Radio-Typ): Binden Sie dies an eine Text-Variable. Die Variable enthält den Wert des ausgewählten Elements.

  • Mehrfachauswahl (Checkbox-Typ): Binden Sie dies an eine Sammlungsvariable (typischerweise vom Typ Text). Die Variable enthält eine Liste der Werteigenschaften der ausgewählten Elemente.

• Platzhalter: Der Platzhalter wird angezeigt, wenn keine Option ausgewählt ist.

Konfiguration der Datenquelle

• Datenquelle: Wählen Sie, wie die Optionen des Visual Pickers befüllt werden:

  • Manuell: Sie geben die Optionen manuell (Bezeichnung, Wert, Bild/Symbol usw.) direkt in den Eigenschaften der Komponente ein. Geeignet für kleine, statische Optionssätze.

  • Variable: Verwenden Sie eine Variable (typischerweise eine Sammlungsvariable), um die Optionen zu definieren. Dies ermöglicht dynamischere Optionen.

  • Abfrage: Verwenden Sie eine Avonni-Abfrage-Datenquelle, um Optionen aus einem Salesforce-Objekt abzurufen.

  • Picklist: Verwenden Sie eine Avonni-Picklist-Datenquelle, um Optionen aus einem Salesforce-Picklist-Feld zu befüllen.

• Elemente/Optionen: Die verfügbaren Einstellungen in diesem Abschnitt hängen von der Datenquelle ab.

  • Manuelle Datenquelle: Wenn Sie "Manuell" als Datenquelle ausgewählt haben: Fügen Sie Optionen hinzu. Sie können Werte wie Bezeichnung, Wert, Bild oder Symbol hinzufügen.

  • Datenzuordnungen (für Variable-, Abfrage- und Picklist-Datenquellen): Wenn Sie eine Variable-, Abfrage- oder Picklist-Datenquelle wählen:

    • Bezeichnung: Ordnen Sie das Feld Ihrer Datenquelle zu, das den anzuzeigenden Text für jede Option enthält (z. B. Name für ein Konto, ProductName für ein Produkt).

    • Wert: Ordnen Sie das Feld zu, das die eindeutige Kennung jeder Option enthält (z. B. Id für einen Salesforce-Datensatz). Dies wird im Value-Feld gespeichert, wenn der Benutzer auswählt.

    • Beschreibung: (Optional) Ordnen Sie ein Feld zu, um zusätzlichen Text unterhalb der Bezeichnung anzuzeigen.

    • Bildquelle/Symbol: (Optional) Ordnen Sie ein Feld zu, um für jede Option ein Bild oder Symbol anzuzeigen.

Verhalten und Erscheinungsbild

• Typ: (Text - Auswahl aus Optionen) Bestimmt, ob der Benutzer eine oder mehrere Optionen auswählen kann:

  • Radio: Erlaubt nur eine Einzelauswahl (wie Radiobuttons).

  • Checkbox: Erlaubt Mehrfachauswahlen (wie Kontrollkästchen).

• Auswahlbereich (Nur Checkbox-Typ): Wenn der Typ Checkbox ist, können Sie festlegen:

  • Min: Die minimale Anzahl an Optionen, die der Benutzer auswählen muss.

  • Max: Die maximale Anzahl an Optionen, die der Benutzer auswählen kann.

• Seitenverhältnis: (Text - Auswahl aus Optionen) Steuert das Seitenverhältnis (Form) der visuellen Elemente. Beispiele: 1:1 (quadratisch), 2:3 (höheres Rechteck), 16:9 (Breitbild). Dies beeinflusst, wie Bilder/Symbole angezeigt werden.

• Variante: (Text - Auswahl aus Optionen) Steuert den visuellen Stil der ausgewählten Elemente:

  • Nicht abdeckbar: Ein dezenter visueller Indikator (z. B. eine Umrandung oder ein Häkchen) wird für ausgewählte Elemente angezeigt.

  • Abdeckbar: Ein auffälligeren visuellen Indikator (z. B. eine Hintergrundfarbfüllung) wird für ausgewählte Elemente angezeigt.

Allgemeine Komponenten-Eigenschaften

• Deaktiviert: (Boolean - Kontrollkästchen) Wenn aktiviert, ist der Visual Picker deaktiviert und der Benutzer kann nicht mit ihm interagieren.

• Schreibgeschützt: (Boolean - Kontrollkästchen) Wenn aktiviert, kann der Benutzer die Optionen sehen, aber die Auswahl nicht ändern.

• Erforderlich: (Boolean - Kontrollkästchen) Wenn aktiviert, muss der Benutzer eine Option auswählen.

Interaktionen

• Bei Änderung: Dies ist die primäre Interaktion für den Visual Picker. Sie wird bei jeder Änderung der Auswahl des Benutzers ausgelöst (Hinzufügen oder Entfernen einer Auswahl).

  • Anwendungsfälle:

    • Andere Komponenten basierend auf der Auswahl aktualisieren (z. B. eine Datentabelle filtern).

    • Variablenwerte setzen.

    • Flows ausführen.

    • Zu anderen Seiten navigieren.

  • Zugriff auf ausgewählte Werte:

    • !VisualPickerName.value: gibt einen einzelnen Wert oder eine Liste von Werten zurück.

Wesentliche Überlegungen

• Wahl der Datenquelle: Wählen Sie die Datenquelle (Manuell, Variable, Abfrage, Picklist), die am besten zu Ihren Anforderungen passt. Für dynamische Daten verwenden Sie Abfrage oder Picklist.

• Interaktionen: Erwägen Sie die Verwendung einer Bei-Änderung-Interaktion.

Zusammenfassung

Die Visual Picker-Komponente ist eine flexible und interaktive Komponente zur Auswahl von Optionen