jQuery doit être utilisé en cas de scenarios extrêmes uniquement
Nous vous recommandons d'utiliser jQuery le moins possible. Les applications Web changent en permanence et de petites mises à jour de l'interface utilisateur et de la structure de la page peuvent briser n'importe quel jQuery utilisé.
La sélection d'éléments de WalkMe s'adapte aux changements de l'application sous-jacente sans avoir recours à jQuery.
Aperçu général
jQuery est une bibliothèque JavaScript utilisée pour identifier et manipuler les éléments HTML sur une page. Alors que WalkMe fournit une sélection d'éléments prête à l'emploi qui s'adapte aux modifications de l'interface utilisateur, les sélecteurs jQuery agissent comme une alternative puissante pour les cas limites.
Ces sélecteurs identifient des éléments en fonction de caractéristiques spécifiques, telles que l'ID, la classe, le type et les attributs.
Cas d'utilisation
Nous vous recommandons d'utiliser jQuery avec parcimonie pour maintenir la stabilité du build. Cependant, c'est un outil essentiel pour les tâches suivantes :
- Créer des Objectifs d'Onboarding : définissez des objectifs en fonction d'un élément à l'écran
- Configurer les lanceurs : saisissez des sélecteurs spécifiques dans l'onglet Élément sélectionné
- Saisir des valeurs : capturez des variables utilisateur ou du texte à l'écran pour les annonces dynamiques
- Vérifier les conditions de la page : utilisez le générateur de conditions pour analyser les attributs des éléments
Suivez ces étapes pour construire, tester et mettre en œuvre des sélecteurs personnalisés dans votre contenu WalkMe.
Opérateurs de générateur de conditions disponibles
Lorsque vous utilisez le type de règle jQuery dans le générateur de conditions, utilisez ces opérateurs pour définir votre logique :
- Vrai : au moins un élément a été trouvé
- Non : aucun élément n'a été trouvé
- Visible : l'élément est actuellement visible sur la page
- Le texte est / n'est pas : le texte de l'élément correspond ou ne correspond pas à votre entrée
- Remarque : Lorsque le sélecteur renvoie plus d'un élément, le texte de tous les éléments est combiné en tant qu'élément unique
- Plus que / Moins que : la valeur est supérieure ou inférieure à un nombre entier
- Comme / Pas comme : signifie une syntaxe de texte compliquée
- La longueur est / n'est pas / supérieure / inférieure à : le nombre d'éléments renvoyés par la requête
- Trouvez la longueur exacte de la requête : wmjQuery(“element.value”).length
Remarque
L'Éditeur WalkMe prend en charge uniquement les sélecteurs écrits dans la syntaxe jQuery jusqu'à celle utilisée dans jQuery 1.8.3. Vous pouvez toutefois utiliser n'importe quelle version de jQuery à d'autres fins sur votre site web sans craindre d'un conflit avec la version WalkMe de jQuery (wmjQuery).
Nous vous recommandons d'utiliser également l'optimiseur de sélecteur jQuery de WalkMe.
Condition Builder
Common jQuery Selectors
Use these patterns to identify elements within your application:
- element: Locate a specific HTML element by its tag name
- element[attribute]: Locate an element that contains a specific attribute
- element[attribute][attribute]: Locate an element that matches multiple attributes simultaneously
- element[attribute="value"]: Locate an exact match for an attribute and its value
- element[attribute^="text"]: Locate an element where the attribute starts with specific text
- element[attribute*="text"]: Locate an element where the attribute contains specific text anywhere within the string
- element[attribute!="text"]: Locate an element that does not contain the specified attribute text
- element child-element: Locate a nested child element (the space indicates a parent-child relationship)
- element:checked: Locate the status of a checkbox or radio button
- [element]:visible: Verify if a specific element is currently visible on the page
- element:contains(Text): Locate an element based on the specific text string it contains
- element:eq(#): Locate a specific index in a list of results (note that the count starts at 0)
Cheat sheet jQuery
Pour plus d'astuces et d'exemples jQuery, veuillez vous référer à notre cheat sheet jQuery
Step 1: Build the selector
- Locate the element in the HTML by right-clicking it and selecting Inspect Element
- Identify unique characteristics like class, ID, or style
- Draft your selector using the syntax: Element → Selector → Value
- Example (ID): ul#create-account
- Example (Class): ul.nav
Créer jQuery à l'aide de vos données WalkMe
Vous pouvez désormais utiliser les données WalkMe existantes en faveur d'un sélecteur jQuery.
Cela peut être accompli en ajoutant « $ {wm-data-key}» au sélecteur souhaité. Par exemple : le sélecteur : [id=], aura le « ${key} » remplacé par les données WalkMe réelles et ressemblera à : [id=”value”].
Step 2: Test in the console
Note: You must have the Editor Extension enabled to use this method.
- Open your browser's Developer Tools and select the Console tab
- Type wmjQuery("your-selector-here") and press Enter
- Hover over the returned objects in the console to verify the correct element is highlighted on screen
Step 3: Implement in the editor
Once verified, you can apply your selector in several locations:
- Selected Element tab: Use for specific Step or Launcher identification
- Additional step triggers: Use to trigger steps on click or hover
- Rich Text Editor: Use to display Dynamic Text in balloons or Shoutouts
- Condition Builder: Select the jQuery Rule Type to build complex logic
To ensure the best user experience, compare the speed of your selectors:
- Type the following script into your console: var time1 = window.performance.now(); wmjQuery('selector'); var time2 = window.performance.now(); console.log(time2 - time1);
- Run the command several times to find the average execution time
- Select the version with the lowest average time
Conseil
Souvenez-vous que jQuery doit être utilisé avec parcimonie dans vos créations WalkMe et toujours en combinaison avec des conditions plus légères. Veuillez vous référer à l'article suivant pour plus d'informations : Meilleures pratiques WalkMe Performance
Technical Notes
- For sites using Shadow DOM you won't be able to run wmjQuery in the DevTools Console, you'll need to use this syntax instead:
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')
