sformwizard | Extension | Yii Framework

SFormWizard is a wrapper for http://thecodemine.org

Features: Turn a normal form into a multi-step ajax form in no time. A bunch of events,options and methods (see link above).

Installation: unzip to protected/extensions/sformwizard

Make sure your form has an id (or other unique identifier)

Then, divide your normal form into steps by adding class="step" to any div AND give each div an unique id. this id can be anything. To use other elements then a div tag, please see http://thecodemine.org Leave the submit button outside of the steps Example:

...
<div class="step" id="Step1">
<div class="row">
 <p class="note">Fields with <span class="required">*</span> are required.</p>
 
 <?php echo $form->labelEx($model,'title'); ?>
 <?php echo $form->textField($model,'title',array('size'=>80,'maxlength'=>128)); ?>
 <?php echo $form->error($model,'title'); ?>
</div>
<div class="row">
 <?php echo $form->labelEx($model,'content'); ?>
 <?php echo CHtml::activeTextArea($model,'content',array('rows'=>10, 'cols'=>70)); ?>
 <p class="hint">You may use <a target="_blank" href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a>.</p>
 <?php echo $form->error($model,'content'); ?>
</div>
</div>
...

Minimum code:

<?php          
 $this->widget('ext.sformwizard.SFormWizard',array(
    'selector'=>"#post-form", //change this to the jquery selector for your form
    ));
 ?>

All options and their default values (see SFormWizard.php for description of each or visit http://thecodemine.org

<?php          
 $this->widget('ext.sformwizard.SFormWizard',array(
    'selector'=>"#post-form",
    'historyEnabled' =>"false",
    'validationEnabled' => "false",
    'validationOptions' => "undefined",
    'formPluginEnabled' => "false",
    'formOptions' => '{ reset: "true",}, success: function(data) {        alert("success"); }',
    'linkClass' =>".link",
    'submitStepClass' =>".submit_step",
    'back' => ":reset",
    'next' => ":submit",
    'textSubmit' => "Submit",
    'textNext' => "Next",
    'textBack' =>"Back",
    'remoteAjax' =>"undefined",
    'inAnimation' => "{opacity:'show'}",
    'outAnimation' => "{opacity:'hide'}",
    'inDuration' => 400,
    'outDuration' => 400,
    'easing' => "swing",
    'focusFirstInput' => "false",
    'disableInputFields' => "true",
    'disableUIStyles' => "false",
    'jsAfterStepShown'=>    '',
    ));
?>

A more complex but far from full featured example that uses ajax: For this we need to slightly modify out controller action. This is the how it should look in the blog demo (PostController). Note you can customize as much if you want if you understand the code.

public function actionCreate()
{
  $model=new Post;
 if(isset($_POST['Post']))
 { 
  $model->attributes=$_POST['Post'];
  if($model->save()){
  if(Yii::app()->request->isAjaxRequest){
   $comment=$this->newComment($model);
   $link = CHtml::link('Click here to see your new post','view?id='.$model->id);
   echo CJSON::encode($link);
   exit;
  }
  //if the form is submitted without ajax           
  $this->redirect(array('view','id'=>$model->id));
   }else{
     if(Yii::app()->request->isAjaxRequest){
      echo CJSON::encode("Error! Could not save the model");
     exit;
     }
    }
   }
   $this->render('create',array(
    'model'=>$model,
    ));
 }

Next: Add a couple of placeholder divs below your form

<div id="stepmessage"></div>
<div id="data"></div>

And then the widgetcall:

<?php              
  $this->widget('ext.sformwizard.SFormWizard',array(
   'selector'=>"#post-form",
   'historyEnabled' =>"true",
   'validationEnabled' => "true",
   'validationOptions' => "undefined",
   'formPluginEnabled' => "true",
   'formOptions' => '{
    success: function(data){$("#stepmessage").fadeTo(500,1,function(){    $("#stepmessage").html(data); })},
    beforeSubmit: function(data){
    $("#data").html("data sent to the server: " + $.param(data));
    },
    dataType: "json",
    resetForm: true
    }   ',
   'linkClass' =>".link",
   'submitStepClass' =>".submit_step",
   'back' => ":reset",
   'next' => ":submit",
   'textSubmit' => "Submit",
   'textNext' => "Next",
   'textBack' =>"Back",
   'remoteAjax' =>"undefined",
   'inAnimation' => "{opacity:'show'}",
   'outAnimation' => "{opacity:'hide'}",
   'inDuration' => 400,
   'outDuration' => 400,
   'easing' => "swing",
   'focusFirstInput' => "true",
   'disableInputFields' => "true",
   'disableUIStyles' => "false",
   'jsAfterStepShown'=> '
   /*   Available in data (data.steps ,data.settings etc):
    isBackNavigation - boolean
    settings - options object containing the options set for the wizard
    activatedSteps - list of activated steps (visited steps)
    isLastStep - boolean specifying whether the current step is a submit step
    isFirstStep - boolean
    previousStep - the id of the previously visited step
    currentStep - the id of the current step
    backButton
    nextButton
    steps - the steps of the wizard 
    firstStep - the id of the first step
   */
    $("#stepmessage").html("");
    $.each(data.activatedSteps, function(){
    $("#stepmessage").append(this+" - ");
   });
   var currentstepnumber = data.activatedSteps.length;                  
   $("#stepmessage").append("<br/>Step "+currentstepnumber+"/"+data.steps.length);',
   ));?>

