NodeRed 2.x Guided Tour Lib or Tool was used to showcase new features?

[karlyboy]

Hi,

Anyone know what tool or library was used on the intro of Note Red 2, that tags elements, and provides a spot light on them with information on what is new - sort of guided tour. I really liked this bit of polish on the update and was thinking of using something like this on another project I have. Anyone know what lib or tool was used to make it?

Kind regards all

K

[knolleary]

Hi @karlyboy

It's an entirely custom component I wrote for Node-RED.

There are quite a few libraries available that provide this type of thing. https://link.medium.com/gA7ijL3iIlb

But I ultimately decided we needed something a bit more Node-RED aware so it could integrate better with the editor. It could also reuse some of the existing UI components we had in the editor to provide a more consistent ux.

node-red/node-red/blob/master/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js

[karlyboy]

thanks this is really cool stuff, and well implemented! thanks Nick

[gazoscalvertos]

This is a brilliant feature.

I understand we can trigger this using RED.tourGuide.run("./tours/first-flow.js") as the first flow example. Is there any way to trigger this for first installs of custom components? I'd love to write a tour for one of mine.

[knolleary]

The only tour we've fully published is the welcome tour.

The first-flow tour slipped in by mistake, but isn't exposed anywhere yet.

We don't yet have a documented pattern for how contrib nodes could create their own tours, or how they would be exposed.

I don't think we would want them to trigger automatically the first time they are loaded in the editor - if a user installed multiple nodes with tours, they would all trigger at the same time when they next load the editor and it would get messy.

I was thinking we'd have a list of available tours in the Help sidebar... but there's more work to be done to make that happen.

[gazoscalvertos]

That makes sense and I'd love to see that added to the help sidebar. If you need anyone to help test then just hit me up.

Thanks Nick!

[gazoscalvertos]

For anyone interested, I've managed to work around this which might offer a better UX in certain circumstances. I've added a button to each custom node "Tour Guide" which triggers my tour RED.tourGuide.run("/resources/node-red-contrib-xrpl/tours/welcome.js"). The tour file is stored under a resources/tours directory at the root of the project folder. This could obviously be used to provided an interactive tutorial for each custom node which I'm considering but for now an overall tour will suffice.