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 rapide
jQuery est une bibliothèque Javascript qui peut être utilisée pour manipuler une page HTML. Les sélecteurs jQuery vous permettent d'identifier des éléments dans la structure HTML en fonction de leurs caractéristiques telles que l'ID, la classe, le type, les attributs ou les valeurs d'attributs.
Les sélecteurs jQuery les plus courants dans l'Éditeur WalkMe sont utilisés pour :
- Créer des Objectifs d'Onboarding : Créez des objectifs d'Onboarding basés sur un élément à l'écran
- Launchers d'élément sélectionné : Ajoutez le sélecteur jQuery dans l'onglet Élément sélectionné d'un Launcher
- Saisir des valeurs : Saisissez une valeur à partir d'une variable utilisateur ou d'un texte à l'écran à incorporer dans une annonce dynamique ou utilisez-la dans une règle.
- Vérifier les conditions de la page : Demandez à WalkMe d'analyser les attributs d'un élément à l'écran à utiliser en tant que type de règle dans le moteur de règles
Trouvez l'élément dans le HTML en cliquant avec le bouton droit sur l'élément et en sélectionnant Inspect Element. L'élément sera mis en valeur à l'écran et dans le panneau du développeur. Identifiez les caractéristiques uniques de l'élément (telles que l'emplacement, la classe, l'ID ou le style) afin de créer votre sélecteur jQuery. Les éléments peuvent être identifiés par leur emplacement ou leurs attributs (classe, ID et style).
🎓 Institut d'adoption numérique
Étape 1 : Créer le sélecteur jQuery
La syntaxe de base pour l'utilisation des éléments jQuery dans WalkMe est : Élément → Sélecteur → Valeur
Après avoir identifié l'élément, créez un sélecteur jQuery qui examinera spécifiquement ce qui vous intéresse.
Voici quelques exemples de sélecteurs jQuery :
- élément ul avec id create-account : ul#create-account.
- éléments ul avec la classe nav : ul.nav.
- éléments ul avec la classe nav et le type de classe fl : ul.nav.fl.
Voir une liste de sélecteurs jQuery utiles ci-dessous.
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="${key}"], aura le « ${key} » remplacé par les données WalkMe réelles et ressemblera à : [id=”value”].
Étape 2 : Tester votre sélecteur dans la console
- Tapez wmjQuery ('''') dans la ligne de commande dans le panneau de développement avec votre sélecteur jQuery entre les '''' et appuyez sur Entrée
- Remarque : vous pourrez uniquement utiliser wmjQuery dans un navigateur avec l'extension Éditeur activée
- Si votre requête renvoie la valeur désirée, votre sélecteur fonctionne !
- Remarque : pour voir les éléments sélectionnés à l'écran, cliquez sur Plus…
- Passez la souris sur les objets retournés pour voir l'élément surligné
Étape 3 : : Utilisez les sélecteurs jQuery dans WalKme
Selon la façon dont vous souhaitez utiliser l'élément jQuery, jQuery peut être utilisé dans WalkMe aux emplacements suivants :
- Utilisez l'élément jQuery pour identifier un élément d'une étape ou d'un Launcher à l'aide de l'onglet Élément sélectionné du menu Options
- Utilisez l'élément jQuery pour déclencher l'étape suivante dans un Walk-Thru lorsque vous cliquez ou passez la souris dans le menu Déclencheurs d'étape supplémentaire
Remarque
L'utilisation d'un sélecteur non unique pour détecter un clic ou un survol sur plusieurs éléments à la fois peut ne pas fonctionner comme prévu.
- Utilisez l'élément jQuery pour saisir une valeur à l'écran à utiliser comme texte dynamique dans l'éditeur de texte enrichi dans une bulle d'étape ou ShoutOut
- Utilisez l'élément jQuery pour construire un Goal (Objectif) dans l'onglet Goal
- Utilisez le sélecteur jQuery dans le moteur de règles en tant que type de règle (jQuery est utilisé de la même manière que le type de règle d'élément à l'écran)
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
Opérateurs jQuery du moteur de règles disponibles :
- Vrai : signifie qu'au moins un élément a été trouvé
- Faux : signifie qu'aucun élément n'a été trouvé
- Visible : signifie que l'élément est visible
- Le texte est / n'est pas : Signifie que le texte est égal à la saisie de texte
- 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 : signifie 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 à : Signifie égal ou inférieur à un nombre entier.
- Utilisé pour demander le nombre d'éléments renvoyés par la requête
- Découvrez la longueur exacte de la requête dans la console : wmjQuery(“element.value”).length
Remarque
L'Éditeur WalkMe prend en charge uniquement les sélecteurs écrits dans la syntaxe jQuery jusqu'à ce que l'on utilise 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.
Sélecteurs jQuery utiles
| Requêtes |
Description |
| Élément |
Demander un élément |
| element[attribute] |
Demander l'attribut d'un élément |
| element[attribute][attribute] |
Demander plusieurs attributs d'un élément |
| element[attribute="attribute value"] |
Demander l'attribut d'un élément et sa valeur |
| element[attribute^="text"] |
Texte de requête au début d'un attribut |
| element[attribute*="text"] |
Texte de requête contenu dans un attribut |
| element[attribute!="text"] |
Texte de requête exclu d'un attribut |
| element child-element |
Demander l'enfant d'un élément (l'espace indique que le premier élément est le parent du second) |
| element:checked |
Demander le statut d'une case à cocher (cochée ou non cochée) |
| [element='']:visible |
Demander si un élément est visible |
| element:contains(Text) |
L'élément de requête contient du texte |
| element:eq(#) |
Résultat spécifique de la requête dans l'ordre (le nombre commence à 0) |
Cheat sheet jQuery
Pour plus d'astuces et d'exemples jQuery, veuillez vous référer à notre cheat sheet jQuery
Tester vos sélecteurs jQuery
Lors du choix d'un sélecteur jQuery, il est sage d'en comparer quelques-uns pour vous assurer de choisir celui qui a le moins d'impact sur les performances de votre site Web / application. Pour ce faire, veuillez suivre ces étapes :
- Ouvrez les outils de développement de votre navigateur web
- Naviguez vers l'onglet console des outils de développement
- Tapez les éléments suivants dans la console :
- var time1 = window.performance.now(); wmjQuery('<your jQuery selector>'); var time2 = window.performance.now(); console.log(time2 - time1);
- Cliquez sur Entrée
- Exécutez cette commande plusieurs fois dans la console pour voir la moyenne approximative du temps nécessaire
- Exécutez cette même commande avec d'autres sélecteurs jQuery et choisissez celui qui prend le moins de temps à s'exécuter
Remarque
- Si le centre d'assistance du Shadow DOM est assuré, vous devriez alors pouvoir capturer les éléments Shadow DOM dans l'éditeur et utiliser jQuery pour les identifier
- Cependant, vous ne serez pas en mesure d'exécuter wmjQuery dans la console DevTools, vous devrez utiliser cette syntaxe à la place :
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')
jQuery dans WalkMe Share
- Les sélections d'éléments jQuery ne s'affichent pas correctement dans WalkMe Share à cause de l'infrastructure de capture d'écran de l'éditeur. Ainsi, lorsque la capture d'écran de l'éditeur envoie l'image à WalkMe Share, l'élément se trouve dans le coin supérieur gauche de l'image aux coordonnées 0x et 0y.
- WalkMe Share dispose d'une fonction qui permet aux utilisateurs d'ajuster l'emplacement des éléments à l'écran pour ce cas d'utilisation. Lorsque cette fonction est utilisée et que l'élément est ajusté pour apparaître au bon endroit, la capture d'écran dans l'éditeur est mise à jour pour refléter le changement effectué dans WalkMe Share.
- Lorsque la sélection de l'élément se fait à l'aide de l'algorithme de recherche d'élément ou de DeepUI, l'infrastructure de capture d'écran de l'éditeur est en mesure de déterminer les coordonnées X et Y de l'élément, de sorte que dans WalkMe Share, l'élément sera vu à l'emplacement correct.
