Sitecore Custom form element does not follow bootstrap div "form-group" structure

Question

We have created a new date picker field with dropdown options for Month, Year and Day by following the article Sitecore Guide

The field data is being saved properly, but we are facing the below issues

• When set to mandatory, the field validation does not work.
• All the out of the box elements are wrapped with "" and "required field" if marked as mandatory. But the custom element renders with out the div and we are unable to figure out where to set that up.

Attached the screenshot, where the OOTB elements are rendered within div form-group class and custom element elements are not.

Could you help in understanding how the bootstrap div structure is generated for the forms and other elements and how can the same be done for the custom fields ?

Here is the sample code for the field cshtml

 @using Sitecore.ExperienceForms.Mvc.Html

@model DatePickerViewModel


@{var htmlAttributes = new Dictionary<string, object>()
{
        { "class", "form-control" }
  };
}

<label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
<input type="date" style="display:none;" id="@Html.IdFor(m => Model.Value)" @if (Model.Min.HasValue) { <text> min="@Model.Min.Value.ToString(Model.DateFormat)" </text> } @if (Model.Max.HasValue) { <text> max="@Model.Max.Value.ToString(Model.DateFormat)" </text> } @if (Model.Value.HasValue) { <text> value="@Model.Value.Value.ToString(Model.DateFormat)" </text> } name="@Html.NameFor(m => Model.Value)" class="wfmDatebox @Model.CssClass" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" data-sc-field-key="@Model.ConditionSettings.FieldKey" @Html.GenerateUnobtrusiveValidationAttributes(m => Model.Value) />

<div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <div class="input-group" style="width:100%">
            <div class="input-group-addon">@Model.DayTitle</div>
            @Html.DropDownListFor(x => x.Day, Model.Days, htmlAttributes)
        </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <div class="input-group" style="width:100%">
            <div class="input-group-addon">@Model.MonthTitle</div>
            @Html.DropDownListFor(x => x.Month, Model.Months, htmlAttributes)
        </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <div class="input-group" style="width:100%">
            <div class="input-group-addon">@Model.YearTitle</div>
            @Html.DropDownListFor(x => x.Year, Model.Years, htmlAttributes)
        </div>
    </div>
</div>
@Html.ValidationMessageFor(m => Model.Value)

Thanks in Advance.

Answer 1

We had similar scenario and in our case the solution was to wrap the field content in

@{
    var requiredClass = "";
    if(Model.Required){
        requiredClass = "required-field";
    }
}

<div class="form-group @Model.CssClassSettings.CssClass @requiredClass">
    YOUR CSHTML HERE
</div>

so in your case it should be something like:

@{
    var requiredClass = "";
    if(Model.Required){
        requiredClass = "required-field";
    }
    
    var htmlAttributes = new Dictionary<string, object>()
    {
        { "class", "form-control" }
    };
}

<div class="form-group @Model.CssClassSettings.CssClass @requiredClass">
    <label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
    <input type="date" style="display:none;" id="@Html.IdFor(m => Model.Value)" @if (Model.Min.HasValue) { <text> min="@Model.Min.Value.ToString(Model.DateFormat)" </text> } @if (Model.Max.HasValue) { <text> max="@Model.Max.Value.ToString(Model.DateFormat)" </text> } @if (Model.Value.HasValue) { <text> value="@Model.Value.Value.ToString(Model.DateFormat)" </text> } name="@Html.NameFor(m => Model.Value)" class="wfmDatebox @Model.CssClass" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" data-sc-field-key="@Model.ConditionSettings.FieldKey" @Html.GenerateUnobtrusiveValidationAttributes(m => Model.Value) />

    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <div class="input-group" style="width:100%">
                <div class="input-group-addon">@Model.DayTitle</div>
                @Html.DropDownListFor(x => x.Day, Model.Days, htmlAttributes)
            </div>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <div class="input-group" style="width:100%">
                <div class="input-group-addon">@Model.MonthTitle</div>
                @Html.DropDownListFor(x => x.Month, Model.Months, htmlAttributes)
            </div>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <div class="input-group" style="width:100%">
                <div class="input-group-addon">@Model.YearTitle</div>
                @Html.DropDownListFor(x => x.Year, Model.Years, htmlAttributes)
            </div>
        </div>
    </div>
    @Html.ValidationMessageFor(m => Model.Value)
</div>