Implementing "Bootstrap Tour" on Forms

[samvel]

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.

[samvel]

Hi Arjun,

Thanks for the info, it was very useful.

I'm assuming when you state Bootstrap library, that you are referring to the bootstrap-tour.js (v0.11.0)? Currently I'm using bootstrap-tour.js (v.0.10.2). I will try the new bootstrap-tour.js version to see whether this problem gets eliminated.

Please confirm the bootstrap Tooltip version '3.3.7' you are referring to is the same file as bootstrap-tour.js (v0.11.0)?

[arjun_basnet]

Hi Samvel,

yes indeed bootstrap-tour I am using is version is v0.11.0.

[samvel]

Hi Arjun,

I'm still surprised how you were able to get it to work. I'm still having no luck in getting the element flow to work, even after loading bootstrap v3.3.7 (includes tooltip v3.3.7), bootstrap-tour v0.11.0, and jQuery v1.12.4 with noConlict mode (affected the UI load so did not use this mode).

Bottom line, the only way using my current versions of bootstrap v3.3.5 and jquery v1.11.1 is to remove popover("destroy") from bootstrap-tour.min v0.10.2 and that works and I can flow through the elements, except I cannot end the popover.

Let me know if I missed something. Also, we can have a quick call to demo both of our designs if you'd like.

Thanks,

Samvel

[arjun_basnet · Accepted solution]

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.

[samvel]

Arjun,

jQuery.noConflict(true) did the trick! I ended up using my current versions of jQuery v1.11.1, Bootstrap v3.3.5, and bootstrap-tour - v0.10.2 - it - it works great! Again, no need to use the latest Bootstrap, jQuery or Bootstrap Tour - at this point, once there is no jQuery conflict all versions seem to work. Since our CMS uses the above Bootstrap and jQuery versions, I cannot just update them without regression testing of other functionality on the site.

Although for my current versions, since the Bootstrap tour bug is there, I ended up using the below to correct the element flow for the elements from disappearing:

onHidden: function(tour) {

  jQuery(tour.getStep(tour._current).element).show();

  }

Here is what I found, when I use the latest versions of jQuery and Bootstrap (using the workaround code above or not) the elements disappear once you click "Next" or "End". But when I use my current versions stated on the top, elements disappear if I don't use the workaround code; hence, when I use it then it works great.