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]

I was finally able to get Bootstrap Tour to work on the Forms, it just required some tweaking on the UI Macro and a few trial-and-errors to get the Bootstrap Tour to begin working.

Take a look at the examples below:

[arjun_basnet]

HI Samvel,

I am having kind of same problem, bootstrap-tour 'prev' 'next 'end' button throws error when clicked, error says: 'Cannot read property '$element' of undefined ' and points to bootstrap tooltip.js added in heisenberg I tried changing the data role of buttons thought that it might have affected, but seems like you didn't have any navigation issues? or did you? How can I possibly solve this issue, any idea?

[samvel]

Hi Arjun,

As a matter of fact, I was able to resolve that issue.

On the CMS side, you can add the below text in bold and that does the trick:

steps: [

    {

  element: "#d-sysparm_search",

  title: "Title of my step0",

  content: "Content of my step0",

        placement: "bottom",

      onHidden: function(tour) {

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

  }

    },

    {

  element: ".desktop-social.top-nav-social",

  title: "Title of my step1",

  content: "Content of my step1",

        placement: "bottom",

onHidden: function(tour) {

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

  }

However, the above code does not work on the actual forms, instead for that I had to do the following:

• Navigate to the UI Script - bootstrap-tour.min and remove this: popover("destroy")

Now granted that fixes the problem to move from one element to the next; however, now it creates another problem where the tool-tip popover does not End. I haven't had a chance to revisit this new problem to figure out how to End the Tour popover since the "destroy" code in the bootstrap-tour.min is what actually Ends the tour.

Let me know if you find a way to End Tour since the above fix will only help with the "next" and "prev" buttons.

[arjun_basnet]

Hi Samvel,

I think problem is here,

This is code snippet from bootstrap github codebase for

bootstrap current Tooltip version is   '3.3.7'

Tooltips's destroy function

  Tooltip.prototype.destroy = function () {

                      var that = this

                      clearTimeout(this.timeout)

                      this.hide(function () {

                                          that.$element.off('.' + that.type).removeData('bs.' + that.type)

                                          if (that.$tip) {

                                                    that.$tip.detach()

                                          }

                                          that.$tip = null

                                          that.$arrow = null

                                          that.$viewport = null

                                          that.$element = null

                      })

  }

And here is same bootstrap Tooltip function I don't know weather modified by ServiceNow or just an old codebase

Tooltiip version '3.2.0'

Tooltip.prototype.destroy = function () {

                  clearTimeout(this.timeout)

                  this.hide().$element.off('.' + this.type).removeData('bs.' + this.type) // this is the line which throws error saying $element is not defined if you have noticed

}

I don't know what is the problem the code doesn't seem that much of different isn't it?

Here is what I did and it worked:

loaded new bootstrap library, loaded jQuery with noConlict option and it worked.