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