Resources ¶

GITHUB REPO
Try out a demo
Forum thread
[The original plugin page] (http://thecodemine.org/)

Total 10 comments

#12113

SteveD at 2013/02/27 03:15pm

Fix for submit_step problem

Out of the box, the submit_step class in a branch doesn't work as expected. It does work if you override the submitStepClass in the plugin definition statement to eliminate the leading period:

'submitStepClass'=>"submit_step",

#11170

WebDevPT at 2012/12/21 11:01am

RE: Spatan

Hi, any progress? Post your message and your code on the forum thread so we can try to help you out. I'm using this but took me quite some time to start using it.

#11130

spatan at 2012/12/19 06:17am

Not working

Hello, please ive been on this extension for 24 hours. Its not just working for me. i cant see the NEXT and PERVIOUS Buttons.

I followed thesame example on this page but yet, no luck.

#10305

WebDevPT at 2012/10/18 10:09am

Dynamic Steps

Hi, I'm having some trouble implementing the example 15 for this extension Anyone can share with me how I can implement this? From the example I only see the script but i would like to know how i can use this inside my widget in a similar way that we can see in the given example on the extension page.

Thank you in advance.

#9711

WebDevPT at 2012/09/05 06:49am

Validation Rules

"Hello, thanks for the plugin. I'm wondering if it is possible to merge someway, automatically, the rules explicited in the model and place them inside the validationOptions object of the plugin without explicitly rewrite everything by hand.

Any idea about it? Thanks!"

Having the same question, it would be great to use this feature. Any ideas on how to do this without typing each rule manually?

EDIT: also i'm trying to do this, and I can't view this validation message or the rule working.

'validationOptions' => '{
                                                    rules: {
                                                            field_a: "required",
                                                    },
                                                    messages: {
                                                            field_a: "required",
                                                    }
 
                                               }',

#9707

bit0123 at 2012/09/05 03:33am

Thanks

I have got it. Again thanks a lot...

#9706

bit0123 at 2012/09/05 03:21am

Back button is not shown in demo project

Thanks for the great and cool extension.

I need to shoe the back button but in the demo peoject the back button is disappear. How can i ad the back button in the form?

#9163

SomethingWicked at 2012/07/25 06:55am

Automatic merge of model rules and validationOptions

Hello, thanks for the plugin. I'm wondering if it is possible to merge someway, automatically, the rules explicited in the model and place them inside the validationOptions object of the plugin without explicitly rewrite everything by hand.

Any idea about it? Thanks!

#9074

WebDevPT at 2012/07/18 12:47am

looks great!

Good work.

Thank you

#9033

bonnie at 2012/07/14 08:37pm

nice

thanks for this feature i have been looking for it.

Please login to leave your comment.

sformwizard Follow @yiiframework

Resources ¶

Total 10 comments

Leave a comment

Yii Supporters