Created
February 8, 2017 08:31
-
-
Save JohanPetersson/ec143f4d0178253cb2bf44e40ef8478f to your computer and use it in GitHub Desktop.
Episerver Forms FormContainerBlock
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @using EPiServer.Editor | |
| @using EPiServer.Forms | |
| @using EPiServer.Forms.Configuration | |
| @using EPiServer.Forms.Core | |
| @using EPiServer.Forms.Helpers.Internal | |
| @using EPiServer.Forms.EditView.Internal | |
| @using EPiServer.Forms.Implementation.Elements | |
| @using EPiServer.ServiceLocation | |
| @using EPiServer.Web.Mvc.Html | |
| @model FormContainerBlock | |
| @{ | |
| var formConfig = ServiceLocator.Current.GetInstance<IEPiServerFormsImplementationConfig>(); | |
| } | |
| @if (PageEditing.PageIsInEditMode) | |
| { | |
| <link rel="stylesheet" type="text/css" data-epiforms-resource="EPiServerForms.css" href="@ModuleHelper.ToClientResource(typeof(FormsModule), "clientresources/viewmode/episerverforms.css")" /> | |
| if (Model.Form != null) | |
| { | |
| <div class="EPiServerForms"> | |
| @Html.PropertyFor(m => m.Title, new { CustomTag = "h2", CssClass = CssClasses.Text.Headings.H2 }) | |
| @Html.PropertyFor(m => m.Description, new { CustomTag = "p", CssClass = CssClasses.Text.Scope }) | |
| @Html.PropertyFor(m => m.ElementsArea) | |
| </div> | |
| } | |
| else | |
| { | |
| // In case FormContainerBlock is used as a property, we cannot build Form model so we show a warning message to notify user | |
| <div class="EPiServerForms"> | |
| <span class="Form__Warning">@Html.Translate("/episerver/forms/editview/cannotbuildformmodel")</span> | |
| </div> | |
| } | |
| } | |
| else if (Model.Form != null) | |
| { | |
| // Using form tag (instead of div) for the sake of html elements' built-in features e.g. reset, file upload | |
| // Using enctype="multipart/form-data" for post data and uploading files | |
| <form method="post" | |
| id="@Model.Form.FormGuid" | |
| class="EPiServerForms @(ViewBag.ValidationFail ? "ValidationFail" : "ValidationSuccess")" | |
| enctype="multipart/form-data" | |
| data-epiforms-type="form" | |
| data-epiforms-metadata="@Model.MetadataAttribute"> | |
| @* Meta data, authoring data of this form is transfer to clientside here. We need to take form with language coresponse with current page's language *@ | |
| <script src="@(formConfig.CoreController)/GetFormInitScript?formGuid=@(Model.Form.FormGuid)&formLanguage=@(FormsExtensions.GetCurrentPageLanguage())"></script> | |
| @* Meta data, send along as a SYSTEM information about this form, so this can work without JS *@ | |
| <input type="hidden" class="Form__Element Form__SystemElement FormHidden FormHideInSummarized" name="__FormGuid" value="@Model.Form.FormGuid" /> | |
| <input type="hidden" class="Form__Element Form__SystemElement FormHidden FormHideInSummarized" name="__FormHostedPage" value="@FormsExtensions.GetCurrentPageLink().ToString()" /> | |
| <input type="hidden" class="Form__Element Form__SystemElement FormHidden FormHideInSummarized" name="__FormLanguage" value="@FormsExtensions.GetCurrentPageLanguage()" /> | |
| <input type="hidden" class="Form__Element Form__SystemElement FormHidden FormHideInSummarized" name="__FormCurrentStepIndex" value="@(ViewBag.CurrentStepIndex ?? string.Empty)" /> | |
| <input type="hidden" class="Form__Element Form__SystemElement FormHidden FormHideInSummarized" name="__FormSubmissionId" value="@(ViewBag.FormSubmissionId)" /> | |
| @Html.PropertyFor(m => m.Title, new { CustomTag = "h2", CssClass = CssClasses.Text.Headings.H2 }) | |
| @Html.PropertyFor(m => m.Description, new { CustomTag = "p", CssClass = CssClasses.Text.Scope }) | |
| @{ | |
| var statusDisplay = "hide"; | |
| var message = ViewBag.Message; | |
| if (ViewBag.FormFinalized || ViewBag.IsProgressiveSubmit) | |
| { | |
| statusDisplay = "Form__Success__Message"; | |
| } | |
| else if (ViewBag.Submittable == false && string.IsNullOrEmpty(message) == false) | |
| { | |
| statusDisplay = "Form__Warning__Message"; | |
| } | |
| } | |
| @if (ViewBag.IsReadOnlyMode) | |
| { | |
| <div class="Form__Status Form__Readonly__Message"> | |
| @Html.Translate("/episerver/forms/viewmode/readonlymode") | |
| </div> | |
| } | |
| <div class="Form__Status Form__Status__Message @statusDisplay"> | |
| @if (ViewBag.FormFinalized) | |
| { | |
| @Html.Raw(message) | |
| } | |
| else | |
| { | |
| @message | |
| } | |
| </div> | |
| <div class="Form__MainBody"> | |
| @{ | |
| var stepIndex = 0; | |
| var numberOfSteps = Model.Form.Steps.Count(); | |
| var currentStepIndex = ViewBag.CurrentStepIndex == null ? -1 : (int)ViewBag.CurrentStepIndex; | |
| var displayStepNavigation = numberOfSteps > 1 && currentStepIndex > -1 && currentStepIndex < numberOfSteps && !ViewBag.FormFinalized; | |
| var stepDisplaying = string.Empty; | |
| } | |
| @foreach (var step in Model.Form.Steps) | |
| { | |
| stepDisplaying = (currentStepIndex == stepIndex && !ViewBag.FormFinalized && (bool)ViewBag.IsStepValidToDisplay) ? null : "hide"; | |
| <div class="FormStep @stepDisplaying" id="@step.ElementName" data-epiforms-element-name="@step.ElementName" data-epiforms-stepindex="@stepIndex"> | |
| @{ | |
| var stepBlock = (step.SourceContent as ElementBlockBase); | |
| if (stepBlock != null) | |
| { | |
| Html.RenderContentData(step.SourceContent, false); | |
| } | |
| // Each FormStep groups the elements below it til the next FormStep | |
| Html.RenderFormElements(stepIndex, step.Elements); | |
| stepIndex++; | |
| } | |
| </div> | |
| } | |
| @if (displayStepNavigation) | |
| { | |
| // show Next/Previous buttons when having Steps > 1 and navigationBar when currentStepIndex is valid | |
| var prevButtonDisableState = (currentStepIndex == 0) || !ViewBag.Submittable ? "disabled" : null; | |
| var nextButtonDisableState = (currentStepIndex == numberOfSteps - 1) || !ViewBag.Submittable ? "disabled" : null; | |
| if (Model.ShowNavigationBar) | |
| { | |
| <div class="Form__NavigationBar"> | |
| <button @prevButtonDisableState type="submit" name="submit" value="@SubmitButtonType.PreviousStep.ToString()" class="Form__NavigationBar__Action FormExcludeDataRebind btnPrev"> | |
| @Html.Translate("/episerver/forms/viewmode/stepnavigation/previous") | |
| </button> | |
| @{ | |
| // calculate the progress style on-server-side | |
| var currentDisplayStepIndex = currentStepIndex + 1; | |
| var progressWidth = (100 * currentDisplayStepIndex / numberOfSteps) + "%"; | |
| } | |
| <div class="Form__NavigationBar__ProgressBar"> | |
| <div class="Form__NavigationBar__ProgressBar--Progress" style="width: @progressWidth"></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">@currentDisplayStepIndex</span>/<span class="Form__NavigationBar__ProgressBar__StepsCount">@numberOfSteps</span> | |
| </div> | |
| </div> | |
| <button @nextButtonDisableState type="submit" name="submit" value="@SubmitButtonType.NextStep.ToString()" class="Form__NavigationBar__Action FormExcludeDataRebind btnNext"> | |
| @Html.Translate("/episerver/forms/viewmode/stepnavigation/next") | |
| </button> | |
| </div> | |
| } | |
| } | |
| </div> | |
| </form> | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment