How to create Modal Wizard?

Ionic Framework ionic-v3
1

Hello Ionites

In my project I need to navigate to a ‘Modal’ which actually will be a wizard of 3 screens.
By ‘Modal’ I don’t necessary mean the ionic component. It’s just that the user will have either to finish the wizard or cancel it, before being able to navigate back to main app.

My app is based on ‘Tabs’ template.
Any ideas on how to approach this?
I have tried to open a modal window and then ‘push’ the next wizard page, but it does not work correctly.

Anyone tried, created something similar?

Thank you
Costas

2

You could always try something with ion-slides.
I’ve seen a few people do a sign up form before, and this was the approach that they too, seemed to work pretty well.

3

THank you for your suggestion.

I tried the slides and they seem to work well, but there are a few minor things that do not fit ‘well’.

  1. For example, you can swipe from one slide to the other, but I would like to have a control of when to allow the user to do it (e.g. if not all necessary information completed, not to be able to slide to the next).

  2. By default it seems to align everything in center of screen. So to create a ‘normal’ look & feel page I think it needs some CSS tricks.

If someone had already tried the above and share their experience I would be grateful.

Thanks
Costas

P.S. Now that I’m thinking for (1), I could disable/enable the ‘allowSlideToNext’ option conditionally.

4

Which does not work by just changing the ‘options’ object. Need a way to force slides to ‘refresh’ so it takes the option change into account. Any ideas?

5

Hmmm, I think I found an alternative to ‘Slides’ and thought to share it…

I open a modal (Wizard Page 1), and then from within it I can open another modal (Wizard Page 2), and from that another modal (Wizard Page 3), and so on.

If I want to review to my previous page, I call ViewController.dismiss().
If I wan to close the Wizard altogether and return to my original page, I call
NavController.rootNav.popToRoo()

And voila,…
:slight_smile:

6

I’m looking at something like this: https://github.com/haideralishah/Ionic2Quiz and wrapping it into some kind of component/directive.

The idea is to have a simple wizard tool that has next/prev without having to create each page (especially if it should have a dynamic length depending on the user experience).

<ion-flow [flow]="flowObject" [result]="resultObject">...</ion-flow>

I would need a overall template (probably inside the tags) to indicate where content was and where the buttons would be located (as well as any additional content the developer wanted to add). Then I’m guessing I’d need to create events to be published/subscribed to and services to expose the flow to the main app.

I think the flowObject would need to have the list of buttons (actions, which pageflow is next, or a custom action), a template or url for the content, a title and description.