Applying jQuery Techniques

Objective

After completing this lesson, you will be able to apply jQuery to identify an element in the Editor.

How to Use jQuery in the Editor?

Now that we've learned the basics of writing and testing jQuery selectors, we'll learn how to apply jQuery to identify an element for a SmartTip in the Editor.

Generally, this process has 4 steps:

  1. Identify/Inspect the element.
  2. Write the jQuery selector.
  3. Test the jQuery selector.
  4. Implement the jQuery selector in the Editor.

Let's review this process with an example scenario on the Eddie's Depot site.

Scenario

Recall from Builder I when we created a couple of Guidance SmartTips. Now the Eddie's Team is coming to us since they've pinpointed that their Enter a promo code SmartTip isn't being found consistently on the page.

To fix this, they'd like to instead use jQuery to identify the element.

Image shows My Cart.
Step 1 - Inspect the element
First, let's start by inspecting the Enter a promo code element. Go to the Eddie's Cart page, right click the element, then click Inspect.Image shows Inspect the Element step.
Step 2 - Write the jQuery selector

Now, we can see the element in the HTML.

The HTML that is highlighted and corresponds to the Enter a promo code element is:

<span id="coupon-label" data-hook="Coupon.ShowButtonText">Enter a promo code</span>

Based off what we've learned so far, we should identify the element using its id because ids are unique to the page and are quick for WalkMe to find from a performance perspective.

*jQuery selector revealed in the next step so you can test yourself*

Image shows Write the jQuery selector step.
Step 3 - Test your selector

The selector we've chosen to identify the element is #coupon-label(span#coupon-label also works!)

To make sure this selector is correct and unique to the page, we'll test our selector in the Console. Move to the Console tab and enter the following:

wmjQuery("id="coupon-label")

Then, press Enter.

If you've written a unique selector for the page, you should see length: 1 return in the results meaning only one element was found. In addition, when you hover the highlighted selector (as shown in the screenshot), the element's location will also highlight on the page.

Image shows Test your selector step.
Step 4 - Add the jQuery to the step

In the Editor, select the Enter a promo code SmartTip, then navigate to the Selected Element tab.

In the Define how to identify the element section, select JQuery selector. Then enter the selector into the field.

Click Done, then Save.

Image shows how to add the jQuery to the step.
Summary

Now that we've added a jQuery selector to identify the element, you can Play or Preview the step from the Editor to make sure the element is found consistently on the page.

When making changes to real content, you'll also want to Publish the updated content to your environment(s).

Hands-on Practice: Writing jQuery Selectors

Disclaimer

Instructions

Let's get ready to start writing some jQuery selectors for the KLAW team. Following is a guide on the different scenarios and specifics on the WalkMe elements they've come to you with.

This activity will utilize some of the content we built in Builder I.

jQuery Workbook

The KLAW team has a couple asks related to some content we've built for them previously. The next few steps will present a series of scenarios where you can utilize jQuery.

Step 1 - Department Feature ShoutOut

They would like the Department Feature ShoutOut text to include the user's name to make it more personalized.

The new text should read:

Hi [name] have you seen the new Department feature?

The figure shows a dashboard of the website.

The image shows a dashboard of the website.
Step 2 - Change Signature Launcher

The Change Signature Launcher hasn't been loading consistently, and they're wondering if anything can be done about it.

Watch the following video for a reminder on how to navigate to the Launcher location. Note that the video doesn't support the audio.

Summary

Now that you've finished writing your jQuery selectors for these scenarios, it's time to check your answers using the answer key!

Answer Key

Be sure to attempt a solution for the exercises before looking at the answers!

Department Feature ShoutOut

Possible jQuery selectors:

  • .profile-name span
  • span.profile-name span

You can find what text is being pulled from an element by adding .text() to the end of your wmjQuery console command like this:

wmjQuery(".profile-name span").text()

*Test both .profile-name and .profile-name span using the above method. You'll notice that including span at the end omits an extra space at the beginning and another at the end of the text extracted from the element.*

Change Signature Launcher

Possible jQuery selectors:

  • .close-editor-overlay
  • .btn.close-editor-overlay
  • button.close-editor-overlay
  • button.btn.close-editor-overlay

Any selector that uniquely identifies the Close button on the page. Your test should return length: 1.

Summary

Completing this unit was not an easy feat; we covered numerous topics in order to get a basic understanding of jQuery. In this unit, we learned:

  • When to use jQuery and how it is applied within WalkMe.
  • Basic HTML structure.
  • How to inspect an element.
  • How to identify elements using both id and class attributes, as well as location.
  • How to test your jQuery selectors.

Remember, mastering jQuery is a skill that comes with practice.

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn