Introducing jQuery Fundamentals

Objective

After completing this lesson, you will be able to get a foundational understanding of jQuery concepts, including selectors, HTML basics, and element inspection techniques.

Overview

Welcome to the Introducing jQuery Fundamentals unit.

This unit will guide you through the fundamentals on how to identify your first jQuery selector.

You will learn the basics of site structure and how to inspect elements on the site.

In addition, you will learn how to identify an element via an ID and class in order to write a jQuery selector.

This unit is for WalkMe Builders hoping to learn the fundamentals of jQuery in order to implement it within their own WalkMe solutions.

Let's get started!

jQuery Selectors

JQuery selectors are used to locate elements in the HTML structure based on their characteristics such as id, class, type, attributes, or values of attributes. In this lesson we will learn when to use jQuery when implementing your WalkMe solution and look at some examples of how it is used.

When to use jQuery Selectors?

While the WalkMe element selector tool is capable of consistently capturing and detecting elements on a site, there may be instances where you would need to use jQuery for your WalkMe implementation. Some of those instances may include, but are not limited to:

  • Enhancing precision
  • Optimizing performance
  • Grabbing specific values

Some use cases of applying jQuery in relation to WalkMe are as follows:

Special Cases for Element Selectors

In certain scenarios, you may want to modify the precision of WalkMe's algorithm by using jQuery selectors to select On Screen Elements. These cases include:

  • Selecting complex elements with low element grade
  • Make a generic element selection (i.e. table/row or a set of different buttons)

The figure shows the special cases for element selectors.

The image shows the special cases for element selectors.

Creating Goals for Onboarding Tasks and Smart Walk-Thrus

Since Onboarding Tasks are constantly being tracked by WalkMe, it is recommended to track elements by jQuery rather than the On-Screen element selector in order to optimize your site's performance.

Using Dynamic Text

Dynamic Text allows you to customize text used by WalkMe for different features. Dynamic text is based on end-user information, and it allows you to personalize a ShoutOut or balloon with a user’s name, or even change text that’s auto-filled for a user using an automated process. JQuery selectors can be an excellent choice to grab a value from a user variable or text on the screen and incorporate it into a dynamic announcement.

The figure shows popup step "Interaction".

The image shows popup step Interaction.

Creating a Launcher or SmartTip with an Element Behavior Setting

When a Launcher or SmartTip is created with an Element Behavior setting enabled, it means WalkMe is constantly searching for that element.

This can potentially impact performance, especially if there are multiple Launchers or SmartTips with the setting enabled on the same page.

One way to combat performance issues is to use a well written jQuery selector to identify the Launcher's or SmartTip's element instead of the On-Screen Element selector.

The figure shows Test Launcher screen with Launcher option "Selected Element".

The image shows Test Launcher screen with Launcher option Selected Element.

HTML

HTML is a type of markup language that defines the structure and layout of a website. If we look at the image, all the code that you see on the right side helps create the website that you see on the left.

The figure shows the example of an HTML code.

The image is divided into two parts. The HTML code is shown on the right side, which helps create the website shown on the left side.

Breaking Down HTML

On the surface, viewing HTML can seem overwhelming. However, to put it in simple terms for this course, HTML is comprised of three basic components:

  1. Elements
  2. Attributes
  3. Values

To understand how these three components are formatted when viewing HTML, see the following visual aid.

The image shows a line in an HTML code.
  • Purple is the element type (the first word after the <).
  • Orange is the attribute of the element (the words that are followed by ="value").
  • Blue is the value of an attribute (the words between the quotes "").
  • Black is the text that the element can contain (any text between the element's open and close tags).

Reading HTML on a Site

Now that we've broken down the basic syntax of HTML, let's look at how to read the HTML.

The image shows a line in an HTML code.

Based on the the previous section, in this line of HTML we can identify the following:

  1. The element is ul.
  2. The ul element has two attributes: id andclass.
  3. The id attribute has the value "create-account."
  4. The class attribute has the values "nav" and "fl."

Note

Why does the class attribute have two values while the id attribute only has one?

An attribute can have multiple values if there is a space between the two values.

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn