Has anyone built a wizard like app or is there a good template I should check out? I’m wanting to walk my users through various changes, 10 API calls or so. Is that best done through 1 app and collapsing/disabling containers or is it better to traverse through multiple apps?
I used tab containers but removed the tabs on the top.
1 Like
Amanda’s approach could be nice, since you can change the active tab with JS. Is the wizard always linear or is it more of a decision tree kind of thing?
Yeah, tabs sound like they might work. It’s linear for the most part. Some questions may have decisions. I guess I’m not far enough along to make that call. I’m currently collapsing the api call container and expanding a container with the data returned from the api query. Then using a button to Continue to a new page with urlparams set query data if needed. Rinse and repeat. It works alright.
I’ll give tabs a try as well.
If each section is very complex, or of varying size, I slightly prefer putting them inside containers and collapsing. If they are all similar or relatively simple tabs feel a little cleaner to me. Really just personal preference though!
Is there another way to pass data between apps other than urlparams? Shared key/value store?
@matth You can save things to localstorage, which will be accessible until the cache is wiped. Or you could have a shared database resource or table if that works.
you can write to localStorage in JS using localStorage.setValue(“key”,value), then access that with localStorage.key
Thank you. If I wanted to use a shared db/api resource how could I keep track of a user’s retool session? Is that session data accessible? For example, if I have multiple users using the same app concurrently and I want to store the states of that app with a unique identifier of each user.
There is the Audit Log which shows all query activity by user, but if you wanted to track anything that isn’t built into that I would probably build a separate table/db that certain actions you define trigger queries to log activities in. When multiple users are concurrent, you would have timestamps, indendentifiers, and whatever information you would need to make decisions.
@matth A note on the audit log: the data there wouldn’t be accessible unless you are on an enterprise/on premise deployment.
ah, ok. I need to get a bit further along before I can commit to another license.
No problem, just something i realized after suggesting it
I have found that the only way to pass data between apps is urlParams and localStorage key/value. However the “icky” thing about the local storage is that once you start using it to pass things around, you kind of have to manage it between the apps in regards to clearing it and starting new in certain scenarios. I had to write a javascript method in preloaded library that sets up all the variables i could be expecting (default values) as well as clearing them.
My "wizard" is non-linear and decision tree based. So there are a lot of queries to manage flipping to whichever tab (read step) in the wizard based on the input. It's quite error prone right now.... 
@amanda-panda Yeah the good and bad thing about localstorage is that it will be the same key/values in all your apps until you clear it. It does take some planning about which apps share what data, and if the ecosystem of apps is large it can be neater to just have it read and write to a database.
Is there any plans to have each step able to run it’s own query? For my purpose, a query1 needs to run after step 1, and then for step 2, it should be a separate query.
Hi @snapcom!
As an update to this thread for @amanda-panda and @matth, we recently released a beta Wizard component for this specific purpose. It’s still being tested so any feedback on the features there are appreciated!
Giving each step it’s own triggering option could be useful, and I’ll bring it up in the internal discussions about the component. The only option at the moment would be to use a Run JS Code query as the On step change query, and then route using JS logic to .trigger() different queries depending on wizardName.currentStep and wizardName.steps.