Implement customised Stepper

KK
KK
Vote:
 

Hi experts,

May I ask if we can implement a fancy stepper on Step Forms.

Like this:

Linear Step-by-Step Flow – Bootstrap Steps

Do we have any instructions or references? The default style was really unacceptable.

Thanks.

#283158
Jul 05, 2022 8:17
Vote:
 

You can override Optimizely Forms views as shown here https://docs.developers.optimizely.com/content-cloud/v1.2.0-forms/docs/configuring-optimizely-forms by extracting the zip from the Nuget package EPiServer.Forms in to the ~/Views/Shared/ElementBlocks location. From here there's a FormStepBlock.cshtml which you should be able to rework to your liking

#283166
Jul 05, 2022 11:52
KK
Vote:
 

Thanks so much, Scott. 

#283331
Jul 07, 2022 4:11
Abeer - Oct 03, 2022 18:09
Hi KK, 
Thank you for asking this cause that's what I was searching for, so did you implement this customized stepper? And I appreciate it if you could just tell me some details on how did you apply this, like was it enough to update only this view FormStepBlock.cshtml, or you did add more custom functionalities for it to work?

Thank you
KK
Vote:
 

Hi @Abeer,

FormStepBlock is only for rendering the title and desc of each step.

 <h3 class="FormStep__Title">@Model.Label</h3>
 <aside class="FormStep__Description">@Model.Description</aside>

But If we want to customize the whole stepper, for example like a stepbar or progressing bar, you have to change 'FormContainerBlock.cshtml' localed in ElementBlocks\Components\FormContainerBlock\FormContainerBlock.cshtml.

Checkout the code block around this part:

                if (Model.ShowNavigationBar)
                {
                    <nav role="navigation" class="Form__NavigationBar"  data-f-type="navigationbar" data-f-element-nondata>
                        <!-- btn default class Form__NavigationBar__Action FormExcludeDataRebind btnPrev -->
                        <button type="submit" name="submit" value="@SubmitButtonType.PreviousStep.ToString()" class="btn btn-warning"
                                @prevButtonDisableState data-f-navigation-previous>
                            @Html.Translate("/episerver/forms/viewmode/stepnavigation/previous")
                        </button>

                     @{
                    // calculate the progress style on-server-side
                    var currentDisplayStepIndex = currentStepIndex + 1;
                    var progressWidth = (100 * currentDisplayStepIndex / currentDisplayStepCount) + "%";
                        }
                        <div class="Form__NavigationBar__ProgressBar" style="width:800px; ">
                            <div class="Form__NavigationBar__ProgressBar--Progress" style="width:@progressWidth; background-color: #f47320; border-color: #f47320;" data-f-navigation-progress></div>
                            <div class="Form__NavigationBar__ProgressBar--Text">
                                <span class="Form__NavigationBar__ProgressBar__ProgressLabel">@Html.Translate("/episerver/forms/viewmode/stepnavigation/page")</span>
                                <span class="Form__NavigationBar__ProgressBar__CurrentStep" data-f-navigation-currentstep>@currentDisplayStepIndex</span>/
                                <span class="Form__NavigationBar__ProgressBar__StepsCount" data-f-navigation-stepcount>@currentDisplayStepCount</span>
                            </div>
                        </div>
                        <button type="submit" name="submit" value="@SubmitButtonType.NextStep.ToString()" class=" btn btn-warning"
                                @nextButtonDisableState data-f-navigation-next>
                            @Html.Translate("/episerver/forms/viewmode/stepnavigation/next")
                        </button>
                    </nav>
                }
#288607
Edited, Oct 04, 2022 2:03
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.