Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Episerver Forms FormContainerBlock
@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