function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Chris SalgadoChris Salgado 

Has anyone gotten the LinkedIn Hopscotch framework to work in Lightning?

TLDR:
  • document.getElementsByClass()[0] returns undefined.
    • My main question is at the bottom.

Requirement:
  • We are trying to make a guide/ tour to onboard new Users through our Customer Community portal.
    • Due to the complex process, it is not intuitive so we want to have a WalkMe like guide.

Background:
  • I found Salesforce uses Hopscotch in the Community Builder when you first use it - it shows you all the tools etc.
  1. I added the Hopscotch zip file as a Static Resource
  2. I load the CSS style and JS scripts to a custom Lightning Component using <ltng:require>
  3. I add the Component to the Community page through the Builder.
Problem:
  • Hopscotch's Tour object has a parameter called Target which takes the DOM Element to point the bubble at.
    • When I use document.getElementsByClassName() on a Custom Component's Elements or on a Salesforce Standard Element (like the Navigation Menu) it works the same, I get an HTML Collection but if I try to get the first record document.getElementsByClassName()[0] it works for Custom Component's Elements but for Standard Elements I get undefined.
 
  • I learned Lightning Locker Service prevents Lightning Components from reaching DOM Elements in differen Namespaces.
    • It still returns a Proxy Object and I am able to use that Proxy Object to get the Element of other Custom Components but for Standard Elements I get undefined.
THE BIG QUESTION:
  • Is there anyway to get the DOM Element of a Standard Salesforce Community Component?
NOTE: I saw a suggestion to drop the API Version to lower than 40.0 but I think Lightning Locker Service is important, I just want a way to work with it.