Implementing "Bootstrap Tour" on Forms

samvel · ‎07-22-2016

Hi All,

Recently, I've created a tour mechanism on the CMS portal using Bootstrap Tour. The tour can be accessible on any page and uses the HTML elements to display a popover "Tooltip" as an interactive guide for end-users.

For example, there is a "Start Tour" button on a page and once the users clicks the button, the interactive tour guides the user through the various elements (menu, sections, dynamic blocks) defined in the tour.

The logic resides in a Dynamic Content block and works great on CMS pages.

Now, I'm trying to create the same experience on a Incident Form or any other form in the Helsinki platform. I've created a UI macro that includes the Tour logic and the js/css dependencies and have added it as a Formatter on the Form; however, I've tried everything in the logic, but it does not trigger on the UI form. I've also tried creating the same through a UI action calling a function from a UI script which called a UI macro that included the Tour logic and still no luck.

Does anyone have any ideas what may the root cause that the interactive popover "tooltips" are not starting on forms? Also, I've tested it on both UI15 and UI16 and no luck. Not sure if Heisenberg is conflicting with Bootstrap and causing the Bootstrap Tour styles not to work.

arjun_basnet · ‎08-28-2016

Hello there,

I am working with UI page so I am not exactly using standard ServiceNow form, all the components are custom.

One thing to note is there are already two version of jQuery in ServiceNow at the moment at least in Helsinki, those are accessed via $j (version: 1.11) and jQuery (version 1.8). ServiceNow's bootstrap plugin use by default 1.8 version of jQuery. And I believe bootstrap-tour is dependent on newer version of jQuery (not sure though). One thing that I have noticed is if two plugin of jQuery are dependent to each other and if you pass in different version of jQuery to those plugins they dont work, it thorws error. Perhaps this was the reason our bootstrap-tour wasn't working by default even though we had bootstrap and jQuery there.

So here is what I did,

I first load jQuery version 1.12 (version higher than 1.9 works fine), so then I load newer version of bootstrap (version 3.3.7) followed by bootstrap tour now both bootstrap and bootstrap tour are using jQuery version 1.12 but if I leave like this it doesn't work, globally jQuery belongs to version 1.12 still but funny thing is bootstrap-tour tries to call Tooltip plugin that is inside SevericeNow's Heisnberg again it crashes,

and if we include jQuery.noConflict(true) whose only function that I know is it restores jQuery to it's previous assignment, in my case to jQuery version 1.8 and bootstrap-tour works just fine. I have no clue how and why it works.

My suggestion is as you are working on ServiceNow's standard form with UI macro just include jQuery.noConflict(true) within script tag after you have loaded, bootstrap and bootstrap-tour and see if that helps.

View solution in original post

arjun_basnet · ‎08-29-2016

Samvel,

glad that it helped you found out solution too. Interesting why one gets a problem doing same thing and the other doesn't. In my case I didn't get any problem with new version, and I didn't have to use any workaround. I didn't test bootstrap-tour workaround with current ServiceNow's jQuery and bootstrap.

gokulsk · ‎03-26-2018

Hey Samvel,

Great job with the Bootstrap Tour. Just wanted to give a heads-up to you and the others who are looking for similar solutions.

You could check out other open-source solutions like:

Crumble
Intro.js
Joyride
Hopscotch

And if you are looking for a code-free commercial solution then you should check out, Whatfix. It is a fully fledged Product Adoption platform that can help with Onboarding, Training, In-app support, Change Management, etc., on ServiceNow.

It is much more sophisticated than SNOW's own Guided Tour Designer and can run over the platform without any interference.

Here's a snippet of Whatfix on ServiceNow:

amrutarajaramku · ‎07-05-2018

Hi gokulsk, Is Whatfix service is chargeable?