nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Opening tutorial for webapp

MathewSuran

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?

Vind meer berichten getagd met

Accepted answers

All comments

Drew

I have not seen anything like that.

MathewSuran

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?

Drew

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

MathewSuran

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?

Drew

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

MathewSuran

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?

Drew

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.

MathewSuran

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

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

Drew

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)

MathewSuran

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.

MathewSuran

That looks pretty cool. Thanks for the resource!

Drew

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.