jQuery sollte nur für Edge Cases verwendet werden.
Wir empfehlen, jQuery so wenig wie möglich zu verwenden. Webanwendungen ändern sich ständig und kleine Updates der Benutzeroberfläche und des Seitenaufbaus können jQuery außer Kraft setzen.
Die integrierte Elementauswahl von WalkMe passt sich ohne die Verwendung von jQuery an Änderungen in der zugrunde liegenden Anwendung an.
Kurzübersicht
jQuery ist eine Javascript-Bibliothek, die zur Manipulation einer HTML-Seite verwendet werden kann. CSS-Selektoren ermöglichen es Ihnen, Elemente in der HTML-Struktur anhand ihrer Merkmale wie z. B. ID, Klasse, Typ, Attribute oder Attributwerte zu identifizieren.
Die häufigsten jQuery-Selektoren im WalkMe-Editor werden wie folgt verwendet:
- Onboarding-Ziele erstellen: Erstellen Sie Onboarding-Ziele basierend auf einem Bildschirmelement
- Selected Element Launchers: Fügen Sie den jQuery Selector in die Registerkarte Selected Element eines Launchers hinzu
- Werte erfassen: Erfassen Sie einen Wert aus einer Benutzervariablen oder einem Text auf dem Bildschirm, um ihn in eine dynamische Ankündigung einzubinden oder ihn in einer Regel zu verwenden.
- Seitenbedingungen überprüfen: Veranlassen Sie WalkMe an, die Attribute eines Elements auf dem Bildschirm zu analysieren, um sie als Regeltyp in der Rule Engine zu verwenden.
Funktionsweise
Finden Sie das Element im HTML, indem Sie mit der rechten Maustaste auf dieses klicken und „Inspect Element“ auswählen. Das Element wird auf dem Bildschirm und im Entwicklerbereich (Developer Panel) markiert. Identifizieren Sie die eindeutigen Merkmale des Elements (wie Ort, Klasse, ID und Stil), um Ihren jQuery-Selektor zu erstellen. Elemente können anhand ihrer Position oder Attribute (Klasse, ID und Stil) identifiziert werden.
🎓 Digital Adoption Institute
Schritt 1: Erstellen Sie den jQuery Selector
Die grundlegende Syntax für die Verwendung von jQuery-Elementen in WalkMe ist: Element – Selector – Value
Nach der Identifizierung des Elements erstellen Sie einen jQuery-Selektor, der spezifisch das anschaut, was Sie interessiert.
Nachstehend folgen einige Beispiele für jQuery-Selektoren:
- ul element with id create-account: ul#create-account.
- ul elements with class nav: ul.nav.
- ul elements with class nav and class fl type: ul.nav.fl.
Sehen Sie sich unten eine Liste der nützlichen jQuery Selectors an.
Erstellen Sie jQuery mit Ihren WalkMe-Daten
Sie können jetzt vorhandene WalkMe-Daten zugunsten eines jQuery-Selektors verwenden.
Dies kann erreicht werden, indem Sie dem gewünschten Selektor „${wm-data-key}“ hinzufügen. Zum Beispiel: Der Selektor: [id="${key}"], wird {key}das „$“ durch die tatsächlichen WalkMe-Daten ersetzt und sieht wie folgt aus: [id=”value”].
Schritt 2: Testen Sie Ihren Selector in der Konsole
- Geben Sie in der Befehlszeile im Entwickler-Bedienfeld wmjQuery(“”) mit Ihrem jQuery-Selektor zwischen den “” ein und drücken Sie die Eingabetaste.
- Hinweis: Sie können wmjQuery nur in einem Browser verwenden, wenn die Editor-Erweiterung aktiviert ist
- Wenn Ihre Abfrage den gewünschten Wert zurückgibt, funktioniert Ihr Selektor!
- Hinweis: Um die ausgewählten Elemente auf dem Bildschirm zu sehen, klicken Sie auf More…
- Bewegen Sie den Mauszeiger über die zurückgegebenen Objekte, um das hervorgehobene Element anzuzeigen.
Schritt 3: Verwenden Sie jQuery Selectors in WalkMe
Je nachdem, wie Sie das jQuery-Element verwenden möchten, kann jQuery in WalkMe in folgenden Bereichen eingesetzt werden:
- Verwenden Sie das jQuery-Element, um ein Element für einen Schritt oder Launcher über die Registerkarte „Selected Element“ (Ausgewähltes Element) im Optionsmenü zu identifizieren.
- Verwenden Sie das jQuery-Element, um den nächsten Schritt in einem Walk-Thru auszulösen, wenn Sie im Menü Zusätzliche Schritt-Auslöser angeklickt oder den Mauszeiger bewegt
Anmerkung
habenDie Verwendung eines nicht eindeutigen Selektors, um das Klicken oder den Mauszeiger auf mehrere Elemente gleichzeitig zu erkennen, funktioniert möglicherweise nicht wie erwartet.
- Verwenden Sie das jQuery-Element, um einen Wert auf dem Bildschirm zu erfassen und als dynamischen Text im Rich Text Editor in einer Schritt-Sprechblase oder einem ShoutOut zu verwenden.
- Verwenden Sie das jQuery-Element, um ein Ziel in der Registerkarte „Goal“ (Ziel) zu erstellen.
- Verwenden Sie den jQuery-Selektor in der Rule Engine als Regeltyp (ähnlich wie jQuery als Regeltyp für Bildschirmelemente verwendet wird).
Tipp
Denken Sie daran, dass jQuery in Ihren WalkMe-Builds sparsam und immer in Kombination mit leichteren Bedingungen verwendet werden sollte. Weitere Informationen finden Sie im folgenden Artikel: WalkMe Performance Best Practices
Verfügbare Rule Engine jQuery Operators:
- True: Bedeutet, dass mindestens ein Element gefunden wurde
- False: Bedeutet, dass keine Elemente gefunden wurden
- Visible: Bedeutet, dass das Element sichtbar ist
- Text Is/Is Not: Bedeutet, dass der Text der Texteingabe entspricht
- Hinweis: Wenn der Selector mehr als ein Element zurückgibt, wird der Text aller Elemente als ein Element zusammengefasst.
- Greater Than/Less Than: Bedeutet, dass der Wert über oder unter einer ganzen Zahl liegt
- Like/Not Like: Bedeutet eine komplizierte Textsyntax
- Length Is/Is Not/Greater Than/Less Than: Bedeutet gleich, größer oder kleiner als eine ganze Zahl
- Wird verwendet, um abzufragen, wie viele Elemente die Abfrage zurückgibt.
- Die genaue Abfragelänge können Sie in der Konsole herausfinden: wmjQuery("element.value").length
Anmerkung
Der Editor von WalkMe unterstützt nur Selektoren, die in der jQuery-Syntax bis zu der in jQuery 1.8.3 verwendeten Syntax geschrieben sind. Sie können jedoch jede Version von jQuery für andere Zwecke auf Ihrer Website verwenden, ohne einen Konflikt mit der WalkMe-Version von jQuery (wmjQuery) befürchten zu müssen.
Wir empfehlen, auch den jQuery Selector Optimizer von WalkMe zu verwenden.
Nützliche jQuery-Selektoren
| Abfrage |
Beschreibung |
| Element |
Abfragen eines Elements |
| element[attribute] |
Abfragen eines Attributs eines Elements |
| element[attribute][attribute] |
Abfragen mehrerer Attribute eines Elements |
| element[attribute="attribute value"] |
Abfragen eines Attributs eines Elements und dessen Wert |
| element[attribute^="text"] |
Abfragetext am Anfang eines Attributs |
| element[attribute*="text"] |
Abfragetext, der in einem Attribut enthalten ist |
| element[attribute!="text"] |
Abfragetext, der von einem Attribut ausgeschlossen ist |
| element child-element |
Abfragen des untergeordneten Elements eines Elements (Leerzeichen zeigt an, dass das erste Element das übergeordnete Element des zweiten ist) |
| element:checked |
Abfragen des Status eines Kontrollkästchens (markiert oder nicht markiert) |
| [element='']:visible |
Abfragen, ob ein Element sichtbar ist |
| element:contains(Text) |
Abfrageelement enthält Text |
| element:eq(#) |
Abfragen spezifischer Ergebnisse in Reihenfolge (Zählung beginnt bei 0) |
Testen Ihrer jQuery-Selektoren
Bei der Auswahl eines jQuery-Selektors ist es ratsam, mehrere zu vergleichen. Dadurch können Sie sicherstellen, dass Sie denjenigen auswählen, der die geringsten Auswirkungen auf die Leistung Ihrer Website/Anwendung hat. Führen Sie dazu die folgenden Schritte aus:
- Öffnen Sie die Entwicklertools Ihres Webbrowsers
- Gehen Sie zur Registerkarte „Dev Tools“ der Konsole
- Geben Sie Folgendes in die Konsole ein:
- var time1 = window.performance.now(); wmjQuery('<your jQuery selector>'); var time2 = window.performance.now(); console.log(time2 - time1);
- Klicken Sie auf Enter
- Führen Sie diesen Befehl mehrmals in der Konsole aus, um ungefähr die durchschnittliche Zeit zu sehen, die er benötigt.
- Führen Sie denselben Befehl mit einigen alternativen jQuery-Selektoren aus und wählen Sie denjenigen, der am wenigsten Zeit für die Ausführung benötigt.
Anmerkung
- Falls Shadow DOM-Support vorhanden ist, sollten Sie Shadow DOM-Elemente im Editor erfassen und JQuery zu deren Identifizierung verwenden können
- Sie werden wmjQuery aber nicht in der DevTools-Konsole ausführen können. Verwenden Sie stattdessen diese Syntax:
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')
jQuery in WalkMe Share
- jQuery-Elementauswahlen werden aufgrund der Bildschirmerfassungsinfrastruktur des Editors in WalkMe Share nicht korrekt angezeigt. Wenn das Bildschirmfoto aus dem Editor das Bild an WalkMe Share sendet, befindet sich das Element in der oberen linken Ecke des Bilds bei den Koordinaten 0x und 0y.
- WalkMe Share hat eine Funktion, die es Benutzer ermöglicht, den Ort des Elements auf dem Bildschirm für diesen Anwendungsfall anzupassen. Wenn diese Funktion verwendet wird und das Element so angepasst wird, dass es am richtigen Ort erscheint, wird das Bildschirmfoto im Editor aktualisiert, um die in WalkMe Share vorgenommene Änderung zu widerspiegeln.
- Wenn die Elementauswahl mit dem Algorithmus „Element finden“ oder „DeepUI“ erfolgt, kann die Bildschirminfrastruktur des Editors die X- und Y-Koordinaten des Elements bestimmen. In WalkMe Share wird das Element am richtigen Ort angezeigt.
