topic Re: Opening tutorial for webapp in ArcGIS JavaScript Maps SDK Questions

Opening tutorial for webapp

MathewSuran — Thu, 08 Sep 2016 13:32:16 GMT

Hello,

What is it called when there is a tutorial when you first open a webapp or webpage. Basically instructions highlighting what to do in a few steps? Are there other programs to build that in or is this done through javascript? Any resources anyone can direct me to?

Re: Opening tutorial for webapp

Drew — Thu, 08 Sep 2016 13:43:56 GMT

I call it a "Tour".
Here is a decent lib.
Intro.js - Step-by-step guide and feature introduction for your website

Re: Opening tutorial for webapp

MathewSuran — Thu, 08 Sep 2016 13:53:35 GMT

That looks pretty cool. Thanks for the resource!

Re: Opening tutorial for webapp

MathewSuran — Thu, 08 Sep 2016 15:32:24 GMT

I am having trouble getting this to work. I am getting this error: Uncaught TypeError: Cannot read property 'querySelectorAll' of null intro.js:130

I added the intro.js and introjs.css to my working directory. Added the stylesheets (css & js) to the body. Added the introJs().start(); script before the body. Then added data-step="1" data-intro="Hello step one!" to the query execute id. Am I missing a step?

Do you know if I am able to step through the webapp? For example, a chart is generated after the query is executed, which right now I am not able to show.

Re: Opening tutorial for webapp

Drew — Thu, 08 Sep 2016 15:39:33 GMT

without seeing it all its hard to determine what the issue is.

I would have to guess a timing issue.

Try setting a delay before it starts to test...

Sample

setTimeout(function ()
{
_createIntro();
}, 2000)

Re: Opening tutorial for webapp

MathewSuran — Thu, 08 Sep 2016 15:57:28 GMT

Should the introJs().start(); be before the arcgis api?

Unfortunately I cant share the whole app since the data is not public.

Re: Opening tutorial for webapp

Drew — Thu, 08 Sep 2016 16:01:24 GMT

Here is how I implemented it a while back..

this.appTour = introJs();
this.appTour.setOptions({
showStepNumbers: false,
exitOnOverlayClick: true,
steps: [
{
intro: "Welcome to my site"
},
{
element: "#myElementId",
intro: "Sample Text",
position: "bottom",
}
]
});
//START THE TOOL
this.appTour.start();

Re: Opening tutorial for webapp

MathewSuran — Thu, 08 Sep 2016 16:14:44 GMT

Ok, that makes more sense. Where did you plug that into your html?

Re: Opening tutorial for webapp

Drew — Thu, 08 Sep 2016 17:17:55 GMT

I have the code in a WAB widget. The elements it needs to attach to are already loaded.
Thats why I suggested the timer, it could add a delay... Try calling the code on a button click or something - That way all other elements are loaded . see if it works anyway.

Re: Opening tutorial for webapp

MathewSuran — Mon, 12 Sep 2016 17:56:46 GMT

Has anyone got intro.js to work in the regular arcgis js api? I am having trouble implementing it into my HTML. The instructions on their site say to include the steps within the html lines. This makes the code messy, imo, and not all located together in one place at the end with references to each id. I have tried both ways though and have not had much success. I keep getting a "multiple defined" error along with "introJs not defined".

I did get a different Tour called Joyride to work and it looks great! Only problem, which is a big problem, is I can't get it to recognize a button id and I can't get the previous button to appear on the tour.

I couldn't get bootstrap tour to work either.

Anyone have any other suggestions and examples of a workflow that they know works in the environment I am using?

Re: Opening tutorial for webapp

Drew — Mon, 12 Sep 2016 18:14:49 GMT

Matt,
If you can post some sample code of a working app with the error I can see if I can figure out what is happening and maybe provide a working sample back to you.

Drew

Re: Opening tutorial for webapp

MathewSuran — Mon, 12 Sep 2016 18:57:34 GMT

Ok, before I provide some code though, is there a way to provide a step, then have the user do that action which moves on to the next step?

Re: Opening tutorial for webapp

Drew — Mon, 12 Sep 2016 19:02:08 GMT

Not that I know of. It basically highlights the node and you provide a some text . Then the user can click next.... Etc..

Re: Opening tutorial for webapp

MathewSuran — Mon, 12 Sep 2016 19:05:03 GMT

That would be the ideal situation. I am using Joyride at the moment since I can get the most functionality out of it but it doesnt have what I mentioned above. Have you seen anything that has those capabilities?

Re: Opening tutorial for webapp

Drew — Mon, 12 Sep 2016 19:17:31 GMT

I have not seen anything like that.