Multi Step form

  
Hi,

I'd like to create multi step form as I have form with 70+ fields.
I'd like to get advice the best practice to do it in Outsystem.
Shall we create web block ? it wil be great if there is a video to wathc.

TIA.

Rgrds,
Setiaman
Hi lee, There is no direct control available for multistep form, what you can do is group your fields based on the steps and create different webblock for each step and show hide them based on what step you are. Regards -PJ-

I highly suggest you look at the Wizard block in SilkUI. They have what you need for a multi-step process and it works very nicely.


J.Ja

Pramod Jain wrote:
Hi lee, There is no direct control available for multistep form, what you can do is group your fields based on the steps and create different webblock for each step and show hide them based on what step you are. Regards -PJ-
 Thank you Pramod Jain.
I thought there is some magic way to do multi step form. I will need to try it out.
 
Justin James wrote:

I highly suggest you look at the Wizard block in SilkUI. They have what you need for a multi-step process and it works very nicely.

 

J.Ja

 Hi Justin James,

I drag the Wizard block into the webpage but I have no idea how to proceed.
Is there any video to watch or sample solution?
Thank you.

Cheers,
Setiaman Lee
 

Sateiaman -

I do not know if any video or samples, but it isn't hard to figure that out. You stick links to each step in the wizard (it can be 1 page using Ajax Submit, or separate pages if I remember right), and tell it what the current step is, and it takes care of the rest.

J.Ja

there is help with all these great patterns. I managed to use them by simply following the description text 

For example 'Wizard' Web Block Description:

"Used to split larger tasks into more manageable steps. Usually supported by explicit button navigation to move forward and backward.
 
Either use one of the Wizard patterns with pre-defined number of steps or use the generic Wizard and drag WizardStep's to its only placeholder. Inside each step, add a link to screen it should lead to. In smartphones, the wizard step labels are replaced with numbers."
Hi Setiaman,
Please check the below link for wizard:
http://labs.outsystems.net/londontheme/Wizard.aspx 
i have implemented the same in my project using css and hide/show the container.

Thanks,
Manish Jawla

Sateiaman please don't reinvent the wheel if you are thinking about it, you have paid for Outsystems so now use the Wizard block in SilkUI as Justin James pointed out. It will be supported and improved where as if you reinvent the wheel you might as well not be using low code.
Hi George, Agreed with you .if there is any existing component we should use that instead of reinventing it. Also we can put our suggestion any time to improve the component. Regards -PJ-
Hi All,

Thank you for answering for question. I figured it out, it works by just dropping the web page into the placeholder of the wizard step. In my mind I thought all the fields will be in one screen but not in this case. Each screen we need to save it to the database. Correct me if I am wrong. it means there are data travel back to server and refreshing the browser for the next step.
It is not bad anyway for the quick implementation of multi step form.

Cheers,
Setiaman Lee

Hi,

I have a form which has 5 sections where each section has a web block. I tried using wizard widget to navigate across various sections of my form but for that  I had to create individual screens for each of my web blocks in the form. Isn't there any way by which I could traverse across various sections of a single web screen using wizard widget?

Shashankit Thakur wrote:

Hi,

I have a form which has 5 sections where each section has a web block. I tried using wizard widget to navigate across various sections of my form but for that  I had to create individual screens for each of my web blocks in the form. Isn't there any way by which I could traverse across various sections of a single web screen using wizard widget?

You can do this by using a webblock in each step. Hide/show the webblock via current step


Daniël Kuhlmann wrote:

Shashankit Thakur wrote:

Hi,

I have a form which has 5 sections where each section has a web block. I tried using wizard widget to navigate across various sections of my form but for that  I had to create individual screens for each of my web blocks in the form. Isn't there any way by which I could traverse across various sections of a single web screen using wizard widget?

You can do this by using a webblock in each step. Hide/show the webblock via current step


Hi Daniël,

I tried using web block for each step but it didn't work out as each step requires a link to a page. Moreover, "Active Step" property  also didn't progress accordingly from step1 to step5. Can you share an oml so that I could understand how it can be worked out?


Hi Shashankit,

The link that you need to provide to WizardStep can be for the current screen. Your screen likely needs to receive an extra input parameter to specify what step the user is on, and you'd use that information to make sure the Wizard is displaying the correct current step, and to decide which web block to display.