Dropdown-Skript-Komponente

Eine Dropdown-Liste ermöglicht es einem Agenten, eine Auswahl aus einer Liste zu treffen. Eine inaktive Dropdown-Liste zeigt den zuletzt ausgewählten Wert oder den Standardwert der Variablen an, an die sie gebunden ist.

  1. Klicken Sie auf das Symbol Dropdown in der Symbolleiste der Komponente

  2. Erweitern Sie die Eigenschaftsgruppe Advanced

  3. Wählen Sie in den Einstellungen von Value eine String-Variable.

    Hinweis: Zur Laufzeit speichert diese Variable die Auswahl des Agenten.
    Die Abbildung zeigt, wie man eine Variable mit einem Dropdown-Menü verknüpft
  4. Um eine Auswahl zu definieren, aus der der Agent wählen kann, klicken Sie unter Optionen auf Liste bearbeiten. Die Seite Editierliste wird angezeigt und bietet Werkzeuge zum Hinzufügen, Bearbeiten, Umordnen oder Entfernen von Listenelementen aus einer Dropdown-Liste. 

    Die Abbildung zeigt die Schaltfläche, die das Popover "Liste bearbeiten" öffnet

  5. Klicken Sie auf Neues Element hinzufügen.

    Die Abbildung zeigt das Popup-Fenster "Liste bearbeiten" in seinem Standardzustand, in dem keine Listenelemente hinzugefügt wurden.

  6. Geben Sie unter Werteinen eindeutigen Wert ein, der in der Variablen gespeichert werden soll, wenn dieses Element ausgewählt wird.

    Tipp: Werte und Beschriftungen für Dropdown-Elemente können interpolierte Variablen oder normalen Text enthalten. Hintergrundinformationen finden Sie unter Verwendung von geschweiften Klammern zur Anzeige von Variablenwerten und Eingebaute Variablen.

    Die Abbildung zeigt, wie man ein Dropdown-Element definiert, das den Wert einer interpolierten Variablen speichert.

  7. Geben Sie unter Anzeige den Text ein, den der Agent als Auswahlmöglichkeit sieht.

  8. Klicken Sie auf Hinzufügen.

  9. Wiederholen Sie die Schritte 4 bis 8, um der Liste weitere Elemente hinzuzufügen.

  10. Verwenden Sie die Pfeile nach oben und unten, um Elemente in der Liste zu verschieben.

  11. Wenn Sie fertig sind, schließen Sie die Liste. Zur Laufzeit zeigt die Dropdown-Liste dem Agenten diese Auswahlmöglichkeiten an. Wurde zuvor ein Wert ausgewählt, so wird dieser durch ein Kontrollkästchen angezeigt.
    droplist_example2

  12. Um eine dynamische Dropdown-Liste zu definieren, aus der der Agent auswählen kann, klicken Sie unter Optionen auf das Menü und wählen Variable.

  13. Wählen Sie in der Dropdown-Liste Werte Liste eine Variable aus oder erstellen Sie eine neue Variable.

  14. (Optional) Wählen Sie eine Aktion aus, die aufgerufen werden soll, wenn ein Element aus dieser Dropdown-Liste ausgewählt wird.

  15. Klicken Sie auf Keine Aktion ausgewählt unter Aktion ändern in den Komponenteneigenschaften. 

  16. Legen Sie alle anderen Eigenschaften dieser Komponente fest.


    Allgemein

    Value bindet eine Komponente an die ausgewählte Variable. Wenn Sie z. B. eine Texteingabekomponente an eine Variable binden, zeigt das Eingabefeld immer den Wert dieser Variable an und ignoriert jeden angegebenen Platzhaltertext. Die Variable wird automatisch mit dem vom Benutzer eingegebenen Text aktualisiert, vorbehaltlich der Validierungsverarbeitung.

    Andere Steuerelemente, z. B. Optionsfelder, verwenden die Einstellung Wert mit einem Text für den ausgewählten Wert. Wenn das Optionsfeld zur Laufzeit ausgewählt wird, wird sein "Selected Value Text" zum neuen Wert der Variablen. Auf diese Weise kann jede Optionsschaltfläche der gleichen Variablen einen anderen Wert zuweisen.

    Wenn ein Kalendersteuerelement an die Variable gebunden ist, wird ihr Wert auf das von dem Steuerelement ausgewählte Datum gesetzt. Da Variablen den Wert von visuellen Steuerelementen vorgeben und auch von diesen gesetzt werden können, ist die Bindung eine leistungsstarke und häufig verwendete Technik.

    Platzhaltertext zeigt dem Benutzer einen Hinweis an.

    beispiel-platzhalter-eigenschaft

    Bei einer Texteingabe wird ein Platzhaltertext angezeigt, bis der Benutzer eine Eingabe macht. Wenn der Benutzer den Inhalt eines Eingabefeldes löscht, wird der Platzhaltertext erneut angezeigt.

    beispiel-Platzhalter-angezeigt

    Bei einer Auswahlliste fordert ein Platzhaltertext den Benutzer auf, eine Auswahl zu treffen.

    Die Abbildung zeigt Platzhaltertext, bevor eine Auswahl aus einer Dropdown-Liste getroffen wird

    Der Platzhalter wird ersetzt, nachdem der Benutzer ein Element ausgewählt hat.

    platzhalter-ersetzt-durch-wahl

    Tipp: Manuell eingegebener Platzhaltertext wird ignoriert, wenn die Komponente an eine Variable gebunden ist. Wenn eine Variable ausgewählt ist, wird ihr Wert immer angezeigt.

    Diese Eigenschaft gilt nur für Dropdown-Komponenten. Sie fügt Listenelemente aus einer Dropdown-Liste hinzu oder entfernt sie.

    1. Standardmäßig hat ein Dropdown keine Elemente. Um Auswahlmöglichkeiten für Benutzer hinzuzufügen, erweitern Sie die Eigenschaftsgruppe Advanced

      dropdown-erweiterte-optionen-schaltfläche

    2. Klicken Sie auf Liste bearbeiten unter Optionen

    3. Klicken Sie auf Neues Element hinzufügen.

    4. Konfigurieren Sie für jedes Element den anzuzeigenden Text und einen Rückgabewert:

      new-droplist-item

      • Setzen Sie Wert auf eine eindeutige Zeichenfolge oder Zahl Wenn das Element ausgewählt wird, gibt der Wert an, welches Element der Benutzer ausgewählt hat. Der Wert kann optional durch eine Variable zugewiesen werden.

      • Stellen Sie Anzeige auf Text ein, den der Benutzer in der Dropdown-Liste auswählen kann Der Anzeigetext kann optional über eine Variable zugewiesen werden.

    5. Klicken Sie auf Hinzufügen , um das Element zu speichern

    6. Das Popover Editierliste fasst die hinzugefügten Elemente zusammen Sie können Elemente durch Klicken auf die Pfeile nach oben/unten neu anordnen, Elemente durch Klicken auf das Papierkorbsymbol löschen oder weitere Listenelemente zur Dropdown-Liste hinzufügen.

      einstellungen-dropdown-optionen-beispiel2

    7. Klicken Sie auf Add New Item , um weitere Artikel hinzuzufügen

    8. Wenn Sie fertig sind, schließen Sie das Popover, indem Sie auf das Schließfeld klicken.

    Legt fest, ob der Benutzer einen Wert eingeben oder auswählen muss. Der Standardwert ist False, was bedeutet, dass die Benutzerinteraktion optional ist.

    Die Benutzeroberfläche zeigt visuell an, ob Benutzereingaben optional sind. 

    Optionale Eingaben sind durch ein Etikett unter der Komponente gekennzeichnet:

    Layout

    Konfiguriert die Breite auf eine feste Größe, die je nach Bedarf wächst, um den Inhalt anzuzeigen oder so viel Platz wie möglich im Verhältnis zu anderen Komponenten zu beanspruchen, wobei eine Gewichtung die Größenanpassung beeinflusst.

    Einstellung Beschreibung
    Skript-Layout Automatische Größenanpassung Die automatische Größenanpassung konfiguriert die Komponente so, dass sie entsprechend ihrem Inhalt verkleinert oder vergrößert wird. So kann beispielsweise die Breite eines Etiketts je nach der darin enthaltenen Textmenge zunehmen.
    einstellungen-grösse-stretch

    Die Streckung ermöglicht es einer Komponente, im Verhältnis zu anderen Komponenten so viel Platz wie möglich zu beanspruchen, wobei die Größenanpassung durch Gewichtung beeinflusst wird.

    Wenn zwei Komponenten beide auf Streckung eingestellt sind, werden ihnen standardmäßig jeweils 50 % des verbleibenden Platzes zugewiesen. Dieser Anteil kann durch Änderung des Gewichtswertes angepasst werden.

    Wenn Sie z. B. für eine Komponente eine Gewichtung von 200 und für die andere eine Gewichtung von 100 festlegen, nimmt die erste Komponente zwei Drittel des verbleibenden Platzes ein, während die andere Komponente nur ein Drittel einnimmt. Das erste Bauteil erscheint doppelt so groß wie das andere, da sein Gewicht doppelt so groß ist wie das des zweiten Bauteils.

    Skript Layout-Pixel Legt eine feste Größe in Pixeln fest. Sie können einen ganzzahligen Wert in das Feld eingeben oder die Pfeile nach oben oder unten verwenden, um die Größe zu erhöhen oder zu verringern. Diese Pfeile sind sichtbar, wenn die Komponente den Fokus hat.

    Konfiguriert die Höhe auf eine feste Größe, damit sie je nach Bedarf wächst, um den Inhalt anzuzeigen, oder um so viel Platz wie möglich im Verhältnis zu anderen Komponenten zu beanspruchen, wobei eine Gewichtung die Größenanpassung beeinflusst.

    Einstellung Beschreibung
    Skript Layout Automatische Größenanpassung Höhe Die automatische Größenanpassung konfiguriert die Komponente so, dass sie entsprechend ihrem Inhalt verkleinert oder vergrößert wird.
    Skript Layout Pixel Höhe Legt eine feste Größe in Pixeln fest. Sie können einen ganzzahligen Wert in das Feld eingeben oder die Pfeile nach oben oder unten verwenden, um die Größe zu erhöhen oder zu verringern. Diese Pfeile sind sichtbar, wenn die Komponente den Fokus hat.
    einstellungen-grösse-stretch

    Die Streckung ermöglicht es einer Komponente, im Verhältnis zu anderen Komponenten so viel Platz wie möglich zu beanspruchen, wobei die Größenanpassung durch Gewichtung beeinflusst wird.

    Wenn zwei Komponenten beide auf Streckung eingestellt sind, werden ihnen standardmäßig jeweils 50 % des verbleibenden Platzes zugewiesen. Dieser Anteil kann durch Änderung des Gewichtswertes angepasst werden.

    Wenn Sie z. B. für eine Komponente eine Gewichtung von 200 und für die andere eine Gewichtung von 100 festlegen, nimmt die erste Komponente zwei Drittel des verbleibenden Platzes ein, während die andere Komponente nur ein Drittel einnimmt. Das erste Bauteil erscheint doppelt so groß wie das andere, da sein Gewicht doppelt so groß ist wie das des zweiten Bauteils.

    Richtet eine Komponente relativ zu ihrem übergeordneten Container links, rechts oder mittig aus.

    Tipp: Eine Komponente kann nicht vertikal zentriert ausgerichtet werden, wenn die Höheneinstellung des übergeordneten Containers Auto Sizinglautet. Um dies zu korrigieren, setzen Sie die Höhe des übergeordneten Containers auf Stretch oder auf eine feste Höhe in Pixels
    Einstellung Beispiel
    ausrichten-links2 links-ausrichten-Beispiel2
    ausrichten-Zentrieren2 ausrichten-zentrieren-Beispiel2
    rechtsbündig2 rechts-ausrichten-Beispiel2
    ausrichten-starten align-start-example
    vertikal-zentriert ausrichten align-vertical-center-example
    ausrichten-vertikal-ende align-vertical-end-example

    Ränder legen den linken, rechten, oberen und unteren Abstand um einen Rahmen fest.

    Die Abbildung zeigt die Beziehung zwischen den Einstellungen für Rand, Umrandung und Auffüllung.

    1. Um optional alle Randwerte auf einmal zu aktualisieren, klicken Sie auf die Schaltfläche Alle einstellen für Rand im Eigenschaftenfenster

      bild der Schaltfläche "Alles einstellen

    2. Klicken Sie auf das Wertfeld für eine Spanne. In diesem Feld erscheint ein Drehschalter.

    3. Verwenden Sie den Drehknopf, um den Spielraum zu vergrößern oder zu verkleinern. Wenn Alle ausgewählt wurde, wird die Änderung auf alle Ränder angewendet

      einstellungen-margin-spinner

      Die Komponente wird sofort unter Verwendung ihrer neuen Randeinstellung neu positioniert.

    Legt die Sichtbarkeit einer Komponente auf der Grundlage des Wertes einer booleschen Variable (Wahr oder Falsch) fest.

    1. Klicken Sie auf die Eigenschaftsgruppe Layout Klicken Sie unter Sichtbar auf Variable auswählen.
    2. Wählen Sie eine Variable aus, oder erstellen Sie optional eine neue Ja/Nein-Variable und weisen Sie diese neue Variable der Eigenschaft Sichtbar zu
    3. Zur Laufzeit ist die Komponente sichtbar, wenn der Wert der Variablen True ist. Umgekehrt wird sie ausgeblendet, wenn der Wert der Variablen Falselautet.

    Erweitert

    Value bindet eine Komponente an die ausgewählte Variable. Wenn Sie z. B. eine Texteingabekomponente an eine Variable binden, zeigt das Eingabefeld immer den Wert dieser Variable an und ignoriert jeden angegebenen Platzhaltertext. Die Variable wird automatisch mit dem vom Benutzer eingegebenen Text aktualisiert, vorbehaltlich der Validierungsverarbeitung.

    Andere Steuerelemente, z. B. Optionsfelder, verwenden die Einstellung Wert mit einem Text für den ausgewählten Wert. Wenn das Optionsfeld zur Laufzeit ausgewählt wird, wird sein "Selected Value Text" zum neuen Wert der Variablen. Auf diese Weise kann jede Optionsschaltfläche der gleichen Variablen einen anderen Wert zuweisen.

    Wenn ein Kalendersteuerelement an die Variable gebunden ist, wird ihr Wert auf das von dem Steuerelement ausgewählte Datum gesetzt. Da Variablen den Wert von visuellen Steuerelementen vorgeben und auch von diesen gesetzt werden können, ist die Bindung eine leistungsstarke und häufig verwendete Technik.

    Diese Eigenschaft gilt nur für Dropdown-Komponenten. Sie fügt Listenelemente aus einer Dropdown-Liste hinzu oder entfernt sie.

    1. Standardmäßig hat ein Dropdown keine Elemente. Um Auswahlmöglichkeiten für Benutzer hinzuzufügen, erweitern Sie die Eigenschaftsgruppe Advanced

      dropdown-erweiterte-optionen-schaltfläche

    2. Klicken Sie auf Liste bearbeiten unter Optionen

    3. Klicken Sie auf Neues Element hinzufügen.

    4. Konfigurieren Sie für jedes Element den anzuzeigenden Text und einen Rückgabewert:

      new-droplist-item

      • Setzen Sie Wert auf eine eindeutige Zeichenfolge oder Zahl Wenn das Element ausgewählt wird, gibt der Wert an, welches Element der Benutzer ausgewählt hat. Der Wert kann optional durch eine Variable zugewiesen werden.

      • Stellen Sie Anzeige auf Text ein, den der Benutzer in der Dropdown-Liste auswählen kann Der Anzeigetext kann optional über eine Variable zugewiesen werden.

    5. Klicken Sie auf Hinzufügen , um das Element zu speichern

    6. Das Popover Editierliste fasst die hinzugefügten Elemente zusammen Sie können Elemente durch Klicken auf die Pfeile nach oben/unten neu anordnen, Elemente durch Klicken auf das Papierkorbsymbol löschen oder weitere Listenelemente zur Dropdown-Liste hinzufügen.

      einstellungen-dropdown-optionen-beispiel2

    7. Klicken Sie auf Add New Item , um weitere Artikel hinzuzufügen

    8. Wenn Sie fertig sind, schließen Sie das Popover, indem Sie auf das Schließfeld klicken.

    Legt fest, ob der Benutzer einen Wert eingeben oder auswählen muss. Der Standardwert ist False, was bedeutet, dass die Benutzerinteraktion optional ist.

    Die Benutzeroberfläche zeigt visuell an, ob Benutzereingaben optional sind. 

    Optionale Eingaben sind durch ein Etikett unter der Komponente gekennzeichnet:


    Alle Komponenten sind standardmäßig aktiviert. Die Disabled-Eigenschaft bindet eine True/False-Variable an eine Komponente, um sie auf der Grundlage des Laufzeitwertes der Variablen zu deaktivieren oder zu aktivieren.

      1. Um eine Wahr/Falsch-Variable zu erstellen, klicken Sie auf die Registerkarte Variablen

      2. Klicken Sie auf , um eine Variable hinzuzufügen.

        Die Abbildung zeigt die Schaltfläche zum Hinzufügen einer neuen Variable.

      3. Wählen Sie Wahr/Falsch als Datentyp

        Abbildung zeigt variable Datentypen

      4. Geben Sie in das Feld Name einen beschreibenden Namen ein.

        aktuell-aktivierte-Variable

      5. Setzen Sie den Standardwert auf True oder False

        • Ist die Variable True, so ist die Komponente deaktiviert.

        • Ist die Variable "False", so ist die Komponente aktiviert.

      6. Um die Variable zu speichern, klicken Sie auf Apply.
      7. Weisen Sie die Variable der Eigenschaft "Deaktiviert" zu. Unter Deaktiviert, klicken Sie auf Variable auswählen.

        deaktiviert-Eigenschaft-Einstellung

      8. Wählen Sie die Variable Wahr/Falsch.

        currently-enabled-variable-selected

    Um Ihre Arbeit zu testen, klicken Sie auf Vorschau.

    Die Eigenschaft Change Action ermöglicht es Ihnen, eine Aktion festzulegen, die ausgeführt wird, wenn der Zustand oder der Wert dieser Komponente geändert wird

    Sie können eine Scripter-Aktion, eine Outbound-Aktion oder eine benutzerdefinierte Aktion auswählen. Ausgehende Aktionen sind nur verfügbar, wenn die Eigenschaft Ausgehend aktiviert ist.