Mixing Intro.js and WAB, live example

[#1]

Hi all, 

Just created an application that integrates Intro.js on Web App Builder.

Visit my github   

I build Esri widgets without any -economic- interest, if you find it useful for your projects, you can buy me a coffee  

https://ko-fi.com/adrisolid 

Don't hesitate to contact me if you need some custom developments: biotekgis@gmail.com

Cheers!

[DanielOchoa]

Your live example has a problem.

[DanielOchoa]

I meant to say it has a problem in Internet Explorer, but not Chrome.

[Adri2cPérez_Beneito]

Well, I have never used IE. There are a few code lines of ES6, so if you want to use IE, I recommend you use Babel.js: is a great tool that lets you transpile your ES6 code into ES5.

Best

A.

[James_001]

Hi Adri,

I am trying intro.js in my WAB 2.7. But some how it did not work with me. I follow the instruction on github page but somehow I got this error. I am using Chrome.

WidgetManager.js?wab_dv=2.7:536 fail to startup widget HeaderController. ReferenceError: Button is not defined
    at Object.IntroJS (http://MyComputer:3344/webappbuilder/apps/30/themes/JewelryBoxTheme/widgets/HeaderController/Widget.js?wab_dv=2.7:128:3)
    at Object.startup (http://MyComputer:3344/webappbuilder/apps/30/themes/JewelryBoxTheme/widgets/HeaderController/Widget.js?wab_dv=2.7:124:9)
    at Object.advice (https://jsdev.arcgis.com/3.23/init.js:119:313)
    at Object.c [as startup] (https://jsdev.arcgis.com/3.23/init.js:119:103)
    at Object.openWidget (http://MyComputer:3344/webappbuilder/apps/30/jimu.js/WidgetManager.js?wab_dv=2.7:534:18)
    at Object.<anonymous> (http://MyComputer:3344/webappbuilder/apps/30/jimu.js/layoutManagers/BaseLayoutManager.js?wab_dv=2.7:167:32)
    at https://jsdev.arcgis.com/3.23/init.js:63:337
    at h (https://jsdev.arcgis.com/3.23/init.js:107:277)
    at q (https://jsdev.arcgis.com/3.23/init.js:107:203)
    at d.resolve (https://jsdev.arcgis.com/3.23/init.js:109:280)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I really appreciate your help.

[Adri2cPérez_Beneito]

Hi Irfan,

First of all, you have to import the Dojo Button class, this way your app knows what is 'Button'. 

You can follow my example here. (line 37 and 42).

If you are going to use it with IE use this function (JS ES5): 

IntroJS: function(){
  new Button({
    label: "INTRO JS",
    style: "position:absolute;top:5px;left:400px;",
    onClick: function(){
      initIntro()
    }
 }, this.executeIntroJS).startup();
},

Best

A.

[Anonymous User]

Suggestion- make it a hidden widget that automatically opens. Second, a button to "never show again" like the Splash screen widget.  I will probably use this for our production property viewer (and credit you in comments and documentation of course, along with other folks like Robert and Jeremie here who I am integrating widgets from)- great work!!