Erstellen Sie einen Zähler in UI Builder

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 3 Minuten Lesedauer

    • Erstellen Sie einen einfachen Zähler, indem Sie die stilisierte Textkomponente und zwei Schaltflächen zu einer Experience-Seite hinzufügen. Verwenden Sie einen Client-Statusparameter, um die Funktionalität zu implementieren, sodass die Anzahl erhöht oder verringert wird, wenn die Schaltflächen ausgewählt werden.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie Erstellen > Experiencewählen.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
    3. Erstellen Sie eine Seite in UI Builder oder öffnen Sie eine Seite.
    4. Fügen Sie ein Spaltenlayout hinzu, indem Sie in der Inhaltsstruktur unter Textkörper die Option + Inhalthinzufügen wählen.
    5. Wählen Sie auf der Registerkarte Layouts die Option Zwei Spaltenaus.
    6. Fügen Sie die erste Komponente hinzu, indem Sie in der Inhaltsstruktur unter Spalte 1 die Option + Inhalt hinzufügenwählen.

      Inhaltsstruktur mit schwarzen Pfeil auf Plus – Komponente unter Spalte eins hinzufügen.

      1. Geben Sie in der Suchestyein.
      2. Wählen Sie die Komponente Stilisierter Text aus.

        Toolbox mit schwarzen Pfeilen, die auf das Suchfeld und die stilisierte Textkomponente zeigen.

      3. Wählen Sie im Konfigurationsbereich Keines - Komponente manuell konfigurieren aus.

        Konfigurieren Sie den Bereich mit dem schwarzen Pfeil, der auf die Option „Keine“ zeigt.

    7. Fügen Sie die zweite Komponente hinzu, indem Sie in der Inhaltsstruktur unter Spalte 2 die Option + Inhalt hinzufügenwählen.
      1. Geben Sie in Suchedie Schaltflächeein.
      2. Wählen Sie Symbolschaltfläche.

        Toolbox mit schwarzen Pfeilen, die auf das Suchfeld und die Schaltflächenkomponente zeigen.

      3. Wählen Sie im Konfigurationsbereich Keines - Komponente manuell konfigurieren aus.
      4. WählenSie unter Symbol die Option Quadratpfeil ausfüllenaus.

        Konfigurieren Sie den Bereich mit schwarzen Pfeilen, die auf das Symbolfeld, die Suchleiste und das Ausfüllsymbol mit dem Pfeil nach oben zeigen.

    8. Fügen Sie die dritte Komponente hinzu, indem Sie in der Inhaltsstruktur auf Schaltflächensymbol 1 zeigen, das Menüsymbol auswählen und Hinzufügen nachauswählen.

      Inhaltsstruktur mit schwarzen Pfeilen, die auf Schaltflächensymbol 1 Menüsymbol und die Option „Nach hinzufügen“ im Popup-Menü zeigen.

      1. Geben Sie in Suchewie im vorherigen Schritt die Schaltfläche ein.
      2. Wählen Sie Schaltflächensymbol aus, wie Sie es im vorherigen Schritt getan haben.
      3. Wählen Sie im Konfigurationsbereich Keine - Komponente manuell konfigurieren aus, wie Sie es im vorherigen Schritt getan haben.
      4. WählenSie unter Symbol ein anderes Symbol mit der Bezeichnung Quadratpfeil nach unten ausfüllenaus.

        Konfigurieren Sie den Bereich mit schwarzen Pfeilen, die auf das Symbolfeld, die Suchleiste und das Symbol zum Ausfüllen des Quadratpfeils zeigen.

    9. Wählen Sie Speichern.
      Die stilisierte Textkomponente und die beiden Symbolkomponenten der Schaltfläche werden gespeichert und in der Phase angezeigt.

      Die drei Komponenten werden in der Phase angezeigt.

    10. Fügen Sie einen Client-Statusparameter hinzu, indem Sie zu Daten und Skriptswechseln, auf Client-Statusparameterzeigen und das Symbol Neu hinzufügen (Plus) auswählen.
      1. Ändern Sie den Namen, indem Sie count eingeben.
      2. Ändern Sie den Typ in Zahl.
      3. Legen Sie den Anfangswert fest, indem Sie die Zahl 0 eingeben.
      4. Wählen Sie zum Schließen des Fensters X aus.

        Client-Statusparameter werden mit unterstrichenen Feldern für Name, Typ und Anfangswert und einem schwarzen Pfeil angezeigt, der auf das Symbol zum Schließen zeigt.

    11. Binden Sie die stilisierte Textkomponente an den Client-Statusparameter.
      1. Wählen Sie die stilisierte Textkomponente in der Phase aus.
      2. Zeigen Sie im Konfigurationsbereich auf das Feld Text, und wählen Sie das Symbol Daten binden oder Skripts verwenden aus.

        Konfigurieren Sie den Bereich mit schwarzen Pfeilen, die auf das Textfeld und das Symbol zum Binden von Daten zeigen.

      3. Wählen Sie auf der Registerkarte Datentypen die Option Clientstatusaus.
      4. Doppelklicken Sie auf die Anzahlpille.
      5. Wählen Sie Übernehmen.

        Popup-Fenster „Daten binden“ mit schwarzen Pfeilen, die auf die Registerkarte „Datentypen“, die Option „Client-Status“, die Anzahlpille und die Schaltfläche „Übernehmen“ zeigen.

        Das Feld Text ändert sich in Anzahl.

    12. Konfigurieren Sie nun die Schaltflächen, um die Anzahl zu erhöhen oder zu verringern.
      1. Wählen Sie in der Phase die oberste Schaltfläche aus.
      2. Wählen Sie im Konfigurationsbereich die Registerkarte Ereignisse aus.
      3. Wählen Sie + Ereignishandler hinzufügen aus.
      4. Wählen Sie unter Ereignishandler auf Seitenebenedie Option Client-Statusparameter aktualisierenaus.
      5. Wählen Sie unter Name des Client-Statusparametersdie Anzahlaus.
      6. Zeigen Sie auf das Feld Neuer Wert, und wählen Sie das Symbol Daten binden oder Skripts verwenden aus.

        Popup-Fenster für Ereignishandler mit schwarzen Pfeilen, die darauf zeigen, dass die Client-Statusparameteroption, das Namensfeld des Client-Statusparameters und das Symbol für neue Wertbindungsdaten aktualisiert werden.

      7. Wählen Sie auf der Registerkarte Datentypen die Option Clientstatusaus.
      8. Doppelklicken Sie auf die Anzahlpille.
      9. Wählen Sie die Registerkarte Formeln.
      10. Wählen Sie in der Liste Mathaus.
      11. Doppelklicken Sie auf die Pille HINZUFÜGEN.
      12. Entfernen Sie in der rechten Pille oben den Text, und geben Sie 1ein.

        Popup-Fenster „Daten an neuen Wert binden“ mit schwarzen Pfeil, der auf die zweite Pille oben zeigt.

      13. Wählen Sie Übernehmen.
      14. Wählen Sie Hinzufügen.
    13. Konfigurieren Sie nun die zweite Schaltfläche, indem Sie dem gleichen Prozess folgen, den Sie für die erste Schaltfläche verwendet haben, wählen Sie jedoch die Pille SUB anstelle der Pille HINZUFÜGEN aus.
      1. Wählen Sie in der Phase die unterste Schaltfläche aus.
      2. Wählen Sie im Konfigurationsbereich die Registerkarte Ereignisse aus.
      3. Wählen Sie + Ereignishandler hinzufügen aus.
      4. Wählen Sie unter Ereignishandler auf Seitenebenedie Option Client-Statusparameter aktualisierenaus.
      5. Wählen Sie unter Name des Client-Statusparametersdie Anzahlaus.
      6. Zeigen Sie auf das Feld Neuer Wert, und wählen Sie das Symbol Daten binden oder Skripts verwenden aus.
      7. Wählen Sie auf der Registerkarte Datentypen die Option Clientstatusaus.
      8. Doppelklicken Sie auf die Anzahlpille.
      9. Wählen Sie die Registerkarte Formeln.
      10. Wählen Sie in der Liste Mathaus.
      11. Doppelklicken Sie auf die Pille SUB.
      12. Entfernen Sie in der rechten Pille oben den Text, und geben Sie 1ein.
      13. Wählen Sie Übernehmen.
      14. Wählen Sie Hinzufügen.
    14. Testen Sie den Zähler, indem Sie Vorschauwählen.
    15. Wählen Sie die Nach-oben-Taste, um die Anzahl zu erhöhen, und die Nach-unten-Taste, um die Anzahl zu verringern.

      Vorschaufenster mit schwarzen Pfeilen, die auf die Aufwärtspfeil-Schaltfläche und die Abwärtspfeil-Schaltfläche zeigen.

    Ergebnisse

    Sie haben eine Schaltflächenkomponente hinzugefügt, um die Anzahl um eins zu erhöhen, und eine weitere Schaltflächenkomponente, um die Anzahl um eins zu verringern. Sie haben die stilisierte Textkomponente hinzugefügt, um die Zunahme und Abnahme der Anzahl anzuzeigen.

    Detaillierte technische Informationen zur Schaltflächenkomponente finden Sie unter Schaltflächenübersicht und API.

    Ausführliche technische Informationen zur stilisierten Textkomponente finden Sie unter Übersichtüber stilisierten Text.