O jQuery deve ser usado apenas para casos excepcionais
Recomendamos usar o jQuery o mínimo possível. Os aplicativos da Web estão mudando constantemente e pequenas atualizações na interface do usuário e na estrutura da página podem quebrar qualquer jQuery usado.
A seleção de elementos pronta para uso do WalkMe se adapta às alterações no aplicativo subjacente sem o uso do jQuery.
Breve Visão Geral
jQuery é uma biblioteca JavaScript usada para identificar e manipular elementos HTML em uma página. Embora o WalkMe forneça uma seleção de elementos pronta para uso que se adapta às alterações da interface do usuário, os seletores jQuery atuam como uma alternativa poderosa para casos extremos.
Esses seletores identificam elementos com base em características específicas, como ID, Classe, Tipo e Atributos.
Casos de uso
Recomendamos usar o jQuery com moderação para manter a estabilidade da compilação. No entanto, é uma ferramenta vital para as seguintes tarefas:
- Criar Metas de Onboarding: definir metas com base em um elemento na tela
- Configurar lançadores: insira seletores específicos na guia Elemento Selecionado
- Capturar valores: capturar variáveis de usuário ou texto na tela para anúncios dinâmicos
- Verifique as condições da página: use o construtor de condições para analisar atributos dos elementos
Como funciona
Siga estas etapas para criar, testar e implementar seletores personalizados no seu conteúdo do WalkMe.
Operadores disponíveis do construtor de condições
Ao usar o tipo de regra jQuery no construtor de condições, use estes operadores para definir sua lógica:
- Verdadeiro: pelo menos um elemento foi encontrado
- Falso: nenhum elemento foi encontrado
- Visível: o elemento está visível no momento na página
- Texto É / Não É: o texto do elemento corresponde ou não corresponde à sua entrada
- Observação: Quando o seletor retorna mais de um elemento, o texto de todos os elementos é combinado como um elemento
- Maior que/Menor que: o valor está acima ou abaixo de um número inteiro
- Como/Não como: significa uma sintaxe de texto complicada
- O comprimento é / não é / maior que/menor que: o número de elementos retornados pela consulta
- Encontre o comprimento exato da consulta: wmjQuery(“element.value”).length
Observação
O Editor do WalkMe suporta apenas seletores escritos na sintaxe jQuery até a usada no jQuery 1.8.3. No entanto, você pode usar qualquer versão do jQuery para outros fins em seu site sem medo de conflito com a versão do jQuery do WalkMe (wmjQuery).
Recomendamos que você também utilize o jQuery Selector Optimizer do 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)
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
Crie jQuery usando seus dados do WalkMe
Agora você pode utilizar os dados existentes do WalkMe em favor de um seletor jQuery.
Isso pode ser feito adicionando '${wm-data-key}' ao seletor desejado. Por exemplo: o seletor: [id=], terá o '${key}' substituído pelos dados reais do WalkMe e terá a seguinte aparência: [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
Dica
Lembre-se de que o jQuery deve ser usado com moderação nas suas compilações do WalkMe e sempre em combinação com condições mais leves. Consulte o seguinte artigo para obter mais informações: Melhores práticas de desempenho do WalkMe
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')
